Make folders from Google Drive readable

Author: sumomomomomo

src/commons/controlBar/ControlBarGoogleDriveButtons.tsx

@@ -39,7 +39,7 @@ export const ControlBarGoogleDriveButtons: React.FC<ControlBarGoogleDriveButtons
       label={(props.currentFile && props.currentFile.name) || 'Google Drive'}
       icon={IconNames.CLOUD}
       options={{ intent: stateToIntent[state] }}
-      isDisabled={props.isFolderModeEnabled}
+      //isDisabled={props.isFolderModeEnabled}
     />
   );
   const openButton = (
@@ -61,12 +61,20 @@ export const ControlBarGoogleDriveButtons: React.FC<ControlBarGoogleDriveButtons
   );
   const saveAsButton = (
     <ControlButton
-      label="Save as"
+      label="Save As"
       icon={IconNames.SEND_TO}
       onClick={props.onClickSaveAs}
       isDisabled={props.accessToken ? false : true}
     />
   );
+  const saveAllButton = (
+    <ControlButton
+      label="Save All"
+      icon={IconNames.DOUBLE_CHEVRON_UP}
+      onClick={props.onClickSaveAs}
+      isDisabled={props.accessToken ? false : true}
+    />
+  );
 
   const loginButton = props.accessToken ? (
     <Tooltip2 content={`Logged in as ${props.loggedInAs}`} disabled={!props.loggedInAs}>
@@ -76,12 +84,13 @@ export const ControlBarGoogleDriveButtons: React.FC<ControlBarGoogleDriveButtons
     <ControlButton label="Log In" icon={IconNames.LOG_IN} onClick={props.onClickLogIn} />
   );
 
-  const tooltipContent = props.isFolderModeEnabled
-    ? 'Currently unsupported in Folder mode'
-    : undefined;
+  //const tooltipContent = props.isFolderModeEnabled
+  //  ? 'Currently unsupported in Folder mode'
+  //  : undefined;
+  const tooltipContent = undefined;
 
   return (
-    <Tooltip2 content={tooltipContent} disabled={tooltipContent === undefined}>
+    <Tooltip2 content={tooltipContent} disabled={false}>
       <Popover2
         autoFocus={false}
         content={
@@ -90,13 +99,14 @@ export const ControlBarGoogleDriveButtons: React.FC<ControlBarGoogleDriveButtons
               {openButton}
               {saveButton}
               {saveAsButton}
+              {saveAllButton}
               {loginButton}
             </ButtonGroup>
           </div>
         }
         onOpening={props.onPopoverOpening}
         popoverClassName={Classes.POPOVER_DISMISS}
-        disabled={props.isFolderModeEnabled}
+        //disabled={props.isFolderModeEnabled}
       >
         {mainButton}
       </Popover2>

src/commons/controlBar/ControlBarToggleFolderModeButton.tsx

@@ -20,7 +20,7 @@ export const ControlBarToggleFolderModeButton: React.FC<ControlBarToggleFolderMo
 }) => {
   const tooltipContent = isSessionActive
     ? 'Currently unsupported while a collaborative session is active'
-    : isPersistenceActive
+    : false && isPersistenceActive
     ? 'Currently unsupported while a persistence method is active'
     : `${isFolderModeEnabled ? 'Disable' : 'Enable'} Folder mode`;
   return (
@@ -32,7 +32,7 @@ export const ControlBarToggleFolderModeButton: React.FC<ControlBarToggleFolderMo
           iconColor: isFolderModeEnabled ? Colors.BLUE4 : undefined
         }}
         onClick={toggleFolderMode}
-        isDisabled={isSessionActive || isPersistenceActive}
+        isDisabled={isSessionActive || false && isPersistenceActive}
       />
     </Tooltip2>
   );

src/commons/controlBar/github/ControlBarGitHubButtons.tsx

@@ -48,7 +48,7 @@ export const ControlBarGitHubButtons: React.FC<ControlBarGitHubButtonsProps> = p
       label={mainButtonDisplayText}
       icon={IconNames.GIT_BRANCH}
       options={{ intent: mainButtonIntent }}
-      isDisabled={props.isFolderModeEnabled}
+      //isDisabled={props.isFolderModeEnabled}
     />
   );
 
@@ -79,18 +79,28 @@ export const ControlBarGitHubButtons: React.FC<ControlBarGitHubButtonsProps> = p
     />
   );
 
+  const saveAllButton = (
+    <ControlButton
+      label="Save All"
+      icon={IconNames.DOUBLE_CHEVRON_UP}
+      onClick={props.onClickSaveAs}
+      isDisabled={shouldDisableButtons}
+    />
+  );
+
   const loginButton = isLoggedIn ? (
     <ControlButton label="Log Out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
   ) : (
     <ControlButton label="Log In" icon={IconNames.LOG_IN} onClick={props.onClickLogIn} />
   );
 
-  const tooltipContent = props.isFolderModeEnabled
-    ? 'Currently unsupported in Folder mode'
-    : undefined;
+  //const tooltipContent = props.isFolderModeEnabled
+  //  ? 'Currently unsupported in Folder mode'
+  //  : undefined;
+  const tooltipContent = undefined;
 
   return (
-    <Tooltip2 content={tooltipContent} disabled={tooltipContent === undefined}>
+    <Tooltip2 content={tooltipContent} disabled={false}>
       <Popover2
         autoFocus={false}
         content={
@@ -99,12 +109,13 @@ export const ControlBarGitHubButtons: React.FC<ControlBarGitHubButtonsProps> = p
               {openButton}
               {saveButton}
               {saveAsButton}
+              {saveAllButton}
               {loginButton}
             </ButtonGroup>
           </div>
         }
         popoverClassName={Classes.POPOVER_DISMISS}
-        disabled={props.isFolderModeEnabled}
+        //disabled={props.isFolderModeEnabled}
       >
         {mainButton}
       </Popover2>

src/commons/fileSystem/utils.ts renamed to src/commons/fileSystem/FileSystemUtils.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import classes from 'src/styles/FileSystemView.module.scss';
 
-import { rmdirRecursively } from '../fileSystem/utils';
+import { rmdirRecursively } from '../fileSystem/FileSystemUtils';
 import { showSimpleConfirmDialog, showSimpleErrorDialog } from '../utils/DialogHelper';
 import { removeEditorTabsForDirectory } from '../workspace/WorkspaceActions';
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';

src/commons/fileSystemView/FileSystemViewDirectoryNode.tsx

@@ -16,6 +16,8 @@ export type FileSystemViewListProps = {
   indentationLevel: number;
 };
 
+export let refreshFileView: () => any;
+
 const FileSystemViewList: React.FC<FileSystemViewListProps> = (props: FileSystemViewListProps) => {
   const { workspaceLocation, fileSystem, basePath, indentationLevel } = props;
 
@@ -62,6 +64,8 @@ const FileSystemViewList: React.FC<FileSystemViewListProps> = (props: FileSystem
     });
   };
 
+  refreshFileView = readDirectory;
+
   React.useEffect(readDirectory, [fileSystem, basePath]);
 
   if (!fileNames || !dirNames) {

src/commons/fileSystemView/FileSystemViewList.tsx

@@ -26,10 +26,13 @@ import {
 } from '../utils/notifications/NotificationsHelper';
 import { AsyncReturnType } from '../utils/TypeHelper';
 import { safeTakeEvery as takeEvery, safeTakeLatest as takeLatest } from './SafeEffects';
+import { FSModule } from 'browserfs/dist/node/core/FS';
+import { rmFilesInDirRecursively, writeFileRecursively } from '../fileSystem/FileSystemUtils';
+import { refreshFileView } from '../fileSystemView/FileSystemViewList';
 
 const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
 const SCOPES =
-  'profile https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.email';
+  'profile https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/drive';
 const UPLOAD_PATH = 'https://www.googleapis.com/upload/drive/v3/files';
 const USER_INFO_PATH = 'https://www.googleapis.com/oauth2/v3/userinfo';
 
@@ -87,10 +90,67 @@ export function* persistenceSaga(): SagaIterator {
     let toastKey: string | undefined;
     try {
       yield call(ensureInitialisedAndAuthorised);
-      const { id, name, picked } = yield call(pickFile, 'Pick a file to open');
+      const { id, name, mimeType, picked } = yield call(pickFile, 
+        'Pick a file/folder to open', 
+        {
+          pickFolders: true
+        }
+        ); // id, name, picked gotten here
       if (!picked) {
         return;
       }
+
+      // Note: for mimeType, text/plain -> file, application/vnd.google-apps.folder -> folder
+
+      if (mimeType === "application/vnd.google-apps.folder") { // handle folders
+        yield call(console.log, "is folder");
+        
+        const fileList = yield call(getFilesOfFolder, id, name); // this needed the extra scope mimetypes to have every file
+        // TODO: add type for each resp?
+        yield call(console.log, "fileList", fileList);
+
+
+
+        const fileSystem: FSModule | null = yield select(
+          (state: OverallState) => state.fileSystem.inBrowserFileSystem
+        );
+        // If the file system is not initialised, do nothing.
+        if (fileSystem === null) {
+          yield call(console.log, "no filesystem!");
+          return;
+        }
+        yield call(console.log, "there is a filesystem");
+
+        // rmdir everything TODO replace everything hardcoded with playground?
+        yield call(rmFilesInDirRecursively, fileSystem, "/playground");
+
+
+        for (const currFile of fileList) {
+          // TODO add code to actually load contents here
+          const contents = yield call([gapi.client.drive.files, 'get'], { fileId: currFile.id, alt: 'media' });
+          yield call(writeFileRecursively, fileSystem, "/playground" + currFile.path, contents.body);
+        }
+
+
+
+
+
+
+
+
+
+
+
+
+
+        // refresh needed
+        yield put(store.dispatch(actions.removeEditorTabsForDirectory("playground", "/"))); // deletes all active tabs
+        yield call(refreshFileView); // refreshes folder view TODO super jank
+
+        return;
+      }
+
+
       const confirmOpen: boolean = yield call(showSimpleConfirmDialog, {
         title: 'Opening from Google Drive',
         contents: (
@@ -112,7 +172,7 @@ export function* persistenceSaga(): SagaIterator {
         intent: Intent.PRIMARY
       });
 
-      const { result: meta } = yield call([gapi.client.drive.files, 'get'], {
+      const { result: meta } = yield call([gapi.client.drive.files, 'get'], { // get fileid here using gapi.client.drive.files
         fileId: id,
         fields: 'appProperties'
       });
@@ -123,12 +183,12 @@ export function* persistenceSaga(): SagaIterator {
       if (activeEditorTabIndex === null) {
         throw new Error('No active editor tab found.');
       }
-      yield put(actions.updateEditorValue('playground', activeEditorTabIndex, contents.body));
+      yield put(actions.updateEditorValue('playground', activeEditorTabIndex, contents.body)); // CONTENTS OF SELECTED FILE LOADED HERE
       yield put(actions.playgroundUpdatePersistenceFile({ id, name, lastSaved: new Date() }));
       if (meta && meta.appProperties) {
         yield put(
           actions.chapterSelect(
-            parseInt(meta.appProperties.chapter || '4', 10) as Chapter,
+            parseInt(meta.appProperties.chapter || '4', 10) as Chapter, // how does this work??
             meta.appProperties.variant || Variant.DEFAULT,
             'playground'
           )
@@ -452,6 +512,7 @@ function pickFile(
         .setCallback((data: any) => {
           switch (data[google.picker.Response.ACTION]) {
             case google.picker.Action.PICKED: {
+              console.log("data", data);
               const { id, name, mimeType, parentId } = data.docs[0];
               res({ id, name, mimeType, parentId, picked: true });
               break;
@@ -468,6 +529,53 @@ function pickFile(
   });
 }
 
+async function getFilesOfFolder( // recursively get files
+  folderId: string,
+  currFolderName: string,
+  currPath: string = '' // pass in name of folder picked
+) {
+  console.log(folderId, currPath, currFolderName);
+  let fileList: gapi.client.drive.File[] | undefined;
+  
+  await gapi.client.drive.files.list({
+    q: '\'' + folderId + '\'' + ' in parents and trashed = false',
+  }).then(res => {
+    fileList = res.result.files
+  });
+
+  console.log("fileList", fileList);
+
+  if (!fileList || fileList.length === 0) {
+    return [{
+      name: currFolderName,
+      id: folderId,
+      path: currPath + '/' + currFolderName,
+      isFile: false
+    }];
+  }
+
+
+  let ans: any[] = []; // TODO: add type for each resp?
+  for (const currFile of fileList) {
+    if (currFile.mimeType === "application/vnd.google-apps.folder") { // folder
+      ans = ans.concat(await 
+        getFilesOfFolder(currFile.id!, currFile.name!, currPath + '/' + currFolderName)
+      );
+    } 
+    else { // file
+      console.log("found file " + currFile.name);
+      ans.push({
+        name: currFile.name,
+        id: currFile.id,
+        path: currPath + '/' + currFolderName + '/' + currFile.name,
+        isFile: true
+      });
+    } 
+  }
+
+  return ans;
+}
+
 function createFile(
   filename: string,
   parent: string,

src/commons/sagas/PersistenceSaga.tsx

@@ -13,7 +13,7 @@ import {
 import { GENERATE_LZ_STRING, SHORTEN_URL } from '../../features/playground/PlaygroundTypes';
 import { OverallState } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
-import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/utils';
+import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/FileSystemUtils';
 import Constants from '../utils/Constants';
 import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { EditorTabState } from '../workspace/WorkspaceTypes';

src/commons/sagas/PlaygroundSaga.ts

@@ -46,7 +46,7 @@ import {
 } from '../application/types/InterpreterTypes';
 import { Library, Testcase, TestcaseType, TestcaseTypes } from '../assessment/AssessmentTypes';
 import { Documentation } from '../documentation/Documentation';
-import { retrieveFilesInWorkspaceAsRecord, writeFileRecursively } from '../fileSystem/utils';
+import { retrieveFilesInWorkspaceAsRecord, writeFileRecursively } from '../fileSystem/FileSystemUtils';
 import { SideContentType } from '../sideContent/SideContentTypes';
 import { actions } from '../utils/ActionsHelper';
 import DisplayBufferService from '../utils/DisplayBufferService';

src/commons/sagas/WorkspaceSaga.ts

@@ -5,7 +5,7 @@ import { Store } from 'redux';
 
 import { OverallState } from '../../commons/application/ApplicationTypes';
 import { setInBrowserFileSystem } from '../../commons/fileSystem/FileSystemActions';
-import { writeFileRecursively } from '../../commons/fileSystem/utils';
+import { writeFileRecursively } from '../../commons/fileSystem/FileSystemUtils';
 import { EditorTabState, WorkspaceManagerState } from '../../commons/workspace/WorkspaceTypes';
 
 /**