diff --git a/src/app/features/files/pages/files/files.component.spec.ts b/src/app/features/files/pages/files/files.component.spec.ts index eb171f2ec..2472228e4 100644 --- a/src/app/features/files/pages/files/files.component.spec.ts +++ b/src/app/features/files/pages/files/files.component.spec.ts @@ -22,11 +22,11 @@ import { SubHeaderComponent, ViewOnlyLinkMessageComponent, } from '@osf/shared/components'; -import { GoogleFilePickerComponent } from '@osf/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component'; import { testNode } from '@osf/shared/mocks'; import { OsfFile } from '@osf/shared/models'; import { CustomConfirmationService, FilesService } from '@osf/shared/services'; import { CurrentResourceSelectors } from '@osf/shared/stores'; +import { GoogleFilePickerComponent } from '@shared/components/google-file-picker/google-file-picker.component'; import { FilesSelectors } from '../../store'; diff --git a/src/app/features/files/pages/files/files.component.ts b/src/app/features/files/pages/files/files.component.ts index fe4627a59..7a1575f04 100644 --- a/src/app/features/files/pages/files/files.component.ts +++ b/src/app/features/files/pages/files/files.component.ts @@ -65,12 +65,12 @@ import { CurrentResourceSelectors, GetResourceDetails } from '@osf/shared/stores import { FilesTreeComponent, FormSelectComponent, + GoogleFilePickerComponent, LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent, ViewOnlyLinkMessageComponent, } from '@shared/components'; -import { GoogleFilePickerComponent } from '@shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component'; import { ConfiguredAddonModel, FileLabelModel, FilesTreeActions, OsfFile, StorageItem } from '@shared/models'; import { CustomConfirmationService, FilesService } from '@shared/services'; import { DataciteService } from '@shared/services/datacite/datacite.service'; @@ -97,6 +97,7 @@ import { FilesSelectors } from '../../store'; TableModule, TranslatePipe, ViewOnlyLinkMessageComponent, + GoogleFilePickerComponent, ], templateUrl: './files.component.html', styleUrl: './files.component.scss', diff --git a/src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.ts b/src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.ts index b4a87111a..106313f31 100644 --- a/src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.ts +++ b/src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.ts @@ -82,7 +82,7 @@ export class ConnectConfiguredAddonComponent { private selectedAccount = signal({} as AuthorizedAccountModel); - readonly isGoogleDrive = computed(() => this.selectedAccount()?.externalServiceName === 'googledrive'); + readonly isGoogleDrive = computed(() => this.addon()?.externalServiceName === 'googledrive'); readonly AddonStepperValue = ProjectAddonsStepperValue; readonly AddonType = AddonType; readonly stepper = viewChild(Stepper); diff --git a/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts b/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts index 7372850f4..f426232d0 100644 --- a/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts +++ b/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts @@ -32,11 +32,10 @@ import { convertCamelCaseToNormal, IS_MEDIUM, IS_XSMALL } from '@osf/shared/help import { OperationInvokeData, StorageItem } from '@osf/shared/models'; import { AddonsSelectors, ClearOperationInvocations } from '@osf/shared/stores'; +import { GoogleFilePickerComponent } from '../../google-file-picker/google-file-picker.component'; import { SelectComponent } from '../../select/select.component'; import { ResourceTypeInfoDialogComponent } from '../resource-type-info-dialog/resource-type-info-dialog.component'; -import { GoogleFilePickerComponent } from './google-file-picker/google-file-picker.component'; - @Component({ selector: 'osf-storage-item-selector', templateUrl: './storage-item-selector.component.html', diff --git a/src/app/shared/components/education-history-dialog/education-history-dialog.component.html b/src/app/shared/components/education-history-dialog/education-history-dialog.component.html index 578a1e8ce..a8fe009a7 100644 --- a/src/app/shared/components/education-history-dialog/education-history-dialog.component.html +++ b/src/app/shared/components/education-history-dialog/education-history-dialog.component.html @@ -1,9 +1,11 @@
- + @if (isContentVisible()) { + + }
- +
diff --git a/src/app/shared/components/education-history-dialog/education-history-dialog.component.ts b/src/app/shared/components/education-history-dialog/education-history-dialog.component.ts index f61dc8de4..95a0dbea8 100644 --- a/src/app/shared/components/education-history-dialog/education-history-dialog.component.ts +++ b/src/app/shared/components/education-history-dialog/education-history-dialog.component.ts @@ -3,7 +3,10 @@ import { TranslatePipe } from '@ngx-translate/core'; import { Button } from 'primeng/button'; import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { timer } from 'rxjs'; + import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Education } from '@osf/shared/models'; @@ -17,12 +20,17 @@ import { EducationHistoryComponent } from '../education-history/education-histor changeDetection: ChangeDetectionStrategy.OnPush, }) export class EducationHistoryDialogComponent { - dialogRef = inject(DynamicDialogRef); private readonly config = inject(DynamicDialogConfig); + dialogRef = inject(DynamicDialogRef); readonly educationHistory = signal([]); + readonly isContentVisible = signal(false); constructor() { this.educationHistory.set(this.config.data); + + timer(0) + .pipe(takeUntilDestroyed()) + .subscribe(() => this.isContentVisible.set(true)); } close() { diff --git a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html index 7f1a9a6a1..a1a596c69 100644 --- a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html +++ b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html @@ -1,9 +1,11 @@
- + @if (isContentVisible()) { + + }
- +
diff --git a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.ts b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.ts index 08d8ab01b..f57360660 100644 --- a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.ts +++ b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.ts @@ -3,7 +3,10 @@ import { TranslatePipe } from '@ngx-translate/core'; import { Button } from 'primeng/button'; import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { timer } from 'rxjs'; + import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Employment } from '@osf/shared/models'; @@ -18,11 +21,16 @@ import { EmploymentHistoryComponent } from '../employment-history/employment-his }) export class EmploymentHistoryDialogComponent { private readonly config = inject(DynamicDialogConfig); - readonly employmentHistory = signal([]); dialogRef = inject(DynamicDialogRef); + readonly employmentHistory = signal([]); + readonly isContentVisible = signal(false); constructor() { this.employmentHistory.set(this.config.data); + + timer(0) + .pipe(takeUntilDestroyed()) + .subscribe(() => this.isContentVisible.set(true)); } close() { diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.html b/src/app/shared/components/google-file-picker/google-file-picker.component.html similarity index 100% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.html rename to src/app/shared/components/google-file-picker/google-file-picker.component.html diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.scss b/src/app/shared/components/google-file-picker/google-file-picker.component.scss similarity index 100% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.scss rename to src/app/shared/components/google-file-picker/google-file-picker.component.scss diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.spec.ts b/src/app/shared/components/google-file-picker/google-file-picker.component.spec.ts similarity index 99% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.spec.ts rename to src/app/shared/components/google-file-picker/google-file-picker.component.spec.ts index c8a7b597f..00c4fd8b8 100644 --- a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.spec.ts +++ b/src/app/shared/components/google-file-picker/google-file-picker.component.spec.ts @@ -5,8 +5,8 @@ import { Observable, of, throwError } from 'rxjs'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { SENTRY_TOKEN } from '@core/provider/sentry.provider'; +import { GoogleFilePickerDownloadService } from '@shared/services'; -import { GoogleFilePickerDownloadService } from './service/google-file-picker.download.service'; import { GoogleFilePickerComponent } from './google-file-picker.component'; import { OSFTestingModule, OSFTestingStoreModule } from '@testing/osf.testing.module'; diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.ts b/src/app/shared/components/google-file-picker/google-file-picker.component.ts similarity index 68% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.ts rename to src/app/shared/components/google-file-picker/google-file-picker.component.ts index aa3851ed2..f9e333d4c 100644 --- a/src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.ts +++ b/src/app/shared/components/google-file-picker/google-file-picker.component.ts @@ -8,13 +8,12 @@ import { ChangeDetectionStrategy, Component, inject, input, OnInit, signal } fro import { ENVIRONMENT } from '@core/provider/environment.provider'; import { SENTRY_TOKEN } from '@core/provider/sentry.provider'; -import { GoogleFileDataModel } from '@osf/shared/models/files/google-file.data.model'; -import { GoogleFilePickerModel } from '@osf/shared/models/files/google-file.picker.model'; -import { AddonsSelectors, GetAuthorizedStorageOauthToken } from '@osf/shared/stores'; import { AddonType } from '@shared/enums'; import { StorageItem } from '@shared/models'; - -import { GoogleFilePickerDownloadService } from './service/google-file-picker.download.service'; +import { GoogleFileDataModel } from '@shared/models/files/google-file.data.model'; +import { GoogleFilePickerModel } from '@shared/models/files/google-file.picker.model'; +import { GoogleFilePickerDownloadService } from '@shared/services'; +import { AddonsSelectors, GetAuthorizedStorageOauthToken } from '@shared/stores'; @Component({ selector: 'osf-google-file-picker', @@ -26,27 +25,26 @@ import { GoogleFilePickerDownloadService } from './service/google-file-picker.do }) export class GoogleFilePickerComponent implements OnInit { private readonly Sentry = inject(SENTRY_TOKEN); - private readonly environmnet = inject(ENVIRONMENT); - readonly #translateService = inject(TranslateService); - readonly #googlePicker = inject(GoogleFilePickerDownloadService); - - public isFolderPicker = input.required(); - public rootFolder = input(null); - public accountId = input(''); - public handleFolderSelection = input<(folder: StorageItem) => void>(); - currentAddonType = input(AddonType.STORAGE); - - public accessToken = signal(null); - public visible = signal(false); - public isGFPDisabled = signal(true); - private readonly apiKey = this.environmnet.googleFilePickerApiKey; - private readonly appId = this.environmnet.googleFilePickerAppId; - private readonly store = inject(Store); + private readonly environment = inject(ENVIRONMENT); + private readonly translateService = inject(TranslateService); + private readonly googlePicker = inject(GoogleFilePickerDownloadService); + private readonly apiKey = this.environment.googleFilePickerApiKey; + private readonly appId = this.environment.googleFilePickerAppId; private parentId = ''; private isMultipleSelect!: boolean; private title!: string; + isFolderPicker = input.required(); + rootFolder = input(null); + accountId = input(''); + handleFolderSelection = input<(folder: StorageItem) => void>(); + currentAddonType = input(AddonType.STORAGE); + + accessToken = signal(null); + visible = signal(false); + isGFPDisabled = signal(true); + private get isPickerConfigured() { return !!this.apiKey && !!this.appId; } @@ -59,16 +57,16 @@ export class GoogleFilePickerComponent implements OnInit { this.parentId = this.isFolderPicker() ? '' : this.rootFolder()?.itemId || ''; this.title = this.isFolderPicker() - ? this.#translateService.instant('settings.addons.configureAddon.google-file-picker.root-folder-title') - : this.#translateService.instant('settings.addons.configureAddon.google-file-picker.file-folder-title'); + ? this.translateService.instant('settings.addons.configureAddon.google-file-picker.root-folder-title') + : this.translateService.instant('settings.addons.configureAddon.google-file-picker.file-folder-title'); this.isMultipleSelect = !this.isFolderPicker(); - this.#googlePicker.loadScript().subscribe({ + this.googlePicker.loadScript().subscribe({ next: () => { - this.#googlePicker.loadGapiModules().subscribe({ + this.googlePicker.loadGapiModules().subscribe({ next: () => { - this.#initializePicker(); - this.#loadOauthToken(); + this.initializePicker(); + this.loadOauthToken(); }, error: (err) => this.Sentry.captureException(err, { tags: { feature: 'google-picker auth' } }), }); @@ -77,13 +75,7 @@ export class GoogleFilePickerComponent implements OnInit { }); } - #initializePicker() { - if (this.isFolderPicker()) { - this.visible.set(true); - } - } - - public createPicker(): void { + createPicker(): void { if (!this.isPickerConfigured) return; const google = window.google; @@ -111,7 +103,13 @@ export class GoogleFilePickerComponent implements OnInit { picker.setVisible(true); } - #loadOauthToken(): void { + private initializePicker() { + if (this.isFolderPicker()) { + this.visible.set(true); + } + } + + private loadOauthToken(): void { if (this.accountId()) { this.store.dispatch(new GetAuthorizedStorageOauthToken(this.accountId(), this.currentAddonType())).subscribe({ next: () => { @@ -124,7 +122,7 @@ export class GoogleFilePickerComponent implements OnInit { } } - #filePickerCallback(data: GoogleFileDataModel) { + private filePickerCallback(data: GoogleFileDataModel) { this.handleFolderSelection()?.( Object({ itemName: data.name, @@ -135,7 +133,7 @@ export class GoogleFilePickerComponent implements OnInit { pickerCallback(data: GoogleFilePickerModel) { if (data.action === window.google.picker.Action.PICKED) { - this.#filePickerCallback(data.docs[0]); + this.filePickerCallback(data.docs[0]); } } } diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts index a84985ba6..7fd889e66 100644 --- a/src/app/shared/components/index.ts +++ b/src/app/shared/components/index.ts @@ -18,6 +18,7 @@ export { FormSelectComponent } from './form-select/form-select.component'; export { FullScreenLoaderComponent } from './full-screen-loader/full-screen-loader.component'; export { GenericFilterComponent } from './generic-filter/generic-filter.component'; export { GlobalSearchComponent } from './global-search/global-search.component'; +export { GoogleFilePickerComponent } from './google-file-picker/google-file-picker.component'; export { IconComponent } from './icon/icon.component'; export { InfoIconComponent } from './info-icon/info-icon.component'; export { LicenseComponent } from './license/license.component'; diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/service/google-file-picker.download.service.spec.ts b/src/app/shared/services/google-file-picker.download.service.spec.ts similarity index 100% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/service/google-file-picker.download.service.spec.ts rename to src/app/shared/services/google-file-picker.download.service.spec.ts diff --git a/src/app/shared/components/addons/storage-item-selector/google-file-picker/service/google-file-picker.download.service.ts b/src/app/shared/services/google-file-picker.download.service.ts similarity index 100% rename from src/app/shared/components/addons/storage-item-selector/google-file-picker/service/google-file-picker.download.service.ts rename to src/app/shared/services/google-file-picker.download.service.ts diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts index b5182241d..a368769b2 100644 --- a/src/app/shared/services/index.ts +++ b/src/app/shared/services/index.ts @@ -8,6 +8,7 @@ export { CustomConfirmationService } from './custom-confirmation.service'; export { DuplicatesService } from './duplicates.service'; export { FilesService } from './files.service'; export { GlobalSearchService } from './global-search.service'; +export { GoogleFilePickerDownloadService } from './google-file-picker.download.service'; export { InstitutionsService } from './institutions.service'; export { JsonApiService } from './json-api.service'; export { LicensesService } from './licenses.service';