Restore launch UI state loading

app/launch/eslint.config.js

@@ -1,15 +1,17 @@
 import js from '@eslint/js'
 import globals from 'globals'
-import reactPlugin from 'eslint-plugin-react'
 import importPlugin from 'eslint-plugin-import'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import reactPlugin from 'eslint-plugin-react'
 
 export default [
   js.configs.recommended,
   {
     files: ['**/*.{js,jsx}'],
     plugins: {
-      react: reactPlugin,
       import: importPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
     },
     languageOptions: {
       ecmaVersion: 'latest',
@@ -30,9 +32,11 @@ export default [
       ...reactPlugin.configs.recommended.rules,
       // React 17+ automatic JSX transform does not require React in scope
       'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
       // Project does not use PropTypes
       'react/prop-types': 'off',
-      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_', caughtErrors: 'none' }],
       'no-case-declarations': 'warn',
       'import/order': [
         'error',

app/launch/package.json

@@ -2,6 +2,7 @@
     "name": "app",
     "version": "0.1.1",
     "private": true,
+    "type": "module",
     "homepage": ".",
     "dependencies": {
         "@emotion/react": "^11.14.0",
@@ -22,8 +23,10 @@
         "@testing-library/react": "^16.3.2",
         "@vitejs/plugin-react": "^6.0.1",
         "baseline-browser-mapping": "^2.10.0",
+        "cross-env": "^10.1.0",
         "eslint": "^9.39.4",
         "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react": "^7.37.5",
         "globals": "^17.6.0",
         "jsdom": "^29.1.1",
@@ -34,12 +37,12 @@
     },
     "scripts": {
         "start": "vite",
-        "start:local": "VITE_VERSION_FEED='http://localhost:8088' vite",
+        "start:local": "cross-env VITE_VERSION_FEED=http://localhost:8088/grails-version-feed.json vite",
         "build": "vite build",
         "preview": "vite preview",
         "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-        "lint": "eslint './src/**/*.{js,jsx}'",
-        "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
+        "lint": "eslint \"./src/**/*.{js,jsx}\"",
+        "lint:fix": "eslint \"./src/**/*.{js,jsx}\" --fix",
         "test": "vitest run"
     },
     "browserslist": {

app/launch/src/components/Application/__tests__/Application.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { useAppStore } from '../../../state/store'
 import ApplicationState from '../../../state/ApplicationState'
+import { useAppStore } from '../../../state/store'
 
 import { App } from '../App'
 
@@ -15,5 +15,7 @@ it(`Application Launches`, () => {
       <App />
     </ApplicationState>
   )
-  expect(container).toBeDefined()
+
+  expect(container.querySelector('.mn-starter-form-main')).not.toBeNull()
+  expect(container.querySelector('.button-row')).not.toBeNull()
 })

app/launch/src/components/Application/__tests__/useAvailableFeatures.test.jsx

@@ -19,6 +19,13 @@ const MockSdk = {
     }
     return types
   },
+  defaultIncludedFeatures: async ({ type }) => {
+    const types = MockTypes[type]
+    if (!types) {
+      throw new Error('Invalid Type')
+    }
+    return { features: [] }
+  },
 }
 
 beforeEach(() => {
@@ -80,11 +87,16 @@ TEST_DATA.forEach(({ initialData, hasError }) => {
       await new Promise((r) => setTimeout(r, 50))
     })
 
-    expect(container).toBeDefined()
     if (hasError) {
       expect(error).not.toBeNull()
+      expect(container.querySelector('.reloading').textContent).toEqual('[]')
     } else {
       expect(error).toBeNull()
+      expect(JSON.parse(container.querySelector('.reloading').textContent)).toEqual([
+        'a',
+        'b',
+        'c',
+      ])
     }
   })
 })

app/launch/src/components/ErrorView/ErrorView.jsx

@@ -1,9 +1,8 @@
 // ErrorView.js
 import React, { useState } from 'react'
-import { Avatar, Snackbar, Alert } from '@mui/material'
-
 import AssignmentIcon from '@mui/icons-material/Assignment'
 import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn'
+import { Alert, Avatar, Snackbar } from '@mui/material'
 
 import logo from '../../images/grails-white-icon.png'
 import { copyToClipboard } from '../../utility'

app/launch/src/components/FeatureSelector/FeatureSelector.jsx

@@ -1,5 +1,5 @@
 // FeatureSelector.js
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 
 import {
   Button,
@@ -118,8 +118,8 @@ export const FeatureSelectorModal = ({ theme = 'light' }) => {
     }, 300)
   }
 
-  const handleKeyDown = useCallback(
-    keyboardHandler.createKeyDownHandler(() => contentRef.current),
+  const handleKeyDown = useMemo(
+    () => keyboardHandler.createKeyDownHandler(() => contentRef.current),
     []
   )
 

app/launch/src/components/Select/Select.jsx

@@ -14,17 +14,20 @@ const Select = ({
   onChange,
   tabIndex = '0',
 }) => {
+  const controlId = id ?? name
+
   return (
     <div className="MuiFormControlOverrides select-wrapper input-field col">
-      <FormControl>
-        <InputLabel id={id}>{label}</InputLabel>
+      <FormControl variant="standard">
+        <InputLabel id={`${controlId}-select-label`}>{label}</InputLabel>
         <SelectProxy
           name={name}
-          labelId={`${id}-select-label`}
-          id={`${id}-select`}
-          value={value}
+          labelId={`${controlId}-select-label`}
+          id={`${controlId}-select`}
+          value={value ?? ''}
           onChange={onChange}
           tabIndex={tabIndex}
+          variant="standard"
         >
           {options.map((opt, idx) => (
             <MenuItem key={`select-${opt.value}-${idx}`} value={opt.value}>

app/launch/src/components/StarterForm/starter-form.css

@@ -29,6 +29,8 @@
 
 .mn-starter-form-main .mn-radio-row {
   margin-top: 20px;
+  padding-bottom: 4px;
+  padding-top: 4px;
 }
 
 .mn-starter-form-main .mn-radio .radio-row {

app/launch/src/state/ApplicationState.jsx

@@ -1,22 +1,29 @@
-import { useEffect } from 'react'
-import { useAppStore } from './store'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { initializeStateFactory } from './factories/initializeState'
+import { useAppStore } from './store'
 
 export default function ApplicationState({
-  initialData,
+  initialData = {},
   stateInitializer,
   children,
 }) {
-  useEffect(() => {
+  const initialized = useRef(false)
+  const [ready, setReady] = useState(false)
+
+  useLayoutEffect(() => {
+    if (initialized.current) return
+
+    initialized.current = true
     const initializer = typeof stateInitializer === 'function'
       ? stateInitializer
       : initializeStateFactory(initialData)
 
-    // Apply initial state to the store
     if (typeof initializer === 'function') {
       initializer(useAppStore)
     }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  return <>{children}</>
+    setReady(true)
+  }, [initialData, stateInitializer])
+
+  return ready ? <>{children}</> : null
 }