Fix(ang-399): Fixed accordion behaviour in multiple modals

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';
 

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',

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<AuthorizedAccountModel>({} 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);

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',

src/app/shared/components/education-history-dialog/education-history-dialog.component.html

@@ -1,9 +1,11 @@
 <div class="flex flex-column">
   <section>
-    <osf-education-history [education]="educationHistory()"></osf-education-history>
+    @if (isContentVisible()) {
+      <osf-education-history [education]="educationHistory()"></osf-education-history>
+    }
   </section>
 
   <div class="flex gap-2 mt-6 justify-content-end w-full">
-    <p-button [label]="'common.buttons.close' | translate" (click)="close()"> </p-button>
+    <p-button [label]="'common.buttons.close' | translate" (click)="close()"></p-button>
   </div>
 </div>

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<Education[]>([]);
+  readonly isContentVisible = signal(false);
 
   constructor() {
     this.educationHistory.set(this.config.data);
+
+    timer(0)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.isContentVisible.set(true));
   }
 
   close() {

src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html

@@ -1,9 +1,11 @@
 <div class="flex flex-column">
   <section>
-    <osf-employment-history [employment]="employmentHistory()"></osf-employment-history>
+    @if (isContentVisible()) {
+      <osf-employment-history [employment]="employmentHistory()"></osf-employment-history>
+    }
   </section>
 
   <div class="flex gap-2 mt-6 justify-content-end w-full">
-    <p-button [label]="'common.buttons.close' | translate" (click)="close()"> </p-button>
+    <p-button [label]="'common.buttons.close' | translate" (click)="close()"></p-button>
   </div>
 </div>

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<Employment[]>([]);
   dialogRef = inject(DynamicDialogRef);
+  readonly employmentHistory = signal<Employment[]>([]);
+  readonly isContentVisible = signal(false);
 
   constructor() {
     this.employmentHistory.set(this.config.data);
+
+    timer(0)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.isContentVisible.set(true));
   }
 
   close() {

src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.spec.ts → 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';

src/app/shared/components/addons/storage-item-selector/google-file-picker/google-file-picker.component.ts → 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<boolean>();
-  public rootFolder = input<StorageItem | null>(null);
-  public accountId = input<string>('');
-  public handleFolderSelection = input<(folder: StorageItem) => void>();
-  currentAddonType = input<string>(AddonType.STORAGE);
-
-  public accessToken = signal<string | null>(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<boolean>();
+  rootFolder = input<StorageItem | null>(null);
+  accountId = input<string>('');
+  handleFolderSelection = input<(folder: StorageItem) => void>();
+  currentAddonType = input<string>(AddonType.STORAGE);
+
+  accessToken = signal<string | null>(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]);
     }
   }
 }

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';

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';