feat: add vscode slice for message passing with extension

Author: heyzec

src/commons/application/Application.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
+import Messages, { MessageType, sendToWebview } from 'src/features/vscode/messages';
 
 import NavigationBar from '../navigationBar/NavigationBar';
 import Constants from '../utils/Constants';
 import { useLocalStorageState, useSession } from '../utils/Hooks';
+import WorkspaceActions from '../workspace/WorkspaceActions';
 import { defaultWorkspaceSettings, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import SessionActions from './actions/SessionActions';
+import VscodeActions from './actions/VscodeActions';
 
 const Application: React.FC = () => {
   const dispatch = useDispatch();
@@ -70,6 +73,47 @@ const Application: React.FC = () => {
     };
   }, [isPWA, isMobile]);
 
+  // Effect to fetch the latest user info and course configurations from the backend on refresh,
+  // if the user was previously logged in
+  React.useEffect(() => {
+    // Polyfill confirm() to instead show as VSCode notification
+    window.confirm = () => {
+      console.log('You gotta confirm!');
+      return true;
+    };
+
+    const message = Messages.WebviewStarted();
+    sendToWebview(message);
+
+    window.addEventListener('message', event => {
+      const message: MessageType = event.data;
+      // Only accept messages from the vscode webview
+      if (!event.origin.startsWith('vscode-webview://')) {
+        return;
+      }
+      // console.log(`FRONTEND: Message from ${event.origin}: ${JSON.stringify(message)}`);
+      switch (message.type) {
+        case 'WebviewStarted':
+          console.log('Received WebviewStarted message, will set vsc');
+          dispatch(VscodeActions.setVscode());
+          break;
+        case 'Text':
+          const code = message.code;
+          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));
+          break;
+      }
+    });
+  }, []);
+
   return (
     <WorkspaceSettingsContext.Provider value={[workspaceSettings, setWorkspaceSettings]}>
       <div className="Application">

src/commons/application/ApplicationTypes.ts

@@ -20,6 +20,7 @@ import {
 import { RouterState } from './types/CommonsTypes';
 import { ExternalLibraryName } from './types/ExternalTypes';
 import { SessionState } from './types/SessionTypes';
+import { VscodeState as VscodeState } from './types/VscodeTypes';
 
 export type OverallState = {
   readonly router: RouterState;
@@ -31,6 +32,7 @@ export type OverallState = {
   readonly dashboard: DashboardState;
   readonly fileSystem: FileSystemState;
   readonly sideContent: SideContentManagerState;
+  readonly vscode: VscodeState;
 };
 
 export type Story = {
@@ -604,6 +606,10 @@ export const defaultSideContentManager: SideContentManagerState = {
   stories: {}
 };
 
+export const defaultVscode: VscodeState = {
+  isVscode: false
+};
+
 export const defaultState: OverallState = {
   router: defaultRouter,
   achievement: defaultAchievement,
@@ -613,5 +619,6 @@ export const defaultState: OverallState = {
   stories: defaultStories,
   workspaces: defaultWorkspaceManager,
   fileSystem: defaultFileSystem,
-  sideContent: defaultSideContentManager
+  sideContent: defaultSideContentManager,
+  vscode: defaultVscode
 };

src/commons/application/actions/VscodeActions.ts

@@ -0,0 +1,10 @@
+import { createActions } from 'src/commons/redux/utils';
+
+const VscodeActions = createActions('vscode', {
+  setVscode: () => ({})
+});
+
+// For compatibility with existing code (actions helper)
+export default {
+  ...VscodeActions
+};

src/commons/application/reducers/RootReducer.ts

@@ -11,6 +11,7 @@ import { WorkspaceReducer as workspaces } from '../../workspace/WorkspaceReducer
 import { OverallState } from '../ApplicationTypes';
 import { RouterReducer as router } from './CommonsReducer';
 import { SessionsReducer as session } from './SessionsReducer';
+import { VscodeReducer as vscode } from './VscodeReducer';
 
 const rootReducer: Reducer<OverallState, SourceActionType> = combineReducers({
   router,
@@ -21,7 +22,8 @@ const rootReducer: Reducer<OverallState, SourceActionType> = combineReducers({
   stories,
   workspaces,
   fileSystem,
-  sideContent
+  sideContent,
+  vscode
 });
 
 export default rootReducer;

src/commons/application/reducers/VscodeReducer.ts

@@ -0,0 +1,20 @@
+import { createReducer, Reducer } from '@reduxjs/toolkit';
+
+import { SourceActionType } from '../../utils/ActionsHelper';
+import VscodeActions from '../actions/VscodeActions';
+import { defaultVscode } from '../ApplicationTypes';
+import { VscodeState } from '../types/VscodeTypes';
+
+export const VscodeReducer: Reducer<VscodeState, SourceActionType> = (
+  state = defaultVscode,
+  action
+) => {
+  state = newVscodeReducer(state, action);
+  return state;
+};
+
+const newVscodeReducer = createReducer(defaultVscode, builder => {
+  builder.addCase(VscodeActions.setVscode, state => {
+    return { ...state, ...{ isVscode: true } };
+  });
+});

src/commons/application/types/VscodeTypes.ts

@@ -0,0 +1,3 @@
+export type VscodeState = {
+  isVscode: boolean;
+};

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -19,6 +19,7 @@ import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { onClickProgress } from 'src/features/assessments/AssessmentUtils';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import { mobileOnlyTabIds } from 'src/pages/playground/PlaygroundTabs';
 
 import { initSession, log } from '../../features/eventLogging';
@@ -184,11 +185,11 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     };
   }, [dispatch]);
 
-  useEffect(() => {
-    // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
-    handleEditorValueChange(0, '');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // useEffect(() => {
+  //   // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
+  //   handleEditorValueChange(0, '');
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
 
   useEffect(() => {
     if (assessmentOverview && assessmentOverview.maxTeamSize > 1) {
@@ -220,27 +221,27 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     if (!assessment) {
       return;
     }
-    // ------------- PLEASE NOTE, EVERYTHING BELOW THIS SEEMS TO BE UNUSED -------------
-    // checkWorkspaceReset does exactly the same thing.
-    let questionId = props.questionId;
-    if (props.questionId >= assessment.questions.length) {
-      questionId = assessment.questions.length - 1;
-    }
-
-    const question = assessment.questions[questionId];
-
-    let answer = '';
-    if (question.type === QuestionTypes.programming) {
-      if (question.answer) {
-        answer = (question as IProgrammingQuestion).answer as string;
-      } else {
-        answer = (question as IProgrammingQuestion).solutionTemplate;
-      }
-    }
-
-    // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
-    handleEditorValueChange(0, answer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // // ------------- PLEASE NOTE, EVERYTHING BELOW THIS SEEMS TO BE UNUSED -------------
+    // // checkWorkspaceReset does exactly the same thing.
+    // let questionId = props.questionId;
+    // if (props.questionId >= assessment.questions.length) {
+    //   questionId = assessment.questions.length - 1;
+    // }
+
+    // const question = assessment.questions[questionId];
+
+    // let answer = '';
+    // if (question.type === QuestionTypes.programming) {
+    //   if (question.answer) {
+    //     answer = (question as IProgrammingQuestion).answer as string;
+    //   } else {
+    //     answer = (question as IProgrammingQuestion).solutionTemplate;
+    //   }
+    // }
+
+    // // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
+    // handleEditorValueChange(0, answer);
+    // // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -415,9 +416,12 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     );
     handleClearContext(question.library, true);
     handleUpdateHasUnsavedChanges(false);
+    sendToWebview(Messages.NewEditor(`assessment${assessment.id}`, props.questionId, ''));
     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);
+    } else {
+      handleEditorValueChange(0, '');
     }
   };
 

src/commons/mocks/StoreMocks.ts

@@ -11,6 +11,7 @@ import {
   defaultSession,
   defaultSideContentManager,
   defaultStories,
+  defaultVscode,
   defaultWorkspaceManager,
   OverallState
 } from '../application/ApplicationTypes';
@@ -30,7 +31,8 @@ export function mockInitialStore(
     session: defaultSession,
     stories: defaultStories,
     fileSystem: defaultFileSystem,
-    sideContent: defaultSideContentManager
+    sideContent: defaultSideContentManager,
+    vscode: defaultVscode
   };
 
   const lodashMergeCustomizer = (objValue: any, srcValue: any) => {

src/commons/utils/ActionsHelper.ts

@@ -17,6 +17,7 @@ import SourcecastActions from '../../features/sourceRecorder/sourcecast/Sourceca
 import SourceRecorderActions from '../../features/sourceRecorder/SourceRecorderActions';
 import SourcereelActions from '../../features/sourceRecorder/sourcereel/SourcereelActions';
 import StoriesActions from '../../features/stories/StoriesActions';
+import VscodeActions from '../application/actions/VscodeActions';
 import { ActionType } from './TypeHelper';
 
 export const actions = {
@@ -38,7 +39,8 @@ export const actions = {
   ...RemoteExecutionActions,
   ...FileSystemActions,
   ...StoriesActions,
-  ...SideContentActions
+  ...SideContentActions,
+  ...VscodeActions
 };
 
 export type SourceActionType = ActionType<typeof actions>;

src/commons/workspace/Workspace.tsx

@@ -12,7 +12,7 @@ import { Prompt } from '../ReactRouterPrompt';
 import Repl, { ReplProps } from '../repl/Repl';
 import SideBar, { SideBarTab } from '../sideBar/SideBar';
 import SideContent, { SideContentProps } from '../sideContent/SideContent';
-import { useDimensions } from '../utils/Hooks';
+import { useDimensions, useTypedSelector } from '../utils/Hooks';
 
 export type WorkspaceProps = DispatchProps & StateProps;
 
@@ -44,6 +44,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
   const [expandedSideBarWidth, setExpandedSideBarWidth] = useState(200);
   const [isSideBarExpanded, setIsSideBarExpanded] = useState(true);
+  const isVscode = useTypedSelector(state => state.vscode.isVscode);
 
   const sideBarCollapsedWidth = 40;
 
@@ -222,7 +223,12 @@ const Workspace: React.FC<WorkspaceProps> = props => {
         </Resizable>
         <div className="row content-parent" ref={contentContainerDiv}>
           <div className="editor-divider" ref={editorDividerDiv} />
-          <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
+          {isVscode ? (
+            <div style={{ width: '0px' }}>{createWorkspaceInput(props)}</div>
+          ) : (
+            <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
+          )}
+          <div style={{ width: '0px' }}>{createWorkspaceInput(props)}</div>
           <div className="right-parent" ref={setFullscreenRefs}>
             <Tooltip
               className="fullscreen-button"

src/commons/workspace/WorkspaceActions.ts

@@ -113,8 +113,9 @@ const newActions = createActions('workspace', {
   updateEditorValue: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,
-    newEditorValue: string
-  ) => ({ workspaceLocation, editorTabIndex, newEditorValue }),
+    newEditorValue: string,
+    isFromVscode: boolean = false
+  ) => ({ workspaceLocation, editorTabIndex, newEditorValue, isFromVscode }),
   setEditorBreakpoint: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,

src/commons/workspace/reducers/editorReducer.ts

@@ -1,4 +1,5 @@
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 
 import WorkspaceActions from '../WorkspaceActions';
 import { getWorkspaceLocation } from '../WorkspaceReducer';
@@ -52,6 +53,9 @@ 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);

src/features/vscode/messages.ts

@@ -0,0 +1,58 @@
+// This file also needs to be copied to source-academy/frontend
+type BaseMessage<T extends string, P extends object> = {
+  type: T;
+} & P;
+
+function createMessages<T extends Record<string, (...args: any[]) => object>>(
+  creators: T
+): {
+  [K in Extract<keyof T, string>]: (...args: Parameters<T[K]>) => BaseMessage<K, ReturnType<T[K]>>;
+} {
+  return Object.fromEntries(
+    Object.entries(creators).map(([key, creator]) => [
+      key,
+      (...args: any[]) => ({
+        type: key,
+        ...creator(...args)
+      })
+    ])
+  ) as any;
+}
+
+const Messages = createMessages({
+  WebviewStarted: () => ({}),
+  IsVsc: () => ({}),
+  NewEditor: (assessmentName: string, questionId: number, code: string) => ({
+    assessmentName,
+    questionId,
+    code
+  }),
+  Text: (code: string) => ({ code })
+});
+
+export default Messages;
+
+// Define MessageTypes to map each key in Messages to its specific message type
+export type MessageTypes = {
+  [K in keyof typeof Messages]: ReturnType<(typeof Messages)[K]>;
+};
+
+// Define MessageType as a union of all message types
+export type MessageType = MessageTypes[keyof MessageTypes];
+
+export const FRONTEND_ELEMENT_ID = 'frontend';
+
+export function sendToWebview(message: MessageType) {
+  window.parent.postMessage(message, '*');
+}
+export function sendToFrontend(document: Document, message: MessageType) {
+  const iframe: HTMLIFrameElement = document.getElementById(
+    FRONTEND_ELEMENT_ID
+  ) as HTMLIFrameElement;
+  const contentWindow = iframe.contentWindow;
+  if (!contentWindow) {
+    return;
+  }
+  // TODO: Don't hardcode this!
+  contentWindow.postMessage(message, 'http://localhost:8000');
+}