[ENG-8505] Added the ability to get the oauth token for the GFP (CenterForOpenScience#297)

* chore(mocks): added global testing mocks and a new osftestingstoremodule * chore(tests): Added tests to continue the process * feat(code): added the condition for google drive * feat(google-file-picker): Added the initial google file picker component * feat(GFP-service): add the google file picker service * feat(service): added the google file picker download service * chore(npm): added strict typing for the google file picker * feat(component): added more functionality to the component with tests * feat(eng-8505): Added more logic to get the oauth token from the server * chore(test-updates): updated states, services and tests * chore(unit-tests): Added more tdd tests to get the oauth token * feat(oauth-token): added oauth token retrieval * chore(refactor): updated a model to be more explicit in the name * chore(pr review): Updates to handle comments from a PR

Author: bp-cos

eslint.config.js

@@ -90,6 +90,7 @@ module.exports = tseslint.config(
  files: ['**/*.spec.ts'],
  rules: {
  '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-empty-function': 'off',
  },
  }
 );

package-lock.json

@@ -67,6 +67,8 @@
  "@commitlint/cli": "^19.7.1",
  "@commitlint/config-conventional": "^19.7.1",
  "@compodoc/compodoc": "^1.1.26",
+ "@types/gapi": "^0.0.47",
+ "@types/gapi.auth2": "^0.0.61",
  "@types/jest": "^29.5.14",
  "@types/markdown-it": "^14.1.2",
  "angular-eslint": "19.1.0",

package.json

@@ -0,0 +1,10 @@
+import type gapi from 'gapi-script'; // or just `import gapi from 'gapi-script';`
+
+declare global {
+ interface Window {
+ gapi: typeof gapi;
+ google: {
+ picker: typeof google.picker;
+ };
+ }
+}

src/@types/global.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+
+import { environment } from 'src/environments/environment';
+
+export const ENVIRONMENT = new InjectionToken<typeof environment>('App Environment', {
+ providedIn: 'root',
+ factory: () => environment,
+});

src/app/core/constants/environment.token.ts

@@ -73,7 +73,7 @@ describe('Component: Configure Addon', () => {
  });
 
  it('should validate the constuctor values', () => {
- expect(component.storageAddon()).toBeUndefined();
+ expect(component.storageAddon()).toBeNull();
  expect(component.addon()).toEqual(
  Object({
  attributes: {

src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts

@@ -76,7 +76,7 @@ export class ConfigureAddonComponent implements OnInit {
  * Signal representing the currently selected `Addon` from the list of available storage addons.
  * This value updates reactively as the selection changes.
  */
- public storageAddon = signal<AddonModel | undefined>(undefined);
+ public storageAddon = signal<AddonModel | null>(null);
  /**
  * Signal representing the currently selected and configured storage addon model.
  * This may be `null` if no addon has been configured.
@@ -128,9 +128,7 @@ export class ConfigureAddonComponent implements OnInit {
 
  if (addon) {
  this.storageAddon.set(
- this.store.selectSnapshot((state) =>
- AddonsSelectors.getStorageAddon(state.addons, addon.externalStorageServiceId || '')
- )
+ this.store.selectSnapshot(AddonsSelectors.getStorageAddon(addon.externalStorageServiceId || ''))
  );
 
  this.addon.set(addon);

src/app/features/project/addons/components/configure-addon/configure-addon.component.ts

@@ -18,12 +18,13 @@ import { AddonConfigMap } from '@osf/features/project/addons/utils';
 import { SubHeaderComponent } from '@osf/shared/components';
 import { ProjectAddonsStepperValue } from '@osf/shared/enums';
 import { getAddonTypeString } from '@osf/shared/helpers';
+import { AuthorizedAccountModel } from '@osf/shared/models/addons/authorized-account.model';
 import {
  AddonSetupAccountFormComponent,
  AddonTermsComponent,
  FolderSelectorComponent,
 } from '@shared/components/addons';
-import { AddonModel, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
+import { AddonModel, AddonTerm, AuthorizedAddonRequestJsonApi } from '@shared/models';
 import { AddonDialogService, AddonFormService, AddonOperationInvocationService, ToastService } from '@shared/services';
 import {
  AddonsSelectors,
@@ -74,9 +75,9 @@ export class ConnectConfiguredAddonComponent {
  protected readonly stepper = viewChild(Stepper);
  protected accountNameControl = new FormControl('');
  protected terms = signal<AddonTerm[]>([]);
- protected addon = signal<AddonModel | AuthorizedAddon | null>(null);
+ protected addon = signal<AddonModel | AuthorizedAccountModel | null>(null);
  protected addonAuthUrl = signal<string>('/settings/addons');
- protected currentAuthorizedAddonAccounts = signal<AuthorizedAddon[]>([]);
+ protected currentAuthorizedAddonAccounts = signal<AuthorizedAccountModel[]>([]);
  protected chosenAccountId = signal('');
  protected chosenAccountName = signal('');
  protected selectedRootFolderId = signal('');
@@ -114,7 +115,6 @@ export class ConnectConfiguredAddonComponent {
 
  protected resourceUri = computed(() => {
  const id = this.route.parent?.parent?.snapshot.params['id'];
-
  return `${environment.webUrl}/${id}`;
  });
 
@@ -128,7 +128,7 @@ export class ConnectConfiguredAddonComponent {
  });
 
  constructor() {
- const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as AddonModel | AuthorizedAddon;
+ const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as AddonModel | AuthorizedAccountModel;
  if (!addon) {
  this.router.navigate([`${this.baseUrl()}/addons`]);
  }
@@ -243,7 +243,7 @@ export class ConnectConfiguredAddonComponent {
 
  private processAuthorizedAddons(
  addonConfig: AddonConfigMap[keyof AddonConfigMap],
- currentAddon: AddonModel | AuthorizedAddon
+ currentAddon: AddonModel | AuthorizedAccountModel
  ) {
  const authorizedAddons = addonConfig.getAuthorizedAddons();
  const matchingAddons = this.findMatchingAddons(authorizedAddons, currentAddon);
@@ -261,9 +261,9 @@ export class ConnectConfiguredAddonComponent {
  }
 
  private findMatchingAddons(
- authorizedAddons: AuthorizedAddon[],
- currentAddon: AddonModel | AuthorizedAddon
- ): AuthorizedAddon[] {
+ authorizedAddons: AuthorizedAccountModel[],
+ currentAddon: AddonModel | AuthorizedAccountModel
+ ): AuthorizedAccountModel[] {
  return authorizedAddons.filter((addon) => addon.externalServiceName === currentAddon.externalServiceName);
  }
 

src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
 
-import { AuthorizedAddon } from '@shared/models';
+import { AuthorizedAccountModel } from '@shared/models';
 
 export interface AddonConfigActions {
  getAddons: () => Observable<void>;
- getAuthorizedAddons: () => AuthorizedAddon[];
+ getAuthorizedAddons: () => AuthorizedAccountModel[];
 }

src/app/features/project/addons/models/addon-config-actions.model.ts

@@ -140,12 +140,14 @@ export class AddonsComponent {
  }
 
  constructor() {
+ // TODO There should not be three effects
  effect(() => {
  if (this.currentUser()) {
  this.actions.getAddonsUserReference();
  }
  });
 
+ // TODO There should not be three effects
  effect(() => {
  if (this.currentUser() && this.userReferenceId()) {
  const action = this.currentAction();
@@ -157,6 +159,7 @@ export class AddonsComponent {
  }
  });
 
+ // TODO There should not be three effects
  effect(() => {
  if (this.currentUser() && this.userReferenceId()) {
  this.fetchAllAuthorizedAddons(this.userReferenceId());