Rsdev 258 reactivate google drive (#72)

Reactivate the google drive integration by replacing deprecated google apis.

Author: rs-fraser

src/main/java/com/researchspace/webapp/controller/StructuredDocumentController.java

@@ -581,6 +581,10 @@ public ModelAndView openDocument(
     model.addAttribute("inventoryAvailable", inventoryEnabled);
     model.addAttribute("enforce_ontologies", anyGroupEnforcesOntologies(user));
     model.addAttribute("allow_bioOntologies", allGroupsAllowBioOntologies(user));
+
+    boolean isGoogleDriveAppEnabled =
+        integrationsHandler.getIntegration(user, "GOOGLEDRIVE").isEnabled();
+    model.addAttribute("isGoogleDriveAppEnabled", isGoogleDriveAppEnabled);
     String view =
         msTeamsDocView
             ? STRUCTURED_DOCUMENT_MS_TEAMS_SIMPLE_VIEW_NAME

src/main/webapp/common/header.jsp

@@ -1,5 +1,10 @@
 <%@ include file="/common/taglibs.jsp"%>
 <meta name="google-signin-client_id" content="731959816562-p2igqsv375nta4bd0g3c3tkq5r90kpg5.apps.googleusercontent.com">
+<c:if test="${isGoogleDriveAppEnabled}">
+  <script src="https://accounts.google.com/gsi/client" async defer></script>
+  <script src="https://apis.google.com/js/api.js" async defer></script>
+</c:if>
+
 <rst:hasDeploymentProperty name="cloud" value="true">
   <script src="<c:url value='/scripts/pages/signup/google-signin.js'/>"></script>
   <script src="https://accounts.google.com/gsi/client?onload=onLoad" async defer></script>

src/main/webapp/scripts/externalTinymcePlugins/googledrive/plugin.min.js

@@ -1,77 +1,89 @@
-/**
- * Google Drive plugin Author: dave Date : 16/11/2014
+/*
+TinyMCE plugin for Google Drive.
+
+Uses the front-end Google API Client (gapi) and Google sign-in (gsi) libraries,
+via scripts imported in `header.jsp`.
  */
 
-var googleDriveEditor;
-var googleDriveUrl;
+let accessToken;
 
-function authorizeGoogleDriveLink() {
-	if (typeof window.gapi === 'object') {
-		window.gapi.auth.authorize({
-			'client_id': gdClientId,
-			'scope': gdScope,
-			'immediate': false
-		}, handleGoogleDriveAuthLinkResult);
+async function insertFromGoogleDrive() {
+	if(!gdClientId || !gdScope){
+		apprise("Missing required system properties for google drive "
+				+ "integration. Please speak to your rspace administrator");
 	} else {
-		apprise('Unable to contact Google Drive.  Please try again later or ensure that your network connection is active and reload the page.');
+		await gapi.load('client:picker');
+
+		const client = await google.accounts.oauth2.initTokenClient({
+			client_id: gdClientId,
+			scope: gdScope,
+			callback: onTokenResponse,
+			error_callback: onTokenResponseError,
+		});
+
+		if(!accessToken){
+			// show consent screen for user login and authorisation
+			client.requestAccessToken({prompt: 'consent'});
+		} else {
+			// skip consent screen when user has already consented and has a token
+			client.requestAccessToken({prompt: ''});
+		}
 	}
 }
 
-function handleGoogleDriveAuthLinkResult(authResult) {
-	if (authResult && !authResult.error) {
-		gdOauthToken = authResult.access_token;
-		createTinyMCEGoogleDrivePicker(googleDrivePickerLinkCallback);
-	}
+function onTokenResponse(response){
+	accessToken = response.access_token;
+	showPicker();
 }
 
-function createTinyMCEGoogleDrivePicker(callback) {
-	if (gdPickerApiLoaded && gdOauthToken) {
-		var picker = new google.picker.PickerBuilder()
-			.addView(google.picker.ViewId.DOCS)
-			.setOAuthToken(gdOauthToken)
-			.setDeveloperKey(gdDeveloperKey)
-			.setCallback(callback)
-			.build();
-		picker.setVisible(true);
-	}
+function onTokenResponseError(response){
+	apprise('Unable to contact Google Drive. Please try again later or '
+			+ 'ensure that your network connection is active and reload the page.');
 }
 
-function googleDrivePickerLinkCallback(data) {
-	var googleDriveLinkUrl = 'nothing';
-	if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
-		var doc = data[google.picker.Response.DOCUMENTS][0];
-		googleDriveLinkUrl = doc[google.picker.Document.EMBEDDABLE_URL] || doc[google.picker.Document.URL];
+function showPicker() {
+	picker = new google.picker.PickerBuilder()
+		.setDeveloperKey(gdDeveloperKey)
+		.setAppId(gdClientId)
+		.setOAuthToken(accessToken)
+		.addView(google.picker.ViewId.DOCS)
+		.setCallback(pickerCallback)
+		.build();
+	picker.setVisible(true);
+}
 
-		var name = doc[google.picker.Document.NAME];
+/*
+When a Google Drive file is picked, grab some metadata and embed a link in the
+rspace document.
+ */
+function pickerCallback(data) {
+	if (data.action === google.picker.Action.PICKED) {
+		const doc = data[google.picker.Response.DOCUMENTS][0];
+		googleDriveLinkUrl = doc[google.picker.Document.EMBEDDABLE_URL] || doc[google.picker.Document.URL];
 
-		var extension = RS.getFileExtension(name);
-		var iconPath = RS.getIconPathForExtension(extension);
-		var docId = doc.id;
+		const name = doc[google.picker.Document.NAME];
+		const extension = RS.getFileExtension(name);
+		const iconPath = RS.getIconPathForExtension(extension);
+		const docId = doc.id;
 
-		var json = {
+		const json = {
 			id: 'googledrive-' + docId,
 			fileStore: 'Google Drive',
 			recordURL: googleDriveLinkUrl,
 			name: name,
 			iconPath: iconPath,
 			badgeIconPath: '/images/icons/drive_icon.png'
 		};
-
 		RS.insertTemplateIntoTinyMCE('insertedExternalDocumentTemplate', json);
 	}
 }
 
 tinymce.PluginManager.add('googledrive', function (editor, url) {
-
-	googleDriveEditor = editor;
-	googleDriveUrl = url;
-
-	// Add command to open the comment dialog.htm
 	editor.addCommand('cmdGoogleDrive', function () {
-		authorizeGoogleDriveLink();
+		insertFromGoogleDrive();
 	});
 
-	// Add a button that opens a window
+	// adds editor button
 	editor.ui.registry.addButton('googledrive', {
 		tooltip: 'Insert from Google Drive',
 		icon: 'google_drive',
@@ -80,7 +92,7 @@ tinymce.PluginManager.add('googledrive', function (editor, url) {
 		}
 	});
 
-	// Adds a menu item to the insert menu
+	// adds From Google Drive menu item
 	editor.ui.registry.addMenuItem('optGoogleDrive', {
 		text: 'From Google Drive',
 		icon: 'google_drive',
@@ -89,6 +101,7 @@ tinymce.PluginManager.add('googledrive', function (editor, url) {
 		}
 	});
 
+	// adds menu item to Insert menu
   if(!window.insertActions) window.insertActions = new Map();
   window.insertActions.set("optGoogleDrive", {
     text: 'From Google Drive',

src/main/webapp/scripts/pages/workspace/mediaGalleryManager.js

@@ -26,8 +26,8 @@ var isInSearch = false; //This is used to keep track and reapply filters when so
 var gdDeveloperKey = '';
 // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
 var gdClientId = "";
-// Scope to use to access user's photos.
-var gdScope = ['https://www.googleapis.com/auth/drive'];
+// Scope to use to access user's files.
+var gdScope = 'https://www.googleapis.com/auth/drive'
 var gdPickerApiLoaded = false;
 var gdOauthToken;
 
@@ -1695,8 +1695,7 @@ function appriseNoConnection(provider) {
 }
 
 function onGoogleDriveAPILoad() {
-  // gapi.load('auth', {'callback': onAuthApiLoad});
-  gapi.load('auth', {});
+  gapi.load('auth2', {});
   gapi.load('picker', { 'callback': onGoogleDrivePickerApiLoad });
 }