NAS-132592 / 25.04 / Fix app delete dialog

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.component.html

@@ -0,0 +1,36 @@
+<h1 matDialogTitle>
+  {{ 'Delete App' | translate }}
+</h1>
+<form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
+  <p class="message">
+    {{ 'Delete {name}?' | translate: { name: data.name } }}
+  </p>
+
+  @if(data.showRemoveVolumes) {
+    <ix-checkbox
+      formControlName="remove_volumes"
+      [label]="'Remove iXVolumes' | translate"
+    ></ix-checkbox>
+  }
+
+  <ix-checkbox
+    formControlName="remove_images"
+    [label]="'Remove Images' | translate"
+  ></ix-checkbox>
+
+  <ix-form-actions>
+    <button mat-button type="button" ixTest="cancel" matDialogClose>
+      {{ 'Cancel' | translate }}
+    </button>
+
+    <button
+      mat-button
+      type="submit"
+      color="primary"
+      ixTest="delete"
+      [disabled]="form.invalid"
+    >
+      {{ 'Delete' | translate }}
+    </button>
+  </ix-form-actions>
+</form>

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  min-width: 300px;
+}
+

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.component.spec.ts

@@ -0,0 +1,58 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { IxFormHarness } from 'app/modules/forms/ix-forms/testing/ix-form.harness';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
+import { AppDeleteDialogInputData } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.interface';
+
+describe('AppDeleteDialogComponent', () => {
+  let spectator: Spectator<AppDeleteDialogComponent>;
+  let loader: HarnessLoader;
+  let form: IxFormHarness;
+  const createComponent = createComponentFactory({
+    component: AppDeleteDialogComponent,
+    imports: [
+      ReactiveFormsModule,
+    ],
+    providers: [
+      mockAuth(),
+      mockProvider(MatDialogRef),
+      {
+        provide: MAT_DIALOG_DATA,
+        useValue: {
+          name: 'ix-test-app',
+          showRemoveVolumes: true,
+        } as AppDeleteDialogInputData,
+      },
+    ],
+  });
+
+  beforeEach(async () => {
+    spectator = createComponent();
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+    form = await loader.getHarness(IxFormHarness);
+  });
+
+  it('shows dialog message', () => {
+    expect(spectator.query('.message')).toHaveText('Delete ix-test-app?');
+  });
+
+  it('closes dialog with form values when dialog is submitted', async () => {
+    await form.fillForm({
+      'Remove iXVolumes': true,
+      'Remove Images': true,
+    });
+
+    const deleteButton = await loader.getHarness(MatButtonHarness.with({ text: 'Delete' }));
+    await deleteButton.click();
+
+    expect(spectator.inject(MatDialogRef).close).toHaveBeenCalledWith({
+      removeImages: true,
+      removeVolumes: true,
+    });
+  });
+});

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.component.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy, Component, Inject,
+} from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA, MatDialogClose, MatDialogRef, MatDialogTitle,
+} from '@angular/material/dialog';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormActionsComponent } from 'app/modules/forms/ix-forms/components/form-actions/form-actions.component';
+import { IxCheckboxComponent } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
+import { AppDeleteDialogInputData, AppDeleteDialogOutputData } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.interface';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-app-delete-dialog',
+  templateUrl: './app-delete-dialog.component.html',
+  styleUrls: ['./app-delete-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatButton,
+    MatDialogTitle,
+    MatDialogClose,
+    ReactiveFormsModule,
+    FormActionsComponent,
+    IxCheckboxComponent,
+    TestDirective,
+    TranslateModule,
+  ],
+})
+export class AppDeleteDialogComponent {
+  form = this.formBuilder.group({
+    remove_volumes: [false],
+    remove_images: [true],
+  });
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private dialogRef: MatDialogRef<AppDeleteDialogComponent, AppDeleteDialogOutputData>,
+    @Inject(MAT_DIALOG_DATA) protected data: AppDeleteDialogInputData,
+  ) { }
+
+  onSubmit(): void {
+    this.dialogRef.close({
+      removeVolumes: this.form.value.remove_volumes,
+      removeImages: this.form.value.remove_images,
+    });
+  }
+}

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.interface.ts

@@ -0,0 +1,9 @@
+export interface AppDeleteDialogInputData {
+  name: string;
+  showRemoveVolumes: boolean;
+}
+
+export interface AppDeleteDialogOutputData {
+  removeVolumes: boolean;
+  removeImages: boolean;
+}

src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.spec.ts

@@ -18,6 +18,7 @@ import { DialogService } from 'app/modules/dialog/dialog.service';
 import { CleanLinkPipe } from 'app/modules/pipes/clean-link/clean-link.pipe';
 import { OrNotAvailablePipe } from 'app/modules/pipes/or-not-available/or-not-available.pipe';
 import { AppCardLogoComponent } from 'app/pages/apps/components/app-card-logo/app-card-logo.component';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
 import { CustomAppFormComponent } from 'app/pages/apps/components/custom-app-form/custom-app-form.component';
 import { AppInfoCardComponent } from 'app/pages/apps/components/installed-apps/app-info-card/app-info-card.component';
 import { AppRollbackModalComponent } from 'app/pages/apps/components/installed-apps/app-rollback-modal/app-rollback-modal.component';
@@ -93,7 +94,6 @@ describe('AppInfoCardComponent', () => {
         installedApps$: of([]),
       }),
       mockProvider(DialogService, {
-        confirm: jest.fn(() => of({ confirmed: true, secondaryCheckbox: true })),
         jobDialog: jest.fn(() => ({
           afterClosed: () => of(null),
         })),
@@ -211,17 +211,18 @@ describe('AppInfoCardComponent', () => {
 
   it('opens delete app dialog when Delete button is pressed', async () => {
     setupTest(fakeApp);
+    jest.spyOn(spectator.inject(MatDialog), 'open').mockReturnValue({
+      afterClosed: () => of({ removeVolumes: true, removeImages: true }),
+    } as MatDialogRef<unknown>);
 
     const deleteButton = await loader.getHarness(MatButtonHarness.with({ text: 'Delete' }));
     await deleteButton.click();
 
     expect(spectator.inject(DialogService).jobDialog).toHaveBeenCalled();
-    expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
-      title: 'Delete',
-      message: 'Delete test-user-app-name?',
-      secondaryCheckbox: true,
-      secondaryCheckboxText: 'Remove iXVolumes',
-    });
+    expect(spectator.inject(MatDialog).open).toHaveBeenCalledWith(
+      AppDeleteDialogComponent,
+      { data: { name: 'test-user-app-name', showRemoveVolumes: true } },
+    );
     expect(spectator.inject(ApiService).job).toHaveBeenCalledWith(
       'app.delete',
       [fakeApp.name, { remove_images: true, remove_ix_volumes: true }],

src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.ts

@@ -31,6 +31,8 @@ import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { CleanLinkPipe } from 'app/modules/pipes/clean-link/clean-link.pipe';
 import { OrNotAvailablePipe } from 'app/modules/pipes/or-not-available/or-not-available.pipe';
 import { TestDirective } from 'app/modules/test-id/test.directive';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
+import { AppDeleteDialogInputData, AppDeleteDialogOutputData } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.interface';
 import { CustomAppFormComponent } from 'app/pages/apps/components/custom-app-form/custom-app-form.component';
 import { AppRollbackModalComponent } from 'app/pages/apps/components/installed-apps/app-rollback-modal/app-rollback-modal.component';
 import { AppUpgradeDialogComponent } from 'app/pages/apps/components/installed-apps/app-upgrade-dialog/app-upgrade-dialog.component';
@@ -157,22 +159,23 @@ export class AppInfoCardComponent {
     this.appService.checkIfAppIxVolumeExists(name).pipe(
       this.loader.withLoader(),
       switchMap((ixVolumeExists) => {
-        return this.dialogService.confirm({
-          title: helptextApps.apps.delete_dialog.title,
-          message: this.translate.instant('Delete {name}?', { name }),
-          secondaryCheckbox: ixVolumeExists,
-          secondaryCheckboxText: this.translate.instant('Remove iXVolumes'),
-        });
+        return this.matDialog.open<
+          AppDeleteDialogComponent,
+          AppDeleteDialogInputData,
+          AppDeleteDialogOutputData
+        >(AppDeleteDialogComponent, {
+          data: { name, showRemoveVolumes: ixVolumeExists },
+        }).afterClosed();
       }),
-      filter(({ confirmed }) => confirmed),
+      filter(Boolean),
       untilDestroyed(this),
     )
-      .subscribe(({ secondaryCheckbox }) => this.executeDelete(name, secondaryCheckbox));
+      .subscribe(({ removeVolumes, removeImages }) => this.executeDelete(name, removeVolumes, removeImages));
   }
 
-  executeDelete(name: string, removeIxVolumes = false): void {
+  executeDelete(name: string, removeVolumes = false, removeImages = true): void {
     this.dialogService.jobDialog(
-      this.api.job('app.delete', [name, { remove_images: true, remove_ix_volumes: removeIxVolumes }]),
+      this.api.job('app.delete', [name, { remove_images: removeImages, remove_ix_volumes: removeVolumes }]),
       { title: helptextApps.apps.delete_dialog.job },
     )
       .afterClosed()

src/app/pages/apps/components/installed-apps/installed-apps.component.spec.ts

@@ -1,6 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatMenuHarness } from '@angular/material/menu/testing';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -20,6 +21,7 @@ import { EmptyComponent } from 'app/modules/empty/empty.component';
 import { SearchInput1Component } from 'app/modules/forms/search-input1/search-input1.component';
 import { FakeProgressBarComponent } from 'app/modules/loader/components/fake-progress-bar/fake-progress-bar.component';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
 import { AppDetailsPanelComponent } from 'app/pages/apps/components/installed-apps/app-details-panel/app-details-panel.component';
 import { AppRowComponent } from 'app/pages/apps/components/installed-apps/app-row/app-row.component';
 import { AppSettingsButtonComponent } from 'app/pages/apps/components/installed-apps/app-settings-button/app-settings-button.component';
@@ -78,7 +80,6 @@ describe('InstalledAppsComponent', () => {
         availableApps$: of([]),
       }),
       mockProvider(DialogService, {
-        confirm: jest.fn(() => of({ confirmed: true, secondaryCheckbox: true })),
         jobDialog: jest.fn(() => ({
           afterClosed: () => of(null),
         })),
@@ -160,19 +161,20 @@ describe('InstalledAppsComponent', () => {
 
   it('removes selected applications', async () => {
     jest.spyOn(applicationsService, 'checkIfAppIxVolumeExists').mockReturnValue(of(true));
+    jest.spyOn(spectator.inject(MatDialog), 'open').mockReturnValue({
+      afterClosed: () => of({ removeVolumes: true, removeImages: true }),
+    } as MatDialogRef<unknown>);
 
     spectator.component.selection.select(app.name);
 
     const menu = await loader.getHarness(MatMenuHarness.with({ triggerText: 'Select action' }));
     await menu.open();
     await menu.clickItem({ text: 'Delete All Selected' });
 
-    expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
-      title: 'Delete',
-      message: 'Delete test-app?',
-      secondaryCheckbox: true,
-      secondaryCheckboxText: 'Remove iXVolumes',
-    });
+    expect(spectator.inject(MatDialog).open).toHaveBeenCalledWith(
+      AppDeleteDialogComponent,
+      { data: { name: 'test-app', showRemoveVolumes: true } },
+    );
 
     expect(spectator.inject(ApiService).job).toHaveBeenCalledWith(
       'core.bulk',

src/app/pages/apps/components/installed-apps/installed-apps.component.ts

@@ -53,6 +53,8 @@ import { FakeProgressBarComponent } from 'app/modules/loader/components/fake-pro
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
 import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
 import { TestDirective } from 'app/modules/test-id/test.directive';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
+import { AppDeleteDialogInputData, AppDeleteDialogOutputData } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.interface';
 import { AppBulkUpgradeComponent } from 'app/pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component';
 import { AppDetailsPanelComponent } from 'app/pages/apps/components/installed-apps/app-details-panel/app-details-panel.component';
 import { AppRowComponent } from 'app/pages/apps/components/installed-apps/app-row/app-row.component';
@@ -442,15 +444,19 @@ export class InstalledAppsComponent implements OnInit, AfterViewInit {
       .pipe(
         this.loader.withLoader(),
         switchMap((ixVolumesExist) => {
-          return this.dialogService.confirm({
-            title: helptextApps.apps.delete_dialog.title,
-            message: this.translate.instant('Delete {name}?', { name: this.checkedAppsNames.join(', ') }),
-            secondaryCheckbox: ixVolumesExist.some(Boolean),
-            secondaryCheckboxText: this.translate.instant('Remove iXVolumes'),
-          });
+          return this.matDialog.open<
+            AppDeleteDialogComponent,
+            AppDeleteDialogInputData,
+            AppDeleteDialogOutputData
+          >(AppDeleteDialogComponent, {
+            data: {
+              name: this.checkedAppsNames.join(', '),
+              showRemoveVolumes: ixVolumesExist.some(Boolean),
+            },
+          }).afterClosed();
         }),
-        filter(({ confirmed }) => confirmed),
-        switchMap(({ secondaryCheckbox }) => this.executeBulkDeletion(secondaryCheckbox)),
+        filter(Boolean),
+        switchMap(({ removeVolumes, removeImages }) => this.executeBulkDeletion(removeVolumes, removeImages)),
         this.errorHandler.catchError(),
         untilDestroyed(this),
       )
@@ -480,10 +486,13 @@ export class InstalledAppsComponent implements OnInit, AfterViewInit {
     });
   }
 
-  private executeBulkDeletion(removeIxVolumes = false): Observable<Job<CoreBulkResponse[]>> {
+  private executeBulkDeletion(
+    removeVolumes = false,
+    removeImages = true,
+  ): Observable<Job<CoreBulkResponse[]>> {
     const bulkDeletePayload = this.checkedAppsNames.map((name) => [
       name,
-      { remove_images: true, remove_ix_volumes: removeIxVolumes },
+      { remove_images: removeImages, remove_ix_volumes: removeVolumes },
     ]);
 
     return this.dialogService.jobDialog(

src/assets/i18n/af.json

@@ -1235,6 +1235,7 @@
   "Delete Alert Service <b>\"{name}\"</b>?": "",
   "Delete All Selected": "",
   "Delete Allowed Address": "",
+  "Delete App": "",
   "Delete Catalog": "",
   "Delete Certificate": "",
   "Delete Certificate Authority": "",
@@ -3387,6 +3388,7 @@
   "Remote syslog server DNS hostname or IP address. Nonstandard port numbers can be used by adding a colon and the port number to the hostname, like <samp>mysyslogserver:1928</samp>. Log entries are written to local logs and sent to the remote syslog server.": "",
   "Remote system SSH key for this system to  authenticate the connection. When all other fields are properly  configured, click <b>DISCOVER REMOTE HOST KEY</b> to query the remote  system and automatically populate this field.": "",
   "Remove": "",
+  "Remove Images": "",
   "Remove Invalid Quotas": "",
   "Remove Keep Flag": "",
   "Remove device": "",

src/assets/i18n/ar.json

@@ -1235,6 +1235,7 @@
   "Delete Alert Service <b>\"{name}\"</b>?": "",
   "Delete All Selected": "",
   "Delete Allowed Address": "",
+  "Delete App": "",
   "Delete Catalog": "",
   "Delete Certificate": "",
   "Delete Certificate Authority": "",
@@ -3387,6 +3388,7 @@
   "Remote syslog server DNS hostname or IP address. Nonstandard port numbers can be used by adding a colon and the port number to the hostname, like <samp>mysyslogserver:1928</samp>. Log entries are written to local logs and sent to the remote syslog server.": "",
   "Remote system SSH key for this system to  authenticate the connection. When all other fields are properly  configured, click <b>DISCOVER REMOTE HOST KEY</b> to query the remote  system and automatically populate this field.": "",
   "Remove": "",
+  "Remove Images": "",
   "Remove Invalid Quotas": "",
   "Remove Keep Flag": "",
   "Remove device": "",