feat: various features for VS Code (#3146)

heyzec · renovate[bot] · shirsho-12 · web-flow · commit 16386dff7e00 · 2025-06-28T15:20:18.000+08:00
* fix(deps): update dependency react-ace to v14 (#3136) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency npm-run-all2 to v8 (#3137) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency i18next to v25 (#3138) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: update yarn.lock * feat: make editor work with playground again * fix: don't trigger mobile breakpoints when in VSC * fix: hide unnecessary buttons when in VSC * refactor: make api abstraction clearer * fix: don't hardcode constants and join paths properly * fix: make editor less buggy in VS Code by not sending Text messages from frontend to VSC * temp * feat: Send MCQ questions to VSC extension - New MCQQuestion message type * Revert "temp" This reverts commit 18c4597. * fix: server changes never get sent to extension * Added message passing to vscode on chapter select * added more info in the message for chapterSelect * Update mcq handling functionality * Fix: Merge issues * Feat: basic voting question type support * Feat: basic voting question type support * Simplify vscode mcq message Remove the question description from the McqQuestion payload as it is not used. * Contest code view functionality * feat: update VSC message to support sidepanel * Fix: run button vanishes on zoom * Fix: MCQ id * Feat: reset functionality for vsc * re-add changes removed during merge; lint * fix: try using window.location.pathname * Added message to trigger save assessment * fix oopsie with isVscode * Revert "fix oopsie with isVscode" This reverts commit 230e689. * update yarn.lock * Reapply "fix oopsie with isVscode" This reverts commit f204b4a. * fix: add isVscode to useEffect deps (eslint) * fix: squelch warning (eslint) --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Shirshajit Sen Gupta <shirshajit@gmail.com> Co-authored-by: mug1wara26 <aloysiusgsq@gmail.com>
diff --git a/src/commons/application/Application.tsx b/src/commons/application/Application.tsx
@@ -88,7 +88,7 @@ const Application: React.FC = () => {
       };
     }
 
-    const message = Messages.ExtensionPing();
+    const message = Messages.ExtensionPing(window.origin);
     sendToWebview(message);
 
     window.addEventListener('message', event => {
@@ -116,17 +116,27 @@ const Application: React.FC = () => {
           }
           break;
         case MessageTypeNames.Text:
-          const code = message.code;
+          const { workspaceLocation, code } = message;
           console.log(`FRONTEND: TextMessage: ${code}`);
-          // TODO: Don't change ace editor directly
-          // const elements = document.getElementsByClassName('react-ace');
-          // if (elements.length === 0) {
-          //   return;
-          // }
-          // // @ts-expect-error: ace is not available at compile time
-          // const editor = ace.edit(elements[0]);
-          // editor.setValue(code);
-          dispatch(WorkspaceActions.updateEditorValue('assessment', 0, code));
+          dispatch(WorkspaceActions.updateEditorValue(workspaceLocation, 0, code));
+          break;
+        case MessageTypeNames.EvalEditor:
+          dispatch(WorkspaceActions.evalEditor(message.workspaceLocation));
+          break;
+        case MessageTypeNames.Navigate:
+          window.location.pathname = message.route;
+          // TODO: Figure out why this doesn't work, this is faster in theory
+          // navigate(message.route);
+          break;
+        case MessageTypeNames.McqQuestion:
+          dispatch(WorkspaceActions.showMcqPane(message.workspaceLocation, message.options));
+          break;
+        case MessageTypeNames.McqAnswer:
+          console.log(`FRONTEND: MCQAnswerMessage: ${message}`);
+          dispatch(SessionActions.submitAnswer(message.questionId, message.choice));
+          break;
+        case MessageTypeNames.AssessmentAnswer:
+          dispatch(SessionActions.submitAnswer(message.questionId, message.answer));
           break;
       }
     });
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
@@ -20,10 +20,11 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import classes from 'src/styles/Academy.module.scss';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';
@@ -60,6 +61,23 @@ const Assessment: React.FC = () => {
   const { courseId, role, assessmentOverviews: assessmentOverviewsUnfiltered } = useSession();
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    if (assessmentOverviewsUnfiltered && courseId) {
+      sendToWebview(
+        Messages.NotifyAssessmentsOverview(
+          assessmentOverviewsUnfiltered.map(oa => ({
+            type: oa.type,
+            closeAt: oa.closeAt,
+            id: oa.id,
+            isPublished: oa.isPublished,
+            title: oa.title
+          })),
+          courseId
+        )
+      );
+    }
+  }, [assessmentOverviewsUnfiltered, courseId]);
+
   const toggleClosedAssessments = () => setShowClosedAssessments(!showClosedAssessments);
   const toggleOpenAssessments = () => setShowOpenedAssessments(!showOpenedAssessments);
   const toggleUpcomingAssessments = () => setShowUpcomingAssessments(!showUpcomingAssessments);
diff --git a/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx b/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx
@@ -96,6 +96,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
   const [sessionId, setSessionId] = useState('');
   const [isSubmitted, setIsSubmitted] = useState(false);
   const { isMobileBreakpoint } = useResponsive();
+  const isVscode = useTypedSelector(state => state.vscode.isVscode);
 
   const assessment = useTypedSelector(state => state.session.assessments[props.assessmentId]);
   const assessmentOverviews = useTypedSelector(state => state.session.assessmentOverviews);
@@ -244,10 +245,10 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
   useEffect(() => {
     if (!selectedTab) return;
 
-    if (!isMobileBreakpoint && mobileOnlyTabIds.includes(selectedTab)) {
+    if ((!isMobileBreakpoint || isVscode) && mobileOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.questionOverview);
     }
-  }, [isMobileBreakpoint, props, selectedTab, setSelectedTab]);
+  }, [isMobileBreakpoint, isVscode, props, selectedTab, setSelectedTab]);
 
   /* ==================
      onChange handlers
@@ -391,7 +392,38 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     );
     handleClearContext(question.library, true);
     handleUpdateHasUnsavedChanges(false);
-    sendToWebview(Messages.NewEditor(`assessment${assessment.id}`, props.questionId, ''));
+
+    const chapter = question.library.chapter;
+    const questionType = question.type;
+
+    switch (questionType) {
+      case QuestionTypes.mcq:
+        const mcqQuestionData = question;
+        sendToWebview(
+          Messages.McqQuestion(
+            workspaceLocation,
+            `assessment${assessment.id}`,
+            mcqQuestionData.id,
+            chapter,
+            mcqQuestionData.choices.map(choice => choice.content)
+          )
+        );
+        break;
+      case QuestionTypes.programming || QuestionTypes.voting:
+        const prepend = question.prepend;
+        const code = question.answer ?? question.solutionTemplate;
+        sendToWebview(
+          Messages.NewEditor(
+            workspaceLocation,
+            `assessment${assessment.id}`,
+            props.questionId,
+            chapter,
+            prepend,
+            code
+          )
+        );
+        break;
+    }
     if (options.editorValue) {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
       handleEditorValueChange(0, options.editorValue);
@@ -416,6 +448,18 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     const handleContestEntryClick = (_submissionId: number, answer: string) => {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
       handleEditorValueChange(0, answer);
+      // Hacky way to view the editor, might cause issues
+      sendToWebview(
+        Messages.NewEditor(
+          workspaceLocation,
+          `submission${_submissionId}`,
+          questionId,
+          question.library.chapter,
+          '',
+          answer
+        )
+      );
+      //
     };
 
     const tabs: SideContentTab[] = [
@@ -736,9 +780,10 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     );
 
     return {
-      editorButtons: !isMobileBreakpoint
-        ? [runButton, saveButton, resetButton, chapterSelect]
-        : [saveButton, resetButton],
+      editorButtons:
+        !isMobileBreakpoint || isVscode
+          ? [runButton, saveButton, resetButton, chapterSelect]
+          : [saveButton, resetButton],
       flowButtons: [previousButton, questionView, nextButton]
     };
   };
@@ -885,6 +930,14 @@ It is safe to close this window.`}
                   (assessment!.questions[questionId] as IProgrammingQuestion).solutionTemplate
                 );
                 handleUpdateHasUnsavedChanges(true);
+                if (isVscode) {
+                  sendToWebview(
+                    Messages.ResetEditor(
+                      workspaceLocation,
+                      (assessment!.questions[questionId] as IProgrammingQuestion).solutionTemplate
+                    )
+                  );
+                }
               }}
               options={{ minimal: false, intent: Intent.DANGER }}
             />
@@ -968,7 +1021,7 @@ It is safe to close this window.`}
       {submissionOverlay}
       {overlay}
       {resetTemplateOverlay}
-      {!isMobileBreakpoint ? (
+      {isVscode || !isMobileBreakpoint ? (
         <Workspace {...workspaceProps} />
       ) : (
         <MobileWorkspace {...mobileWorkspaceProps} />
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
@@ -227,17 +227,19 @@ const Workspace: React.FC<WorkspaceProps> = props => {
             <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
           )}
           <div className="right-parent" ref={setFullscreenRefs}>
-            <Tooltip
-              className="fullscreen-button"
-              content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-              portalContainer={fullscreenContainerRef.current || undefined}
-            >
-              <Button
-                minimal
-                icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
-                onClick={toggleFullscreen}
-              />
-            </Tooltip>
+            {!isVscode && (
+              <Tooltip
+                className="fullscreen-button"
+                content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+                portalContainer={fullscreenContainerRef.current || undefined}
+              >
+                <Button
+                  minimal
+                  icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+                  onClick={toggleFullscreen}
+                />
+              </Tooltip>
+            )}
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}
diff --git a/src/commons/workspace/WorkspaceActions.ts b/src/commons/workspace/WorkspaceActions.ts
@@ -111,9 +111,8 @@ const newActions = createActions('workspace', {
   updateEditorValue: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,
-    newEditorValue: string,
-    isFromVscode: boolean = false
-  ) => ({ workspaceLocation, editorTabIndex, newEditorValue, isFromVscode }),
+    newEditorValue: string
+  ) => ({ workspaceLocation, editorTabIndex, newEditorValue }),
   setEditorBreakpoint: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,
@@ -241,6 +240,10 @@ const newActions = createActions('workspace', {
     workspaceLocation: WorkspaceLocation,
     storyEnv?: string
   ) => ({ errorMsg, workspaceLocation, storyEnv }),
+  showMcqPane: (workspaceLocation: WorkspaceLocation, options: string[]) => ({
+    workspaceLocation,
+    options
+  }),
   toggleUsingCse: (usingCse: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
     usingCse,
     workspaceLocation
diff --git a/src/commons/workspace/__tests__/WorkspaceActions.ts b/src/commons/workspace/__tests__/WorkspaceActions.ts
@@ -258,8 +258,7 @@ test('updateEditorValue generates correct action object', () => {
     payload: {
       workspaceLocation: assessmentWorkspace,
       editorTabIndex,
-      newEditorValue,
-      isFromVscode: false
+      newEditorValue
     }
   });
 });
diff --git a/src/commons/workspace/reducers/editorReducer.ts b/src/commons/workspace/reducers/editorReducer.ts
@@ -1,5 +1,4 @@
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
-import Messages, { sendToWebview } from 'src/features/vscode/messages';
 
 import WorkspaceActions from '../WorkspaceActions';
 import { getWorkspaceLocation } from '../WorkspaceReducer';
@@ -53,9 +52,6 @@ export const handleEditorActions = (builder: ActionReducerMapBuilder<WorkspaceMa
       }
 
       state[workspaceLocation].editorTabs[editorTabIndex].value = newEditorValue;
-      if (!action.payload.isFromVscode) {
-        sendToWebview(Messages.Text(newEditorValue));
-      }
     })
     .addCase(WorkspaceActions.setEditorBreakpoint, (state, action) => {
       const workspaceLocation = getWorkspaceLocation(action);
diff --git a/src/features/vscode/messages.ts b/src/features/vscode/messages.ts
diff --git a/src/pages/academy/game/Game.tsx b/src/pages/academy/game/Game.tsx
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
