Replace deprecated gapi.auth2 with GIS

package.json

@@ -111,9 +111,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

@@ -537,6 +537,7 @@ export const defaultSession: SessionState = {
   assessmentOverviews: undefined,
   agreedToResearch: undefined,
   sessionId: Date.now(),
+  googleAccessToken: undefined,
   githubOctokitObject: { octokit: undefined },
   gradingOverviews: undefined,
   students: undefined,

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,13 +9,15 @@ import { SourceActionType } from '../../utils/ActionsHelper';
 import { logOut } from '../actions/CommonsActions';
 import {
   removeGitHubOctokitObjectAndAccessToken,
+  removeGoogleUserAndAccessToken,
   setAdminPanelCourseRegistrations,
   setAssessmentConfigurations,
   setConfigurableNotificationConfigs,
   setCourseConfiguration,
   setCourseRegistration,
   setGitHubAccessToken,
   setGitHubOctokitObject,
+  setGoogleAccessToken,
   setGoogleUser,
   setNotificationConfigs,
   setTokens,
@@ -112,6 +114,13 @@ const newSessionsReducer = createReducer(defaultSession, builder => {
     .addCase(remoteExecUpdateSession, (state, action) => {
       state.remoteExecutionSession = action.payload;
     })
+    .addCase(setGoogleAccessToken, (state, action) => {
+      state.googleAccessToken = action.payload;
+    })
+    .addCase(removeGoogleUserAndAccessToken, (state, action) => {
+      state.googleUser = undefined;
+      state.googleAccessToken = undefined;
+    })
     .addCase(removeGitHubOctokitObjectAndAccessToken, (state, action) => {
       state.githubOctokitObject = { octokit: undefined };
       state.githubAccessToken = undefined;

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: { [id: number]: GradingQuery };
   readonly notifications: Notification[];
   readonly googleUser?: string;
+  readonly googleAccessToken?: string;
   readonly githubOctokitObject: { octokit: Octokit | undefined };
   readonly githubAccessToken?: string;
   readonly remoteExecutionDevices?: Device[];

src/commons/controlBar/ControlBarGoogleDriveButtons.tsx

@@ -15,12 +15,14 @@ const stateToIntent: { [state in PersistenceState]: Intent } = {
 type Props = {
   isFolderModeEnabled: boolean;
   loggedInAs?: string;
+  accessToken?: string;
   currentFile?: PersistenceFile;
   isDirty?: boolean;
   onClickOpen?: () => any;
   onClickSave?: () => any;
   onClickSaveAs?: () => any;
   onClickLogOut?: () => any;
+  onClickLogIn?: () => any;
   onPopoverOpening?: () => any;
 };
 
@@ -40,7 +42,12 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   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,13 +59,22 @@ 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 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'
     : undefined;
@@ -73,7 +89,7 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
               {openButton}
               {saveButton}
               {saveAsButton}
-              {logoutButton}
+              {loginButton}
             </ButtonGroup>
           </div>
         }