NAS-133325 / 25.04 / Migrate more instances of OldSlideInService #4 (#…

…11278) * NAS-133300: Migrate more instances of OldSlideInService * NAS-133300: NAS-133317: Migrate more instances of OldSlideInService #2 * NAS-133319: Migrate more instances of OldSlideInService #3 * NAS-133319: PR update * NAS-133319: Skip * NAS-133325: Migrate more instances of OldSlideInService #4 * NAS-133325: PR Update * NAS-133325: PR update
truenas · Jan 6, 2025 · 4e63ed3 · 4e63ed3
1 parent d07b24f
commit 4e63ed3
Show file tree

Hide file tree

Showing 87 changed files with 777 additions and 660 deletions.
diff --git a/src/app/modules/slide-ins/slide-in.ts b/src/app/modules/slide-ins/slide-in.ts
@@ -82,6 +82,16 @@ export class SlideIn extends ComponentStore<SlideInState> {
     };
   });
 
+  closeLast = this.updater((state) => {
+    const newMap = new Map(state.components);
+    const { id } = this.getAliveComponents(newMap).pop();
+    newMap.set(id, { ...newMap.get(id), isComponentAlive: false });
+    this.focusOnTheCloseButton();
+    return {
+      components: newMap,
+    };
+  });
+
   closeAll = this.updater(() => {
     this.focusOnTheCloseButton();
     return {

diff --git a/src/app/pages/apps/components/app-wizard/app-wizard.component.spec.ts b/src/app/pages/apps/components/app-wizard/app-wizard.component.spec.ts
@@ -16,14 +16,13 @@ import { DialogService } from 'app/modules/dialog/dialog.service';
 import { IxInputHarness } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.harness';
 import { IxFormHarness } from 'app/modules/forms/ix-forms/testing/ix-form.harness';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
-import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
-import { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
+import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { AppWizardComponent } from 'app/pages/apps/components/app-wizard/app-wizard.component';
 import { DockerHubRateInfoDialogComponent } from 'app/pages/apps/components/dockerhub-rate-limit-info-dialog/dockerhub-rate-limit-info-dialog.component';
 import { ApplicationsService } from 'app/pages/apps/services/applications.service';
 import { DockerStore } from 'app/pages/apps/store/docker.store';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 
 const appVersion121 = {
   healthy: true,
@@ -270,6 +269,12 @@ describe('AppWizardComponent', () => {
     },
   } as App;
 
+  const slideInRef: SlideInRef<undefined, unknown> = {
+    close: jest.fn(),
+    requireConfirmationWhen: jest.fn(),
+    getData: jest.fn(() => undefined),
+  };
+
   const createComponent = createComponentFactory({
     component: AppWizardComponent,
     imports: [
@@ -281,7 +286,7 @@ describe('AppWizardComponent', () => {
       mockProvider(MatDialog),
     ],
     providers: [
-      mockProvider(OldSlideInService),
+      mockProvider(SlideIn),
       mockProvider(DialogService, {
         jobDialog: jest.fn(() => ({
           afterClosed: () => of({}),
@@ -308,10 +313,9 @@ describe('AppWizardComponent', () => {
       mockProvider(DockerStore, {
         selectedPool$: of('pool set'),
       }),
-      mockProvider(OldSlideInRef),
+      mockProvider(SlideInRef, slideInRef),
       mockProvider(Router),
       mockAuth(),
-      { provide: SLIDE_IN_DATA, useValue: undefined },
     ],
   });
 

diff --git a/src/app/pages/datasets/components/dataset-form/utils/dataset-form.service.spec.ts b/src/app/pages/datasets/components/dataset-form/utils/dataset-form.service.spec.ts
@@ -6,9 +6,9 @@ import { inherit } from 'app/enums/with-inherit.enum';
 import { helptextDatasetForm } from 'app/helptext/storage/volumes/datasets/dataset-form';
 import { Dataset } from 'app/interfaces/dataset.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { DatasetFormService } from 'app/pages/datasets/components/dataset-form/utils/dataset-form.service';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 
 describe('DatasetFormService', () => {
   let spectator: SpectatorService<DatasetFormService>;
@@ -22,7 +22,10 @@ describe('DatasetFormService', () => {
       mockProvider(DialogService, {
         warn: jest.fn(() => of(true)),
       }),
-      mockProvider(OldSlideInService),
+      mockProvider(SlideIn, {
+        components$: of([]),
+        closeLast: jest.fn(),
+      }),
     ],
   });
 
@@ -37,7 +40,7 @@ describe('DatasetFormService', () => {
         helptextDatasetForm.pathWarningTitle,
         helptextDatasetForm.pathIsTooLongWarning,
       );
-      expect(spectator.inject(OldSlideInService).closeLast).toHaveBeenCalled();
+      expect(spectator.inject(SlideIn).closeLast).toHaveBeenCalled();
     });
 
     it('checks parent path, shows error if it nesting level is too deep and closes slide in', async () => {
@@ -48,7 +51,7 @@ describe('DatasetFormService', () => {
         helptextDatasetForm.pathWarningTitle,
         helptextDatasetForm.pathIsTooDeepWarning,
       );
-      expect(spectator.inject(OldSlideInService).closeLast).toHaveBeenCalled();
+      expect(spectator.inject(SlideIn).closeLast).toHaveBeenCalled();
     });
   });
 

diff --git a/src/app/pages/datasets/components/dataset-form/utils/dataset-form.service.ts b/src/app/pages/datasets/components/dataset-form/utils/dataset-form.service.ts
@@ -10,8 +10,8 @@ import { helptextDatasetForm } from 'app/helptext/storage/volumes/datasets/datas
 import { Dataset } from 'app/interfaces/dataset.interface';
 import { Option } from 'app/interfaces/option.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
 import { ApiService } from 'app/modules/websocket/api.service';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 
 @Injectable({
   providedIn: 'root',
@@ -21,7 +21,7 @@ export class DatasetFormService {
     private dialog: DialogService,
     private api: ApiService,
     private translate: TranslateService,
-    private slideInService: OldSlideInService,
+    private slideIn: SlideIn,
   ) {}
 
   checkAndWarnForLengthAndDepth(path: string): Observable<boolean> {
@@ -35,7 +35,7 @@ export class DatasetFormService {
             this.translate.instant(helptextDatasetForm.pathWarningTitle),
             this.translate.instant(helptextDatasetForm.pathIsTooDeepWarning),
           ).pipe(
-            tap(() => this.slideInService.closeLast()),
+            tap(() => this.slideIn.closeLast()),
             map(() => false),
           );
         }
@@ -44,7 +44,7 @@ export class DatasetFormService {
             this.translate.instant(helptextDatasetForm.pathWarningTitle),
             this.translate.instant(helptextDatasetForm.pathIsTooLongWarning),
           ).pipe(
-            tap(() => this.slideInService.closeLast()),
+            tap(() => this.slideIn.closeLast()),
             map(() => false),
           );
         }

diff --git a/src/app/pages/datasets/components/zvol-form/zvol-form.component.spec.ts b/src/app/pages/datasets/components/zvol-form/zvol-form.component.spec.ts
@@ -191,7 +191,6 @@ describe('ZvolFormComponent', () => {
       spectator = createComponent({
         providers: [
           mockProvider(SlideInRef, { ...slideInRef, getData: jest.fn(() => ({ isNew: false, parentId: 'test pool' })) }),
-
         ],
       });
       loader = TestbedHarnessEnvironment.loader(spectator.fixture);

diff --git a/...ring/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.html b/...ring/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.html
@@ -1,4 +1,8 @@
-<ix-old-modal-header [requiredRoles]="requiredRoles" [title]="title" [loading]="isLoading"></ix-old-modal-header>
+<ix-modal-header
+  [requiredRoles]="requiredRoles"
+  [title]="title"
+  [loading]="isLoading"
+></ix-modal-header>
 
 <mat-card>
   <mat-card-content>

diff --git a/...g/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.spec.ts b/...g/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.spec.ts
@@ -3,18 +3,18 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { of } from 'rxjs';
 import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { IscsiAuthAccess } from 'app/interfaces/iscsi.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { IxFormHarness } from 'app/modules/forms/ix-forms/testing/ix-form.harness';
-import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
-import { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
+import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { ApiService } from 'app/modules/websocket/api.service';
 import {
   AuthorizedAccessFormComponent,
 } from 'app/pages/sharing/iscsi/authorized-access/authorized-access-form/authorized-access-form.component';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 
 describe('AuthorizedAccessFormComponent', () => {
   let spectator: Spectator<AuthorizedAccessFormComponent>;
@@ -30,21 +30,28 @@ describe('AuthorizedAccessFormComponent', () => {
     peersecret: 'peer123456789012',
   } as IscsiAuthAccess;
 
+  const slideInRef: SlideInRef<IscsiAuthAccess | undefined, unknown> = {
+    close: jest.fn(),
+    requireConfirmationWhen: jest.fn(),
+    getData: jest.fn(() => undefined),
+  };
+
   const createComponent = createComponentFactory({
     component: AuthorizedAccessFormComponent,
     imports: [
       ReactiveFormsModule,
     ],
     providers: [
       mockAuth(),
-      mockProvider(OldSlideInService),
+      mockProvider(SlideIn, {
+        components$: of([]),
+      }),
       mockProvider(DialogService),
       mockApi([
         mockCall('iscsi.auth.create'),
         mockCall('iscsi.auth.update'),
       ]),
-      mockProvider(OldSlideInRef),
-      { provide: SLIDE_IN_DATA, useValue: undefined },
+      mockProvider(SlideInRef, slideInRef),
     ],
   });
 
@@ -77,15 +84,15 @@ describe('AuthorizedAccessFormComponent', () => {
         peersecret: 'peer123456789012',
         discovery_auth: 'NONE',
       }]);
-      expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled();
+      expect(spectator.inject(SlideInRef).close).toHaveBeenCalled();
     });
   });
 
   describe('edit existing authorized access', () => {
     beforeEach(async () => {
       spectator = createComponent({
         providers: [
-          { provide: SLIDE_IN_DATA, useValue: existingAuthorizedAccess },
+          mockProvider(SlideInRef, { ...slideInRef, getData: () => existingAuthorizedAccess }),
         ],
       });
       loader = TestbedHarnessEnvironment.loader(spectator.fixture);
@@ -135,7 +142,7 @@ describe('AuthorizedAccessFormComponent', () => {
           },
         ],
       );
-      expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled();
+      expect(spectator.inject(SlideInRef).close).toHaveBeenCalled();
     });
   });
 });
diff --git a/...haring/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.ts b/...haring/iscsi/authorized-access/authorized-access-form/authorized-access-form.component.ts
@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit,
 } from '@angular/core';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
@@ -25,9 +25,8 @@ import {
   doesNotEqualFgValidator,
   matchOthersFgValidator,
 } from 'app/modules/forms/ix-forms/validators/password-validation/password-validation';
-import { OldModalHeaderComponent } from 'app/modules/slide-ins/components/old-modal-header/old-modal-header.component';
-import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
-import { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token';
+import { ModalHeaderComponent } from 'app/modules/slide-ins/components/modal-header/modal-header.component';
+import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { ApiService } from 'app/modules/websocket/api.service';
 
@@ -38,7 +37,7 @@ import { ApiService } from 'app/modules/websocket/api.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    OldModalHeaderComponent,
+    ModalHeaderComponent,
     MatCard,
     MatCardContent,
     ReactiveFormsModule,
@@ -105,6 +104,7 @@ export class AuthorizedAccessFormComponent implements OnInit {
 
   isLoading = false;
   discoveryAuthOptions$: Observable<Option<IscsiAuthMethod>[]>;
+  protected editingAccess: IscsiAuthAccess | undefined;
 
   readonly defaultDiscoveryAuthOptions = [
     {
@@ -139,9 +139,10 @@ export class AuthorizedAccessFormComponent implements OnInit {
     private cdr: ChangeDetectorRef,
     private api: ApiService,
     private validatorService: IxValidatorsService,
-    private slideInRef: OldSlideInRef<AuthorizedAccessFormComponent>,
-    @Inject(SLIDE_IN_DATA) private editingAccess: IscsiAuthAccess,
-  ) {}
+    public slideInRef: SlideInRef<IscsiAuthAccess | undefined, boolean>,
+  ) {
+    this.editingAccess = this.slideInRef.getData();
+  }
 
   ngOnInit(): void {
     this.discoveryAuthOptions$ = of(this.defaultDiscoveryAuthOptions);
@@ -205,7 +206,7 @@ export class AuthorizedAccessFormComponent implements OnInit {
     request$.pipe(untilDestroyed(this)).subscribe({
       next: () => {
         this.isLoading = false;
-        this.slideInRef.close(true);
+        this.slideInRef.close({ response: true, error: null });
       },
       error: (error: unknown) => {
         this.isLoading = false;

diff --git a/...g/iscsi/authorized-access/authorized-access-list/authorized-access-list.component.spec.ts b/...g/iscsi/authorized-access/authorized-access-list/authorized-access-list.component.spec.ts
@@ -16,11 +16,11 @@ import {
   IxTableColumnsSelectorComponent,
 } from 'app/modules/ix-table/components/ix-table-columns-selector/ix-table-columns-selector.component';
 import { FakeProgressBarComponent } from 'app/modules/loader/components/fake-progress-bar/fake-progress-bar.component';
-import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
+import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { AuthorizedAccessFormComponent } from 'app/pages/sharing/iscsi/authorized-access/authorized-access-form/authorized-access-form.component';
 import { AuthorizedAccessListComponent } from 'app/pages/sharing/iscsi/authorized-access/authorized-access-list/authorized-access-list.component';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 
 const authAccess: IscsiAuthAccess[] = [
   {
@@ -36,6 +36,12 @@ describe('AuthorizedAccessListComponent', () => {
   let loader: HarnessLoader;
   let table: IxTableHarness;
 
+  const slideInRef: SlideInRef<undefined, unknown> = {
+    close: jest.fn(),
+    requireConfirmationWhen: jest.fn(),
+    getData: jest.fn(() => undefined),
+  };
+
   const createComponent = createComponentFactory({
     component: AuthorizedAccessListComponent,
     imports: [
@@ -50,12 +56,12 @@ describe('AuthorizedAccessListComponent', () => {
         mockCall('iscsi.auth.query', authAccess),
         mockCall('iscsi.auth.delete'),
       ]),
-      mockProvider(OldSlideInRef),
+      mockProvider(SlideInRef, slideInRef),
       mockProvider(DialogService, {
         confirm: jest.fn(() => of(true)),
       }),
-      mockProvider(OldSlideInService, {
-        open: jest.fn(() => ({ slideInClosed$: of(true) })),
+      mockProvider(SlideIn, {
+        open: jest.fn(() => of()),
       }),
       mockProvider(MatDialog, {
         open: jest.fn(),
@@ -78,14 +84,14 @@ describe('AuthorizedAccessListComponent', () => {
     const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' }));
     await addButton.click();
 
-    expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(AuthorizedAccessFormComponent);
+    expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(AuthorizedAccessFormComponent);
   });
 
   it('opens authorized access form when "Edit" button is pressed', async () => {
     const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 3);
     await editButton.click();
 
-    expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(AuthorizedAccessFormComponent, {
+    expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(AuthorizedAccessFormComponent, {
       data: authAccess[0],
     });
   });