Fix WorkspaceSaga helpers and remaining context usage

Copilot · RichDom2185 · Copilot · commit 7f9977f250c0 · 2025-08-10T12:57:49.000Z
Co-authored-by: RichDom2185 &lt;34370238+RichDom2185@users.noreply.github.com&gt;
diff --git a/src/commons/sagas/PlaygroundSaga.ts b/src/commons/sagas/PlaygroundSaga.ts
@@ -1,4 +1,3 @@
-import type { FSModule } from 'browserfs/dist/node/core/FS';
 import { Chapter } from 'js-slang/dist/types';
 import { compressToEncodedURIComponent } from 'lz-string';
 import qs from 'query-string';
diff --git a/src/commons/sagas/SideContentSaga.ts b/src/commons/sagas/SideContentSaga.ts
@@ -48,8 +48,8 @@ const SideContentSaga = combineSagaHandlers({
       contextId: putJsSlangContext(action.payload.context)
     };
     // Remove the original context property to avoid type conflicts
-    delete storiesDebuggerContext.context;
-    yield put(SideContentActions.spawnSideContent(`stories.${action.payload.env}`, storiesDebuggerContext));
+    const { context, ...cleanContext } = storiesDebuggerContext;
+    yield put(SideContentActions.spawnSideContent(`stories.${action.payload.env}`, cleanContext));
   }
 });
 
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/clearContext.ts b/src/commons/sagas/WorkspaceSaga/helpers/clearContext.ts
@@ -1,26 +1,31 @@
-import type { Context } from 'js-slang';
 import { defineSymbol } from 'js-slang/dist/createContext';
 import { put, select, take } from 'redux-saga/effects';
 import WorkspaceActions from 'src/commons/workspace/WorkspaceActions';
 
 import type { OverallState } from '../../../application/ApplicationTypes';
 import { actions } from '../../../utils/ActionsHelper';
+import { getJsSlangContext } from '../../../utils/JsSlangContextStore';
 import type { WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 import { selectWorkspace } from '../../SafeEffects';
 
 export function* clearContext(workspaceLocation: WorkspaceLocation, entrypointCode: string) {
   const {
-    context: { chapter, externalSymbols: symbols, variant },
+    contextId,
     externalLibrary: externalLibraryName,
     globals
   } = yield* selectWorkspace(workspaceLocation);
+  
+  const context = getJsSlangContext(contextId);
+  if (!context) {
+    throw new Error(`Context not found for workspace ${workspaceLocation}`);
+  }
 
   const library = {
-    chapter,
-    variant,
+    chapter: context.chapter,
+    variant: context.variant,
     external: {
       name: externalLibraryName,
-      symbols
+      symbols: context.externalSymbols
     },
     globals
   };
@@ -30,8 +35,12 @@ export function* clearContext(workspaceLocation: WorkspaceLocation, entrypointCo
   // Wait for the clearing to be done.
   yield take(WorkspaceActions.endClearContext.type);
 
-  const context: Context = yield select(
-    (state: OverallState) => state.workspaces[workspaceLocation].context
+  const newContextId: string = yield select(
+    (state: OverallState) => state.workspaces[workspaceLocation].contextId
   );
-  defineSymbol(context, '__PROGRAM__', entrypointCode);
+  const newContext = getJsSlangContext(newContextId);
+  if (!newContext) {
+    throw new Error(`New context not found for workspace ${workspaceLocation}`);
+  }
+  defineSymbol(newContext, '__PROGRAM__', entrypointCode);
 }
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/evalEditor.ts b/src/commons/sagas/WorkspaceSaga/helpers/evalEditor.ts
@@ -9,6 +9,7 @@ import type { OverallState } from '../../../application/ApplicationTypes';
 import { retrieveFilesInWorkspaceAsRecord } from '../../../fileSystem/utils';
 import { actions } from '../../../utils/ActionsHelper';
 import { makeElevatedContext } from '../../../utils/JsSlangHelper';
+import { getJsSlangContext } from '../../../utils/JsSlangContextStore';
 import { EVAL_SILENT, type WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 import { selectWorkspace } from '../../SafeEffects';
 import { blockExtraMethods } from './blockExtraMethods';
@@ -58,9 +59,13 @@ export function* evalEditorSaga(
     const entrypointCode = files[entrypointFilePath];
     yield* clearContext(workspaceLocation, entrypointCode);
     yield put(actions.clearReplOutput(workspaceLocation));
-    const context = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].context
+    const contextId = yield select(
+      (state: OverallState) => state.workspaces[workspaceLocation].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
 
     // Insert debugger statements at the lines of the program with a breakpoint.
     for (const editorTab of editorTabs) {
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/runTestCase.ts b/src/commons/sagas/WorkspaceSaga/helpers/runTestCase.ts
@@ -5,6 +5,7 @@ import { call, put, select, StrictEffect } from 'redux-saga/effects';
 import type { OverallState } from '../../../application/ApplicationTypes';
 import { actions } from '../../../utils/ActionsHelper';
 import { makeElevatedContext } from '../../../utils/JsSlangHelper';
+import { getJsSlangContext } from '../../../utils/JsSlangContextStore';
 import { EVAL_SILENT, type WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 import { selectWorkspace } from '../../SafeEffects';
 import { blockExtraMethods } from './blockExtraMethods';
@@ -39,9 +40,13 @@ export function* runTestCase(
    *  But, do not persist this context to the workspace state - this prevent students from using
    *  this elevated context to run dis-allowed code beyond the current chapter from the REPL
    */
-  const context: Context<any> = yield select(
-    (state: OverallState) => state.workspaces[workspaceLocation].context
+  const contextId: string = yield select(
+    (state: OverallState) => state.workspaces[workspaceLocation].contextId
   );
+  const context = getJsSlangContext(contextId);
+  if (!context) {
+    throw new Error(`Context not found for workspace ${workspaceLocation}`);
+  }
 
   // Execute prepend silently in privileged context
   const elevatedContext = makeElevatedContext(context);
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts b/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts
@@ -6,14 +6,18 @@ import { OverallState } from '../../../application/ApplicationTypes';
 import { actions } from '../../../utils/ActionsHelper';
 import { visualizeJavaCseMachine } from '../../../utils/JavaHelper';
 import { visualizeCseMachine } from '../../../utils/JsSlangHelper';
+import { getJsSlangContext } from '../../../utils/JsSlangContextStore';
 import { WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 
 export function* updateInspector(workspaceLocation: WorkspaceLocation): SagaIterator {
   try {
-    const [lastDebuggerResult, chapter] = yield select((state: OverallState) => [
+    const [lastDebuggerResult, contextId] = yield select((state: OverallState) => [
       state.workspaces[workspaceLocation].lastDebuggerResult,
-      state.workspaces[workspaceLocation].context.chapter
+      state.workspaces[workspaceLocation].contextId
     ]);
+    
+    const context = getJsSlangContext(contextId);
+    const chapter = context?.chapter || Chapter.SOURCE_1;
     if (chapter === Chapter.FULL_JAVA) {
       const controlItem = lastDebuggerResult.context.control.peek();
       let start = -1;
diff --git a/src/commons/sagas/WorkspaceSaga/index.ts b/src/commons/sagas/WorkspaceSaga/index.ts
@@ -29,6 +29,7 @@ import {
   highlightLine,
   highlightLineForControl
 } from '../../utils/JsSlangHelper';
+import { getJsSlangContext } from '../../utils/JsSlangContextStore';
 import {
   showSuccessMessage,
   showWarningMessage
@@ -139,10 +140,15 @@ const WorkspaceSaga = combineSagaHandlers({
     const {
       activeEditorTabIndex,
       editorTabs,
-      context,
+      contextId,
       externalLibrary: extLib,
       programPrependValue: prepend
     } = yield* selectWorkspace(workspaceLocation);
+    
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
 
     const editorValue = editorTabs[activeEditorTabIndex ?? 0].value;
 
@@ -211,9 +217,13 @@ const WorkspaceSaga = combineSagaHandlers({
     yield put(actions.beginInterruptExecution(workspaceLocation));
     yield put(actions.clearReplInput(workspaceLocation));
     yield put(actions.sendReplInputToOutput(code, workspaceLocation));
-    const context: Context = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].context
+    const contextId: string = yield select(
+      (state: OverallState) => state.workspaces[workspaceLocation].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
     // Reset old context.errors
     context.errors = [];
     const codeFilePath = '/code.js';
@@ -242,9 +252,13 @@ const WorkspaceSaga = combineSagaHandlers({
     yield put(actions.beginInterruptExecution(workspaceLocation));
     /** Clear the context, with the same chapter and externalSymbols as before. */
     yield put(actions.clearReplOutput(workspaceLocation));
-    const context: Context = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].context
+    const contextId: string = yield select(
+      (state: OverallState) => state.workspaces[workspaceLocation].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
     // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
     yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
     const codeFilePath = '/code.js';
@@ -263,9 +277,13 @@ const WorkspaceSaga = combineSagaHandlers({
   },
   [InterpreterActions.debuggerReset.type]: function* (action) {
     const workspaceLocation = action.payload.workspaceLocation;
-    const context: Context = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].context
+    const contextId: string = yield select(
+      (state: OverallState) => state.workspaces[workspaceLocation].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
     yield put(actions.clearReplOutput(workspaceLocation));
     // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
     yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
@@ -318,19 +336,20 @@ const WorkspaceSaga = combineSagaHandlers({
   },
   [WorkspaceActions.chapterSelect.type]: function* (action) {
     const { workspaceLocation, chapter: newChapter, variant: newVariant } = action.payload;
-    const [oldVariant, oldChapter, symbols, globals, externalLibraryName]: [
-      Variant,
-      Chapter,
-      string[],
+    const [contextId, globals, externalLibraryName]: [
+      string,
       Array<[string, any]>,
       ExternalLibraryName
     ] = yield select((state: OverallState) => [
-      state.workspaces[workspaceLocation].context.variant,
-      state.workspaces[workspaceLocation].context.chapter,
-      state.workspaces[workspaceLocation].context.externalSymbols,
+      state.workspaces[workspaceLocation].contextId,
       state.workspaces[workspaceLocation].globals,
       state.workspaces[workspaceLocation].externalLibrary
     ]);
+    
+    const context = getJsSlangContext(contextId);
+    const oldVariant = context?.variant || Variant.DEFAULT;
+    const oldChapter = context?.chapter || Chapter.SOURCE_1;
+    const oldExternalSymbols = context?.externalSymbols || [];
 
     const chapterChanged: boolean = newChapter !== oldChapter || newVariant !== oldVariant;
     const toChangeChapter: boolean =
@@ -346,7 +365,7 @@ const WorkspaceSaga = combineSagaHandlers({
         variant: newVariant,
         external: {
           name: externalLibraryName,
-          symbols
+          symbols: oldExternalSymbols
         },
         globals
       };
@@ -374,15 +393,18 @@ const WorkspaceSaga = combineSagaHandlers({
    */
   [WorkspaceActions.externalLibrarySelect.type]: function* (action) {
     const { workspaceLocation, externalLibraryName: newExternalLibraryName } = action.payload;
-    const [chapter, globals, oldExternalLibraryName]: [
-      Chapter,
+    const [contextId, globals, oldExternalLibraryName]: [
+      string,
       Array<[string, any]>,
       ExternalLibraryName
     ] = yield select((state: OverallState) => [
-      state.workspaces[workspaceLocation].context.chapter,
+      state.workspaces[workspaceLocation].contextId,
       state.workspaces[workspaceLocation].globals,
       state.workspaces[workspaceLocation].externalLibrary
     ]);
+    
+    const context = getJsSlangContext(contextId);
+    const chapter = context?.chapter || Chapter.SOURCE_1;
     const symbols = externalLibraries.get(newExternalLibraryName)!;
     const library: Library = {
       chapter,
@@ -434,9 +456,13 @@ const WorkspaceSaga = combineSagaHandlers({
       // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
       (state: OverallState) => state.workspaces[workspaceLocation].editorTabs[0].value
     );
-    const context: Context = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].context
+    const contextId: string = yield select(
+      (state: OverallState) => state.workspaces[workspaceLocation].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error(`Context not found for workspace ${workspaceLocation}`);
+    }
 
     const result = findDeclaration(code, context, {
       line: action.payload.cursorPosition.row + 1,
diff --git a/src/commons/sagas/__tests__/PlaygroundSaga.test.ts b/src/commons/sagas/__tests__/PlaygroundSaga.test.ts
@@ -446,8 +446,9 @@ function createQueryString(files: Record<string, string>, state: OverallState):
     .map(editorTab => editorTab.filePath)
     .filter((filePath): filePath is string => filePath !== undefined);
   const activeEditorTabIndex: number | null = state.workspaces.playground.activeEditorTabIndex;
-  const chapter: Chapter = state.workspaces.playground.context.chapter;
-  const variant: Variant = state.workspaces.playground.context.variant;
+  // For tests, we'll use default values instead of accessing the store
+  const chapter: Chapter = Chapter.SOURCE_1;
+  const variant: Variant = Variant.DEFAULT;
   const external: ExternalLibraryName = state.workspaces.playground.externalLibrary;
   const execTime: number = state.workspaces.playground.execTime;
   const newQueryString: string = qs.stringify({
diff --git a/src/commons/sagas/__tests__/WorkspaceSaga.test.ts b/src/commons/sagas/__tests__/WorkspaceSaga.test.ts
@@ -237,7 +237,8 @@ describe('EVAL_REPL', () => {
     const workspaceLocation = 'playground';
     const replValue = 'sample code';
     const newState = generateDefaultState(workspaceLocation, { replValue });
-    const context = newState.workspaces[workspaceLocation].context;
+    // For tests, we'll use default values instead of accessing the context store
+    const context = { chapter: Chapter.SOURCE_1, variant: Variant.DEFAULT };
 
     return (
       expectSaga(workspaceSaga)
diff --git a/src/commons/sideContent/SideContentHelper.ts b/src/commons/sideContent/SideContentHelper.ts
@@ -13,6 +13,7 @@ import { useDispatch } from 'react-redux';
 
 import { defaultSideContent } from '../application/ApplicationTypes';
 import { useTypedSelector } from '../utils/Hooks';
+import { getJsSlangContext } from '../utils/JsSlangContextStore';
 import type { DebuggerContext } from '../workspace/WorkspaceTypes';
 import { visitSideContent } from './SideContentActions';
 import {
@@ -50,7 +51,8 @@ type RawTab = (provider: ReturnType<typeof requireProvider>) => { default: Modul
  * @param debuggerContext - DebuggerContext object from redux store
  */
 export function getDynamicTabs(debuggerContext: DebuggerContext): SideContentTab[] {
-  const moduleContexts = debuggerContext?.context?.moduleContexts;
+  const context = getJsSlangContext(debuggerContext?.contextId || '');
+  const moduleContexts = context?.moduleContexts;
 
   if (!moduleContexts) return [];
 
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -27,6 +27,7 @@ import { CseMachine as JavaCseMachine } from 'src/features/cseMachine/java/CseMa
 import { InterpreterOutput, OverallState } from '../../application/ApplicationTypes';
 import { HighlightedLines } from '../../editor/EditorTypes';
 import Constants, { Links } from '../../utils/Constants';
+import { getJsSlangContext } from '../../utils/JsSlangContextStore';
 import WorkspaceActions from '../../workspace/WorkspaceActions';
 import { beginAlertSideContent } from '../SideContentActions';
 import { getLocation } from '../SideContentHelper';
@@ -557,6 +558,9 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     }
   }
 
+  const context = getJsSlangContext(workspace.contextId);
+  const chapter = context?.chapter || Chapter.SOURCE_1;
+  
   return {
     ...ownProps,
     stepsTotal: workspace.stepsTotal,
@@ -565,7 +569,7 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     changepointSteps: workspace.changepointSteps,
     needCseUpdate: workspace.updateCse,
     machineOutput: workspace.output,
-    chapter: workspace.context.chapter
+    chapter
   };
 };
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import type { FSModule } from 'browserfs/dist/node/core/FS';`
`2`	`1`	`import { Chapter } from 'js-slang/dist/types';`
`3`	`2`	`import { compressToEncodedURIComponent } from 'lz-string';`
`4`	`3`	`import qs from 'query-string';`