[ENG-8505] Add the ability to select a folder with oauth working (CenterForOpenScience#316)

* feat(oauth): oauth is working for gfp * chore(test): removed a pointless test * feat(ENG-8505): added the ability to select a folder with tests * feat(connect): added the gfp to the connect flow

Author: bp-cos

eslint.config.js

@@ -82,6 +82,7 @@ module.exports = tseslint.config(
  ],
  'simple-import-sort/exports': 'error',
  'unused-imports/no-unused-imports': 'error',
+ 'no-console': 'error',
  },
  },
  {

src/app/features/project/addons/addons.component.spec.ts

@@ -10,7 +10,7 @@ import { AddonsComponent } from './addons.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
 
-describe('AddonsComponent', () => {
+describe('Component: Addons', () => {
  let component: AddonsComponent;
  let fixture: ComponentFixture<AddonsComponent>;
 
@@ -33,10 +33,6 @@ describe('AddonsComponent', () => {
  fixture.detectChanges();
  });
 
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
  it('should render the connected description paragraph', () => {
  component['selectedTab'].set(component['AddonTabValue'].ALL_ADDONS);
  fixture.detectChanges();

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

@@ -65,6 +65,7 @@ <h2 class="align-self-center">
  </div>
  <osf-folder-selector
  [isGoogleFilePicker]="isGoogleDrive()"
+ [accountId]="addon()?.baseAccountId || ''"
  [accountName]="addon()?.displayName || ''"
  [operationInvocationResult]="operationInvocation()?.operationResult || []"
  [accountNameControl]="accountNameControl"

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

@@ -114,7 +114,8 @@ <h2 class="pt-2">{{ 'settings.addons.connectAddon.chooseExistingAccount' | trans
  <section class="flex flex-column gap-5">
  <h2 class="pt-2">{{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.displayName }}</h2>
  <osf-folder-selector
- [isGoogleFilePicker]="false"
+ [isGoogleFilePicker]="isGoogleDrive()"
+ [accountId]="chosenAccountId()"
  [accountName]="chosenAccountName()"
  [operationInvocationResult]="operationInvocation()?.operationResult || []"
  [accountNameControl]="accountNameControl"

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

@@ -81,6 +81,10 @@ export class ConnectConfiguredAddonComponent {
  protected chosenAccountId = signal('');
  protected chosenAccountName = signal('');
  protected selectedRootFolderId = signal('');
+ private selectedAccount = signal<AuthorizedAccountModel>({} as AuthorizedAccountModel);
+ public readonly isGoogleDrive = computed(() => {
+ return this.selectedAccount()?.externalServiceName === 'googledrive';
+ });
 
  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
  protected createdAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
@@ -137,14 +141,15 @@ export class ConnectConfiguredAddonComponent {
 
  protected handleCreateConfiguredAddon() {
  const addon = this.addon();
- const selectedAccount = this.currentAuthorizedAddonAccounts().find(
- (account) => account.id === this.chosenAccountId()
+ this.selectedAccount.set(
+ this.currentAuthorizedAddonAccounts().find((account) => account.id === this.chosenAccountId()) ||
+ ({} as AuthorizedAccountModel)
  );
- if (!addon || !selectedAccount) return;
+ if (!addon || !this.selectedAccount()) return;
 
  const payload = this.addonFormService.generateConfiguredAddonCreatePayload(
  addon,
- selectedAccount,
+ this.selectedAccount(),
  this.userReferenceId(),
  this.resourceUri(),
  this.accountNameControl.value || '',
@@ -181,19 +186,20 @@ export class ConnectConfiguredAddonComponent {
  }
 
  protected handleConfirmAccountConnection(): void {
- const selectedAccount = this.currentAuthorizedAddonAccounts().find(
- (account) => account.id === this.chosenAccountId()
+ this.selectedAccount.set(
+ this.currentAuthorizedAddonAccounts().find((account) => account.id === this.chosenAccountId()) ||
+ ({} as AuthorizedAccountModel)
  );
 
- if (!selectedAccount) return;
+ if (!this.selectedAccount()) return;
 
- const dialogRef = this.addonDialogService.openConfirmAccountConnectionDialog(selectedAccount);
+ const dialogRef = this.addonDialogService.openConfirmAccountConnectionDialog(this.selectedAccount());
 
  dialogRef.subscribe((result) => {
  if (result?.success) {
  this.stepper()?.value.set(ProjectAddonsStepperValue.CONFIGURE_ROOT_FOLDER);
- this.chosenAccountName.set(selectedAccount.displayName);
- this.accountNameControl.setValue(selectedAccount.displayName);
+ this.chosenAccountName.set(this.selectedAccount().displayName);
+ this.accountNameControl.setValue(this.selectedAccount().displayName);
  }
  });
  }

src/app/shared/components/addons/folder-selector/folder-selector.component.html

@@ -34,7 +34,12 @@ <h3 class="mt-4 mb-2">
  @if (isOperationInvocationSubmitting()) {
  <p-skeleton width="100%" height="7.5rem" borderRadius="16" />
  } @else if (isGoogleFilePicker()) {
- <osf-google-file-picker [isFolderPicker]="true"></osf-google-file-picker>
+ <osf-google-file-picker
+ [isFolderPicker]="true"
+ [accountId]="accountId()"
+ [handleFolderSelection]="handleFolderSelection"
+ [rootFolder]="selectedRootFolder()"
+ ></osf-google-file-picker>
  } @else {
  <div class="folders-table flex flex-column">
  <div class="folders-table-heading flex justify-content-between">

src/app/shared/components/addons/folder-selector/folder-selector.component.spec.ts

@@ -6,7 +6,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { OperationNames } from '@osf/features/project/addons/enums';
 import { FolderSelectorComponent } from '@shared/components/addons';
 import { MOCK_STORE, TranslateServiceMock } from '@shared/mocks';
-import { StorageItem } from '@shared/models';
+import { StorageItemModel } from '@shared/models';
 
 describe('FolderSelectorComponent', () => {
  let component: FolderSelectorComponent;
@@ -65,11 +65,11 @@ describe('FolderSelectorComponent', () => {
  });
 
  it('should set selectedRootFolderId', () => {
- const mockFolder: StorageItem = {
+ const mockFolder: StorageItemModel = {
  itemId: 'test-folder-id',
  itemName: 'Test Folder',
  itemType: 'folder',
- } as StorageItem;
+ } as StorageItemModel;
 
  (component as any).selectedRootFolder.set(mockFolder);
  (component as any).handleSave();

src/app/shared/components/addons/folder-selector/folder-selector.component.ts

@@ -27,7 +27,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { OperationNames } from '@osf/features/project/addons/enums';
-import { OperationInvokeData, StorageItem } from '@shared/models';
+import { OperationInvokeData, StorageItemModel } from '@shared/models';
 import { AddonsSelectors } from '@shared/stores/addons';
 
 import { GoogleFilePickerComponent } from './google-file-picker/google-file-picker.component';
@@ -56,7 +56,8 @@ export class FolderSelectorComponent implements OnInit {
 
  isGoogleFilePicker = input.required<boolean>();
  accountName = input.required<string>();
- operationInvocationResult = input.required<StorageItem[]>();
+ accountId = input.required<string>();
+ operationInvocationResult = input.required<StorageItemModel[]>();
  accountNameControl = input(new FormControl());
  isCreateMode = input(false);
 
@@ -67,7 +68,7 @@ export class FolderSelectorComponent implements OnInit {
  protected readonly OperationNames = OperationNames;
  protected hasInputChanged = signal(false);
  protected hasFolderChanged = signal(false);
- protected selectedRootFolder = signal<StorageItem | null>(null);
+ public selectedRootFolder = signal<StorageItemModel | null>(null);
  protected breadcrumbItems = signal<MenuItem[]>([]);
  protected initiallySelectedFolder = select(AddonsSelectors.getSelectedFolder);
  protected isOperationInvocationSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
@@ -126,10 +127,10 @@ export class FolderSelectorComponent implements OnInit {
  this.cancelSelection.emit();
  }
 
- protected handleFolderSelection(folder: StorageItem): void {
+ public handleFolderSelection = (folder: StorageItemModel): void => {
  this.selectedRootFolder.set(folder);
  this.hasFolderChanged.set(folder?.itemId !== this.initiallySelectedFolder()?.itemId);
- }
+ };
 
  private updateBreadcrumbs(
  operationName: OperationNames,

src/app/shared/components/addons/folder-selector/google-file-picker/google-file-picker.component.spec.ts

@@ -17,6 +17,7 @@ describe('Component: Google File Picker', () => {
  loadGapiModules: jest.fn().mockReturnValue(of(void 0)),
  };
 
+ const handleFolderSelection = jest.fn();
  const setDeveloperKey = jest.fn().mockReturnThis();
  const setAppId = jest.fn().mockReturnThis();
  const addView = jest.fn().mockReturnThis();
@@ -39,6 +40,18 @@ describe('Component: Google File Picker', () => {
  selectSnapshot: jest.fn().mockReturnValue('mock-token'),
  };
 
+ beforeAll(() => {
+ window.google = {
+ picker: {
+ Action: null,
+ },
+ };
+ });
+
+ afterAll(() => {
+ delete (window as any).google;
+ });
+
  describe('isFolderPicker - true', () => {
  beforeEach(async () => {
  jest.clearAllMocks();
@@ -84,8 +97,10 @@ describe('Component: Google File Picker', () => {
  fixture = TestBed.createComponent(GoogleFilePickerComponent);
  component = fixture.componentInstance;
  fixture.componentRef.setInput('isFolderPicker', true);
- fixture.componentRef.setInput('rootFolderId', 'root-folder-id');
- fixture.componentRef.setInput('selectedFolderName', 'selected-folder-name');
+ fixture.componentRef.setInput('rootFolder', {
+ itemId: 'root-folder-id',
+ });
+ fixture.componentRef.setInput('handleFolderSelection', handleFolderSelection);
  fixture.componentRef.setInput('accountId', 'account-id');
  fixture.detectChanges();
  });
@@ -118,6 +133,41 @@ describe('Component: Google File Picker', () => {
  expect(build).toHaveBeenCalledWith();
  expect(setVisible).toHaveBeenCalledWith(true);
  });
+
+ describe('pickerCallback', () => {
+ it('should handle a folder selection `PICKED` action', () => {
+ window.google.picker.Action = {
+ PICKED: 'PICKED',
+ };
+ component.pickerCallback(
+ Object({
+ action: 'PICKED',
+ docs: [
+ Object({
+ itemId: 'item id',
+ itemName: 'item name',
+ }),
+ ],
+ })
+ );
+
+ expect(handleFolderSelection).toHaveBeenCalledWith(Object({}));
+ });
+
+ it('should handle a folder selection not `PICKED` action', () => {
+ window.google.picker.Action = {
+ PICKED: 'not picked',
+ };
+
+ component.pickerCallback(
+ Object({
+ action: 'Loading',
+ })
+ );
+
+ expect(handleFolderSelection).not.toHaveBeenCalled();
+ });
+ });
  });
 
  describe('isFolderPicker - false', () => {
@@ -164,8 +214,10 @@ describe('Component: Google File Picker', () => {
  fixture = TestBed.createComponent(GoogleFilePickerComponent);
  component = fixture.componentInstance;
  fixture.componentRef.setInput('isFolderPicker', false);
- fixture.componentRef.setInput('rootFolderId', 'root-folder-id');
- fixture.componentRef.setInput('selectedFolderName', 'selected-folder-name');
+ fixture.componentRef.setInput('rootFolder', {
+ itemId: 'root-folder-id',
+ });
+ fixture.componentRef.setInput('handleFolderSelection', jest.fn());
  fixture.detectChanges();
  });