Add SyntaxErrorView (#7320)

* Add SyntaxErrorView

* Tweak copy

---------

Co-authored-by: Jeremy Walker <[email protected]>

app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/useEditorHandler.tsx

@@ -60,7 +60,6 @@ export function useEditorHandler({
   const onRunCode = useOnRunCode({
     links,
     config,
-    editorView: editorViewRef.current,
   })
 
   const resetEditorToStub = () => {

app/javascript/components/bootcamp/SolveExercisePage/ResultsPanel.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { TaskPreview } from './TaskPreview/TaskPreview'
+import { InspectedTestResultView } from './TestResultsView/InspectedTestResultView'
+import useTestStore from './store/testStore'
+import { SyntaxErrorView } from './TestResultsView/SyntaxErrorView'
+export function ResultsPanel() {
+  const { hasSyntaxError } = useTestStore()
+
+  if (hasSyntaxError) {
+    return <SyntaxErrorView />
+  }
+
+  return (
+    <>
+      <InspectedTestResultView />
+      <TaskPreview />
+    </>
+  )
+}

app/javascript/components/bootcamp/SolveExercisePage/SolveExercisePage.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
 
 import { useEditorHandler } from './CodeMirror/useEditorHandler'
-import { InspectedTestResultView } from './TestResultsView/InspectedTestResultView'
 import { Instructions } from './Instructions/Instructions'
 import { useSetupStores } from './hooks/useSetupStores'
 import { ControlButtons } from './ControlButtons/ControlButtons'
 import { CodeMirror } from './CodeMirror/CodeMirror'
 import ErrorBoundary from '../common/ErrorBoundary/ErrorBoundary'
 import { Resizer, useResizablePanels } from './hooks/useResize'
-import { TaskPreview } from './TaskPreview/TaskPreview'
 import SolveExercisePageContextWrapper from './SolveExercisePageContextWrapper'
 import { Header } from './Header/Header'
 import { useLocalStorage } from '@uidotdev/usehooks'
+import { ResultsPanel } from './ResultsPanel'
 
 export default function SolveExercisePage({
   exercise,
@@ -91,8 +90,7 @@ export default function SolveExercisePage({
               style={{ height: BottomHeight }}
             >
               <ControlButtons handleRunCode={handleRunCode} />
-              <InspectedTestResultView />
-              <TaskPreview />
+              <ResultsPanel />
             </div>
           </div>
           <Resizer direction="vertical" handleMouseDown={handleMouseDown} />

app/javascript/components/bootcamp/SolveExercisePage/TestResultsView/InspectedTestResultView.tsx

@@ -11,7 +11,7 @@ import { PassMessage } from './PassMessage'
 import useTestStore from '../store/testStore'
 
 function _InspectedTestResultView() {
-  const { result, viewContainerRef, firstFailingExpect, processedExpects } =
+  const { result, viewContainerRef, firstFailingExpect } =
     useInspectedTestResultView()
 
   if (!result) return null

app/javascript/components/bootcamp/SolveExercisePage/TestResultsView/SyntaxErrorView.tsx

@@ -0,0 +1,22 @@
+import { GraphicalIcon } from '@/components/common/GraphicalIcon'
+import React from 'react'
+
+export function SyntaxErrorView() {
+  return (
+    <div className="border-t-1 border-borderColor6">
+      <div className="text-center py-40 px-40 max-w-[600px] mx-auto">
+        <GraphicalIcon
+          className={`w-[48px] h-[48px] m-auto mb-20 filter-textColor6`}
+          icon="bug"
+        />
+        <div className="text-h5 mb-6 text-textColor6">
+          Oops! Jiki couldn't understand your code.
+        </div>
+        <div className="mb-20 text-textColor6 leading-160 text-16 text-balance">
+          No need to panic. Read and fix the error in the message above, then
+          press "Check Scenarios" to try again.
+        </div>
+      </div>
+    </div>
+  )
+}

app/javascript/components/bootcamp/SolveExercisePage/hooks/useOnRunCode/useOnRunCode.ts

@@ -17,16 +17,14 @@ import { scrollToLine } from '../../CodeMirror/scrollToLine'
 export function useOnRunCode({
   links,
   config,
-  editorView,
 }: Pick<SolveExercisePageProps, 'links'> & {
   config: Config
-  editorView: EditorView | null
 }) {
   const {
     setTestSuiteResult,
     setInspectedTestResult,
     inspectedTestResult,
-    testSuiteResult,
+    setHasSyntaxError,
   } = useTestStore()
 
   const {
@@ -51,6 +49,9 @@ export function useOnRunCode({
         .querySelectorAll('.exercise-container')
         .forEach((e) => e.remove())
 
+      // reset on each run
+      setHasSyntaxError(false)
+
       const exercise = getAndInitializeExerciseClass(config)
 
       const context = {
@@ -64,6 +65,7 @@ export function useOnRunCode({
       const error = compiled.error
 
       if (error) {
+        setHasSyntaxError(true)
         if (!error.location) {
           return
         }

app/javascript/components/bootcamp/SolveExercisePage/store/testStore.ts

@@ -19,6 +19,8 @@ type TestStore = {
   setFlatPreviewTaskTests: (flatPreviewTaskTests: TaskTest[]) => void
   setInspectedPreviewTaskTest: (inspectedPreviewTaskTest: TaskTest) => void
   inspectedPreviewTaskTest: TaskTest
+  hasSyntaxError: boolean
+  setHasSyntaxError: (hasSyntaxError: boolean) => void
 }
 
 const useTestStore = createStoreWithMiddlewares<TestStore>(
@@ -66,6 +68,10 @@ const useTestStore = createStoreWithMiddlewares<TestStore>(
         'exercise/setTestSuiteResult'
       )
     },
+    hasSyntaxError: false,
+    setHasSyntaxError: (hasSyntaxError) => {
+      set({ hasSyntaxError }, false, 'exercise/setHasSyntaxError')
+    },
   }),
   'TestStore'
 )