NAS-133317 / 25.04 / NAS-133300: NAS-133317: Migrate more instances o…

…f OldSlideInService #2 (#11264)

src/app/modules/truecommand/truecommand-button.component.ts

@@ -1,7 +1,7 @@
 import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy, ChangeDetectorRef,
-  Component, Inject, OnInit,
+  Component, OnInit,
 } from '@angular/core';
 import { MatBadge } from '@angular/material/badge';
 import { MatIconButton } from '@angular/material/button';
@@ -12,7 +12,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { isObject } from 'lodash-es';
 import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { TrueCommandStatus } from 'app/enums/true-command-status.enum';
-import { WINDOW } from 'app/helpers/window.helper';
 import { helptextTopbar } from 'app/helptext/topbar';
 import { TrueCommandConfig } from 'app/interfaces/true-command-config.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
@@ -80,7 +79,6 @@ export class TruecommandButtonComponent implements OnInit {
     private loader: AppLoaderService,
     private errorHandler: ErrorHandlerService,
     private cdr: ChangeDetectorRef,
-    @Inject(WINDOW) private window: Window,
   ) {}
 
   ngOnInit(): void {

src/app/pages/apps/components/catalog-settings/apps-settings.component.html

@@ -1,8 +1,8 @@
-<ix-old-modal-header
+<ix-modal-header
   [title]="'Settings' | translate"
   [loading]="isFormLoading()"
   [requiredRoles]="requiredRoles"
-></ix-old-modal-header>
+></ix-modal-header>
 
 <mat-card>
   <mat-card-content>

src/app/pages/apps/components/catalog-settings/apps-settings.component.spec.ts

@@ -17,9 +17,8 @@ import {
 import { IxListHarness } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.harness';
 import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.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 { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { AppsSettingsComponent } from 'app/pages/apps/components/catalog-settings/apps-settings.component';
-import { AppsStore } from 'app/pages/apps/store/apps-store.service';
 import { DockerStore } from 'app/pages/apps/store/docker.store';
 import { ApiService } from 'app/services/websocket/api.service';
 
@@ -35,6 +34,12 @@ describe('AppsSettingsComponent', () => {
     enable_image_updates: false,
   } as DockerConfig;
 
+  const slideInRef: SlideInRef<undefined, unknown> = {
+    close: jest.fn(),
+    requireConfirmationWhen: jest.fn(),
+    getData: jest.fn(() => undefined),
+  };
+
   const createComponent = createComponentFactory({
     component: AppsSettingsComponent,
     imports: [
@@ -50,22 +55,20 @@ describe('AppsSettingsComponent', () => {
           label: 'TrueNAS',
           preferred_trains: ['test'],
         } as CatalogConfig),
+        mockCall('docker.status'),
+        mockCall('docker.config', dockerConfig),
         mockJob('docker.update', fakeSuccessfulJob()),
       ]),
       mockProvider(DialogService, {
         jobDialog: jest.fn(() => ({
           afterClosed: () => of(null),
         })),
       }),
-      mockProvider(AppsStore, {
-        loadCatalog: jest.fn(() => of({})),
-      }),
-      mockProvider(OldSlideInRef),
+      mockProvider(SlideInRef, slideInRef),
       mockProvider(FormErrorHandlerService),
       mockAuth(),
       mockProvider(DockerStore, {
-        dockerConfig$: of(dockerConfig),
-        reloadDockerConfig: jest.fn(() => of({})),
+        initialize: jest.fn(),
       }),
     ],
   });
@@ -109,7 +112,6 @@ describe('AppsSettingsComponent', () => {
       expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('catalog.update', [
         { preferred_trains: ['stable', 'community'] },
       ]);
-      expect(spectator.inject(AppsStore).loadCatalog).toHaveBeenCalled();
     });
   });
 
@@ -150,8 +152,6 @@ describe('AppsSettingsComponent', () => {
           },
         ],
       }]);
-
-      expect(spectator.inject(AppsStore).loadCatalog).toHaveBeenCalled();
     });
 
     describe('other docker settings', () => {
@@ -198,7 +198,6 @@ describe('AppsSettingsComponent', () => {
             { base: '173.17.0.0/12', size: 12 },
           ],
         }]);
-        expect(spectator.inject(DockerStore).reloadDockerConfig).toHaveBeenCalled();
       });
     });
   });

src/app/pages/apps/components/catalog-settings/apps-settings.component.ts

@@ -10,8 +10,9 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
 import {
-  async,
-  combineLatest, filter, forkJoin, switchMap,
+  combineLatest,
+  filter,
+  forkJoin,
   take,
 } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
@@ -29,10 +30,9 @@ import { IxListItemComponent } from 'app/modules/forms/ix-forms/components/ix-li
 import { IxListComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.component';
 import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service';
 import { ipv4or6cidrValidator } from 'app/modules/forms/ix-forms/validators/ip-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 { 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 { AppsStore } from 'app/pages/apps/store/apps-store.service';
 import { DockerStore } from 'app/pages/apps/store/docker.store';
 import { ApiService } from 'app/services/websocket/api.service';
 
@@ -45,7 +45,7 @@ import { ApiService } from 'app/services/websocket/api.service';
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    OldModalHeaderComponent,
+    ModalHeaderComponent,
     MatCardContent,
     MatCard,
     IxFieldsetComponent,
@@ -62,6 +62,9 @@ import { ApiService } from 'app/services/websocket/api.service';
     TranslateModule,
     AsyncPipe,
   ],
+  providers: [
+    DockerStore,
+  ],
 })
 export class AppsSettingsComponent implements OnInit {
   protected hasNvidiaCard$ = this.api.call('docker.nvidia_present');
@@ -90,11 +93,12 @@ export class AppsSettingsComponent implements OnInit {
   constructor(
     private dockerStore: DockerStore,
     private api: ApiService,
-    private slideInRef: OldSlideInRef<AppsSettingsComponent>,
+    public slideInRef: SlideInRef<undefined, boolean>,
     private errorHandler: FormErrorHandlerService,
     private fb: FormBuilder,
-    private appsStore: AppsStore,
-  ) {}
+  ) {
+    this.dockerStore.initialize();
+  }
 
   ngOnInit(): void {
     this.setupForm();
@@ -145,17 +149,11 @@ export class AppsSettingsComponent implements OnInit {
         nvidia: values.nvidia,
       }]),
     ])
-      .pipe(
-        switchMap(() => forkJoin([
-          this.dockerStore.reloadDockerConfig(),
-          this.appsStore.loadCatalog(),
-        ])),
-        untilDestroyed(this),
-      )
+      .pipe(untilDestroyed(this))
       .subscribe({
         next: () => {
           this.isFormLoading.set(false);
-          this.slideInRef.close(true);
+          this.slideInRef.close({ response: true, error: null });
         },
         error: (error: unknown) => {
           this.isFormLoading.set(false);
@@ -165,5 +163,4 @@ export class AppsSettingsComponent implements OnInit {
   }
 
   protected readonly helptext = helptextApps;
-  protected readonly async = async;
 }

src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.spec.ts

@@ -4,18 +4,18 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
-import { of, Subject } from 'rxjs';
+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 { DialogService } from 'app/modules/dialog/dialog.service';
 import { SearchInput1Component } from 'app/modules/forms/search-input1/search-input1.component';
 import { IxIconHarness } from 'app/modules/ix-icon/ix-icon.harness';
 import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-table.harness';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
 import { DockerImageDeleteDialogComponent } from 'app/pages/apps/components/docker-images/docker-image-delete-dialog/docker-image-delete-dialog.component';
 import { PullImageFormComponent } from 'app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component';
 import { fakeDockerImagesDataSource } from 'app/pages/apps/components/docker-images/test/fake-docker-images';
-import { OldSlideInService } from 'app/services/old-slide-in.service';
 import { ApiService } from 'app/services/websocket/api.service';
 import { DockerImagesListComponent } from './docker-images-list.component';
 
@@ -41,11 +41,8 @@ describe('DockerImagesListComponent', () => {
       mockProvider(DialogService, {
         confirm: jest.fn(() => of(true)),
       }),
-      mockProvider(OldSlideInService, {
-        onClose$: new Subject<unknown>(),
-        open: jest.fn(() => {
-          return { slideInClosed$: of(true) };
-        }),
+      mockProvider(SlideIn, {
+        open: jest.fn(() => of()),
       }),
       mockProvider(MatDialog, {
         open: jest.fn(() => ({
@@ -85,6 +82,6 @@ describe('DockerImagesListComponent', () => {
     const pullImageButton = await loader.getHarness(MatButtonHarness.with({ text: 'Pull Image' }));
     await pullImageButton.click();
 
-    expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(PullImageFormComponent);
+    expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(PullImageFormComponent);
   });
 });