Added functionality so the GD menu item and select folder are not enabled until oauth token is loaded (#2571)

* Removed a call to a function

* Updates to disable the menu and select folder button until the token is loaded

Author: bp-cos

lib/osf-components/addon/components/file-browser/add-new/component.ts

@@ -46,6 +46,10 @@ export default class FileBrowser extends Component<Args> {
         return this.isWBGoogleDrive;
     }
 
+    get isGoogleAuthorized(): boolean {
+        return this.googlePickerComponent?.isGFPDisabled || false;
+    }
+
     @action
     registerChild(child: GoogleFilePickerWidget) {
         this.googlePickerComponent = child; // Store the child's instance
@@ -55,7 +59,7 @@ export default class FileBrowser extends Component<Args> {
     openGoogleFilePicker(dropdown: any) {
         dropdown.close();
         if (this.googlePickerComponent) {
-            this.googlePickerComponent.openPicker();
+            this.googlePickerComponent.createPicker();
         }
     }
 }

lib/osf-components/addon/components/file-browser/add-new/template.hbs

@@ -40,6 +40,7 @@
                     data-test-add-google-drive
                     @layout='fake-link'
                     {{on 'click' (fn this.openGoogleFilePicker dropdown)}}
+                    disabled={{this.isGoogleAuthorized}}
                 >
                     {{t 'osf-components.file-browser.add-from-drive'}}
                 </Button>

lib/osf-components/addon/components/google-file-picker-widget/component.ts

@@ -66,6 +66,7 @@ export default class GoogleFilePickerWidget extends Component<Args> {
     @tracked isFolderPicker = false;
     @tracked openGoogleFilePicker = false;
     @tracked visible = false;
+    @tracked isGFPDisabled = true;
     pickerInited = false;
     selectFolder: any = undefined;
     accessToken!: string;
@@ -120,6 +121,7 @@ export default class GoogleFilePickerWidget extends Component<Args> {
             authorizedStorageAccount.serializeOauthToken = true;
             const token = await authorizedStorageAccount.save();
             this.accessToken = token.oauthToken;
+            this.isGFPDisabled = this.accessToken ? false : true;
         }
     }
 
@@ -145,14 +147,6 @@ export default class GoogleFilePickerWidget extends Component<Args> {
         }
     }
 
-    @action
-    openPicker() {
-        // Logic for opening Google File Picker here
-        if (this.handleAuthClick) {
-            this.handleAuthClick();
-        }
-    }
-
     @action
     registerComponent() {
         if (this.args.onRegisterChild) {
@@ -179,29 +173,15 @@ export default class GoogleFilePickerWidget extends Component<Args> {
     */
     async initializePicker() {
         this.pickerInited = true;
-        this.maybeEnableButtons();
-    }
-
-    /**
-    * Enables user interaction after all libraries are loaded.
-    */
-    maybeEnableButtons() {
-        if (this.pickerInited && this.isFolderPicker) {
+        if (this.isFolderPicker) {
             this.visible = true;
         }
     }
 
-    /**
-    *  Sign in the user upon button click.
-    */
-    @action
-    handleAuthClick() {
-        this.createPicker();
-    }
-
     /**
     *  Create and render a Picker object for searching images.
     */
+    @action
     createPicker() {
         const googlePickerView = new window.google.picker.DocsView(window.google.picker.ViewId.DOCS);
         googlePickerView.setSelectFolderEnabled(true);

lib/osf-components/addon/components/google-file-picker-widget/template.hbs

@@ -16,7 +16,8 @@ local-class='google-file-picker-container {{if this.isMobile 'mobile'}}'
         </div>
         <div local-class='action-container'>
             <button class='btn btn-primary btn-medium' local-class='authorize-button {{if this.visible 'visible'}}' type='button' id='authorize_button' 
-                {{on 'click' (action this.handleAuthClick)}}
+            disabled={{this.isGFPDisabled}}
+                {{on 'click' (action this.createPicker)}}
             >
                 {{t 'addons.configure.google-file-picker.select-root-folder'}}
             </button>