Integration of folders mode with Google Drive/GitHub

package.json

@@ -50,8 +50,8 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
-    "js-slang": "^1.0.69",
     "java-slang": "^1.0.13",
+    "js-slang": "^1.0.69",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",
@@ -60,6 +60,7 @@
     "mdast-util-to-hast": "^13.0.0",
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
+    "octokit-commit-multiple-files": "^5.0.2",
     "phaser": "^3.55.2",
     "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
@@ -106,9 +107,9 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/acorn": "^6.0.0",
     "@types/gapi": "^0.0.44",
-    "@types/gapi.auth2": "^0.0.57",
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive": "^3.0.14",
+    "@types/google.accounts": "^0.0.14",
     "@types/google.picker": "^0.0.39",
     "@types/jest": "^29.0.0",
     "@types/js-yaml": "^4.0.5",

public/index.html

@@ -9,6 +9,7 @@
   <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
+  <script type="text/javascript" src="https://accounts.google.com/gsi/client"></script>
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/commons/application/ApplicationTypes.ts

@@ -362,8 +362,8 @@ const getDefaultLanguageConfig = (): SALanguage => {
 export const defaultLanguageConfig: SALanguage = getDefaultLanguageConfig();
 
 export const defaultPlayground: PlaygroundState = {
-  githubSaveInfo: { repoName: '', filePath: '' },
-  languageConfig: defaultLanguageConfig
+  languageConfig: defaultLanguageConfig,
+  isFileSystemContextMenusDisabled: false
 };
 
 export const defaultEditorValue = '// Type your program in here!';
@@ -539,6 +539,7 @@ export const defaultSession: SessionState = {
   assessmentOverviews: undefined,
   agreedToResearch: undefined,
   sessionId: Date.now(),
+  googleAccessToken: undefined,
   githubOctokitObject: { octokit: undefined },
   gradingOverviews: undefined,
   students: undefined,
@@ -570,7 +571,10 @@ export const createDefaultStoriesEnv = (
 });
 
 export const defaultFileSystem: FileSystemState = {
-  inBrowserFileSystem: null
+  inBrowserFileSystem: null,
+  persistenceFileArray: [],
+  lastEditedFilePath: '',
+  refreshFileViewKey: 0
 };
 
 export const defaultSideContent: SideContentState = {

src/commons/application/actions/SessionActions.ts

@@ -50,6 +50,7 @@ import {
   FETCH_USER_AND_COURSE,
   LOGIN,
   LOGIN_GITHUB,
+  LOGIN_GOOGLE,
   LOGOUT_GITHUB,
   LOGOUT_GOOGLE,
   NotificationConfiguration,
@@ -58,13 +59,15 @@ import {
   REAUTOGRADE_ANSWER,
   REAUTOGRADE_SUBMISSION,
   REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN,
+  REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN,
   SET_ADMIN_PANEL_COURSE_REGISTRATIONS,
   SET_ASSESSMENT_CONFIGURATIONS,
   SET_CONFIGURABLE_NOTIFICATION_CONFIGS,
   SET_COURSE_CONFIGURATION,
   SET_COURSE_REGISTRATION,
   SET_GITHUB_ACCESS_TOKEN,
   SET_GITHUB_OCTOKIT_OBJECT,
+  SET_GOOGLE_ACCESS_TOKEN,
   SET_GOOGLE_USER,
   SET_NOTIFICATION_CONFIGS,
   SET_TOKENS,
@@ -161,6 +164,8 @@ export const fetchStudents = createAction(FETCH_STUDENTS, () => ({ payload: {} }
 
 export const login = createAction(LOGIN, (providerId: string) => ({ payload: providerId }));
 
+export const loginGoogle = createAction(LOGIN_GOOGLE, () => ({ payload: {} }));
+
 export const logoutGoogle = createAction(LOGOUT_GOOGLE, () => ({ payload: {} }));
 
 export const loginGitHub = createAction(LOGIN_GITHUB, () => ({ payload: {} }));
@@ -205,6 +210,11 @@ export const setAdminPanelCourseRegistrations = createAction(
 
 export const setGoogleUser = createAction(SET_GOOGLE_USER, (user?: string) => ({ payload: user }));
 
+export const setGoogleAccessToken = createAction(
+  SET_GOOGLE_ACCESS_TOKEN,
+  (accessToken?: string) => ({ payload: accessToken })
+);
+
 export const setGitHubOctokitObject = createAction(
   SET_GITHUB_OCTOKIT_OBJECT,
   (authToken?: string) => ({ payload: generateOctokitInstance(authToken || '') })
@@ -219,6 +229,11 @@ export const removeGitHubOctokitObjectAndAccessToken = createAction(
   () => ({ payload: {} })
 );
 
+export const removeGoogleUserAndAccessToken = createAction(
+  REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN,
+  () => ({ payload: {} })
+);
+
 export const submitAnswer = createAction(
   SUBMIT_ANSWER,
   (id: number, answer: string | number | ContestEntry[]) => ({ payload: { id, answer } })

src/commons/application/reducers/SessionsReducer.ts

@@ -9,6 +9,7 @@ import { defaultSession } from '../ApplicationTypes';
 import { LOG_OUT } from '../types/CommonsTypes';
 import {
   REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN,
+  REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN,
   SessionState,
   SET_ADMIN_PANEL_COURSE_REGISTRATIONS,
   SET_ASSESSMENT_CONFIGURATIONS,
@@ -17,6 +18,7 @@ import {
   SET_COURSE_REGISTRATION,
   SET_GITHUB_ACCESS_TOKEN,
   SET_GITHUB_OCTOKIT_OBJECT,
+  SET_GOOGLE_ACCESS_TOKEN,
   SET_GOOGLE_USER,
   SET_NOTIFICATION_CONFIGS,
   SET_TOKENS,
@@ -54,6 +56,11 @@ export const SessionsReducer: Reducer<SessionState, SourceActionType> = (
         ...state,
         googleUser: action.payload
       };
+    case SET_GOOGLE_ACCESS_TOKEN:
+      return {
+        ...state,
+        googleAccessToken: action.payload
+      };
     case SET_TOKENS:
       return {
         ...state,
@@ -156,6 +163,12 @@ export const SessionsReducer: Reducer<SessionState, SourceActionType> = (
         githubOctokitObject: { octokit: undefined },
         githubAccessToken: undefined
       };
+    case REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN:
+      return {
+        ...state,
+        googleUser: undefined,
+        googleAccessToken: undefined
+      };
     default:
       return state;
   }

src/commons/application/types/SessionTypes.ts

@@ -31,6 +31,7 @@ export const FETCH_STUDENTS = 'FETCH_STUDENTS';
 export const FETCH_TEAM_FORMATION_OVERVIEW = 'FETCH_TEAM_FORMATION_OVERVIEW';
 export const FETCH_TEAM_FORMATION_OVERVIEWS = 'FETCH_TEAM_FORMATION_OVERVIEWS';
 export const LOGIN = 'LOGIN';
+export const LOGIN_GOOGLE = 'LOGIN_GOOGLE';
 export const LOGOUT_GOOGLE = 'LOGOUT_GOOGLE';
 export const LOGIN_GITHUB = 'LOGIN_GITHUB';
 export const LOGOUT_GITHUB = 'LOGOUT_GITHUB';
@@ -42,6 +43,7 @@ export const SET_COURSE_REGISTRATION = 'SET_COURSE_REGISTRATION';
 export const SET_ASSESSMENT_CONFIGURATIONS = 'SET_ASSESSMENT_CONFIGURATIONS';
 export const SET_ADMIN_PANEL_COURSE_REGISTRATIONS = 'SET_ADMIN_PANEL_COURSE_REGISTRATIONS';
 export const SET_GOOGLE_USER = 'SET_GOOGLE_USER';
+export const SET_GOOGLE_ACCESS_TOKEN = 'SET_GOOGLE_ACCESS_TOKEN';
 export const SET_GITHUB_OCTOKIT_OBJECT = 'SET_GITHUB_OCTOKIT_OBJECT';
 export const SET_GITHUB_ACCESS_TOKEN = 'SET_GITHUB_ACCESS_TOKEN';
 export const SUBMIT_ANSWER = 'SUBMIT_ANSWER';
@@ -52,6 +54,7 @@ export const REAUTOGRADE_SUBMISSION = 'REAUTOGRADE_SUBMISSION';
 export const REAUTOGRADE_ANSWER = 'REAUTOGRADE_ANSWER';
 export const REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN =
   'REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN';
+export const REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN = 'REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN';
 export const UNPUBLISH_GRADING = 'UNPUBLISH_GRADING';
 export const UNSUBMIT_SUBMISSION = 'UNSUBMIT_SUBMISSION';
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS';
@@ -134,6 +137,7 @@ export type SessionState = {
   readonly gradings: Map<number, GradingQuery>;
   readonly notifications: Notification[];
   readonly googleUser?: string;
+  readonly googleAccessToken?: string;
   readonly githubOctokitObject: { octokit: Octokit | undefined };
   readonly githubAccessToken?: string;
   readonly remoteExecutionDevices?: Device[];

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -423,7 +423,14 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     const resetWorkspaceOptions = assertType<WorkspaceState>()({
       autogradingResults: options.autogradingResults ?? [],
       // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
-      editorTabs: [{ value: options.editorValue ?? '', highlightedLines: [], breakpoints: [] }],
+      editorTabs: [
+        {
+          value: options.editorValue ?? '',
+          highlightedLines: [],
+          breakpoints: [],
+          githubSaveInfo: { repoName: '', filePath: '' }
+        }
+      ],
       programPrependValue: options.programPrependValue ?? '',
       programPostpendValue: options.programPostpendValue ?? '',
       editorTestcases: options.editorTestcases ?? []

src/commons/controlBar/ControlBarGoogleDriveButtons.tsx

@@ -14,33 +14,48 @@ const stateToIntent: { [state in PersistenceState]: Intent } = {
 
 type Props = {
   isFolderModeEnabled: boolean;
+  workspaceLocation: string;
   loggedInAs?: string;
-  currentFile?: PersistenceFile;
+  accessToken?: string;
+  currPersistenceFile?: PersistenceFile;
   isDirty?: boolean;
+  isGithubSynced?: boolean;
   onClickOpen?: () => any;
   onClickSave?: () => any;
+  onClickSaveAll?: () => any;
   onClickSaveAs?: () => any;
   onClickLogOut?: () => any;
+  onClickLogIn?: () => any;
   onPopoverOpening?: () => any;
 };
 
 export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
   const { isMobileBreakpoint } = useResponsive();
-  const state: PersistenceState = props.currentFile
+  const state: PersistenceState = props.currPersistenceFile
     ? props.isDirty
       ? 'DIRTY'
       : 'SAVED'
     : 'INACTIVE';
+  const isNotPlayground = props.workspaceLocation !== 'playground';
+  const GithubSynced = props.isGithubSynced;
   const mainButton = (
     <ControlButton
-      label={(props.currentFile && props.currentFile.name) || 'Google Drive'}
+      label={
+        (!GithubSynced && props.currPersistenceFile && props.currPersistenceFile.name) ||
+        'Google Drive'
+      }
       icon={IconNames.CLOUD}
-      options={{ intent: stateToIntent[state] }}
-      isDisabled={props.isFolderModeEnabled}
+      options={GithubSynced ? undefined : { intent: stateToIntent[state] }}
+      isDisabled={isNotPlayground || GithubSynced}
     />
   );
   const openButton = (
-    <ControlButton label="Open" icon={IconNames.DOCUMENT_OPEN} onClick={props.onClickOpen} />
+    <ControlButton
+      label="Open"
+      icon={IconNames.DOCUMENT_OPEN}
+      onClick={props.onClickOpen}
+      isDisabled={props.accessToken ? false : true}
+    />
   );
   const saveButton = (
     <ControlButton
@@ -52,15 +67,34 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   const saveAsButton = (
-    <ControlButton label="Save as" icon={IconNames.SEND_TO} onClick={props.onClickSaveAs} />
+    <ControlButton
+      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.onClickSaveAll}
+      // disable if persistenceObject is not a folder
+      isDisabled={props.accessToken ? false : true}
+    />
   );
-  const logoutButton = props.loggedInAs && (
-    <Tooltip content={`Logged in as ${props.loggedInAs}`}>
-      <ControlButton label="Log out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
+
+  const loginButton = props.accessToken ? (
+    <Tooltip content={`Logged in as ${props.loggedInAs}`} disabled={!props.loggedInAs}>
+      <ControlButton label="Log Out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
     </Tooltip>
+  ) : (
+    <ControlButton label="Log In" icon={IconNames.LOG_IN} onClick={props.onClickLogIn} />
   );
-  const tooltipContent = props.isFolderModeEnabled
-    ? 'Currently unsupported in Folder mode'
+
+  const tooltipContent = isNotPlayground
+    ? 'Currently unsupported in non playground workspaces'
     : undefined;
 
   return (
@@ -73,13 +107,14 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
               {openButton}
               {saveButton}
               {saveAsButton}
-              {logoutButton}
+              {saveAllButton}
+              {loginButton}
             </ButtonGroup>
           </div>
         }
         onOpening={props.onPopoverOpening}
         popoverClassName={Classes.POPOVER_DISMISS}
-        disabled={props.isFolderModeEnabled}
+        disabled={isNotPlayground || GithubSynced}
       >
         {mainButton}
       </Popover>

src/commons/controlBar/ControlBarToggleFolderModeButton.tsx

@@ -19,7 +19,7 @@ export const ControlBarToggleFolderModeButton: React.FC<Props> = ({
 }) => {
   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 (
@@ -31,7 +31,8 @@ export const ControlBarToggleFolderModeButton: React.FC<Props> = ({
           iconColor: isFolderModeEnabled ? Colors.BLUE4 : undefined
         }}
         onClick={toggleFolderMode}
-        isDisabled={isSessionActive || isPersistenceActive}
+        isDisabled={false}
+        //isDisabled={isSessionActive || isPersistenceActive}
       />
     </Tooltip>
   );