Add file system directory for SICP workspace (#2408)

* Make Playground component workspace-agnostic

Why does the SICP workspace make use of the playground? Who thought
this was a great idea???

* Add BrowserFS directory for SICP workspace

* Set default file path when resetting SICP workspace

* Update tests

Author: ianyong

src/commons/application/ApplicationTypes.ts

@@ -253,6 +253,9 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   activeEditorTabIndex: 0,
   editorTabs: [
     {
+      filePath: ['playground', 'sicp'].includes(workspaceLocation)
+        ? getDefaultFilePath(workspaceLocation)
+        : undefined,
       value: ['playground', 'sourcecast', 'githubAssessments'].includes(workspaceLocation)
         ? defaultEditorValue
         : '',
@@ -284,7 +287,9 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   debuggerContext: {} as DebuggerContext
 });
 
-export const defaultPlaygroundFilePath = `${WORKSPACE_BASE_PATHS.playground}/program.js`;
+const defaultFileName = 'program.js';
+export const getDefaultFilePath = (workspaceLocation: WorkspaceLocation) =>
+  `${WORKSPACE_BASE_PATHS[workspaceLocation]}/${defaultFileName}`;
 
 export const defaultWorkspaceManager: WorkspaceManagerState = {
   assessment: {
@@ -302,9 +307,10 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
   playground: {
     ...createDefaultWorkspace('playground'),
     usingSubst: false,
+    activeEditorTabIndex: 0,
     editorTabs: [
       {
-        filePath: defaultPlaygroundFilePath,
+        filePath: getDefaultFilePath('playground'),
         value: defaultEditorValue,
         highlightedLines: [],
         breakpoints: []
@@ -348,7 +354,16 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
   },
   sicp: {
     ...createDefaultWorkspace('sicp'),
-    usingSubst: false
+    usingSubst: false,
+    activeEditorTabIndex: 0,
+    editorTabs: [
+      {
+        filePath: getDefaultFilePath('sicp'),
+        value: defaultEditorValue,
+        highlightedLines: [],
+        breakpoints: []
+      }
+    ]
   },
   githubAssessment: {
     ...createDefaultWorkspace('githubAssessment'),

src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

@@ -8,9 +8,9 @@ import { updateShortURL } from '../../../features/playground/PlaygroundActions';
 import { SHORTEN_URL } from '../../../features/playground/PlaygroundTypes';
 import {
   createDefaultWorkspace,
-  defaultPlaygroundFilePath,
   defaultState,
   defaultWorkspaceManager,
+  getDefaultFilePath,
   OverallState
 } from '../../application/ApplicationTypes';
 import { ExternalLibraryName } from '../../application/types/ExternalTypes';
@@ -21,6 +21,7 @@ import PlaygroundSaga, { shortenURLRequest } from '../PlaygroundSaga';
 describe('Playground saga tests', () => {
   Constants.urlShortenerBase = 'http://url-shortener.com/';
   const errMsg = 'Something went wrong trying to create the link.';
+  const defaultPlaygroundFilePath = getDefaultFilePath('playground');
 
   // This test relies on BrowserFS which works in browser environments and not Node.js.
   // FIXME: Uncomment this test if BrowserFS adds support for running in Node.js.

src/commons/sagas/__tests__/PlaygroundSaga.ts

@@ -18,7 +18,7 @@ export const WORKSPACE_BASE_PATHS: Record<keyof WorkspaceManagerState, string> =
   githubAssessment: '',
   grading: '',
   playground: '/playground',
-  sicp: '',
+  sicp: '/sicp',
   sourcecast: '',
   sourcereel: ''
 };
@@ -34,6 +34,12 @@ export const createInBrowserFileSystem = (store: Store<OverallState>): Promise<v
             options: {
               storeName: 'playground'
             }
+          },
+          [WORKSPACE_BASE_PATHS.sicp]: {
+            fs: 'IndexedDB',
+            options: {
+              storeName: 'sicp'
+            }
           }
         }
       },

src/pages/fileSystem/createInBrowserFileSystem.ts

@@ -73,7 +73,7 @@ import {
 } from 'src/features/playground/PlaygroundActions';
 
 import {
-  defaultPlaygroundFilePath,
+  getDefaultFilePath,
   InterpreterOutput,
   isSourceLanguage,
   OverallState,
@@ -181,6 +181,7 @@ const keyMap = { goGreen: 'h u l k' };
 export async function handleHash(
   hash: string,
   props: PlaygroundProps,
+  workspaceLocation: WorkspaceLocation,
   dispatch: Dispatch<AnyAction>,
   fileSystem: FSModule
 ) {
@@ -203,40 +204,43 @@ export async function handleHash(
     // For backward compatibility with old share links - 'prgrm' is no longer used.
     const program = qs.prgrm === undefined ? '' : decompressFromEncodedURIComponent(qs.prgrm);
 
-    // By default, create just the default playground file.
+    // By default, create just the default file.
+    const defaultFilePath = getDefaultFilePath(workspaceLocation);
     const files: Record<string, string> =
       qs.files === undefined
         ? {
-            [defaultPlaygroundFilePath]: program
+            [defaultFilePath]: program
           }
         : parseQuery(decompressFromEncodedURIComponent(qs.files));
-    await overwriteFilesInWorkspace('playground', fileSystem, files);
+    await overwriteFilesInWorkspace(workspaceLocation, fileSystem, files);
 
     // BrowserFS does not provide a way of listening to changes in the file system, which makes
     // updating the file system view troublesome. To force the file system view to re-render
     // (and thus display the updated file system), we first disable Folder mode.
-    dispatch(setFolderMode('playground', false));
+    dispatch(setFolderMode(workspaceLocation, false));
     const isFolderModeEnabled = convertParamToBoolean(qs.isFolder) ?? false;
     // If Folder mode should be enabled, enabling it after disabling it earlier will cause the
     // newly-added files to be shown. Note that this has to take place after the files are
     // already added to the file system.
-    dispatch(setFolderMode('playground', isFolderModeEnabled));
+    dispatch(setFolderMode(workspaceLocation, isFolderModeEnabled));
 
     // By default, open a single editor tab containing the default playground file.
     const editorTabFilePaths = qs.tabs?.split(',').map(decompressFromEncodedURIComponent) ?? [
-      defaultPlaygroundFilePath
+      defaultFilePath
     ];
     // Remove all editor tabs before populating with the ones from the query string.
-    dispatch(removeEditorTabsForDirectory('playground', WORKSPACE_BASE_PATHS.playground));
+    dispatch(
+      removeEditorTabsForDirectory(workspaceLocation, WORKSPACE_BASE_PATHS[workspaceLocation])
+    );
     // Add editor tabs from the query string.
     editorTabFilePaths.forEach(filePath =>
       // Fall back on the empty string if the file contents do not exist.
-      dispatch(addEditorTab('playground', filePath, files[filePath] ?? ''))
+      dispatch(addEditorTab(workspaceLocation, filePath, files[filePath] ?? ''))
     );
 
     // By default, use the first editor tab.
     const activeEditorTabIndex = convertParamToInt(qs.tabIdx) ?? 0;
-    dispatch(updateActiveEditorTabIndex('playground', activeEditorTabIndex));
+    dispatch(updateActiveEditorTabIndex(workspaceLocation, activeEditorTabIndex));
 
     const variant: Variant =
       sourceLanguages.find(
@@ -344,7 +348,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
       return;
     }
     if (fileSystem !== null) {
-      handleHash(hash, propsRef.current, dispatch, fileSystem);
+      handleHash(hash, propsRef.current, workspaceLocation, dispatch, fileSystem);
     }
   }, [
     dispatch,
@@ -902,7 +906,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
   const editorContainerProps: NormalEditorContainerProps = {
     ..._.pick(props, 'editorSessionId', 'isEditorAutorun'),
     editorVariant: 'normal',
-    baseFilePath: WORKSPACE_BASE_PATHS.playground,
+    baseFilePath: WORKSPACE_BASE_PATHS[workspaceLocation],
     isFolderModeEnabled,
     activeEditorTabIndex,
     setActiveEditorTabIndex,
@@ -977,7 +981,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
                 body: (
                   <FileSystemView
                     workspaceLocation="playground"
-                    basePath={WORKSPACE_BASE_PATHS.playground}
+                    basePath={WORKSPACE_BASE_PATHS[workspaceLocation]}
                   />
                 ),
                 iconName: IconNames.FOLDER_CLOSE,
@@ -987,7 +991,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
           : [])
       ]
     };
-  }, [isFolderModeEnabled]);
+  }, [isFolderModeEnabled, workspaceLocation]);
 
   const workspaceProps: WorkspaceProps = {
     controlBarProps: {

src/pages/playground/Playground.tsx

@@ -90,6 +90,7 @@ describe('handleHash', () => {
         handleChapterSelect: mockHandleChapterSelect,
         handleChangeExecTime: mockHandleChangeExecTime
       },
+      'playground',
       // We cannot make use of 'dispatch' & BrowserFS in test cases. However, the
       // behaviour being tested here does not actually invoke either of these. As
       // a workaround, we pass in 'undefined' instead & cast to the expected types.