From 772b33a99350c1d2d1ad388b7a12b69b7fbde61d Mon Sep 17 00:00:00 2001 From: Alex Karpov Date: Thu, 2 Jan 2025 01:27:05 +0200 Subject: [PATCH] NAS-133317 / 25.04 / NAS-133300: NAS-133317: Migrate more instances of OldSlideInService #2 (#11264) --- ...rn-about-unsaved-changes.directive.spec.ts | 57 ------------- .../warn-about-unsaved-changes.directive.ts | 84 ------------------- .../truecommand-button.component.ts | 4 +- .../apps-settings.component.html | 4 +- .../apps-settings.component.spec.ts | 23 +++-- .../apps-settings.component.ts | 33 ++++---- .../docker-images-list.component.spec.ts | 13 ++- .../docker-images-list.component.ts | 9 +- .../pull-image-form.component.html | 4 +- .../pull-image-form.component.spec.ts | 19 +++-- .../pull-image-form.component.ts | 10 +-- .../app-settings-button.component.spec.ts | 10 ++- .../app-settings-button.component.ts | 20 +++-- .../ssh-keypair-card.component.spec.ts | 23 ++--- .../ssh-keypair-card.component.ts | 16 ++-- .../ssh-keypair-form.component.html | 4 +- .../ssh-keypair-form.component.spec.ts | 14 ++-- .../ssh-keypair-form.component.ts | 25 +++--- .../group-details-row.component.spec.ts | 16 +++- .../group-details-row.component.ts | 6 +- .../group-form/group-form.component.html | 6 +- .../group-form/group-form.component.spec.ts | 14 ++-- .../groups/group-form/group-form.component.ts | 22 +++-- .../groups/group-list/group-list.component.ts | 6 +- .../privilege-form.component.html | 6 +- .../privilege-form.component.spec.ts | 16 ++-- .../privilege-form.component.ts | 22 +++-- .../privilege-list.component.spec.ts | 11 +-- .../privilege-list.component.ts | 10 ++- .../user-details-row.component.spec.ts | 8 +- .../user-details-row.component.ts | 6 +- .../users/user-form/user-form.component.html | 8 +- .../user-form/user-form.component.spec.ts | 17 ++-- .../users/user-form/user-form.component.ts | 24 +++--- .../users/user-list/user-list.component.ts | 6 +- .../smart-task-card.component.spec.ts | 22 +++-- .../smart-task-card.component.ts | 11 +-- .../smart-task-form.component.html | 6 +- .../smart-task-form.component.spec.ts | 26 ++++-- .../smart-task-form.component.ts | 22 +++-- .../smart-task-list.component.spec.ts | 20 +++-- .../smart-task-list.component.ts | 11 +-- .../snapshot-task-card.component.spec.ts | 22 +++-- .../snapshot-task-card.component.ts | 11 +-- .../snapshot-task-form.component.html | 6 +- .../snapshot-task-form.component.spec.ts | 24 ++++-- .../snapshot-task-form.component.ts | 19 +++-- .../snapshot-task-list.component.spec.ts | 20 +++-- .../snapshot-task-list.component.ts | 16 ++-- .../vmware-snapshot-form.component.html | 6 +- .../vmware-snapshot-form.component.spec.ts | 24 ++++-- .../vmware-snapshot-form.component.ts | 19 +++-- .../vmware-snapshot-list.component.ts | 15 ++-- .../data-protection-card.component.spec.ts | 10 +-- .../data-protection-card.component.ts | 10 ++- ...capacity-management-card.component.spec.ts | 10 +-- ...aset-capacity-management-card.component.ts | 18 ++-- .../dataset-capacity-settings.component.html | 4 +- ...ataset-capacity-settings.component.spec.ts | 55 ++++++------ .../dataset-capacity-settings.component.ts | 16 ++-- .../roles-card/roles-card.component.spec.ts | 17 ++-- .../roles-card/roles-card.component.ts | 26 +++--- .../snapshot-add-form.component.html | 4 +- .../snapshot-add-form.component.spec.ts | 19 +++-- .../snapshot-add-form.component.ts | 20 +++-- .../snapshot-list.component.spec.ts | 8 +- .../snapshot-list/snapshot-list.component.ts | 6 +- .../static-route-form.component.html | 8 +- .../static-route-form.component.spec.ts | 38 +++++---- .../static-route-form.component.ts | 26 +++--- .../static-routes-card.component.spec.ts | 22 +++-- .../static-routes-card.component.ts | 16 ++-- .../nfs-card/nfs-card.component.spec.ts | 20 +++-- .../nfs-card/nfs-card.component.ts | 11 +-- .../smb-card/smb-card.component.spec.ts | 22 +++-- .../smb-card/smb-card.component.ts | 17 ++-- .../nfs/nfs-form/nfs-form.component.html | 6 +- .../nfs/nfs-form/nfs-form.component.spec.ts | 24 ++++-- .../nfs/nfs-form/nfs-form.component.ts | 18 ++-- .../nfs/nfs-list/nfs-list.component.spec.ts | 20 +++-- .../nfs/nfs-list/nfs-list.component.ts | 18 ++-- .../smb/smb-acl/smb-acl.component.html | 4 +- .../smb/smb-acl/smb-acl.component.spec.ts | 24 ++++-- .../sharing/smb/smb-acl/smb-acl.component.ts | 19 +++-- .../smb/smb-form/smb-form.component.html | 6 +- .../smb/smb-form/smb-form.component.spec.ts | 20 +++-- .../smb/smb-form/smb-form.component.ts | 19 ++--- .../smb/smb-list/smb-list.component.spec.ts | 22 +++-- .../smb/smb-list/smb-list.component.ts | 27 +++--- 89 files changed, 793 insertions(+), 713 deletions(-) delete mode 100644 src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts delete mode 100644 src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts diff --git a/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts b/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts deleted file mode 100644 index bce5903de65..00000000000 --- a/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { - createHostFactory, SpectatorHost, mockProvider, -} from '@ngneat/spectator/jest'; -import { of, Subject } from 'rxjs'; -import { DialogService } from 'app/modules/dialog/dialog.service'; -import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref'; -import { WarnAboutUnsavedChangesDirective } from './warn-about-unsaved-changes.directive'; - -describe('WarnAboutUnsavedChangesDirective', () => { - let spectator: SpectatorHost>; - - const createHost = createHostFactory({ - component: WarnAboutUnsavedChangesDirective, - imports: [ReactiveFormsModule], - providers: [ - mockProvider(DialogService, { - confirm: jest.fn(() => of(true)), - }), - { - provide: OldSlideInRef, - useFactory: () => ({ - close: jest.fn(), - slideInClosed$: new Subject(), - }), - }, - ], - }); - - beforeEach(() => { - spectator = createHost(` -
- `, { - hostProps: { - form: new FormGroup({}), - }, - }); - }); - - it('should emit close event if there are no unsaved changes', () => { - spectator.component.formGroup().markAsPristine(); - - spectator.detectChanges(); - - spectator.component.closeWithConfirmation().subscribe((shouldClose) => { - expect(shouldClose).toBe(true); - }); - }); - - it('should call confirmation dialog if there are unsaved changes', () => { - const dialogService = spectator.inject(DialogService); - - spectator.component.closeWithConfirmation().subscribe(() => { - expect(dialogService.confirm).toHaveBeenCalled(); - }); - }); -}); diff --git a/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts b/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts deleted file mode 100644 index 0b421951cda..00000000000 --- a/src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { - Directive, OnInit, HostListener, - input, -} from '@angular/core'; -import { FormGroup } from '@angular/forms'; -import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; -import { TranslateService } from '@ngx-translate/core'; -import { Observable, of } from 'rxjs'; -import { filter, switchMap, tap } from 'rxjs/operators'; -import { DialogService } from 'app/modules/dialog/dialog.service'; -import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref'; - -@UntilDestroy() -@Directive({ - selector: '[warnAboutUnsavedChanges]', - standalone: true, -}) -export class WarnAboutUnsavedChangesDirective implements OnInit { - readonly formGroup = input.required(); - - private formSubmitted = false; - - constructor( - private translate: TranslateService, - private dialogService: DialogService, - private slideInRef: OldSlideInRef, - ) {} - - ngOnInit(): void { - this.overrideSlideInClose(); - this.trackFormChanges(); - } - - @HostListener('ngSubmit') - onFormSubmit(): void { - this.formSubmitted = true; - } - - closeWithConfirmation(response?: T): Observable { - if (this.formGroup().pristine || (this.formSubmitted && !this.formGroup().invalid) || response) { - this.emitClose(response); - return of(true); - } - - return this.showConfirmDialog().pipe( - switchMap((shouldClose) => { - if (shouldClose) { - this.emitClose(response); - } - return of(shouldClose); - }), - ); - } - - private trackFormChanges(): void { - this.formGroup().valueChanges.pipe( - filter(() => !this.formGroup().pristine && this.formSubmitted), - tap(() => this.formSubmitted = false), - untilDestroyed(this), - ).subscribe(); - } - - private overrideSlideInClose(): void { - this.slideInRef.close = (response?: T) => this.closeWithConfirmation(response) - .pipe(untilDestroyed(this)) - .subscribe(); - } - - private showConfirmDialog(): Observable { - return this.dialogService.confirm({ - title: this.translate.instant('Unsaved Changes'), - message: this.translate.instant('You have unsaved changes. Are you sure you want to close?'), - cancelText: this.translate.instant('No'), - buttonText: this.translate.instant('Yes'), - buttonColor: 'red', - hideCheckbox: true, - }); - } - - private emitClose(response?: T): void { - this.slideInRef.slideInClosed$?.next(response); - this.slideInRef.slideInClosed$?.complete(); - } -} diff --git a/src/app/modules/truecommand/truecommand-button.component.ts b/src/app/modules/truecommand/truecommand-button.component.ts index 51e5a306005..18ba5f10593 100644 --- a/src/app/modules/truecommand/truecommand-button.component.ts +++ b/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 { diff --git a/src/app/pages/apps/components/catalog-settings/apps-settings.component.html b/src/app/pages/apps/components/catalog-settings/apps-settings.component.html index 2a651e51740..1b52b9724eb 100644 --- a/src/app/pages/apps/components/catalog-settings/apps-settings.component.html +++ b/src/app/pages/apps/components/catalog-settings/apps-settings.component.html @@ -1,8 +1,8 @@ - +> diff --git a/src/app/pages/apps/components/catalog-settings/apps-settings.component.spec.ts b/src/app/pages/apps/components/catalog-settings/apps-settings.component.spec.ts index c4fb77563a4..0b313937158 100644 --- a/src/app/pages/apps/components/catalog-settings/apps-settings.component.spec.ts +++ b/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 = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: AppsSettingsComponent, imports: [ @@ -50,6 +55,8 @@ describe('AppsSettingsComponent', () => { label: 'TrueNAS', preferred_trains: ['test'], } as CatalogConfig), + mockCall('docker.status'), + mockCall('docker.config', dockerConfig), mockJob('docker.update', fakeSuccessfulJob()), ]), mockProvider(DialogService, { @@ -57,15 +64,11 @@ describe('AppsSettingsComponent', () => { 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(); }); }); }); diff --git a/src/app/pages/apps/components/catalog-settings/apps-settings.component.ts b/src/app/pages/apps/components/catalog-settings/apps-settings.component.ts index 2aa4245b3d9..c83d58c271b 100644 --- a/src/app/pages/apps/components/catalog-settings/apps-settings.component.ts +++ b/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, + public slideInRef: SlideInRef, 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; } diff --git a/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.spec.ts b/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.spec.ts index 4f6a571e40f..cfa29ed9d58 100644 --- a/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.spec.ts +++ b/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.spec.ts @@ -4,7 +4,7 @@ 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'; @@ -12,10 +12,10 @@ import { SearchInput1Component } from 'app/modules/forms/search-input1/search-in 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(), - 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); }); }); diff --git a/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.ts b/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.ts index e86d07aede2..fdd0fa4b498 100644 --- a/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.ts +++ b/src/app/pages/apps/components/docker-images/docker-images-list/docker-images-list.component.ts @@ -29,11 +29,11 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; import { FileSizePipe } from 'app/modules/pipes/file-size/file-size.pipe'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DockerImageDeleteDialogComponent } from 'app/pages/apps/components/docker-images/docker-image-delete-dialog/docker-image-delete-dialog.component'; import { dockerImagesListElements } from 'app/pages/apps/components/docker-images/docker-images-list/docker-images-list.elements'; import { PullImageFormComponent } from 'app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; // TODO: Exclude AnythingUi when NAS-127632 is done @@ -138,7 +138,7 @@ export class DockerImagesListComponent implements OnInit { public formatter: IxFormatterService, private api: ApiService, private matDialog: MatDialog, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, private fileSizePipe: FileSizePipe, ) { @@ -157,9 +157,8 @@ export class DockerImagesListComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(PullImageFormComponent); - slideInRef.slideInClosed$ - .pipe(filter(Boolean), untilDestroyed(this)) + this.slideIn.open(PullImageFormComponent) + .pipe(filter((response) => !!response.response), untilDestroyed(this)) .subscribe(() => this.refresh()); } diff --git a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.html b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.html index d0c7dbbe6a7..6ad8d55ead7 100644 --- a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.html +++ b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.html @@ -1,8 +1,8 @@ - +> diff --git a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.spec.ts b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.spec.ts index 53b8c86c33f..a4970026e4c 100644 --- a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.spec.ts +++ b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.spec.ts @@ -9,16 +9,22 @@ import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; import { DialogService } from 'app/modules/dialog/dialog.service'; 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 { 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 { PullImageFormComponent } from 'app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; describe('PullImageFormComponent', () => { let spectator: Spectator; let loader: HarnessLoader; let api: ApiService; + + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: PullImageFormComponent, imports: [ @@ -28,9 +34,10 @@ describe('PullImageFormComponent', () => { mockApi([ mockJob('app.image.pull'), ]), - mockProvider(OldSlideInService), - mockProvider(OldSlideInRef), - { provide: SLIDE_IN_DATA, useValue: undefined }, + mockProvider(SlideIn, { + components$: of([]), + }), + mockProvider(SlideInRef, slideInRef), mockProvider(FormErrorHandlerService), mockProvider(DialogService, { jobDialog: jest.fn(() => ({ diff --git a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.ts b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.ts index fc5156280e6..a8594732ff2 100644 --- a/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.ts +++ b/src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.ts @@ -13,8 +13,8 @@ import { DialogService } from 'app/modules/dialog/dialog.service'; import { FormActionsComponent } from 'app/modules/forms/ix-forms/components/form-actions/form-actions.component'; import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component'; import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component'; -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 { ErrorHandlerService } from 'app/services/error-handler.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -29,7 +29,7 @@ import { ApiService } from 'app/services/websocket/api.service'; imports: [ ReactiveFormsModule, TranslateModule, - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, MatButton, @@ -61,7 +61,7 @@ export class PullImageFormComponent { constructor( private api: ApiService, - private slideInRef: OldSlideInRef, + public slideInRef: SlideInRef, private cdr: ChangeDetectorRef, private errorHandler: ErrorHandlerService, private fb: FormBuilder, @@ -97,7 +97,7 @@ export class PullImageFormComponent { next: () => { this.isFormLoading = false; this.cdr.markForCheck(); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isFormLoading = false; diff --git a/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.spec.ts b/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.spec.ts index 4954b6387d6..34d0560a76e 100644 --- a/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.spec.ts +++ b/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.spec.ts @@ -7,10 +7,11 @@ import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectat import { of } from 'rxjs'; import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; import { DialogService } from 'app/modules/dialog/dialog.service'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { AppSettingsButtonComponent } from 'app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component'; import { SelectPoolDialogComponent } from 'app/pages/apps/components/select-pool-dialog/select-pool-dialog.component'; +import { AppsStore } from 'app/pages/apps/store/apps-store.service'; import { DockerStore } from 'app/pages/apps/store/docker.store'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; describe('AppSettingsButtonComponent', () => { let spectator: Spectator; @@ -23,7 +24,9 @@ describe('AppSettingsButtonComponent', () => { providers: [ mockAuth(), mockProvider(MatDialog), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + open: jest.fn(() => of()), + }), mockProvider(DialogService, { confirm: jest.fn(() => of(true)), jobDialog: jest.fn(() => ({ @@ -34,6 +37,9 @@ describe('AppSettingsButtonComponent', () => { selectedPool$: of('pool'), setDockerPool: jest.fn(() => of({})), }), + mockProvider(AppsStore, { + loadCatalog: jest.fn(() => of({})), + }), ], }); diff --git a/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.ts b/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.ts index c8eadd2a61c..55e48a7aeac 100644 --- a/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.ts +++ b/src/app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component.ts @@ -1,6 +1,6 @@ import { AsyncPipe } from '@angular/common'; import { - ChangeDetectionStrategy, Component, Injector, ViewContainerRef, + ChangeDetectionStrategy, Component, ViewContainerRef, } from '@angular/core'; import { MatButton } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; @@ -8,20 +8,21 @@ import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; import { RouterLink } from '@angular/router'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; -import { filter } from 'rxjs'; +import { filter, forkJoin, switchMap } from 'rxjs'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; import { UiSearchDirective } from 'app/directives/ui-search.directive'; import { Role } from 'app/enums/role.enum'; import { helptextApps } from 'app/helptext/apps/apps'; import { DialogService } from 'app/modules/dialog/dialog.service'; import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { AppsSettingsComponent } from 'app/pages/apps/components/catalog-settings/apps-settings.component'; import { appSettingsButtonElements } from 'app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.elements'; import { SelectPoolDialogComponent } from 'app/pages/apps/components/select-pool-dialog/select-pool-dialog.component'; +import { AppsStore } from 'app/pages/apps/store/apps-store.service'; import { DockerStore } from 'app/pages/apps/store/docker.store'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; @UntilDestroy() @Component({ @@ -49,14 +50,14 @@ export class AppSettingsButtonComponent { protected readonly updateDockerRoles = [Role.DockerWrite]; constructor( - private ixSlideInService: OldSlideInService, + private ixSlideIn: SlideIn, private dialogService: DialogService, private matDialog: MatDialog, private translate: TranslateService, private snackbar: SnackbarService, protected dockerStore: DockerStore, + protected appsStore: AppsStore, private viewContainerRef: ViewContainerRef, - private injector: Injector, ) { } onChoosePool(): void { @@ -79,6 +80,13 @@ export class AppSettingsButtonComponent { } manageCatalog(): void { - this.ixSlideInService.open(AppsSettingsComponent, { injector: this.injector }); + this.ixSlideIn.open(AppsSettingsComponent).pipe( + filter((response) => !!response.response), + switchMap(() => forkJoin([ + this.dockerStore.reloadDockerConfig(), + this.appsStore.loadCatalog(), + ])), + untilDestroyed(this), + ).subscribe(); } } diff --git a/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.spec.ts b/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.spec.ts index 7c094b7d281..9659febe33e 100644 --- a/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.spec.ts +++ b/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.spec.ts @@ -13,12 +13,12 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxTablePagerShowMoreComponent, } from 'app/modules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.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 { SshKeypairCardComponent } from 'app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component'; import { SshKeypairFormComponent } from 'app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component'; import { DownloadService } from 'app/services/download.service'; import { KeychainCredentialService } from 'app/services/keychain-credential.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; describe('SshKeypairCardComponent', () => { @@ -47,6 +47,12 @@ describe('SshKeypairCardComponent', () => { }, ] as KeychainSshKeyPair[]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SshKeypairCardComponent, imports: [ @@ -60,13 +66,10 @@ describe('SshKeypairCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of(true) }; - }), - onClose$: of(), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -95,14 +98,14 @@ describe('SshKeypairCardComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SshKeypairFormComponent); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SshKeypairFormComponent); }); it('opens form when "Edit" button is pressed', async () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 1); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SshKeypairFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SshKeypairFormComponent, { data: credentials[0], }); }); diff --git a/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.ts b/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.ts index fa8e79ffcd7..dafaffe85d3 100644 --- a/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.ts +++ b/src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.ts @@ -25,6 +25,7 @@ import { IxTablePagerShowMoreComponent } from 'app/modules/ix-table/components/i import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { sshKeypairsCardElements } from 'app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.elements'; import { @@ -33,7 +34,6 @@ import { import { DownloadService } from 'app/services/download.service'; import { ErrorHandlerService } from 'app/services/error-handler.service'; import { KeychainCredentialService } from 'app/services/keychain-credential.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; @UntilDestroy() @@ -98,7 +98,7 @@ export class SshKeypairCardComponent implements OnInit { constructor( private api: ApiService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, protected emptyService: EmptyService, private dialog: DialogService, @@ -130,15 +130,19 @@ export class SshKeypairCardComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(SshKeypairFormComponent); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SshKeypairFormComponent).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getCredentials(); }); } doEdit(credential: KeychainSshKeyPair): void { - const slideInRef = this.slideInService.open(SshKeypairFormComponent, { data: credential }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SshKeypairFormComponent, { data: credential }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getCredentials(); }); } diff --git a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.html b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.html index 9725a79ca46..5f1a73101f8 100644 --- a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.html +++ b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.html @@ -1,8 +1,8 @@ - +> diff --git a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.spec.ts b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.spec.ts index 0c4a96c9403..c36c4b0fda4 100644 --- a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.spec.ts +++ b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.spec.ts @@ -15,8 +15,7 @@ import { } from 'app/modules/dialog/dialog.service'; 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 { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { SshKeypairFormComponent } from 'app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component'; import { DownloadService } from 'app/services/download.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -34,6 +33,12 @@ describe('SshKeypairFormComponent', () => { }, } as KeychainSshKeyPair; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SshKeypairFormComponent, imports: [ @@ -48,12 +53,11 @@ describe('SshKeypairFormComponent', () => { mockCall('keychaincredential.create'), mockCall('keychaincredential.update'), ]), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(DownloadService), mockProvider(FormErrorHandlerService), mockProvider(DialogService), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -140,7 +144,7 @@ describe('SshKeypairFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: fakeSshKeyPair }, + mockProvider(SlideInRef, { ...slideInRef, getData: jest.fn(() => fakeSshKeyPair) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.ts b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.ts index 6cbdd86927d..4403ca7b826 100644 --- a/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.ts +++ b/src/app/pages/credentials/backup-credentials/ssh-keypair-form/ssh-keypair-form.component.ts @@ -1,6 +1,6 @@ import { AsyncPipe } from '@angular/common'; import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { Validators, ReactiveFormsModule } from '@angular/forms'; import { MatButton, MatIconButton } from '@angular/material/button'; @@ -9,7 +9,7 @@ import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu'; import { FormBuilder } from '@ngneat/reactive-forms'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; import { KeychainCredentialType } from 'app/enums/keychain-credential-type.enum'; @@ -24,9 +24,8 @@ import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/for import { atLeastOne } from 'app/modules/forms/ix-forms/validators/at-least-one-validation'; import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; import { AppLoaderService } from 'app/modules/loader/app-loader.service'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DownloadService } from 'app/services/download.service'; @@ -41,7 +40,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -70,6 +69,8 @@ export class SshKeypairFormComponent implements OnInit { isFormLoading = false; + protected editingKeypair: KeychainSshKeyPair; + form = this.fb.group({ name: ['', Validators.required], private_key: [''], @@ -90,7 +91,6 @@ export class SshKeypairFormComponent implements OnInit { constructor( private fb: FormBuilder, private api: ApiService, - private slideInRef: OldSlideInRef, private cdr: ChangeDetectorRef, private translate: TranslateService, private snackbar: SnackbarService, @@ -98,8 +98,13 @@ export class SshKeypairFormComponent implements OnInit { private formErrorHandler: FormErrorHandlerService, private loader: AppLoaderService, private download: DownloadService, - @Inject(SLIDE_IN_DATA) private editingKeypair: KeychainSshKeyPair, - ) { } + public slideInRef: SlideInRef, + ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.editingKeypair = this.slideInRef.getData(); + } ngOnInit(): void { if (this.editingKeypair) { @@ -172,7 +177,7 @@ export class SshKeypairFormComponent implements OnInit { this.isFormLoading = false; this.cdr.markForCheck(); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isFormLoading = false; diff --git a/src/app/pages/credentials/groups/group-details-row/group-details-row.component.spec.ts b/src/app/pages/credentials/groups/group-details-row/group-details-row.component.spec.ts index c7f09134d80..602d00f4101 100644 --- a/src/app/pages/credentials/groups/group-details-row/group-details-row.component.spec.ts +++ b/src/app/pages/credentials/groups/group-details-row/group-details-row.component.spec.ts @@ -15,12 +15,13 @@ import { Preferences } from 'app/interfaces/preferences.interface'; import { IxTableExpandableRowComponent, } from 'app/modules/ix-table/components/ix-table-expandable-row/ix-table-expandable-row.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { DeleteGroupDialogComponent, } from 'app/pages/credentials/groups/group-details-row/delete-group-dialog/delete-group-dialog.component'; import { GroupDetailsRowComponent } from 'app/pages/credentials/groups/group-details-row/group-details-row.component'; import { GroupFormComponent } from 'app/pages/credentials/groups/group-form/group-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { selectPreferences } from 'app/store/preferences/preferences.selectors'; const dummyGroup = { @@ -36,6 +37,12 @@ describe('GroupDetailsRowComponent', () => { let spectator: SpectatorRouting; let loader: HarnessLoader; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => dummyGroup), + }; + const createComponent = createRoutingFactory({ component: GroupDetailsRowComponent, imports: [ @@ -43,7 +50,10 @@ describe('GroupDetailsRowComponent', () => { MockComponent(GroupFormComponent), ], providers: [ - mockProvider(OldSlideInService), + mockProvider(SlideInRef, slideInRef), + mockProvider(SlideIn, { + open: jest.fn(() => of()), + }), mockApi([ mockCall('user.query'), mockCall('group.delete'), @@ -93,7 +103,7 @@ describe('GroupDetailsRowComponent', () => { const editButton = await loader.getHarness(MatButtonHarness.with({ text: /Edit/ })); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(GroupFormComponent, { data: dummyGroup }); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(GroupFormComponent, { data: dummyGroup }); }); it('should open DeleteUserGroup when Delete button is pressed', async () => { diff --git a/src/app/pages/credentials/groups/group-details-row/group-details-row.component.ts b/src/app/pages/credentials/groups/group-details-row/group-details-row.component.ts index 6a470afc8c3..93e95b6243a 100644 --- a/src/app/pages/credentials/groups/group-details-row/group-details-row.component.ts +++ b/src/app/pages/credentials/groups/group-details-row/group-details-row.component.ts @@ -13,12 +13,12 @@ import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; import { IxTableExpandableRowComponent, } from 'app/modules/ix-table/components/ix-table-expandable-row/ix-table-expandable-row.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DeleteGroupDialogComponent, } from 'app/pages/credentials/groups/group-details-row/delete-group-dialog/delete-group-dialog.component'; import { GroupFormComponent } from 'app/pages/credentials/groups/group-form/group-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; @UntilDestroy() @Component({ @@ -45,13 +45,13 @@ export class GroupDetailsRowComponent { protected readonly Role = Role; constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private router: Router, private matDialog: MatDialog, ) {} doEdit(group: Group): void { - this.slideInService.open(GroupFormComponent, { data: group }); + this.slideIn.open(GroupFormComponent, { data: group }); } openGroupMembersForm(): void { diff --git a/src/app/pages/credentials/groups/group-form/group-form.component.html b/src/app/pages/credentials/groups/group-form/group-form.component.html index 410fad38607..7196783e7f9 100644 --- a/src/app/pages/credentials/groups/group-form/group-form.component.html +++ b/src/app/pages/credentials/groups/group-form/group-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/credentials/groups/group-form/group-form.component.spec.ts b/src/app/pages/credentials/groups/group-form/group-form.component.spec.ts index 7bc4ea9eaed..1c1cbc97702 100644 --- a/src/app/pages/credentials/groups/group-form/group-form.component.spec.ts +++ b/src/app/pages/credentials/groups/group-form/group-form.component.spec.ts @@ -15,8 +15,7 @@ import { Privilege } from 'app/interfaces/privilege.interface'; import { IxInputHarness } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.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 { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { GroupFormComponent } from 'app/pages/credentials/groups/group-form/group-form.component'; import { ApiService } from 'app/services/websocket/api.service'; @@ -54,6 +53,12 @@ describe('GroupFormComponent', () => { group: 'editing', } as Group; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: GroupFormComponent, imports: [ @@ -68,11 +73,10 @@ describe('GroupFormComponent', () => { mockCall('privilege.update'), mockCall('group.get_next_gid', 1234), ]), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(FormErrorHandlerService), provideMockStore(), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -125,7 +129,7 @@ describe('GroupFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: fakeDataGroup }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => fakeDataGroup }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/credentials/groups/group-form/group-form.component.ts b/src/app/pages/credentials/groups/group-form/group-form.component.ts index 670424615c9..362892e5ccd 100644 --- a/src/app/pages/credentials/groups/group-form/group-form.component.ts +++ b/src/app/pages/credentials/groups/group-form/group-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 { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fi import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component'; import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; import { forbiddenValues } from 'app/modules/forms/ix-forms/validators/forbidden-values-validation/forbidden-values-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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { groupAdded, groupChanged } from 'app/pages/credentials/groups/store/group.actions'; @@ -43,7 +42,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -73,6 +72,7 @@ export class GroupFormComponent implements OnInit { privilegesList: Privilege[]; initialGroupRelatedPrivilegesList: Privilege[] = []; + protected editingGroup: Group; form = this.fb.group({ gid: [null as number, [Validators.required, Validators.pattern(/^\d+$/)]], @@ -100,15 +100,19 @@ export class GroupFormComponent implements OnInit { constructor( private fb: FormBuilder, private api: ApiService, - private slideInRef: OldSlideInRef, private cdr: ChangeDetectorRef, private errorHandler: ErrorHandlerService, private formErrorHandler: FormErrorHandlerService, private translate: TranslateService, private store$: Store, private snackbar: SnackbarService, - @Inject(SLIDE_IN_DATA) private editingGroup: Group, - ) { } + public slideInRef: SlideInRef, + ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.editingGroup = this.slideInRef.getData(); + } ngOnInit(): void { this.setupForm(); @@ -195,7 +199,7 @@ export class GroupFormComponent implements OnInit { } this.isFormLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); this.cdr.markForCheck(); }, error: (error: unknown) => { diff --git a/src/app/pages/credentials/groups/group-list/group-list.component.ts b/src/app/pages/credentials/groups/group-list/group-list.component.ts index e4e27af94de..6caea753df8 100644 --- a/src/app/pages/credentials/groups/group-list/group-list.component.ts +++ b/src/app/pages/credentials/groups/group-list/group-list.component.ts @@ -34,13 +34,13 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { GroupDetailsRowComponent } from 'app/pages/credentials/groups/group-details-row/group-details-row.component'; import { GroupFormComponent } from 'app/pages/credentials/groups/group-form/group-form.component'; import { groupListElements } from 'app/pages/credentials/groups/group-list/group-list.elements'; import { groupPageEntered, groupRemoved } from 'app/pages/credentials/groups/store/group.actions'; import { selectGroupState, selectGroupsTotal, selectGroups } from 'app/pages/credentials/groups/store/group.selectors'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { AppState } from 'app/store'; import { builtinGroupsToggled } from 'app/store/preferences/preferences.actions'; import { waitForPreferences } from 'app/store/preferences/preferences.selectors'; @@ -140,7 +140,7 @@ export class GroupListComponent implements OnInit { constructor( private emptyService: EmptyService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private cdr: ChangeDetectorRef, private store$: Store, private translate: TranslateService, @@ -158,7 +158,7 @@ export class GroupListComponent implements OnInit { } doAdd(): void { - this.slideInService.open(GroupFormComponent); + this.slideIn.open(GroupFormComponent); } onListFiltered(query: string): void { diff --git a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.html b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.html index 0915cdd5d1b..177e2719ec6 100644 --- a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.html +++ b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.spec.ts b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.spec.ts index 22764db9146..891bea617a9 100644 --- a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.spec.ts +++ b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.spec.ts @@ -13,8 +13,7 @@ import { Privilege, PrivilegeRole } from 'app/interfaces/privilege.interface'; import { DialogService } from 'app/modules/dialog/dialog.service'; import { IxSelectHarness } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.harness'; 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 { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { PrivilegeFormComponent } from 'app/pages/credentials/groups/privilege/privilege-form/privilege-form.component'; import { ApiService } from 'app/services/websocket/api.service'; import { selectGeneralConfig } from 'app/store/system-config/system-config.selectors'; @@ -25,6 +24,12 @@ describe('PrivilegeFormComponent', () => { let loader: HarnessLoader; let api: ApiService; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const fakeDataPrivilege = { id: 10, name: 'privilege', @@ -61,7 +66,7 @@ describe('PrivilegeFormComponent', () => { ] as PrivilegeRole[]), mockCall('system.general.update'), ]), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), @@ -80,7 +85,6 @@ describe('PrivilegeFormComponent', () => { ], }), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -128,7 +132,7 @@ describe('PrivilegeFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: fakeDataPrivilege }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => fakeDataPrivilege }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -173,7 +177,7 @@ describe('PrivilegeFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: { ...fakeDataPrivilege, builtin_name: 'ADMIN' } }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => ({ ...fakeDataPrivilege, builtin_name: 'ADMIN' }) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.ts b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.ts index ccc34a5d97f..4a4b8d3c5a7 100644 --- a/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.ts +++ b/src/app/pages/credentials/groups/privilege/privilege-form/privilege-form.component.ts @@ -1,5 +1,5 @@ import { - Component, ChangeDetectionStrategy, ChangeDetectorRef, Inject, OnInit, + Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { Validators, ReactiveFormsModule } from '@angular/forms'; @@ -26,9 +26,8 @@ import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fi import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component'; import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component'; import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; -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/services/websocket/api.service'; import { AppState } from 'app/store'; @@ -43,7 +42,7 @@ import { selectIsEnterprise } from 'app/store/system-info/system-info.selectors' changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -76,6 +75,7 @@ export class PrivilegeFormComponent implements OnInit { protected readonly helptext = helptextPrivilege; protected readonly isEnterprise = toSignal(this.store$.select(selectIsEnterprise)); + protected existingPrivilege: Privilege; get isNew(): boolean { return !this.existingPrivilege; @@ -131,11 +131,15 @@ export class PrivilegeFormComponent implements OnInit { private api: ApiService, private cdr: ChangeDetectorRef, private errorHandler: FormErrorHandlerService, - private slideInRef: OldSlideInRef, private store$: Store, private dialog: DialogService, - @Inject(SLIDE_IN_DATA) private existingPrivilege: Privilege, - ) { } + public slideInRef: SlideInRef, + ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.existingPrivilege = this.slideInRef.getData(); + } ngOnInit(): void { if (this.existingPrivilege) { @@ -185,7 +189,7 @@ export class PrivilegeFormComponent implements OnInit { ).subscribe({ next: () => { this.isLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); this.cdr.markForCheck(); }, error: (error: unknown) => { diff --git a/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.spec.ts b/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.spec.ts index 948c22c8244..bb0d4776f4d 100644 --- a/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.spec.ts +++ b/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.spec.ts @@ -10,9 +10,9 @@ import { DialogService } from 'app/modules/dialog/dialog.service'; 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 { PrivilegeFormComponent } from 'app/pages/credentials/groups/privilege/privilege-form/privilege-form.component'; import { PrivilegeListComponent } from 'app/pages/credentials/groups/privilege/privilege-list/privilege-list.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; const fakePrivilegeDataSource: Privilege[] = [ @@ -53,11 +53,8 @@ describe('PrivilegeListComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of(true) }; - }), - onClose$: of(), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), mockAuth(), ], @@ -84,7 +81,7 @@ describe('PrivilegeListComponent', () => { const editButton = await table.getHarnessInRow(IxIconHarness.with({ name: 'edit' }), 'privilege1'); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(PrivilegeFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(PrivilegeFormComponent, { data: fakePrivilegeDataSource[0], }); }); diff --git a/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.ts b/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.ts index 3bbd1df8781..80c2c511314 100644 --- a/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.ts +++ b/src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.ts @@ -34,11 +34,11 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { TablePagination } from 'app/modules/ix-table/interfaces/table-pagination.interface'; import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { PrivilegeFormComponent } from 'app/pages/credentials/groups/privilege/privilege-form/privilege-form.component'; import { privilegesListElements } from 'app/pages/credentials/groups/privilege/privilege-list/privilege-list.elements'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; @UntilDestroy() @@ -143,7 +143,7 @@ export class PrivilegeListComponent implements OnInit { ); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private api: ApiService, private translate: TranslateService, private dialogService: DialogService, @@ -161,8 +161,10 @@ export class PrivilegeListComponent implements OnInit { } openForm(privilege?: Privilege): void { - const slideInRef = this.slideInService.open(PrivilegeFormComponent, { data: privilege }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(PrivilegeFormComponent, { data: privilege }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getPrivileges(); }); } diff --git a/src/app/pages/credentials/users/user-details-row/user-details-row.component.spec.ts b/src/app/pages/credentials/users/user-details-row/user-details-row.component.spec.ts index b9ed7527c92..f4a449e21bd 100644 --- a/src/app/pages/credentials/users/user-details-row/user-details-row.component.spec.ts +++ b/src/app/pages/credentials/users/user-details-row/user-details-row.component.spec.ts @@ -16,11 +16,11 @@ import { IxTableExpandableRowComponent, } from 'app/modules/ix-table/components/ix-table-expandable-row/ix-table-expandable-row.component'; import { AppLoaderService } from 'app/modules/loader/app-loader.service'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { DeleteUserDialogComponent, } from 'app/pages/credentials/users/user-details-row/delete-user-dialog/delete-user-dialog.component'; import { UserFormComponent } from 'app/pages/credentials/users/user-form/user-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { selectPreferences } from 'app/store/preferences/preferences.selectors'; import { UserDetailsRowComponent } from './user-details-row.component'; @@ -58,7 +58,9 @@ describe('UserDetailsRowComponent', () => { UserFormComponent, ], providers: [ - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + open: jest.fn(), + }), mockApi([ mockCall('user.delete'), mockCall('group.query', []), @@ -97,7 +99,7 @@ describe('UserDetailsRowComponent', () => { const editButton = await loader.getHarness(MatButtonHarness.with({ text: /Edit/ })); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith( + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith( UserFormComponent, { wide: true, data: dummyUser }, ); diff --git a/src/app/pages/credentials/users/user-details-row/user-details-row.component.ts b/src/app/pages/credentials/users/user-details-row/user-details-row.component.ts index d91f879ebdf..4b82f5da3dc 100644 --- a/src/app/pages/credentials/users/user-details-row/user-details-row.component.ts +++ b/src/app/pages/credentials/users/user-details-row/user-details-row.component.ts @@ -16,13 +16,13 @@ import { User } from 'app/interfaces/user.interface'; import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; import { IxTableExpandableRowComponent } from 'app/modules/ix-table/components/ix-table-expandable-row/ix-table-expandable-row.component'; import { YesNoPipe } from 'app/modules/pipes/yes-no/yes-no.pipe'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DeleteUserDialogComponent, } from 'app/pages/credentials/users/user-details-row/delete-user-dialog/delete-user-dialog.component'; import { UserFormComponent } from 'app/pages/credentials/users/user-form/user-form.component'; import { AuthService } from 'app/services/auth/auth.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { UrlOptionsService } from 'app/services/url-options.service'; @UntilDestroy() @@ -50,7 +50,7 @@ export class UserDetailsRowComponent { constructor( private translate: TranslateService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private matDialog: MatDialog, private yesNoPipe: YesNoPipe, private urlOptions: UrlOptionsService, @@ -107,7 +107,7 @@ export class UserDetailsRowComponent { } doEdit(user: User): void { - this.slideInService.open(UserFormComponent, { wide: true, data: user }); + this.slideIn.open(UserFormComponent, { wide: true, data: user }); } doDelete(user: User): void { diff --git a/src/app/pages/credentials/users/user-form/user-form.component.html b/src/app/pages/credentials/users/user-form/user-form.component.html index 8ede1386770..4094b6d7579 100644 --- a/src/app/pages/credentials/users/user-form/user-form.component.html +++ b/src/app/pages/credentials/users/user-form/user-form.component.html @@ -1,6 +1,10 @@ - + -
+
diff --git a/src/app/pages/credentials/users/user-form/user-form.component.spec.ts b/src/app/pages/credentials/users/user-form/user-form.component.spec.ts index 500ca3a34ba..fe64f2655d9 100644 --- a/src/app/pages/credentials/users/user-form/user-form.component.spec.ts +++ b/src/app/pages/credentials/users/user-form/user-form.component.spec.ts @@ -19,8 +19,7 @@ import { IxInputHarness } from 'app/modules/forms/ix-forms/components/ix-input/i import { IxPermissionsComponent } from 'app/modules/forms/ix-forms/components/ix-permissions/ix-permissions.component'; 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 { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { selectUsers } from 'app/pages/credentials/users/store/user.selectors'; import { DownloadService } from 'app/services/download.service'; import { FilesystemService } from 'app/services/filesystem.service'; @@ -64,6 +63,13 @@ describe('UserFormComponent', () => { let spectator: Spectator; let loader: HarnessLoader; let api: ApiService; + + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: UserFormComponent, imports: [ @@ -86,7 +92,7 @@ describe('UserFormComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(StorageService, { filesystemStat: jest.fn(() => of({ mode: 16832 })), }), @@ -107,7 +113,6 @@ describe('UserFormComponent', () => { }], }), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -181,7 +186,7 @@ describe('UserFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: mockUser }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => mockUser }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -308,7 +313,7 @@ describe('UserFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: builtinUser }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => builtinUser }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/credentials/users/user-form/user-form.component.ts b/src/app/pages/credentials/users/user-form/user-form.component.ts index df84bed5fb9..de75fcf7405 100644 --- a/src/app/pages/credentials/users/user-form/user-form.component.ts +++ b/src/app/pages/credentials/users/user-form/user-form.component.ts @@ -1,5 +1,5 @@ import { - Component, ChangeDetectionStrategy, ChangeDetectorRef, Inject, OnInit, + Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, } from '@angular/core'; import { Validators, ReactiveFormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; @@ -16,7 +16,6 @@ import { } from 'rxjs/operators'; import { allCommands } from 'app/constants/all-commands.constant'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; -import { WarnAboutUnsavedChangesDirective } from 'app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive'; import { Role } from 'app/enums/role.enum'; import { choicesToOptions } from 'app/helpers/operators/options.operators'; import { helptextUsers } from 'app/helptext/account/user-form'; @@ -44,11 +43,8 @@ import { IxValidatorsService } from 'app/modules/forms/ix-forms/services/ix-vali import { emailValidator } from 'app/modules/forms/ix-forms/validators/email-validation/email-validation'; import { forbiddenValues } from 'app/modules/forms/ix-forms/validators/forbidden-values-validation/forbidden-values-validation'; import { 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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { userAdded, userChanged } from 'app/pages/credentials/users/store/user.actions'; @@ -71,7 +67,7 @@ const defaultHomePath = '/var/empty'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, ReactiveFormsModule, IxFieldsetComponent, IxInputComponent, @@ -90,7 +86,6 @@ const defaultHomePath = '/var/empty'; MatButton, TestDirective, TranslateModule, - WarnAboutUnsavedChangesDirective, ], }) export class UserFormComponent implements OnInit { @@ -98,6 +93,7 @@ export class UserFormComponent implements OnInit { subscriptions: Subscription[] = []; homeModeOldValue = ''; protected readonly requiredRoles = [Role.AccountWrite]; + protected editingUser: User | undefined; get isNewUser(): boolean { return !this.editingUser; @@ -226,15 +222,19 @@ export class UserFormComponent implements OnInit { private translate: TranslateService, private validatorsService: IxValidatorsService, private filesystemService: FilesystemService, - private slideInRef: OldSlideInRef, private snackbar: SnackbarService, private storageService: StorageService, private downloadService: DownloadService, private store$: Store, private dialog: DialogService, private userService: UserService, - @Inject(SLIDE_IN_DATA) private editingUser: User, + public slideInRef: SlideInRef, ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.editingUser = this.slideInRef.getData(); + this.form.controls.smb.errors$.pipe( filter((error) => error?.manualValidateErrorMsg), switchMap(() => this.form.controls.password.valueChanges), @@ -394,7 +394,7 @@ export class UserFormComponent implements OnInit { this.store$.dispatch(userChanged({ user })); } this.isFormLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); this.cdr.markForCheck(); }, error: (error: unknown) => { diff --git a/src/app/pages/credentials/users/user-list/user-list.component.ts b/src/app/pages/credentials/users/user-list/user-list.component.ts index 2f19514e5d3..cf5d794139b 100644 --- a/src/app/pages/credentials/users/user-list/user-list.component.ts +++ b/src/app/pages/credentials/users/user-list/user-list.component.ts @@ -32,13 +32,13 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { userPageEntered, userRemoved } from 'app/pages/credentials/users/store/user.actions'; import { selectUsers, selectUserState, selectUsersTotal } from 'app/pages/credentials/users/store/user.selectors'; import { UserDetailsRowComponent } from 'app/pages/credentials/users/user-details-row/user-details-row.component'; import { UserFormComponent } from 'app/pages/credentials/users/user-form/user-form.component'; import { userListElements } from 'app/pages/credentials/users/user-list/user-list.elements'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { AppState } from 'app/store'; import { builtinUsersToggled } from 'app/store/preferences/preferences.actions'; import { waitForPreferences } from 'app/store/preferences/preferences.selectors'; @@ -131,7 +131,7 @@ export class UserListComponent implements OnInit { } constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private cdr: ChangeDetectorRef, private store$: Store, private translate: TranslateService, @@ -177,7 +177,7 @@ export class UserListComponent implements OnInit { } doAdd(): void { - this.slideInService.open(UserFormComponent, { wide: true }); + this.slideIn.open(UserFormComponent, { wide: true }); } navigateToApiKeys(): void { diff --git a/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.spec.ts b/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.spec.ts index 48b30e6303c..6850921dead 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.spec.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.spec.ts @@ -19,11 +19,11 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxCellScheduleComponent, } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.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 { SmartTaskCardComponent } from 'app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component'; import { SmartTaskFormComponent } from 'app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectSystemConfigState } from 'app/store/system-config/system-config.selectors'; @@ -74,6 +74,12 @@ describe('SmartTaskCardComponent', () => { } as Disk, ]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SmartTaskCardComponent, overrideComponents: [ @@ -102,12 +108,10 @@ describe('SmartTaskCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of() }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -147,7 +151,7 @@ describe('SmartTaskCardComponent', () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 5); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmartTaskFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmartTaskFormComponent, { data: expect.objectContaining(smartTasks[0]), }); @@ -158,7 +162,7 @@ describe('SmartTaskCardComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmartTaskFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmartTaskFormComponent, { data: undefined, }); diff --git a/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.ts b/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.ts index 27e108d9b67..d8f55a55da1 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.ts @@ -33,10 +33,10 @@ import { IxTableHeadComponent } from 'app/modules/ix-table/components/ix-table-h import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { createTable } from 'app/modules/ix-table/utils'; import { scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { SmartTaskFormComponent } from 'app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { StorageService } from 'app/services/storage.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -113,7 +113,7 @@ export class SmartTaskCardComponent implements OnInit { }); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, private errorHandler: ErrorHandlerService, private api: ApiService, @@ -142,9 +142,10 @@ export class SmartTaskCardComponent implements OnInit { } openForm(row?: SmartTestTaskUi): void { - const slideInRef = this.slideInService.open(SmartTaskFormComponent, { data: row }); - - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmartTaskFormComponent, { data: row }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getSmartTasks(); }); } diff --git a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.html b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.html index 39544b770e1..da32cf5ccae 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.html +++ b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.spec.ts b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.spec.ts index 1b3782cdcb8..412420cf661 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.spec.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.spec.ts @@ -4,17 +4,17 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MatButtonHarness } from '@angular/material/button/testing'; import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { provideMockStore } from '@ngrx/store/testing'; +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 { SmartTestType } from 'app/enums/smart-test-type.enum'; import { SmartTestTask } from 'app/interfaces/smart-test.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 { SmartTaskFormComponent } from 'app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectTimezone } from 'app/store/system-config/system-config.selectors'; @@ -36,6 +36,13 @@ describe('SmartTaskFormComponent', () => { let spectator: Spectator; let loader: HarnessLoader; let form: IxFormHarness; + + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SmartTaskFormComponent, imports: [ @@ -56,7 +63,9 @@ describe('SmartTaskFormComponent', () => { sdc: 'sdc', }), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(DialogService), provideMockStore({ selectors: [ @@ -66,8 +75,7 @@ describe('SmartTaskFormComponent', () => { }, ], }), - mockProvider(OldSlideInRef), - { provide: SLIDE_IN_DATA, useValue: undefined }, + mockProvider(SlideInRef, slideInRef), ], }); @@ -101,7 +109,7 @@ describe('SmartTaskFormComponent', () => { }, type: SmartTestType.Long, }]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); @@ -109,7 +117,7 @@ describe('SmartTaskFormComponent', () => { beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: existingSmartTask }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => existingSmartTask }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -151,7 +159,7 @@ describe('SmartTaskFormComponent', () => { }, type: SmartTestType.Offline, }]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); }); diff --git a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.ts b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.ts index b07f8346862..e81772e2089 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component.ts @@ -1,6 +1,6 @@ import { AsyncPipe } from '@angular/common'; import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { Validators, ReactiveFormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; @@ -27,9 +27,8 @@ import { crontabToScheduleWithoutMinutes, } from 'app/modules/scheduler/utils/crontab-to-schedule.utils'; import { scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { ApiService } from 'app/services/websocket/api.service'; @@ -41,7 +40,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -80,6 +79,7 @@ export class SmartTaskFormComponent implements OnInit { }); isLoading = false; + protected editingTest: SmartTestTask | undefined; isAllDisksSelected$ = this.form.select((values) => values.all_disks); @@ -100,9 +100,13 @@ export class SmartTaskFormComponent implements OnInit { private cdr: ChangeDetectorRef, private snackbar: SnackbarService, private errorHandler: FormErrorHandlerService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) private editingTest: SmartTestTask, - ) {} + public slideInRef: SlideInRef, + ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.editingTest = this.slideInRef.getData(); + } ngOnInit(): void { if (this.editingTest) { @@ -143,7 +147,7 @@ export class SmartTaskFormComponent implements OnInit { this.snackbar.success(this.translate.instant('Task updated')); } this.isLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isLoading = false; diff --git a/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.spec.ts b/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.spec.ts index 5b6ddd7b1a1..a4a4c44252a 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.spec.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.spec.ts @@ -18,11 +18,11 @@ import { IxIconHarness } from 'app/modules/ix-icon/ix-icon.harness'; import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-table.harness'; import { IxCellScheduleComponent } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component'; 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 { SlideIn } from 'app/modules/slide-ins/slide-in'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { SmartTaskCardComponent } from 'app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component'; import { SmartTaskFormComponent } from 'app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectSystemConfigState } from 'app/store/system-config/system-config.selectors'; @@ -73,6 +73,12 @@ describe('SmartTaskCardComponent', () => { } as Disk, ]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SmartTaskCardComponent, imports: [ @@ -105,12 +111,10 @@ describe('SmartTaskCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of(true) }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -150,7 +154,7 @@ describe('SmartTaskCardComponent', () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 5); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmartTaskFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmartTaskFormComponent, { data: expect.objectContaining(smartTasks[0]), }); diff --git a/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.ts b/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.ts index abf2b93cf18..b56b252801e 100644 --- a/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.ts +++ b/src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.ts @@ -34,11 +34,11 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; import { scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { SmartTaskFormComponent } from 'app/pages/data-protection/smart-task/smart-task-form/smart-task-form.component'; import { smartTaskListElements } from 'app/pages/data-protection/smart-task/smart-task-list/smart-task-list.elements'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { StorageService } from 'app/services/storage.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -120,7 +120,7 @@ export class SmartTaskListComponent implements OnInit { constructor( protected emptyService: EmptyService, private storageService: StorageService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private taskService: TaskService, private translate: TranslateService, private dialogService: DialogService, @@ -151,9 +151,10 @@ export class SmartTaskListComponent implements OnInit { } openForm(row?: SmartTestTaskUi): void { - const slideInRef = this.slideInService.open(SmartTaskFormComponent, { data: row }); - - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmartTaskFormComponent, { data: row }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getSmartTasks(); }); } diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.spec.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.spec.ts index 206f6246dd8..fe4a42c8ae6 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.spec.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.spec.ts @@ -18,11 +18,11 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxCellScheduleComponent, } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.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 { SnapshotTaskCardComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component'; import { SnapshotTaskFormComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectSystemConfigState } from 'app/store/system-config/system-config.selectors'; @@ -66,6 +66,12 @@ describe('SnapshotTaskCardComponent', () => { } as PeriodicSnapshotTask, ]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SnapshotTaskCardComponent, overrideComponents: [ @@ -95,12 +101,10 @@ describe('SnapshotTaskCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of() }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -133,7 +137,7 @@ describe('SnapshotTaskCardComponent', () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 7); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SnapshotTaskFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SnapshotTaskFormComponent, { data: snapshotTasks[0], wide: true, }); @@ -143,7 +147,7 @@ describe('SnapshotTaskCardComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SnapshotTaskFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SnapshotTaskFormComponent, { data: undefined, wide: true, }); diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.ts index b184c701b6c..758384a480b 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.component.ts @@ -32,11 +32,11 @@ import { IxTableHeadComponent } from 'app/modules/ix-table/components/ix-table-h import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { createTable } from 'app/modules/ix-table/utils'; import { scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { snapshotTaskCardElements } from 'app/pages/data-protection/snapshot-task/snapshot-task-card/snapshot-task-card.elements'; import { SnapshotTaskFormComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -127,7 +127,7 @@ export class SnapshotTaskCardComponent implements OnInit { }); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, private errorHandler: ErrorHandlerService, private api: ApiService, @@ -170,9 +170,10 @@ export class SnapshotTaskCardComponent implements OnInit { } openForm(row?: PeriodicSnapshotTaskUi): void { - const slideInRef = this.slideInService.open(SnapshotTaskFormComponent, { data: row, wide: true }); - - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SnapshotTaskFormComponent, { data: row, wide: true }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getSnapshotTasks(); }); } diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.html b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.html index 9cef55edbee..c8a286eae44 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.html +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.spec.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.spec.ts index 08807491847..6f63755af40 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.spec.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.spec.ts @@ -11,11 +11,10 @@ import { LifetimeUnit } from 'app/enums/lifetime-unit.enum'; import { PeriodicSnapshotTask } from 'app/interfaces/periodic-snapshot-task.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 { SnapshotTaskFormComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { StorageService } from 'app/services/storage.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -47,6 +46,12 @@ describe('SnapshotTaskComponent', () => { vmware_sync: false, } as PeriodicSnapshotTask; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + let spectator: Spectator; let loader: HarnessLoader; let form: IxFormHarness; @@ -65,7 +70,9 @@ describe('SnapshotTaskComponent', () => { mockCall('pool.snapshottask.update'), ]), mockProvider(DialogService), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(StorageService, { getDatasetNameOptions: jest.fn(() => of([ { label: 'test', value: 'test' }, @@ -87,8 +94,7 @@ describe('SnapshotTaskComponent', () => { }, ], }), - mockProvider(OldSlideInRef), - { provide: SLIDE_IN_DATA, useValue: undefined }, + mockProvider(SlideInRef, slideInRef), ], }); @@ -132,7 +138,7 @@ describe('SnapshotTaskComponent', () => { month: '*', }, }]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); @@ -140,7 +146,7 @@ describe('SnapshotTaskComponent', () => { beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: { ...existingTask, id: 1 } }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => ({ ...existingTask, id: 1 }) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -194,7 +200,7 @@ describe('SnapshotTaskComponent', () => { }, }, ]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); }); diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.ts index 66bc6079a57..0347385a320 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-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'; @@ -26,9 +26,8 @@ import { SchedulerComponent } from 'app/modules/scheduler/components/scheduler/s import { crontabToSchedule } from 'app/modules/scheduler/utils/crontab-to-schedule.utils'; import { CronPresetValue } from 'app/modules/scheduler/utils/get-default-crontab-presets.utils'; import { scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { StorageService } from 'app/services/storage.service'; @@ -43,7 +42,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -87,6 +86,7 @@ export class SnapshotTaskFormComponent implements OnInit { }); isLoading = false; + protected editingTask: PeriodicSnapshotTask | undefined; readonly labels = { dataset: helptextSnapshotForm.dataset_placeholder, @@ -129,9 +129,10 @@ export class SnapshotTaskFormComponent implements OnInit { private taskService: TaskService, private snackbar: SnackbarService, protected storageService: StorageService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) private editingTask: PeriodicSnapshotTask, - ) {} + public slideInRef: SlideInRef, + ) { + this.editingTask = slideInRef.getData(); + } ngOnInit(): void { if (this.editingTask) { @@ -187,7 +188,7 @@ export class SnapshotTaskFormComponent implements OnInit { this.snackbar.success(this.translate.instant('Task updated')); } this.isLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isLoading = false; diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.spec.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.spec.ts index 171b13a91e8..ae9e4f1b767 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.spec.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.spec.ts @@ -23,11 +23,11 @@ import { } from 'app/modules/ix-table/components/ix-table-details-row/ix-table-details-row.component'; import { IxTableDetailsRowDirective } from 'app/modules/ix-table/directives/ix-table-details-row.directive'; 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 { SlideIn } from 'app/modules/slide-ins/slide-in'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { SnapshotTaskFormComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component'; import { SnapshotTaskListComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component'; import { LocaleService } from 'app/services/locale.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -63,6 +63,12 @@ describe('SnapshotTaskListComponent', () => { } as PeriodicSnapshotTaskUi, ]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SnapshotTaskListComponent, imports: [ @@ -88,12 +94,10 @@ describe('SnapshotTaskListComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of(true) }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(LocaleService), mockProvider(TaskService, { getTaskNextRun: jest.fn(() => 'in about 10 hours'), @@ -131,7 +135,7 @@ describe('SnapshotTaskListComponent', () => { const editButton = await loader.getHarness(MatButtonHarness.with({ text: 'Edit' })); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith( + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith( SnapshotTaskFormComponent, { wide: true, diff --git a/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.ts b/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.ts index 9637ca419c0..72c07788c67 100644 --- a/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.ts +++ b/src/app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.component.ts @@ -36,11 +36,11 @@ import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/column- import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; import { extractActiveHoursFromCron, scheduleToCrontab } from 'app/modules/scheduler/utils/schedule-to-crontab.utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { SnapshotTaskFormComponent } from 'app/pages/data-protection/snapshot-task/snapshot-task-form/snapshot-task-form.component'; import { snapshotTaskListElements } from 'app/pages/data-protection/snapshot-task/snapshot-task-list/snapshot-task-list.elements'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { StorageService } from 'app/services/storage.service'; import { TaskService } from 'app/services/task.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -171,7 +171,7 @@ export class SnapshotTaskListComponent implements OnInit { private taskService: TaskService, private translate: TranslateService, private errorHandler: ErrorHandlerService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private route: ActivatedRoute, private cdr: ChangeDetectorRef, ) { @@ -213,13 +213,17 @@ export class SnapshotTaskListComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(SnapshotTaskFormComponent, { wide: true }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => this.getSnapshotTasks()); + this.slideIn.open(SnapshotTaskFormComponent, { wide: true }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => this.getSnapshotTasks()); } doEdit(row: PeriodicSnapshotTaskUi): void { - const slideInRef = this.slideInService.open(SnapshotTaskFormComponent, { wide: true, data: row }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => this.getSnapshotTasks()); + this.slideIn.open(SnapshotTaskFormComponent, { wide: true, data: row }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => this.getSnapshotTasks()); } doDelete(snapshotTask: PeriodicSnapshotTaskUi): void { diff --git a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.html b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.html index e526fe2a8ee..756486778ac 100644 --- a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.html +++ b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.spec.ts b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.spec.ts index 4c22e0b3550..0563deb6c34 100644 --- a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.spec.ts +++ b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.spec.ts @@ -11,9 +11,8 @@ import { MatchDatastoresWithDatasets, VmwareSnapshot } from 'app/interfaces/vmwa import { DialogService } from 'app/modules/dialog/dialog.service'; 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 { SLIDE_IN_DATA } from 'app/modules/slide-ins/slide-in.token'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { ApiService } from 'app/services/websocket/api.service'; import { VmwareSnapshotFormComponent } from './vmware-snapshot-form.component'; @@ -27,6 +26,12 @@ describe('VmwareSnapshotFormComponent', () => { username: 'root', } as VmwareSnapshot; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + let spectator: Spectator; let loader: HarnessLoader; let form: IxFormHarness; @@ -67,13 +72,14 @@ describe('VmwareSnapshotFormComponent', () => { mockCall('vmware.create'), mockCall('vmware.update'), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(FormErrorHandlerService), mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInRef), - { provide: SLIDE_IN_DATA, useValue: undefined }, + mockProvider(SlideInRef, slideInRef), ], }); @@ -116,7 +122,7 @@ describe('VmwareSnapshotFormComponent', () => { filesystem: 'fs01', datastore: 'ds01', }]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); @@ -124,7 +130,7 @@ describe('VmwareSnapshotFormComponent', () => { beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: existingSnapshot }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => ({ ...existingSnapshot }) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -171,7 +177,7 @@ describe('VmwareSnapshotFormComponent', () => { datastore: 'ds01', }, ]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); }); diff --git a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.ts b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.ts index 116b5137039..82075cf14fb 100644 --- a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.ts +++ b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-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'; @@ -20,9 +20,8 @@ import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fi import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component'; import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component'; import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; -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 { ErrorHandlerService } from 'app/services/error-handler.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -35,7 +34,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -70,6 +69,7 @@ export class VmwareSnapshotFormComponent implements OnInit { }); isLoading = false; + protected editingSnapshot: VmwareSnapshot; readonly labels = { hostname: helptextVmwareSnapshot.VMware_snapshot_form_hostname_placeholder, @@ -101,9 +101,10 @@ export class VmwareSnapshotFormComponent implements OnInit { private formErrorHandler: FormErrorHandlerService, private cdr: ChangeDetectorRef, protected dialogService: DialogService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) private editingSnapshot: VmwareSnapshot, - ) {} + public slideInRef: SlideInRef, + ) { + this.editingSnapshot = slideInRef.getData(); + } ngOnInit(): void { this.form.controls.datastore.valueChanges.pipe(untilDestroyed(this)).subscribe((value: string) => { @@ -215,7 +216,7 @@ export class VmwareSnapshotFormComponent 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/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-list/vmware-snapshot-list.component.ts b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-list/vmware-snapshot-list.component.ts index 7212b1ffc88..8317fdd5dd9 100644 --- a/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-list/vmware-snapshot-list.component.ts +++ b/src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-list/vmware-snapshot-list.component.ts @@ -24,11 +24,11 @@ import { IxTableDetailsRowDirective } from 'app/modules/ix-table/directives/ix-t import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { VmwareSnapshotFormComponent } from 'app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component'; import { vmwareSnapshotListElements } from 'app/pages/data-protection/vmware-snapshot/vmware-snapshot-list/vmware-snapshot-list.elements'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { VmwareStatusCellComponent } from './vmware-status-cell/vmware-status-cell.component'; @@ -94,7 +94,7 @@ export class VmwareSnapshotListComponent implements OnInit { constructor( protected translate: TranslateService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, protected emptyService: EmptyService, private api: ApiService, private dialogService: DialogService, @@ -123,14 +123,15 @@ export class VmwareSnapshotListComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(VmwareSnapshotFormComponent); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => this.getSnapshotsData()); + this.slideIn.open(VmwareSnapshotFormComponent).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => this.getSnapshotsData()); } doEdit(snapshot: VmwareSnapshot): void { - const slideInRef = this.slideInService.open(VmwareSnapshotFormComponent, { data: snapshot }); - slideInRef.slideInClosed$.pipe( - filter(Boolean), + this.slideIn.open(VmwareSnapshotFormComponent, { data: snapshot }).pipe( + filter((response) => !!response.response), untilDestroyed(this), ).subscribe(() => this.getSnapshotsData()); } diff --git a/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.spec.ts b/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.spec.ts index bb23415a12a..c1533d3e076 100644 --- a/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.spec.ts +++ b/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.spec.ts @@ -5,8 +5,8 @@ import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectat import { of } from 'rxjs'; import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; import { DatasetDetails } from 'app/interfaces/dataset.interface'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { SnapshotAddFormComponent } from 'app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { DataProtectionCardComponent } from './data-protection-card.component'; describe('DataProtectionComponent', () => { @@ -17,10 +17,8 @@ describe('DataProtectionComponent', () => { component: DataProtectionCardComponent, providers: [ mockAuth(), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of() }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), ], }); @@ -63,7 +61,7 @@ describe('DataProtectionComponent', () => { }); it('opens the snapshot add from when button clicked', async () => { - const slideInRef = spectator.inject(OldSlideInService); + const slideInRef = spectator.inject(SlideIn); const editButton = await loader.getHarness(MatButtonHarness.with({ text: 'Create Snapshot' })); await editButton.click(); diff --git a/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.ts b/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.ts index 717e2520389..2798162f5ae 100644 --- a/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.ts +++ b/src/app/pages/datasets/components/data-protection-card/data-protection-card.component.ts @@ -11,11 +11,11 @@ import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-r import { UiSearchDirective } from 'app/directives/ui-search.directive'; import { Role } from 'app/enums/role.enum'; import { DatasetDetails } from 'app/interfaces/dataset.interface'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { dataProtectionCardElements } from 'app/pages/datasets/components/data-protection-card/data-protection-card.elements'; import { SnapshotAddFormComponent } from 'app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; @UntilDestroy() @Component({ @@ -44,14 +44,16 @@ export class DataProtectionCardComponent { protected readonly searchableElements = dataProtectionCardElements; constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private snackbarService: SnackbarService, private translate: TranslateService, ) {} addSnapshot(): void { - const slideInRef = this.slideInService.open(SnapshotAddFormComponent, { data: this.dataset().id }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SnapshotAddFormComponent, { data: this.dataset().id }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.snackbarService.success(this.translate.instant('Snapshot added successfully.')); }); } diff --git a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.spec.ts b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.spec.ts index 838f2966824..0203eed135c 100644 --- a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.spec.ts +++ b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.spec.ts @@ -12,11 +12,11 @@ import { DatasetQuota } from 'app/interfaces/dataset-quota.interface'; import { DatasetDetails } from 'app/interfaces/dataset.interface'; import { DialogService } from 'app/modules/dialog/dialog.service'; import { FileSizePipe } from 'app/modules/pipes/file-size/file-size.pipe'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { DatasetCapacityManagementCardComponent } from 'app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component'; import { DatasetCapacitySettingsComponent } from 'app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component'; import { SpaceManagementChartComponent } from 'app/pages/datasets/components/dataset-capacity-management-card/space-management-chart/space-management-chart.component'; import { DatasetTreeStore } from 'app/pages/datasets/store/dataset-store.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; const datasetQuotas = { refreservation: { @@ -87,10 +87,8 @@ describe('DatasetCapacityManagementCardComponent', () => { }, }]), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => ({ - slideInClosed$: of(), - })), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), ], }); @@ -197,7 +195,7 @@ describe('DatasetCapacityManagementCardComponent', () => { const editButton = await loader.getHarness(MatButtonHarness.with({ text: 'Edit' })); await editButton.click(); - expect(spectator.inject(OldSlideInService).open) + expect(spectator.inject(SlideIn).open) .toHaveBeenCalledWith(DatasetCapacitySettingsComponent, { data: datasetFilesystem, wide: true }); }); }); diff --git a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.ts b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.ts index f7e0b6e9be3..1db357294b5 100644 --- a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.ts +++ b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.component.ts @@ -13,6 +13,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { forkJoin, Subject } from 'rxjs'; import { map, take, switchMap, tap, + filter, } from 'rxjs/operators'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; import { UiSearchDirective } from 'app/directives/ui-search.directive'; @@ -22,13 +23,13 @@ import { DatasetDetails } from 'app/interfaces/dataset.interface'; import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface'; import { DialogService } from 'app/modules/dialog/dialog.service'; import { FileSizePipe } from 'app/modules/pipes/file-size/file-size.pipe'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { datasetCapacityManagementElements } from 'app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-management-card.elements'; import { DatasetCapacitySettingsComponent } from 'app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component'; import { SpaceManagementChartComponent } from 'app/pages/datasets/components/dataset-capacity-management-card/space-management-chart/space-management-chart.component'; import { DatasetTreeStore } from 'app/pages/datasets/store/dataset-store.service'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; @UntilDestroy() @@ -95,7 +96,7 @@ export class DatasetCapacityManagementCardComponent implements OnChanges, OnInit private errorHandler: ErrorHandlerService, private cdr: ChangeDetectorRef, private datasetStore: DatasetTreeStore, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private dialogService: DialogService, ) {} @@ -160,12 +161,11 @@ export class DatasetCapacityManagementCardComponent implements OnChanges, OnInit } editDataset(): void { - this.slideInService - .open(DatasetCapacitySettingsComponent, { wide: true, data: this.dataset() }) - .slideInClosed$ - .pipe(untilDestroyed(this)) - .subscribe(() => { - this.datasetStore.datasetUpdated(); - }); + this.slideIn.open(DatasetCapacitySettingsComponent, { wide: true, data: this.dataset() }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { + this.datasetStore.datasetUpdated(); + }); } } diff --git a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.html b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.html index dcec2f3215f..328266ceedc 100644 --- a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.html +++ b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.html @@ -1,8 +1,8 @@ - +> diff --git a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.spec.ts b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.spec.ts index d55ed8912f8..30893e9f848 100644 --- a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.spec.ts +++ b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.spec.ts @@ -3,6 +3,7 @@ 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 { GiB } from 'app/constants/bytes.constant'; import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils'; import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; @@ -13,18 +14,37 @@ import { DialogService } from 'app/modules/dialog/dialog.service'; import { IxCheckboxHarness } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.harness'; import { IxInputHarness } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.harness'; import { fillControlValues, getControlValues } from 'app/modules/forms/ix-forms/testing/control-harnesses.helpers'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { DatasetCapacitySettingsComponent, } from 'app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; describe('DatasetCapacitySettingsComponent', () => { let spectator: Spectator; let loader: HarnessLoader; + + const dataset = { + id: 'root/path', + name: 'root/path', + refquota: { parsed: 50 * GiB }, + refquota_warning: { parsed: 50, source: ZfsPropertySource.Local }, + refquota_critical: { parsed: 0, source: ZfsPropertySource.Default }, + quota: { parsed: 100 * GiB }, + quota_warning: { parsed: null, source: ZfsPropertySource.Local }, + quota_critical: { parsed: 0, source: ZfsPropertySource.Inherited }, + refreservation: { parsed: 10 * GiB }, + reservation: { parsed: 20 * GiB }, + } as DatasetDetails; + + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => dataset), + }; + const createComponent = createComponentFactory({ component: DatasetCapacitySettingsComponent, imports: [ @@ -36,33 +56,16 @@ describe('DatasetCapacitySettingsComponent', () => { ]), mockProvider(SnackbarService), mockProvider(DialogService), - mockProvider(OldSlideInService), - mockProvider(OldSlideInRef), + mockProvider(SlideIn, { + components$: of([]), + }), + mockProvider(SlideInRef, slideInRef), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); beforeEach(() => { - spectator = createComponent({ - providers: [ - { - provide: SLIDE_IN_DATA, - useValue: { - id: 'root/path', - name: 'root/path', - refquota: { parsed: 50 * GiB }, - refquota_warning: { parsed: 50, source: ZfsPropertySource.Local }, - refquota_critical: { parsed: 0, source: ZfsPropertySource.Default }, - quota: { parsed: 100 * GiB }, - quota_warning: { parsed: null, source: ZfsPropertySource.Local }, - quota_critical: { parsed: 0, source: ZfsPropertySource.Inherited }, - refreservation: { parsed: 10 * GiB }, - reservation: { parsed: 20 * GiB }, - } as DatasetDetails, - }, - ], - }); + spectator = createComponent(); loader = TestbedHarnessEnvironment.loader(spectator.fixture); }); @@ -169,7 +172,7 @@ describe('DatasetCapacitySettingsComponent', () => { }, ]); expect(spectator.inject(SnackbarService).success).toHaveBeenCalled(); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); it('only sends updated properties on form submit', async () => { diff --git a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.ts b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.ts index cc7a2772be8..64070a55897 100644 --- a/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.ts +++ b/src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.ts @@ -1,5 +1,5 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatButton } from '@angular/material/button'; @@ -19,9 +19,8 @@ import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; import { IxFormatterService } from 'app/modules/forms/ix-forms/services/ix-formatter.service'; import { IxValidatorsService } from 'app/modules/forms/ix-forms/services/ix-validators.service'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { isPropertyInherited, isRootDataset } from 'app/pages/datasets/utils/dataset.utils'; @@ -35,7 +34,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, RequiresRolesDirective, MatCard, MatCardContent, @@ -91,6 +90,7 @@ export class DatasetCapacitySettingsComponent implements OnInit { }); isLoading = false; + protected dataset: DatasetDetails | undefined; readonly helptext = helptextDatasetForm; @@ -111,9 +111,9 @@ export class DatasetCapacitySettingsComponent implements OnInit { private snackbarService: SnackbarService, private translate: TranslateService, private validators: IxValidatorsService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) public dataset: DatasetDetails, + public slideInRef: SlideInRef, ) { + this.dataset = slideInRef.getData(); this.setFormRelations(); } @@ -173,7 +173,7 @@ export class DatasetCapacitySettingsComponent implements OnInit { this.snackbarService.success( this.translate.instant('Dataset settings updated.'), ); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); this.cdr.markForCheck(); }, error: (error: unknown) => { diff --git a/src/app/pages/datasets/components/roles-card/roles-card.component.spec.ts b/src/app/pages/datasets/components/roles-card/roles-card.component.spec.ts index c908122bef6..110bae77b9a 100644 --- a/src/app/pages/datasets/components/roles-card/roles-card.component.spec.ts +++ b/src/app/pages/datasets/components/roles-card/roles-card.component.spec.ts @@ -1,14 +1,13 @@ -import { FormGroup } from '@angular/forms'; import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { of } from 'rxjs'; import { mockApi } from 'app/core/testing/utils/mock-api.utils'; import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; import { IscsiExtentType } from 'app/enums/iscsi.enum'; import { DatasetDetails } from 'app/interfaces/dataset.interface'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { RolesCardComponent } from 'app/pages/datasets/components/roles-card/roles-card.component'; import { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; const datasetDummy = { id: '/mnt/pool/ds', @@ -40,14 +39,8 @@ describe('RolesCardComponent', () => { providers: [ mockAuth(), mockApi(), - mockProvider(OldSlideInService, { - open: jest.fn(() => ({ - slideInClosed$: of(), - componentInstance: { - form: new FormGroup({}), - setNameFromPath: jest.fn(), - }, - })), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), ], component: RolesCardComponent, @@ -176,12 +169,12 @@ describe('RolesCardComponent', () => { const createNfsShareLink = spectator.queryAll('.details-item .action')[1] as HTMLAnchorElement; createSmbShareLink.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbFormComponent, { data: { defaultSmbShare: { path: '/mnt/pool/ds' } }, }); createNfsShareLink.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(NfsFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(NfsFormComponent, { data: { defaultNfsShare: { path: '/mnt/pool/ds' } }, }); }); diff --git a/src/app/pages/datasets/components/roles-card/roles-card.component.ts b/src/app/pages/datasets/components/roles-card/roles-card.component.ts index 4e8a88eeea4..d5287e3121f 100644 --- a/src/app/pages/datasets/components/roles-card/roles-card.component.ts +++ b/src/app/pages/datasets/components/roles-card/roles-card.component.ts @@ -12,13 +12,15 @@ import { filter } from 'rxjs'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; import { Role } from 'app/enums/role.enum'; import { DatasetDetails } from 'app/interfaces/dataset.interface'; +import { NfsShare } from 'app/interfaces/nfs-share.interface'; +import { SmbShare } from 'app/interfaces/smb-share.interface'; import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DatasetTreeStore } from 'app/pages/datasets/store/dataset-store.service'; import { ixAppsDataset } from 'app/pages/datasets/utils/dataset.utils'; import { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; @UntilDestroy() @Component({ @@ -95,24 +97,28 @@ export class RolesCardComponent { }); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private datasetStore: DatasetTreeStore, ) {} createSmbShare(): void { - const slideInRef = this.slideInService.open(SmbFormComponent, { - data: { defaultSmbShare: { path: this.dataset().mountpoint } }, - }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmbFormComponent, { + data: { defaultSmbShare: { path: this.dataset().mountpoint } as SmbShare }, + }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.datasetStore.datasetUpdated(); }); } createNfsShare(): void { - const slideInRef = this.slideInService.open(NfsFormComponent, { - data: { defaultNfsShare: { path: this.dataset().mountpoint } }, - }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(NfsFormComponent, { + data: { defaultNfsShare: { path: this.dataset().mountpoint } as NfsShare }, + }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.datasetStore.datasetUpdated(); }); } diff --git a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.html b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.html index a775663627b..5fca89f3018 100644 --- a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.html +++ b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.html @@ -1,8 +1,8 @@ - +> diff --git a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.spec.ts b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.spec.ts index 4b2537e4f3e..f1323a3ea51 100644 --- a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.spec.ts +++ b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.spec.ts @@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MatButtonHarness } from '@angular/material/button/testing'; import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { format } from 'date-fns-tz'; +import { of } from 'rxjs'; import { MockApiService } from 'app/core/testing/classes/mock-api.service'; import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils'; import { mockAuth } from 'app/core/testing/utils/mock-auth.utils'; @@ -11,16 +12,21 @@ import { Dataset } from 'app/interfaces/dataset.interface'; import { IxInputHarness } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.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 { 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 { SnapshotAddFormComponent } from 'app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; const mockDatasets = [ { name: 'APPS' }, { name: 'POOL' }, ] as Dataset[]; +const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), +}; + const mockNamingSchema = ['%Y %H %d %M %m']; describe('SnapshotAddFormComponent', () => { @@ -42,11 +48,12 @@ describe('SnapshotAddFormComponent', () => { mockCall('pool.dataset.details'), mockCall('vmware.dataset_has_vms', true), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(FormErrorHandlerService), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); diff --git a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.ts b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.ts index 6fe3416464c..17d8fc607e2 100644 --- a/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.ts +++ b/src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.ts @@ -1,5 +1,5 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { AbstractControl, FormBuilder, ReactiveFormsModule, Validators, @@ -30,9 +30,8 @@ import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/for import { IxValidatorsService } from 'app/modules/forms/ix-forms/services/ix-validators.service'; import { atLeastOne } from 'app/modules/forms/ix-forms/validators/at-least-one-validation'; import { requiredEmpty } from 'app/modules/forms/ix-forms/validators/required-empty-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 { snapshotExcludeBootQueryFilter, @@ -48,7 +47,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, RequiresRolesDirective, MatCard, MatCardContent, @@ -69,6 +68,8 @@ export class SnapshotAddFormComponent implements OnInit { readonly requiredRoles = [Role.SnapshotWrite]; isFormLoading = true; + protected datasetId: string | undefined; + form = this.fb.nonNullable.group({ dataset: ['', Validators.required], name: [this.getDefaultSnapshotName(), [this.validatorsService.withMessage( @@ -101,9 +102,10 @@ export class SnapshotAddFormComponent implements OnInit { private errorHandler: FormErrorHandlerService, private validatorsService: IxValidatorsService, private datasetStore: DatasetTreeStore, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) private datasetId: string, - ) {} + public slideInRef: SlideInRef, + ) { + this.datasetId = slideInRef.getData(); + } ngOnInit(): void { combineLatest([ @@ -163,7 +165,7 @@ export class SnapshotAddFormComponent implements OnInit { ).subscribe({ next: () => { this.isFormLoading = false; - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); this.datasetStore.datasetUpdated(); this.cdr.markForCheck(); }, diff --git a/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.spec.ts b/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.spec.ts index 3dd867c0ff8..1704dd13b6c 100644 --- a/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.spec.ts +++ b/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.spec.ts @@ -16,11 +16,11 @@ import { SearchInput1Component } from 'app/modules/forms/search-input1/search-in import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-table.harness'; import { IxTableDetailsRowDirective } from 'app/modules/ix-table/directives/ix-table-details-row.directive'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { SnapshotAddFormComponent } from 'app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component'; import { snapshotsInitialState } from 'app/pages/datasets/modules/snapshots/store/snapshot.reducer'; import { selectSnapshotState, selectSnapshots, selectSnapshotsTotal } from 'app/pages/datasets/modules/snapshots/store/snapshot.selectors'; import { fakeZfsSnapshotDataSource } from 'app/pages/datasets/modules/snapshots/testing/snapshot-fake-datasource'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { selectPreferences } from 'app/store/preferences/preferences.selectors'; import { selectGeneralConfig } from 'app/store/system-config/system-config.selectors'; import { SnapshotListComponent } from './snapshot-list.component'; @@ -50,7 +50,9 @@ describe('SnapshotListComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + open: jest.fn(), + }), provideMockStore({ selectors: [ { @@ -127,6 +129,6 @@ describe('SnapshotListComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SnapshotAddFormComponent); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SnapshotAddFormComponent); }); }); diff --git a/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.ts b/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.ts index f2d56df535b..5ad7d7e8c81 100644 --- a/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.ts +++ b/src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.ts @@ -45,13 +45,13 @@ import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table- import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { SnapshotAddFormComponent } from 'app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component'; import { SnapshotBatchDeleteDialogComponent } from 'app/pages/datasets/modules/snapshots/snapshot-batch-delete-dialog/snapshot-batch-delete-dialog.component'; import { SnapshotDetailsRowComponent } from 'app/pages/datasets/modules/snapshots/snapshot-details-row/snapshot-details-row.component'; import { snapshotPageEntered } from 'app/pages/datasets/modules/snapshots/store/snapshot.actions'; import { selectSnapshotState, selectSnapshots, selectSnapshotsTotal } from 'app/pages/datasets/modules/snapshots/store/snapshot.selectors'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { AppState } from 'app/store'; import { snapshotExtraColumnsToggled } from 'app/store/preferences/preferences.actions'; import { waitForPreferences } from 'app/store/preferences/preferences.selectors'; @@ -194,7 +194,7 @@ export class SnapshotListComponent implements OnInit { private cdr: ChangeDetectorRef, private matDialog: MatDialog, private store$: Store, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private route: ActivatedRoute, ) { this.filterString = this.route.snapshot.paramMap.get('dataset') || ''; @@ -286,7 +286,7 @@ export class SnapshotListComponent implements OnInit { } doAdd(): void { - this.slideInService.open(SnapshotAddFormComponent); + this.slideIn.open(SnapshotAddFormComponent); } doBatchDelete(data: ZfsSnapshotUi[]): void { diff --git a/src/app/pages/network/components/static-route-form/static-route-form.component.html b/src/app/pages/network/components/static-route-form/static-route-form.component.html index 9ffe77489c0..1fda5161f89 100644 --- a/src/app/pages/network/components/static-route-form/static-route-form.component.html +++ b/src/app/pages/network/components/static-route-form/static-route-form.component.html @@ -1,8 +1,12 @@ - + - + { let spectator: Spectator; let loader: HarnessLoader; let api: ApiService; + + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + + const editingRoute = { + id: 13, + description: 'Existing route', + destination: '20.24.12.13/16', + gateway: '20.24.12.1', + } as StaticRoute; + const createComponent = createComponentFactory({ component: StaticRouteFormComponent, imports: [ @@ -28,11 +42,13 @@ describe('StaticRouteFormComponent', () => { mockCall('staticroute.create'), mockCall('staticroute.update'), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + open: jest.fn(), + components$: of([]), + }), mockProvider(FormErrorHandlerService), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockAuth(), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -66,15 +82,7 @@ describe('StaticRouteFormComponent', () => { beforeEach(() => { spectator = createComponent({ providers: [ - { - provide: SLIDE_IN_DATA, - useValue: { - id: 13, - description: 'Existing route', - destination: '20.24.12.13/16', - gateway: '20.24.12.1', - } as StaticRoute, - }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => editingRoute }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/network/components/static-route-form/static-route-form.component.ts b/src/app/pages/network/components/static-route-form/static-route-form.component.ts index 3372b37ef2e..7758ae3f9b7 100644 --- a/src/app/pages/network/components/static-route-form/static-route-form.component.ts +++ b/src/app/pages/network/components/static-route-form/static-route-form.component.ts @@ -1,14 +1,13 @@ 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'; import { MatCard, MatCardContent } from '@angular/material/card'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive'; -import { WarnAboutUnsavedChangesDirective } from 'app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive'; import { Role } from 'app/enums/role.enum'; import { helptextStaticRoutes } from 'app/helptext/network/static-routes/static-routes'; import { StaticRoute, UpdateStaticRoute } from 'app/interfaces/static-route.interface'; @@ -17,9 +16,8 @@ import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fi import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component'; import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; import { ipv4or6Validator } 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 { 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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { ApiService } from 'app/services/websocket/api.service'; @@ -31,7 +29,7 @@ import { ApiService } from 'app/services/websocket/api.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -42,7 +40,6 @@ import { ApiService } from 'app/services/websocket/api.service'; MatButton, TestDirective, TranslateModule, - WarnAboutUnsavedChangesDirective, ], }) export class StaticRouteFormComponent implements OnInit { @@ -57,6 +54,7 @@ export class StaticRouteFormComponent implements OnInit { } isFormLoading = false; + protected editingRoute: StaticRoute | undefined; form = this.fb.group({ destination: ['', [Validators.required]], @@ -77,9 +75,13 @@ export class StaticRouteFormComponent implements OnInit { private snackbar: SnackbarService, private errorHandler: FormErrorHandlerService, private translate: TranslateService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) private editingRoute: StaticRoute, - ) {} + public slideInRef: SlideInRef, + ) { + this.slideInRef.requireConfirmationWhen(() => { + return of(this.form.dirty); + }); + this.editingRoute = this.slideInRef.getData(); + } ngOnInit(): void { if (this.editingRoute) { @@ -114,7 +116,7 @@ export class StaticRouteFormComponent implements OnInit { } this.isFormLoading = false; this.cdr.markForCheck(); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isFormLoading = false; diff --git a/src/app/pages/network/components/static-routes-card/static-routes-card.component.spec.ts b/src/app/pages/network/components/static-routes-card/static-routes-card.component.spec.ts index 35ec7507064..387cd0446c9 100644 --- a/src/app/pages/network/components/static-routes-card/static-routes-card.component.spec.ts +++ b/src/app/pages/network/components/static-routes-card/static-routes-card.component.spec.ts @@ -12,11 +12,11 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxTablePagerShowMoreComponent, } from 'app/modules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.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 { StaticRouteDeleteDialogComponent } from 'app/pages/network/components/static-route-delete-dialog/static-route-delete-dialog.component'; import { StaticRouteFormComponent } from 'app/pages/network/components/static-route-form/static-route-form.component'; import { StaticRoutesCardComponent } from 'app/pages/network/components/static-routes-card/static-routes-card.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; const staticRoutes = Array.from({ length: 10 }).map((val, index) => ({ destination: `192.168.1.${index + 1}`, @@ -30,6 +30,12 @@ describe('StaticRoutesCardComponent', () => { let loader: HarnessLoader; let table: IxTableHarness; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: StaticRoutesCardComponent, imports: [ @@ -43,12 +49,10 @@ describe('StaticRoutesCardComponent', () => { mockProvider(DialogService, { confirm: () => of(true), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => ({ - slideInClosed$: of(true), - })), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -73,14 +77,14 @@ describe('StaticRoutesCardComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(StaticRouteFormComponent); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(StaticRouteFormComponent); }); it('opens static route form when "Edit" button is pressed', async () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 2); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(StaticRouteFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(StaticRouteFormComponent, { data: { description: 'Test description for route 0', destination: '192.168.1.1', diff --git a/src/app/pages/network/components/static-routes-card/static-routes-card.component.ts b/src/app/pages/network/components/static-routes-card/static-routes-card.component.ts index 4a10f64cd8d..11936b303ba 100644 --- a/src/app/pages/network/components/static-routes-card/static-routes-card.component.ts +++ b/src/app/pages/network/components/static-routes-card/static-routes-card.component.ts @@ -25,13 +25,13 @@ import { IxTablePagerShowMoreComponent } from 'app/modules/ix-table/components/i import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { StaticRouteDeleteDialogComponent, } from 'app/pages/network/components/static-route-delete-dialog/static-route-delete-dialog.component'; import { StaticRouteFormComponent } from 'app/pages/network/components/static-route-form/static-route-form.component'; import { staticRoutesCardElements } from 'app/pages/network/components/static-routes-card/static-routes-card.elements'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; @UntilDestroy() @@ -96,7 +96,7 @@ export class StaticRoutesCardComponent implements OnInit { constructor( private matDialog: MatDialog, private api: ApiService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, protected emptyService: EmptyService, ) {} @@ -124,15 +124,19 @@ export class StaticRoutesCardComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(StaticRouteFormComponent); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(StaticRouteFormComponent).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getStaticRoutes(); }); } doEdit(route: StaticRoute): void { - const slideInRef = this.slideInService.open(StaticRouteFormComponent, { data: route }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(StaticRouteFormComponent, { data: route }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.getStaticRoutes(); }); } diff --git a/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.spec.ts b/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.spec.ts index ddd85008c16..d6503119ad0 100644 --- a/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.spec.ts +++ b/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.spec.ts @@ -19,12 +19,12 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxTablePagerShowMoreComponent, } from 'app/modules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.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 { NfsCardComponent } from 'app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component'; import { ServiceExtraActionsComponent } from 'app/pages/sharing/components/shares-dashboard/service-extra-actions/service-extra-actions.component'; import { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; import { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectServices } from 'app/store/services/services.selectors'; @@ -52,6 +52,12 @@ describe('NfsCardComponent', () => { }, ] as NfsShare[]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: NfsCardComponent, imports: [ @@ -73,12 +79,10 @@ describe('NfsCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of() }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -120,7 +124,7 @@ describe('NfsCardComponent', () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 3); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(NfsFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(NfsFormComponent, { data: { existingNfsShare: expect.objectContaining(nfsShares[0]) }, }); }); diff --git a/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.ts b/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.ts index f12b8699240..af8d1874460 100644 --- a/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.ts +++ b/src/app/pages/sharing/components/shares-dashboard/nfs-card/nfs-card.component.ts @@ -28,12 +28,12 @@ import { IxTablePagerShowMoreComponent } from 'app/modules/ix-table/components/i import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { ServiceExtraActionsComponent } from 'app/pages/sharing/components/shares-dashboard/service-extra-actions/service-extra-actions.component'; import { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; import { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { ServicesState } from 'app/store/services/services.reducer'; import { selectService } from 'app/store/services/services.selectors'; @@ -107,7 +107,7 @@ export class NfsCardComponent implements OnInit { }); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, private errorHandler: ErrorHandlerService, private api: ApiService, @@ -124,9 +124,10 @@ export class NfsCardComponent implements OnInit { } openForm(row?: NfsShare): void { - const slideInRef = this.slideInService.open(NfsFormComponent, { data: { existingNfsShare: row } }); - - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(NfsFormComponent, { data: { existingNfsShare: row } }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.dataProvider.load(); }); } diff --git a/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.spec.ts b/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.spec.ts index 186637b870e..ce0635ecffb 100644 --- a/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.spec.ts +++ b/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.spec.ts @@ -20,13 +20,13 @@ import { IxTableHarness } from 'app/modules/ix-table/components/ix-table/ix-tabl import { IxTablePagerShowMoreComponent, } from 'app/modules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.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 { ServiceExtraActionsComponent } from 'app/pages/sharing/components/shares-dashboard/service-extra-actions/service-extra-actions.component'; import { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; import { SmbCardComponent } from 'app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component'; import { SmbAclComponent } from 'app/pages/sharing/smb/smb-acl/smb-acl.component'; import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectServices } from 'app/store/services/services.selectors'; @@ -52,6 +52,12 @@ describe('SmbCardComponent', () => { }, ] as SmbShare[]; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SmbCardComponent, imports: [ @@ -74,12 +80,10 @@ describe('SmbCardComponent', () => { mockProvider(DialogService, { confirm: jest.fn(() => of(true)), }), - mockProvider(OldSlideInService, { - open: jest.fn(() => { - return { slideInClosed$: of() }; - }), + mockProvider(SlideIn, { + open: jest.fn(() => of()), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(MatDialog, { open: jest.fn(() => ({ afterClosed: () => of(true), @@ -121,7 +125,7 @@ describe('SmbCardComponent', () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 5); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbFormComponent, { data: { existingSmbShare: expect.objectContaining(smbShares[0]) }, }); }); @@ -155,7 +159,7 @@ describe('SmbCardComponent', () => { [{ share_name: 'homes' }], ); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbAclComponent, { data: 'test' }); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbAclComponent, { data: 'test' }); }); it('handles edit Filesystem ACL', async () => { diff --git a/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.ts b/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.ts index ab1a6dc0b08..5f3cf7adc0e 100644 --- a/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.ts +++ b/src/app/pages/sharing/components/shares-dashboard/smb-card/smb-card.component.ts @@ -35,6 +35,7 @@ import { IxTablePagerShowMoreComponent } from 'app/modules/ix-table/components/i import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive'; import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { ServiceExtraActionsComponent } from 'app/pages/sharing/components/shares-dashboard/service-extra-actions/service-extra-actions.component'; import { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; @@ -42,7 +43,6 @@ import { SmbAclComponent } from 'app/pages/sharing/smb/smb-acl/smb-acl.component import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.component'; import { isRootShare } from 'app/pages/sharing/utils/smb.utils'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { ServicesState } from 'app/store/services/services.reducer'; import { selectService } from 'app/store/services/services.selectors'; @@ -140,7 +140,7 @@ export class SmbCardComponent implements OnInit { }); constructor( - private slideInService: OldSlideInService, + private slideIn: SlideIn, private translate: TranslateService, private errorHandler: ErrorHandlerService, private api: ApiService, @@ -158,8 +158,10 @@ export class SmbCardComponent implements OnInit { } openForm(row?: SmbShare): void { - const slideInRef = this.slideInService.open(SmbFormComponent, { data: { existingSmbShare: row } }); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmbFormComponent, { data: { existingSmbShare: row } }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.dataProvider.load(); }); } @@ -192,9 +194,10 @@ export class SmbCardComponent implements OnInit { .pipe(untilDestroyed(this)) .subscribe({ next: (shareAcl: SmbSharesec) => { - const slideInRef = this.slideInService.open(SmbAclComponent, { data: shareAcl.share_name }); - - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmbAclComponent, { data: shareAcl.share_name }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.dataProvider.load(); }); }, diff --git a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.html b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.html index 61825a6cf45..22f86b95fda 100644 --- a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.html +++ b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.spec.ts b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.spec.ts index 0c502e37347..0ee07295be9 100644 --- a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.spec.ts +++ b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.spec.ts @@ -26,11 +26,10 @@ import { import { IxListHarness } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.harness'; import { IxSelectHarness } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.harness'; 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 { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { FilesystemService } from 'app/services/filesystem.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { UserService } from 'app/services/user.service'; import { ApiService } from 'app/services/websocket/api.service'; import { AppState } from 'app/store'; @@ -61,6 +60,12 @@ describe('NfsFormComponent', () => { let mockStore$: MockStore; let store$: Store; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: NfsFormComponent, imports: [ @@ -76,7 +81,9 @@ describe('NfsFormComponent', () => { } as NfsConfig), ]), mockAuth(), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(FilesystemService), mockProvider(UserService, { userQueryDsCache: () => of([ @@ -96,7 +103,7 @@ describe('NfsFormComponent', () => { afterClosed: () => of(true), })), }), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), provideMockStore({ selectors: [ { @@ -105,7 +112,6 @@ describe('NfsFormComponent', () => { }, ], }), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -187,7 +193,7 @@ describe('NfsFormComponent', () => { hosts: ['truenas.com'], }]); expect(store$.dispatch).toHaveBeenCalledWith(checkIfServiceIsEnabled({ serviceName: ServiceName.Nfs })); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); @@ -195,7 +201,7 @@ describe('NfsFormComponent', () => { beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: { existingNfsShare: existingShare } }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => ({ existingNfsShare: existingShare }) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); @@ -264,7 +270,7 @@ describe('NfsFormComponent', () => { }, ]); expect(store$.dispatch).toHaveBeenCalledWith(checkIfServiceIsEnabled({ serviceName: ServiceName.Nfs })); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); it('checks if NFS service is not enabled and enables it after confirmation', async () => { diff --git a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.ts b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.ts index 72abfca1ead..f12c89d6ac6 100644 --- a/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.ts +++ b/src/app/pages/sharing/nfs/nfs-form/nfs-form.component.ts @@ -1,5 +1,5 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { Validators, ReactiveFormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; @@ -34,9 +34,8 @@ import { IxListComponent } from 'app/modules/forms/ix-forms/components/ix-list/i import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.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 { 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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { DatasetService } from 'app/services/dataset-service/dataset.service'; @@ -54,7 +53,7 @@ import { ServicesState } from 'app/store/services/services.reducer'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -144,12 +143,11 @@ export class NfsFormComponent implements OnInit { private cdr: ChangeDetectorRef, private snackbar: SnackbarService, private datasetService: DatasetService, - private slideInRef: OldSlideInRef, private store$: Store, - @Inject(SLIDE_IN_DATA) private data: { existingNfsShare?: NfsShare; defaultNfsShare?: NfsShare }, + public slideInRef: SlideInRef<{ existingNfsShare?: NfsShare; defaultNfsShare?: NfsShare } | undefined, boolean>, ) { - this.existingNfsShare = this.data?.existingNfsShare; - this.defaultNfsShare = this.data?.defaultNfsShare; + this.existingNfsShare = this.slideInRef.getData()?.existingNfsShare; + this.defaultNfsShare = this.slideInRef.getData()?.defaultNfsShare; } setNfsShareForEdit(): void { @@ -222,7 +220,7 @@ export class NfsFormComponent implements OnInit { this.store$.dispatch(checkIfServiceIsEnabled({ serviceName: ServiceName.Nfs })); this.isLoading = false; this.cdr.markForCheck(); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }, error: (error: unknown) => { this.isLoading = false; diff --git a/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.spec.ts b/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.spec.ts index ee00cd732da..0afc5652cd3 100644 --- a/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.spec.ts +++ b/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.spec.ts @@ -15,10 +15,10 @@ 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 { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { NfsListComponent } from 'app/pages/sharing/nfs/nfs-list/nfs-list.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; const shares: Partial[] = [ @@ -32,6 +32,12 @@ const shares: Partial[] = [ }, ]; +const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), +}; + describe('NfsListComponent', () => { let spectator: Spectator; let loader: HarnessLoader; @@ -52,12 +58,12 @@ describe('NfsListComponent', () => { mockCall('sharing.nfs.delete'), mockCall('sharing.nfs.update'), ]), - 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()), }), ], }); @@ -77,14 +83,14 @@ describe('NfsListComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(NfsFormComponent); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(NfsFormComponent); }); it('opens nfs share form when "Edit" button is pressed', async () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 5); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(NfsFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(NfsFormComponent, { data: { existingNfsShare: shares[0] }, }); }); diff --git a/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.ts b/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.ts index c751e751a61..d0e3194c321 100644 --- a/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.ts +++ b/src/app/pages/sharing/nfs/nfs-list/nfs-list.component.ts @@ -32,11 +32,11 @@ import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; import { AppLoaderService } from 'app/modules/loader/app-loader.service'; import { FakeProgressBarComponent } from 'app/modules/loader/components/fake-progress-bar/fake-progress-bar.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { NfsFormComponent } from 'app/pages/sharing/nfs/nfs-form/nfs-form.component'; import { nfsListElements } from 'app/pages/sharing/nfs/nfs-list/nfs-list.elements'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; @UntilDestroy() @@ -115,10 +115,10 @@ export class NfsListComponent implements OnInit { iconName: iconMarker('edit'), tooltip: this.translate.instant('Edit'), onClick: (nfsShare) => { - const slideInRef = this.slideInService.open(NfsFormComponent, { data: { existingNfsShare: nfsShare } }); - slideInRef.slideInClosed$ - .pipe(filter(Boolean), untilDestroyed(this)) - .subscribe(() => this.refresh()); + this.slideIn.open(NfsFormComponent, { data: { existingNfsShare: nfsShare } }).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => this.refresh()); }, }, { @@ -158,7 +158,7 @@ export class NfsListComponent implements OnInit { private translate: TranslateService, private dialog: DialogService, private errorHandler: ErrorHandlerService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private cdr: ChangeDetectorRef, protected emptyService: EmptyService, ) {} @@ -185,8 +185,10 @@ export class NfsListComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(NfsFormComponent); - slideInRef.slideInClosed$.pipe(filter(Boolean), untilDestroyed(this)).subscribe({ + this.slideIn.open(NfsFormComponent).pipe( + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe({ next: () => { this.refresh(); }, diff --git a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.html b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.html index b927bcf8355..d28e673571e 100644 --- a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.html +++ b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.html @@ -1,8 +1,8 @@ - +>

{{ helptext.shareAclDescription | translate }}

diff --git a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.spec.ts b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.spec.ts index 227d6791648..9480d4622c0 100644 --- a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.spec.ts +++ b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.spec.ts @@ -15,9 +15,8 @@ import { User as TnUser } from 'app/interfaces/user.interface'; import { DialogService } from 'app/modules/dialog/dialog.service'; import { IxComboboxHarness } from 'app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.harness'; import { IxListHarness } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.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 { OldSlideInService } from 'app/services/old-slide-in.service'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; +import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref'; import { UserService } from 'app/services/user.service'; import { ApiService } from 'app/services/websocket/api.service'; import { SmbAclComponent } from './smb-acl.component'; @@ -59,6 +58,12 @@ describe('SmbAclComponent', () => { smb: true, }; + const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const createComponent = createComponentFactory({ component: SmbAclComponent, imports: [ @@ -74,9 +79,11 @@ describe('SmbAclComponent', () => { group: 'wheel', id: 1, gid: 1, smb: true, }] as Group[]), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(DialogService), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), mockProvider(UserService, { smbUserQueryDsCache: () => of([ { username: 'root', id: 0, uid: 0 }, @@ -87,14 +94,13 @@ describe('SmbAclComponent', () => { { group: 'vip' }, ]), }), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: 'myshare' }, + mockProvider(SlideInRef, { ...slideInRef, getData: jest.fn(() => 'myshare') }), ], }); spectator.detectChanges(); @@ -103,7 +109,7 @@ describe('SmbAclComponent', () => { }); it('shows name of the share in the title', () => { - const title = spectator.query('ix-old-modal-header'); + const title = spectator.query('ix-modal-header'); expect(title).toHaveText('Share ACL for myshare'); }); @@ -239,6 +245,6 @@ describe('SmbAclComponent', () => { ], }]); - expect(spectator.inject(OldSlideInRef).close).toHaveBeenCalled(); + expect(spectator.inject(SlideInRef).close).toHaveBeenCalled(); }); }); diff --git a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.ts b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.ts index 0a117465e99..a93d75bb1e2 100644 --- a/src/app/pages/sharing/smb/smb-acl/smb-acl.component.ts +++ b/src/app/pages/sharing/smb/smb-acl/smb-acl.component.ts @@ -1,5 +1,5 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; @@ -33,9 +33,8 @@ 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 { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component'; import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; -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 { UserService } from 'app/services/user.service'; import { ApiService } from 'app/services/websocket/api.service'; @@ -60,7 +59,7 @@ interface FormAclEntry { changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -83,6 +82,7 @@ export class SmbAclComponent implements OnInit { }); isLoading = false; + protected shareName: string; private shareAclName: string; @@ -127,9 +127,10 @@ export class SmbAclComponent implements OnInit { private errorHandler: FormErrorHandlerService, private translate: TranslateService, private userService: UserService, - private slideInRef: OldSlideInRef, - @Inject(SLIDE_IN_DATA) public shareName: string, - ) {} + public slideInRef: SlideInRef, + ) { + this.shareName = slideInRef.getData(); + } ngOnInit(): void { if (this.shareName) { @@ -169,7 +170,7 @@ export class SmbAclComponent implements OnInit { .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/src/app/pages/sharing/smb/smb-form/smb-form.component.html b/src/app/pages/sharing/smb/smb-form/smb-form.component.html index e442c9ac02e..3d7ea7a9054 100644 --- a/src/app/pages/sharing/smb/smb-form/smb-form.component.html +++ b/src/app/pages/sharing/smb/smb-form/smb-form.component.html @@ -1,4 +1,8 @@ - + diff --git a/src/app/pages/sharing/smb/smb-form/smb-form.component.spec.ts b/src/app/pages/sharing/smb/smb-form/smb-form.component.spec.ts index 40c9d0e9d5e..64a107b0720 100644 --- a/src/app/pages/sharing/smb/smb-form/smb-form.component.spec.ts +++ b/src/app/pages/sharing/smb/smb-form/smb-form.component.spec.ts @@ -25,12 +25,11 @@ import { IxSelectHarness } from 'app/modules/forms/ix-forms/components/ix-select 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 { AppLoaderService } from 'app/modules/loader/app-loader.service'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { RestartSmbDialogComponent } from 'app/pages/sharing/smb/smb-form/restart-smb-dialog/restart-smb-dialog.component'; import { FilesystemService } from 'app/services/filesystem.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { AppState } from 'app/store'; import { checkIfServiceIsEnabled } from 'app/store/services/services.actions'; @@ -72,6 +71,12 @@ describe('SmbFormComponent', () => { }, } as SmbShare; + const slideInRef: SlideInRef<{ existingSmbShare?: SmbShare; defaultSmbShare?: SmbShare } | undefined, unknown> = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), + }; + const formLabels: Record = { path: 'Path', name: 'Name', @@ -158,7 +163,9 @@ describe('SmbFormComponent', () => { mockCall('service.restart'), mockCall('sharing.smb.presets', { ...presets }), ]), - mockProvider(OldSlideInService), + mockProvider(SlideIn, { + components$: of([]), + }), mockProvider(Router), mockProvider(AppLoaderService), mockProvider(FilesystemService), @@ -172,7 +179,7 @@ describe('SmbFormComponent', () => { info: jest.fn(() => of(true)), }), mockProvider(SnackbarService), - mockProvider(OldSlideInRef), + mockProvider(SlideInRef, slideInRef), provideMockStore({ selectors: [{ selector: selectServices, @@ -182,7 +189,6 @@ describe('SmbFormComponent', () => { mockProvider(FormErrorHandlerService, { handleValidationErrors: jest.fn(), }), - { provide: SLIDE_IN_DATA, useValue: undefined }, ], }); @@ -190,7 +196,7 @@ describe('SmbFormComponent', () => { beforeEach(async () => { spectator = createComponent({ providers: [ - { provide: SLIDE_IN_DATA, useValue: { existingSmbShare: existingShare } }, + mockProvider(SlideInRef, { ...slideInRef, getData: () => ({ existingSmbShare: { ...existingShare } }) }), ], }); loader = TestbedHarnessEnvironment.loader(spectator.fixture); diff --git a/src/app/pages/sharing/smb/smb-form/smb-form.component.ts b/src/app/pages/sharing/smb/smb-form/smb-form.component.ts index 8f18976deb8..c6844c1d238 100644 --- a/src/app/pages/sharing/smb/smb-form/smb-form.component.ts +++ b/src/app/pages/sharing/smb/smb-form/smb-form.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - Inject, OnInit, } from '@angular/core'; import { Validators, FormBuilder, ReactiveFormsModule } from '@angular/forms'; @@ -50,9 +49,8 @@ import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-sele import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service'; import { IxFormatterService } from 'app/modules/forms/ix-forms/services/ix-formatter.service'; import { AppLoaderService } from 'app/modules/loader/app-loader.service'; -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 { SnackbarService } from 'app/modules/snackbar/services/snackbar.service'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { RestartSmbDialogComponent } from 'app/pages/sharing/smb/smb-form/restart-smb-dialog/restart-smb-dialog.component'; @@ -72,7 +70,7 @@ import { selectService } from 'app/store/services/services.selectors'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - OldModalHeaderComponent, + ModalHeaderComponent, MatCard, MatCardContent, ReactiveFormsModule, @@ -239,13 +237,12 @@ export class SmbFormComponent implements OnInit, AfterViewInit { private formErrorHandler: FormErrorHandlerService, private filesystemService: FilesystemService, private snackbar: SnackbarService, - private slideInRef: OldSlideInRef, private store$: Store, private smbValidationService: SmbValidationService, - @Inject(SLIDE_IN_DATA) private data: { existingSmbShare?: SmbShare; defaultSmbShare?: SmbShare }, + public slideInRef: SlideInRef<{ existingSmbShare?: SmbShare; defaultSmbShare?: SmbShare } | undefined, boolean>, ) { - this.existingSmbShare = this.data?.existingSmbShare; - this.defaultSmbShare = this.data?.defaultSmbShare; + this.existingSmbShare = this.slideInRef.getData()?.existingSmbShare; + this.defaultSmbShare = this.slideInRef.getData()?.defaultSmbShare; } ngOnInit(): void { @@ -511,11 +508,11 @@ export class SmbFormComponent implements OnInit, AfterViewInit { ); } this.store$.dispatch(checkIfServiceIsEnabled({ serviceName: ServiceName.Cifs })); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); }); } else { this.store$.dispatch(checkIfServiceIsEnabled({ serviceName: ServiceName.Cifs })); - this.slideInRef.close(true); + this.slideInRef.close({ response: true, error: null }); } }, error: (error: unknown) => { diff --git a/src/app/pages/sharing/smb/smb-list/smb-list.component.spec.ts b/src/app/pages/sharing/smb/smb-list/smb-list.component.spec.ts index 0f5500a56e7..02c723fb714 100644 --- a/src/app/pages/sharing/smb/smb-list/smb-list.component.spec.ts +++ b/src/app/pages/sharing/smb/smb-list/smb-list.component.spec.ts @@ -22,12 +22,12 @@ 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 { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; import { SmbAclComponent } from 'app/pages/sharing/smb/smb-acl/smb-acl.component'; import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.component'; import { SmbListComponent } from 'app/pages/sharing/smb/smb-list/smb-list.component'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { selectServices } from 'app/store/services/services.selectors'; @@ -45,6 +45,12 @@ const shares: Partial[] = [ }, ]; +const slideInRef: SlideInRef = { + close: jest.fn(), + requireConfirmationWhen: jest.fn(), + getData: jest.fn(() => undefined), +}; + describe('SmbListComponent', () => { let spectator: Spectator; let loader: HarnessLoader; @@ -71,12 +77,12 @@ describe('SmbListComponent', () => { mockCall('sharing.smb.getacl', { share_name: 'acl_share_name' } as SmbSharesec), ]), mockAuth(), - 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()), }), provideMockStore({ selectors: [ @@ -110,14 +116,14 @@ describe('SmbListComponent', () => { const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' })); await addButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbFormComponent); + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbFormComponent); }); it('opens smb edit form when "Edit" button is pressed', async () => { const editButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'edit' }), 1, 5); await editButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbFormComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbFormComponent, { data: { existingSmbShare: shares[0] }, }); }); @@ -126,7 +132,7 @@ describe('SmbListComponent', () => { const editShareAclButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'share' }), 1, 5); await editShareAclButton.click(); - expect(spectator.inject(OldSlideInService).open).toHaveBeenCalledWith(SmbAclComponent, { + expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(SmbAclComponent, { data: 'acl_share_name', }); }); diff --git a/src/app/pages/sharing/smb/smb-list/smb-list.component.ts b/src/app/pages/sharing/smb/smb-list/smb-list.component.ts index 816c4240356..2643c371e91 100644 --- a/src/app/pages/sharing/smb/smb-list/smb-list.component.ts +++ b/src/app/pages/sharing/smb/smb-list/smb-list.component.ts @@ -39,6 +39,7 @@ import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum'; import { createTable } from 'app/modules/ix-table/utils'; import { AppLoaderService } from 'app/modules/loader/app-loader.service'; import { FakeProgressBarComponent } from 'app/modules/loader/components/fake-progress-bar/fake-progress-bar.component'; +import { SlideIn } from 'app/modules/slide-ins/slide-in'; import { TestDirective } from 'app/modules/test-id/test.directive'; import { ServiceStateButtonComponent } from 'app/pages/sharing/components/shares-dashboard/service-state-button/service-state-button.component'; import { SmbAclComponent } from 'app/pages/sharing/smb/smb-acl/smb-acl.component'; @@ -46,7 +47,6 @@ import { SmbFormComponent } from 'app/pages/sharing/smb/smb-form/smb-form.compon import { smbListElements } from 'app/pages/sharing/smb/smb-list/smb-list.elements'; import { isRootShare } from 'app/pages/sharing/utils/smb.utils'; import { ErrorHandlerService } from 'app/services/error-handler.service'; -import { OldSlideInService } from 'app/services/old-slide-in.service'; import { ApiService } from 'app/services/websocket/api.service'; import { ServicesState } from 'app/store/services/services.reducer'; import { selectService } from 'app/store/services/services.selectors'; @@ -119,10 +119,11 @@ export class SmbListComponent implements OnInit { iconName: iconMarker('edit'), tooltip: this.translate.instant('Edit'), onClick: (smbShare) => { - const slideInRef = this.slideInService.open(SmbFormComponent, { data: { existingSmbShare: smbShare } }); - slideInRef.slideInClosed$ - .pipe(take(1), filter(Boolean), untilDestroyed(this)) - .subscribe(() => this.dataProvider.load()); + this.slideIn.open(SmbFormComponent, { data: { existingSmbShare: smbShare } }).pipe( + take(1), + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => this.dataProvider.load()); }, }, { @@ -140,8 +141,11 @@ export class SmbListComponent implements OnInit { .pipe(untilDestroyed(this)) .subscribe((shareAcl) => { this.appLoader.close(); - const slideInRef = this.slideInService.open(SmbAclComponent, { data: shareAcl.share_name }); - slideInRef.slideInClosed$.pipe(take(1), untilDestroyed(this)).subscribe(() => { + this.slideIn.open(SmbAclComponent, { data: shareAcl.share_name }).pipe( + take(1), + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe(() => { this.dataProvider.load(); }); }); @@ -203,7 +207,7 @@ export class SmbListComponent implements OnInit { private translate: TranslateService, private dialog: DialogService, private errorHandler: ErrorHandlerService, - private slideInService: OldSlideInService, + private slideIn: SlideIn, private cdr: ChangeDetectorRef, protected emptyService: EmptyService, private router: Router, @@ -232,8 +236,11 @@ export class SmbListComponent implements OnInit { } doAdd(): void { - const slideInRef = this.slideInService.open(SmbFormComponent); - slideInRef.slideInClosed$.pipe(take(1), filter(Boolean), untilDestroyed(this)).subscribe({ + this.slideIn.open(SmbFormComponent).pipe( + take(1), + filter((response) => !!response.response), + untilDestroyed(this), + ).subscribe({ next: () => { this.dataProvider.load(); },