[ENG-8505] Finished adding the GFP to the files page

eslint.config.js

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

jest.config.js

@@ -67,7 +67,9 @@ module.exports = {
     '<rootDir>/src/app/features/project/addons/components/connect-configured-addon/',
     '<rootDir>/src/app/features/project/addons/components/disconnect-addon-modal/',
     '<rootDir>/src/app/features/project/addons/components/confirm-account-connection-modal/',
-    '<rootDir>/src/app/features/files/',
+    '<rootDir>/src/app/features/files/components',
+    '<rootDir>/src/app/features/files/pages/community-metadata',
+    '<rootDir>/src/app/features/files/pages/file-detail',
     '<rootDir>/src/app/features/my-projects/',
     '<rootDir>/src/app/features/preprints/',
     '<rootDir>/src/app/features/project/contributors/',

src/app/features/files/pages/files/files.component.html

@@ -48,7 +48,7 @@
 
       <div class="flex flex-column align-items-center w-full gap-2 sm:flex-row md:w-max">
         <p-button
-          [disabled]="fileIsUploading() || isFilesLoading()"
+          [disabled]="isButtonDisabled()"
           outlined
           raised
           (onClick)="downloadFolder()"
@@ -61,7 +61,7 @@
 
         @if (!isViewOnly() && !hasViewOnly()) {
           <p-button
-            [disabled]="fileIsUploading() || isFilesLoading()"
+            [disabled]="isButtonDisabled()"
             outlined
             raised
             severity="success"
@@ -72,7 +72,7 @@
           </p-button>
 
           <p-button
-            [disabled]="fileIsUploading() || isFilesLoading()"
+            [disabled]="isButtonDisabled()"
             outlined
             raised
             severity="success"
@@ -81,6 +81,25 @@
             (onClick)="fileInput.click()"
           >
           </p-button>
+
+          @if (isGoogleDrive()) {
+            <p-button
+              [disabled]="isButtonDisabled()"
+              outlined
+              raised
+              severity="success"
+              [icon]="'fa-brands fa-google-plus-g'"
+              [label]="'files.actions.addFromDrive' | translate"
+              (onClick)="googleFilePickerComponent()?.createPicker()"
+            >
+            </p-button>
+            <osf-google-file-picker
+              [rootFolder]="selectedRootFolder()"
+              [accountId]="accountId()"
+              [isFolderPicker]="false"
+              [handleFolderSelection]="updateFilesList"
+            ></osf-google-file-picker>
+          }
         }
         <input #fileInput type="file" class="hidden" (change)="onFileSelected($event)" />
       </div>

src/app/features/files/pages/files/files.component.spec.ts

@@ -1,26 +1,186 @@
-import { MockComponent } from 'ng-mocks';
+import { Store } from '@ngxs/store';
 
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockProvider } from 'ng-mocks';
+
+import { Button } from 'primeng/button';
+import { Dialog } from 'primeng/dialog';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TableModule } from 'primeng/table';
+
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 
-import { SubHeaderComponent } from '@osf/shared/components';
+import {
+  FilesTreeComponent,
+  FormSelectComponent,
+  LoadingSpinnerComponent,
+  SearchInputComponent,
+  SubHeaderComponent,
+  ViewOnlyLinkMessageComponent,
+} from '@osf/shared/components';
+import { GoogleFilePickerComponent } from '@osf/shared/components/addons/folder-selector/google-file-picker/google-file-picker.component';
+import { OsfFile } from '@osf/shared/models';
+import { CustomConfirmationService, FilesService } from '@osf/shared/services';
+
+import { FilesSelectors } from '../../store';
 
 import { FilesComponent } from './files.component';
 
-describe('FilesComponent', () => {
+import { getConfiguredAddonsMappedData } from '@testing/data/addons/addons.configured.data';
+import { getNodeFilesMappedData } from '@testing/data/files/node.data';
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { MockComponentWithSignal } from '@testing/providers/component-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('Component: Files', () => {
   let component: FilesComponent;
   let fixture: ComponentFixture<FilesComponent>;
+  const currentFolderSignal = signal(getNodeFilesMappedData(0));
 
   beforeEach(async () => {
+    jest.clearAllMocks();
     await TestBed.configureTestingModule({
-      imports: [FilesComponent, MockComponent(SubHeaderComponent)],
-    }).compileComponents();
+      imports: [
+        OSFTestingModule,
+        FilesComponent,
+        Button,
+        Dialog,
+        FormSelectComponent,
+        FormsModule,
+        GoogleFilePickerComponent,
+        LoadingSpinnerComponent,
+        ReactiveFormsModule,
+        SearchInputComponent,
+        SubHeaderComponent,
+        TableModule,
+        TranslatePipe,
+        ViewOnlyLinkMessageComponent,
+      ],
+      providers: [
+        FilesService,
+        MockProvider(ActivatedRoute),
+        MockProvider(CustomConfirmationService),
+
+        DialogService,
+        provideMockStore({
+          signals: [
+            {
+              selector: FilesSelectors.getRootFolders,
+              value: getNodeFilesMappedData(),
+            },
+            {
+              selector: FilesSelectors.getCurrentFolder,
+              value: currentFolderSignal(),
+            },
+            {
+              selector: FilesSelectors.getConfiguredStorageAddons,
+              value: getConfiguredAddonsMappedData(),
+            },
+          ],
+        }),
+      ],
+    })
+      .overrideComponent(FilesComponent, {
+        remove: {
+          imports: [FilesTreeComponent],
+        },
+        add: {
+          imports: [
+            MockComponentWithSignal('osf-files-tree', [
+              'files',
+              'currentFolder',
+              'isLoading',
+              'actions',
+              'viewOnly',
+              'viewOnlyDownloadable',
+              'resourceId',
+              'provider',
+            ]),
+          ],
+        },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(FilesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('CurrentRootFolder effect', () => {
+    it('should handle the initial effects', () => {
+      expect(component.currentRootFolder()?.folder.name).toBe('osfstorage');
+      expect(component.isGoogleDrive()).toBeFalsy();
+      expect(component.accountId()).toBeFalsy();
+      expect(component.selectedRootFolder()).toEqual(Object({}));
+    });
+
+    it('should handle changing the folder to googledrive', () => {
+      component.currentRootFolder.set(
+        Object({
+          label: 'label',
+          folder: Object({
+            name: 'Google Drive',
+            provider: 'googledrive',
+          }),
+        })
+      );
+
+      fixture.detectChanges();
+
+      expect(component.currentRootFolder()?.folder.name).toBe('Google Drive');
+      expect(component.isGoogleDrive()).toBeTruthy();
+      expect(component.accountId()).toBe('62ed6dd7-f7b7-4003-b7b4-855789c1f991');
+      expect(component.selectedRootFolder()).toEqual(
+        Object({
+          itemId: '0AIl0aR4C9JAFUk9PVA',
+        })
+      );
+    });
+  });
+
+  describe('updateFilesList', () => {
+    it('should handle the updateFilesList with a filesLink', () => {
+      let results!: string;
+      const store = TestBed.inject(Store);
+      const dispatchSpy = jest.spyOn(store, 'dispatch');
+      dispatchSpy.mockClear();
+      jest.spyOn(component.filesTreeActions, 'setFilesIsLoading');
+      component.updateFilesList().subscribe({
+        next: (result) => {
+          results = result as any;
+        },
+      });
+
+      expect(results).toBeTruthy();
+
+      expect(component.filesTreeActions.setFilesIsLoading).toHaveBeenCalledWith(true);
+      expect(dispatchSpy).toHaveBeenCalledWith({
+        filesLink: 'https://api.staging4.osf.io/v2/nodes/xgrm4/files/osfstorage/',
+      });
+    });
+
+    it('should handle the updateFilesList without a filesLink', () => {
+      let results!: string;
+      const currentFolder = currentFolderSignal() as OsfFile;
+      currentFolder.relationships.filesLink = '';
+      currentFolderSignal.set(currentFolder);
+      const store = TestBed.inject(Store);
+      const dispatchSpy = jest.spyOn(store, 'dispatch');
+      dispatchSpy.mockClear();
+      jest.spyOn(component.filesTreeActions, 'setFilesIsLoading');
+      component.updateFilesList().subscribe({
+        next: (result) => {
+          results = result as any;
+        },
+      });
+
+      expect(results).toBeUndefined();
+
+      expect(component.filesTreeActions.setFilesIsLoading).not.toHaveBeenCalled();
+      expect(dispatchSpy).not.toHaveBeenCalled();
+    });
   });
 });