NAS-132914 / 24.10.2 / Expose force_remove_ix_volumes flag on app deletion

src/app/interfaces/api/api-call-directory.interface.ts

@@ -320,6 +320,7 @@ export interface ApiCallDirectory {
   'app.similar': { params: [app_name: string, train: string]; response: AvailableApp[] };
   'app.rollback_versions': { params: [app_name: string]; response: string[] };
   'app.used_ports': { params: void; response: number[] };
+  'app.ix_volume.exists': { params: [string]; response: boolean };
 
   // Audit
   'audit.config': { params: void; response: AuditConfig };

src/app/interfaces/app.interface.ts

@@ -298,6 +298,7 @@ export type AppDeleteParams = [
   {
     remove_images?: boolean;
     remove_ix_volumes?: boolean;
+    force_remove_ix_volumes?: boolean;
   },
 ];
 

src/app/pages/apps/apps.module.ts

@@ -42,6 +42,7 @@ import { TerminalModule } from 'app/modules/terminal/terminal.module';
 import { TestIdModule } from 'app/modules/test-id/test-id.module';
 import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 import { AppsRoutingModule } from 'app/pages/apps/apps-routing.module';
+import { AppDeleteDialogComponent } from 'app/pages/apps/components/app-delete-dialog/app-delete-dialog.component';
 import {
   AppDetailsHeaderComponent,
 } from 'app/pages/apps/components/app-detail-view/app-details-header/app-details-header.component';
@@ -131,6 +132,7 @@ import { InstalledAppsComponent } from './components/installed-apps/installed-ap
     PullImageFormComponent,
     DockerHubRateInfoDialogComponent,
     VolumeMountsDialogComponent,
+    AppDeleteDialogComponent,
   ],
   imports: [
     CommonModule,

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

@@ -0,0 +1,43 @@
+<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="removeVolumes"
+      [label]="'Remove iXVolumes' | translate"
+    ></ix-checkbox>
+
+    @if (data.showRemoveVolumes && form.value.removeVolumes) {
+      <ix-checkbox
+        formControlName="forceRemoveVolumes"
+        [label]="'Force-remove iXVolumes' | translate"
+      ></ix-checkbox>
+    }
+  }
+
+  <ix-checkbox
+    formControlName="removeImages"
+    [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,79 @@
+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 { IxFormsModule } from 'app/modules/forms/ix-forms/ix-forms.module';
+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: [
+      IxFormsModule,
+      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,
+      forceRemoveVolumes: false,
+    });
+  });
+
+  it('shows force remove volumes checkbox when Remove iXVolumes is selected', async () => {
+    expect(await form.getLabels()).not.toContain('Force-remove iXVolumes');
+
+    await form.fillForm({
+      'Remove iXVolumes': true,
+      'Force-remove iXVolumes': true,
+    });
+
+    const deleteButton = await loader.getHarness(MatButtonHarness.with({ text: 'Delete' }));
+    await deleteButton.click();
+
+    expect(spectator.inject(MatDialogRef).close).toHaveBeenCalledWith({
+      removeImages: true,
+      removeVolumes: true,
+      forceRemoveVolumes: true,
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy, Component, Inject,
+} from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import {
+  MAT_DIALOG_DATA, MatDialogRef,
+} from '@angular/material/dialog';
+import { UntilDestroy } from '@ngneat/until-destroy';
+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,
+})
+export class AppDeleteDialogComponent {
+  form = this.formBuilder.group({
+    removeVolumes: [false],
+    removeImages: [true],
+    forceRemoveVolumes: [false],
+  });
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private dialogRef: MatDialogRef<AppDeleteDialogComponent, AppDeleteDialogOutputData>,
+    @Inject(MAT_DIALOG_DATA) protected data: AppDeleteDialogInputData,
+  ) { }
+
+  onSubmit(): void {
+    this.dialogRef.close(this.form.getRawValue());
+  }
+}

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

@@ -0,0 +1,10 @@
+export interface AppDeleteDialogInputData {
+  name: string;
+  showRemoveVolumes: boolean;
+}
+
+export interface AppDeleteDialogOutputData {
+  removeVolumes: boolean;
+  removeImages: boolean;
+  forceRemoveVolumes: 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';
@@ -84,12 +85,13 @@ describe('AppInfoCardComponent', () => {
     providers: [
       mockProvider(ApplicationsService, {
         getAppUpgradeSummary: jest.fn(() => of(upgradeSummary)),
+        checkIfAppIxVolumeExists: jest.fn(() => of(true)),
       }),
       mockProvider(InstalledAppsStore, {
         installedApps$: of([]),
       }),
       mockProvider(DialogService, {
-        confirm: jest.fn(() => of({ confirmed: true, secondaryCheckbox: true })),
+        confirm: jest.fn(() => of(true)),
         jobDialog: jest.fn(() => ({
           afterClosed: () => of(null),
         })),
@@ -207,17 +209,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(WebSocketService).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

@@ -20,6 +20,8 @@ import { AppUpgradeDialogConfig } from 'app/interfaces/app-upgrade-dialog-config
 import { App } from 'app/interfaces/app.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { AppLoaderService } from 'app/modules/loader/app-loader.service';
+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';
@@ -142,19 +144,26 @@ export class AppInfoCardComponent {
   deleteButtonPressed(): void {
     const name = this.app().name;
 
-    this.dialogService.confirm({
-      title: helptextApps.apps.delete_dialog.title,
-      message: this.translate.instant('Delete {name}?', { name }),
-      secondaryCheckbox: true,
-      secondaryCheckboxText: this.translate.instant('Remove iXVolumes'),
-    })
-      .pipe(filter(({ confirmed }) => Boolean(confirmed)), untilDestroyed(this))
-      .subscribe(({ secondaryCheckbox }) => this.executeDelete(name, secondaryCheckbox));
+    this.appService.checkIfAppIxVolumeExists(name).pipe(
+      this.loader.withLoader(),
+      switchMap((ixVolumeExists) => {
+        return this.matDialog.open<
+        AppDeleteDialogComponent,
+        AppDeleteDialogInputData,
+        AppDeleteDialogOutputData
+        >(AppDeleteDialogComponent, {
+          data: { name, showRemoveVolumes: ixVolumeExists },
+        }).afterClosed();
+      }),
+      filter(Boolean),
+      untilDestroyed(this),
+    )
+      .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.ws.job('app.delete', [name, { remove_images: true, remove_ix_volumes: removeIxVolumes }]),
+      this.ws.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 { IxFormsModule } from 'app/modules/forms/ix-forms/ix-forms.module';
 import { SearchInput1Component } from 'app/modules/forms/search-input1/search-input1.component';
 import { PageHeaderModule } from 'app/modules/page-header/page-header.module';
+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';
@@ -36,6 +38,7 @@ import { selectAdvancedConfig, selectSystemConfigState } from 'app/store/system-
 describe('InstalledAppsComponent', () => {
   let spectator: Spectator<InstalledAppsComponent>;
   let loader: HarnessLoader;
+  let applicationsService: ApplicationsService;
 
   const app = {
     id: 'ix-test-app',
@@ -77,7 +80,6 @@ describe('InstalledAppsComponent', () => {
         availableApps$: of([]),
       }),
       mockProvider(DialogService, {
-        confirm: jest.fn(() => of({ confirmed: true, secondaryCheckbox: true })),
         jobDialog: jest.fn(() => ({
           afterClosed: () => of(null),
         })),
@@ -124,6 +126,7 @@ describe('InstalledAppsComponent', () => {
     spectator = createComponent();
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);
     spectator.component.dataSource = [app];
+    applicationsService = spectator.inject(ApplicationsService);
   });
 
   it('shows a list of installed apps', () => {
@@ -151,22 +154,25 @@ describe('InstalledAppsComponent', () => {
   });
 
   it('removes selected applications', async () => {
-    spectator.component.selection.select(app.name);
+    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.id);
 
     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: app.id, showRemoveVolumes: true } },
+    );
 
     expect(spectator.inject(WebSocketService).job).toHaveBeenCalledWith(
       'core.bulk',
-      ['app.delete', [[app.name, { remove_images: true, remove_ix_volumes: true }]]],
+      ['app.delete', [[app.id, { remove_images: true, remove_ix_volumes: true }]]],
     );
   });
 });