#6567 Code errors disappear when closing and reopening the editor (#7166)

* Fix error of not showing errors when reopening KCL code pane

* add test for errors not shown after reopening code pane

* rename test

* typo in e2e/playwright/editor-tests.spec.ts

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* lint

* fmt

* fix test: Opening and closing the code pane will consistently show error diagnostics

* PR feedback: use catch(reportRejection) for safeParse

* no need for lint rule

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

e2e/playwright/code-pane-and-errors.spec.ts

@@ -78,11 +78,10 @@ extrude001 = extrude(sketch001, length = 5)`
 
     // Delete a character to break the KCL
     await editor.openPane()
-    await editor.scrollToText('bracketLeg1Sketch, length = thickness)')
-    await page
-      .getByText('extrude(bracketLeg1Sketch, length = thickness)')
-      .click()
-    await page.keyboard.press('Backspace')
+    await editor.scrollToText('extrude(%, length = width)')
+    await page.getByText('extrude(%, length = width)').click()
+
+    await page.keyboard.press(')')
 
     // Ensure that a badge appears on the button
     await expect(codePaneButtonHolder).toContainText('notification')
@@ -99,16 +98,11 @@ extrude001 = extrude(sketch001, length = 5)`
 
     await page.waitForTimeout(500)
 
-    // Ensure that a badge appears on the button
-    await expect(codePaneButtonHolder).toContainText('notification')
-    // Ensure we have no errors in the gutter.
-    await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
-
     // Open the code pane
     await editor.openPane()
 
-    // Go to our problematic code again (missing closing paren!)
-    await editor.scrollToText('extrude(bracketLeg1Sketch, length = thickness')
+    // Go to our problematic code again
+    await editor.scrollToText('extrude(%, length = w')
 
     // Ensure that a badge appears on the button
     await expect(codePaneButtonHolder).toContainText('notification')

e2e/playwright/editor-tests.spec.ts

@@ -1590,4 +1590,38 @@ sketch001 = startSketchOn(XZ)
       await expect(page.getByTestId('center-rectangle')).toBeVisible()
     })
   })
+
+  test('syntax errors still show when reopening KCL pane', async ({
+    page,
+    homePage,
+    scene,
+    cmdBar,
+  }) => {
+    const u = await getUtils(page)
+    await page.setBodyDimensions({ width: 1200, height: 500 })
+
+    await homePage.goToModelingScene()
+
+    // Wait for connection, this is especially important for this test, because safeParse is invoked when
+    // connection is established which would interfere with the test if it happened during later steps.
+    await scene.connectionEstablished()
+    await scene.settled(cmdBar)
+
+    // Code with no error
+    await u.codeLocator.fill(`x = 7`)
+    await page.waitForTimeout(200) // allow some time for the error to show potentially
+    await expect(page.locator('.cm-lint-marker-error')).toHaveCount(0)
+
+    // Code with error
+    await u.codeLocator.fill(`x 7`)
+    await expect(page.locator('.cm-lint-marker-error')).toHaveCount(1)
+
+    // Close and reopen KCL code panel
+    await u.closeKclCodePanel()
+    await expect(page.locator('.cm-lint-marker-error')).toHaveCount(0) // error disappears on close
+    await u.openKclCodePanel()
+
+    // Verify error is still visible
+    await expect(page.locator('.cm-lint-marker-error')).toHaveCount(1)
+  })
 })

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -53,6 +53,7 @@ import {
   kclEditorActor,
   selectionEventSelector,
 } from '@src/machines/kclEditorMachine'
+import { reportRejection } from '@src/lib/trap'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -210,12 +211,19 @@ export const KclEditorPane = () => {
             editorManager.setEditorView(_editorView)
             kclEditorActor.send({ type: 'setKclEditorMounted', data: true })
 
-            // On first load of this component, ensure we show the current errors
-            // in the editor.
-            // Make sure we don't add them twice.
-            if (diagnosticCount(_editorView.state) === 0) {
-              kclManager.setDiagnosticsForCurrentErrors()
-            }
+            // Update diagnostics as they are cleared when the editor is unmounted.
+            // Without this, errors would not be shown when closing and reopening the editor.
+            kclManager
+              .safeParse(codeManager.code)
+              .then(() => {
+                // On first load of this component, ensure we show the current errors
+                // in the editor.
+                // Make sure we don't add them twice.
+                if (diagnosticCount(_editorView.state) === 0) {
+                  kclManager.setDiagnosticsForCurrentErrors()
+                }
+              })
+              .catch(reportRejection)
           }}
         />
       </div>