Ensure that editor tabs have corresponding files (#2388)

* Create files that do not exist for editor tabs

* Consolidate workspace base paths into a single location

For better cohesion.

Author: ianyong

src/commons/application/ApplicationTypes.ts

@@ -6,6 +6,7 @@ import { DashboardState } from '../../features/dashboard/DashboardTypes';
 import { Grading } from '../../features/grading/GradingTypes';
 import { PlaygroundState } from '../../features/playground/PlaygroundTypes';
 import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/SourceRecorderTypes';
+import { WORKSPACE_BASE_PATHS } from '../../pages/fileSystem/createInBrowserFileSystem';
 import { Assessment } from '../assessment/AssessmentTypes';
 import { FileSystemState } from '../fileSystem/FileSystemTypes';
 import Constants from '../utils/Constants';
@@ -301,7 +302,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     usingSubst: false,
     editorTabs: [
       {
-        filePath: '/playground/program.js',
+        filePath: `${WORKSPACE_BASE_PATHS.playground}/program.js`,
         value: defaultEditorValue,
         highlightedLines: [],
         breakpoints: []

src/pages/fileSystem/createInBrowserFileSystem.ts

@@ -1,16 +1,28 @@
 import { BFSRequire, configure } from 'browserfs';
 import { ApiError } from 'browserfs/dist/node/core/api_error';
+import { FSModule } from 'browserfs/dist/node/core/FS';
 import { Store } from 'redux';
 
+import { OverallState } from '../../commons/application/ApplicationTypes';
 import { setInBrowserFileSystem } from '../../commons/fileSystem/FileSystemActions';
-import { BASE_PLAYGROUND_FILE_PATH } from '../playground/Playground';
+import { EditorTabState, WorkspaceManagerState } from '../../commons/workspace/WorkspaceTypes';
 
-export const createInBrowserFileSystem = (store: Store) => {
+export const WORKSPACE_BASE_PATHS: Record<keyof WorkspaceManagerState, string> = {
+  assessment: '/assessment',
+  githubAssessment: '/githubAssessment',
+  grading: '/grading',
+  playground: '/playground',
+  sicp: '/sicp',
+  sourcecast: '/sourcecast',
+  sourcereel: '/sourcereel'
+};
+
+export const createInBrowserFileSystem = (store: Store<OverallState>) => {
   configure(
     {
       fs: 'MountableFileSystem',
       options: {
-        [BASE_PLAYGROUND_FILE_PATH]: {
+        [WORKSPACE_BASE_PATHS.playground]: {
           fs: 'IndexedDB',
           options: {
             storeName: 'playground'
@@ -22,7 +34,42 @@ export const createInBrowserFileSystem = (store: Store) => {
       if (err) {
         console.error(err);
       }
-      store.dispatch(setInBrowserFileSystem(BFSRequire('fs')));
+      // Set the browser file system reference in the Redux store for retrieval
+      // in other parts of the codebase.
+      const fileSystem = BFSRequire('fs');
+      store.dispatch(setInBrowserFileSystem(fileSystem));
+      // Create files for editor tabs if they do not exist. This can happen when
+      // editor tabs are initialised from the Redux store defaults, as opposed to
+      // being created by the user.
+      const workspaceStates = store.getState().workspaces;
+      Object.entries(workspaceStates).forEach(([_workspaceLocation, workspaceState]) => {
+        const editorTabs = workspaceState.editorTabs;
+        createFilesForEditorTabs(fileSystem, editorTabs);
+      });
     }
   );
 };
+
+// An EditorTabWithFile is an editor tab with an associated file path.
+type EditorTabWithFile = EditorTabState & {
+  filePath: string;
+};
+
+const createFilesForEditorTabs = (fileSystem: FSModule, editorTabs: EditorTabState[]) => {
+  const editorTabsWithFile = editorTabs.filter(
+    (editorTab): editorTab is EditorTabWithFile => editorTab.filePath !== undefined
+  );
+  editorTabsWithFile.forEach(editorTab => {
+    fileSystem.exists(editorTab.filePath, filePathExists => {
+      if (filePathExists) {
+        return;
+      }
+
+      fileSystem.writeFile(editorTab.filePath, editorTab.value, err => {
+        if (err) {
+          console.error(err);
+        }
+      });
+    });
+  });
+};

src/pages/playground/Playground.tsx

@@ -115,6 +115,7 @@ import {
   Input,
   SelectionRange
 } from '../../features/sourceRecorder/SourceRecorderTypes';
+import { WORKSPACE_BASE_PATHS } from '../fileSystem/createInBrowserFileSystem';
 
 export type PlaygroundProps = OwnProps &
   DispatchProps &
@@ -207,8 +208,6 @@ export async function handleHash(hash: string, props: PlaygroundProps) {
   }
 }
 
-export const BASE_PLAYGROUND_FILE_PATH = '/playground';
-
 const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground', ...props }) => {
   const { isSicpEditor } = props;
   const { isMobileBreakpoint } = useResponsive();
@@ -820,7 +819,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
   const editorContainerProps: NormalEditorContainerProps = {
     ..._.pick(props, 'editorSessionId', 'isEditorAutorun'),
     editorVariant: 'normal',
-    baseFilePath: BASE_PLAYGROUND_FILE_PATH,
+    baseFilePath: WORKSPACE_BASE_PATHS.playground,
     isFolderModeEnabled,
     activeEditorTabIndex,
     setActiveEditorTabIndex,
@@ -895,7 +894,7 @@ const Playground: React.FC<PlaygroundProps> = ({ workspaceLocation = 'playground
                 body: (
                   <FileSystemView
                     workspaceLocation="playground"
-                    basePath={BASE_PLAYGROUND_FILE_PATH}
+                    basePath={WORKSPACE_BASE_PATHS.playground}
                   />
                 ),
                 iconName: IconNames.FOLDER_CLOSE,