Fix engine connection break when starting onboarding from a fresh install (#4263)

* Make electron test setting overrides not entirely replace default settings

* Add failing test

* Fix test by checking for healthy engine connection before executing demo code

* Fix one electron test that assumed all settings got wiped if you override any.

* 🤷🏻‍♂️ an engine-side camera position in one of the E2E tests changed by 0.01 randomly

e2e/playwright/onboarding-tests.spec.ts

@@ -55,6 +55,53 @@ test.describe('Onboarding tests', () => {
     await expect(page.locator('.cm-content')).toContainText('// Shelf Bracket')
   })
 
+  test(
+    'Desktop: fresh onboarding executes and loads',
+    { tag: '@electron' },
+    async ({ browserName: _ }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        appSettings: {
+          app: {
+            onboardingStatus: 'incomplete',
+          },
+        },
+        cleanProjectDir: true,
+      })
+
+      const u = await getUtils(page)
+
+      const viewportSize = { width: 1200, height: 500 }
+      await page.setViewportSize(viewportSize)
+
+      // Locators and constants
+      const newProjectButton = page.getByRole('button', { name: 'New project' })
+      const projectLink = page.getByTestId('project-link')
+
+      await test.step(`Create a project and open to the onboarding`, async () => {
+        await newProjectButton.click()
+        await projectLink.click()
+        await test.step(`Ensure the engine connection works by testing the sketch button`, async () => {
+          await u.waitForPageLoad()
+        })
+      })
+
+      await test.step(`Ensure we see the onboarding stuff`, async () => {
+        // Test that the onboarding pane loaded
+        await expect(
+          page.getByText('Welcome to Modeling App! This')
+        ).toBeVisible()
+
+        // *and* that the code is shown in the editor
+        await expect(page.locator('.cm-content')).toContainText(
+          '// Shelf Bracket'
+        )
+      })
+
+      await electronApp.close()
+    }
+  )
+
   test('Code resets after confirmation', async ({ page }) => {
     const initialCode = `sketch001 = startSketchOn('XZ')`
 

e2e/playwright/test-utils.ts

@@ -888,7 +888,17 @@ export async function setupElectron({
     const tempSettingsFilePath = join(projectDirName, SETTINGS_FILE_NAME)
     const settingsOverrides = TOML.stringify(
       appSettings
-        ? { settings: appSettings }
+        ? {
+            settings: {
+              ...TEST_SETTINGS,
+              ...appSettings,
+              app: {
+                ...TEST_SETTINGS.app,
+                projectDirectory: projectDirName,
+                ...appSettings.app,
+              },
+            },
+          }
         : {
             settings: {
               ...TEST_SETTINGS,

e2e/playwright/testing-gizmo.spec.ts

@@ -292,7 +292,7 @@ test.describe(`Testing gizmo, fixture-based`, () => {
     await test.step(`Verify the camera moved`, async () => {
       await scene.expectState({
         camera: {
-          position: [0, -23865.37, 11073.54],
+          position: [0, -23865.37, 11073.53],
           target: [0, 0, 0],
         },
       })

e2e/playwright/testing-settings.spec.ts

@@ -430,7 +430,6 @@ test.describe('Testing settings', () => {
       await test.step('Check color of logo changed when in modeling view', async () => {
         await page.getByRole('button', { name: 'New project' }).click()
         await page.getByTestId('project-link').first().click()
-        await page.getByRole('button', { name: 'Dismiss' }).click()
         await changeColor('58')
         await expect(logoLink).toHaveCSS('--primary-hue', '58')
       })

src/routes/Onboarding/index.tsx

@@ -23,6 +23,9 @@ import { codeManager, editorManager, kclManager } from 'lib/singletons'
 import { bracket } from 'lib/exampleKcl'
 import { toSync } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
+import { EngineConnectionStateType } from 'lang/std/engineConnection'
 
 export const kbdClasses =
   'py-0.5 px-1 text-sm rounded bg-chalkboard-10 dark:bg-chalkboard-100 border border-chalkboard-50 border-b-2'
@@ -80,8 +83,20 @@ export const onboardingRoutes = [
 ]
 
 export function useDemoCode() {
+  const { overallState, immediateState } = useNetworkContext()
+
   useEffect(() => {
-    if (!editorManager.editorView || codeManager.code === bracket) return
+    // Don't run if the editor isn't loaded or the code is already the bracket
+    if (!editorManager.editorView || codeManager.code === bracket) {
+      return
+    }
+    // Don't run if the network isn't healthy or the connection isn't established
+    if (
+      overallState !== NetworkHealthState.Ok ||
+      immediateState.type !== EngineConnectionStateType.ConnectionEstablished
+    ) {
+      return
+    }
     setTimeout(
       toSync(async () => {
         codeManager.updateCodeStateEditor(bracket)
@@ -89,7 +104,7 @@ export function useDemoCode() {
         await codeManager.writeToFile()
       }, reportRejection)
     )
-  }, [editorManager.editorView])
+  }, [editorManager.editorView, immediateState, overallState])
 }
 
 export function useNextClick(newStatus: string) {