NAS-131790: Add interface implementation

src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts

@@ -1,6 +1,5 @@
-import { ComponentType } from '@angular/cdk/portal';
 import {
-  AfterViewInit, Directive, Input, OnInit, ViewChild, inject,
+  AfterViewInit, Directive, Input, OnInit, Type, ViewChild, inject,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
@@ -9,6 +8,7 @@ import {
   Observable, distinctUntilChanged, filter, map, switchMap, take, tap,
 } from 'rxjs';
 import { Option } from 'app/interfaces/option.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { ChainedComponentResponse, ChainedSlideInService } from 'app/services/chained-slide-in.service';
 
@@ -47,7 +47,7 @@ export abstract class IxSelectWithNewOption implements OnInit, AfterViewInit {
   abstract getValueFromChainedResponse(
     result: ChainedComponentResponse,
   ): IxSelectValue;
-  abstract getFormComponentType(): ComponentType<unknown>;
+  abstract getFormComponentType(): Type<SlideIn2CloseConfirmation>;
   abstract fetchOptions(): Observable<Option[]>;
   getFormInputData(): Record<string, unknown> {
     return undefined;

src/app/modules/slide-ins/chained-component-ref.ts

@@ -1,4 +1,5 @@
 import { Type } from '@angular/core';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { ChainedComponentResponse as ChainedResponse } from 'app/services/chained-slide-in.service';
 
 export class ChainedRef<T> {
@@ -10,6 +11,6 @@ export class ChainedRef<T> {
    * have the same purpose and return the same response type e.g, form to wizard and
    * wizard to form.
    */
-  swap?: (component: Type<unknown>, wide: boolean, data?: unknown) => void;
+  swap?: (component: Type<SlideIn2CloseConfirmation>, wide: boolean, data?: unknown) => void;
   getData: () => T;
 }

src/app/modules/slide-ins/components/modal-header2/modal-header2.component.ts

@@ -70,6 +70,6 @@ export class ModalHeader2Component implements AfterViewInit {
   }
 
   close(): void {
-    this.chainedSlideInRef.close({ response: false, error: null });
+    this.chainedSlideInRef.close({ response: false, error: null, cancelled: true });
   }
 }

src/app/modules/slide-ins/components/slide-in2/slide-in2.component.ts

@@ -118,7 +118,7 @@ export class SlideIn2Component implements OnInit, OnDestroy {
   }
 
   private openSlideIn<T, D>(
-    componentType: Type<unknown>,
+    componentType: Type<SlideIn2CloseConfirmation>,
     params?: { wide?: boolean; data?: D },
   ): void {
     if (this.isSlideInOpen) {
@@ -143,7 +143,7 @@ export class SlideIn2Component implements OnInit, OnDestroy {
   }
 
   private createInjector<T, D>(
-    componentType: Type<unknown>,
+    componentType: Type<SlideIn2CloseConfirmation>,
     data?: D,
   ): void {
     const injector = Injector.create({
@@ -152,7 +152,7 @@ export class SlideIn2Component implements OnInit, OnDestroy {
           provide: ChainedRef<D>,
           useValue: {
             close: (response: ChainedComponentResponse) => {
-              this.getConfirmation().pipe(
+              (response.cancelled ? this.getConfirmation() : of(true)).pipe(
                 filter(Boolean),
                 untilDestroyed(this),
               ).subscribe({
@@ -163,7 +163,7 @@ export class SlideIn2Component implements OnInit, OnDestroy {
                 },
               });
             },
-            swap: (component: Type<unknown>, wide = false, incomingComponentData?: unknown) => {
+            swap: (component: Type<SlideIn2CloseConfirmation>, wide = false, incomingComponentData?: unknown) => {
               this.getConfirmation().pipe(
                 filter(Boolean),
                 untilDestroyed(this),
@@ -186,7 +186,7 @@ export class SlideIn2Component implements OnInit, OnDestroy {
         },
       ],
     });
-    this.componentRef = this.slideInBody.createComponent<T>(componentType as Type<T>, { injector });
+    this.componentRef = this.slideInBody.createComponent<T>(componentType as unknown as Type<T>, { injector });
   }
 
   protected onBackdropClicked(): void {

src/app/pages/dashboard/components/widget-group-form/widget-group-form.component.ts

@@ -7,7 +7,8 @@ import {
 import { MatButton } from '@angular/material/button';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
-import { tap } from 'rxjs';
+import { Observable, of, tap } from 'rxjs';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 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 { IxIconGroupComponent } from 'app/modules/forms/ix-forms/components/ix-icon-group/ix-icon-group.component';
@@ -47,7 +48,7 @@ import { WidgetGroupSlotFormComponent } from './widget-group-slot-form/widget-gr
     TranslateModule,
   ],
 })
-export class WidgetGroupFormComponent {
+export class WidgetGroupFormComponent implements SlideIn2CloseConfirmation {
   protected group = signal<WidgetGroup>(
     { layout: WidgetGroupLayout.Full, slots: [{ type: null }] },
   );
@@ -82,6 +83,10 @@ export class WidgetGroupFormComponent {
     this.setInitialFormValues();
   }
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.layoutControl.dirty);
+  }
+
   private setInitialFormValues(): void {
     const widgetGroup = this.chainedRef.getData();
     if (!widgetGroup) {

src/app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component.ts

@@ -8,7 +8,7 @@ import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import {
-  debounceTime, distinctUntilChanged, map, of,
+  debounceTime, distinctUntilChanged, map, Observable, of,
 } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { CloudSyncProviderName } from 'app/enums/cloudsync-provider.enum';
@@ -19,6 +19,7 @@ import { buildNormalizedFileSize } from 'app/helpers/file-size.utils';
 import { helptextCloudBackup } from 'app/helptext/data-protection/cloud-backup/cloud-backup';
 import { CloudBackup, CloudBackupUpdate } from 'app/interfaces/cloud-backup.interface';
 import { SelectOption, newOption } from 'app/interfaces/option.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { ExplorerNodeData, TreeNode } from 'app/interfaces/tree-node.interface';
 import { CloudCredentialsSelectComponent } from 'app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component';
 import { FormActionsComponent } from 'app/modules/forms/ix-forms/components/form-actions/form-actions.component';
@@ -73,7 +74,7 @@ type FormValue = CloudBackupFormComponent['form']['value'];
     TranslateModule,
   ],
 })
-export class CloudBackupFormComponent implements OnInit {
+export class CloudBackupFormComponent implements OnInit, SlideIn2CloseConfirmation {
   get isNew(): boolean {
     return !this.editingTask;
   }
@@ -143,6 +144,10 @@ export class CloudBackupFormComponent implements OnInit {
     this.editingTask = chainedRef.getData();
   }
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.form.dirty);
+  }
+
   ngOnInit(): void {
     this.setFileNodeProvider();
     this.setBucketNodeProvider();

src/app/pages/data-protection/cloudsync/cloudsync-form/cloudsync-form.component.ts

@@ -29,6 +29,7 @@ import { CloudSyncTask, CloudSyncTaskUi, CloudSyncTaskUpdate } from 'app/interfa
 import { CloudSyncCredential } from 'app/interfaces/cloudsync-credential.interface';
 import { CloudSyncProvider } from 'app/interfaces/cloudsync-provider.interface';
 import { newOption, SelectOption } from 'app/interfaces/option.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { ExplorerNodeData, TreeNode } from 'app/interfaces/tree-node.interface';
 import { WebSocketError } from 'app/interfaces/websocket-error.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
@@ -94,7 +95,7 @@ type FormValue = CloudSyncFormComponent['form']['value'];
     TranslateModule,
   ],
 })
-export class CloudSyncFormComponent implements OnInit {
+export class CloudSyncFormComponent implements OnInit, SlideIn2CloseConfirmation {
   get isNew(): boolean {
     return !this.editingTask;
   }
@@ -227,6 +228,10 @@ export class CloudSyncFormComponent implements OnInit {
     this.editingTask = this.chainedRef.getData();
   }
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.form.dirty);
+  }
+
   getCredentialsList(): Observable<CloudSyncCredential[]> {
     return this.fetchCloudSyncCredentialsList();
   }

src/app/pages/data-protection/cloudsync/cloudsync-wizard/cloudsync-wizard.component.ts

@@ -8,11 +8,13 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import {
   BehaviorSubject, Observable, merge,
+  of,
 } from 'rxjs';
 import { cloudSyncProviderNameMap } from 'app/enums/cloudsync-provider.enum';
 import { Role } from 'app/enums/role.enum';
 import { CloudSyncTask, CloudSyncTaskUpdate } from 'app/interfaces/cloud-sync-task.interface';
 import { CloudSyncCredential } from 'app/interfaces/cloudsync-credential.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import {
   UseIxIconsInStepperComponent,
@@ -43,7 +45,7 @@ import { CloudSyncProviderComponent } from './steps/cloudsync-provider/cloudsync
     UseIxIconsInStepperComponent,
   ],
 })
-export class CloudSyncWizardComponent {
+export class CloudSyncWizardComponent implements SlideIn2CloseConfirmation {
   @ViewChild(forwardRef(() => CloudSyncWhatAndWhenComponent)) whatAndWhen: CloudSyncWhatAndWhenComponent;
 
   protected readonly requiredRoles = [Role.CloudSyncWrite];
@@ -63,6 +65,10 @@ export class CloudSyncWizardComponent {
     private errorHandler: ErrorHandlerService,
   ) {}
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.whatAndWhen.form.dirty);
+  }
+
   createTask(payload: CloudSyncTaskUpdate): Observable<CloudSyncTask> {
     return this.ws.call('cloudsync.create', [payload]);
   }

src/app/pages/data-protection/replication/replication-form/replication-form.component.ts

@@ -6,7 +6,7 @@ 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 { merge, of } from 'rxjs';
+import { merge, Observable, of } from 'rxjs';
 import { debounceTime, switchMap } from 'rxjs/operators';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Direction } from 'app/enums/direction.enum';
@@ -17,6 +17,7 @@ import { helptextReplicationWizard } from 'app/helptext/data-protection/replicat
 import { CountManualSnapshotsParams } from 'app/interfaces/count-manual-snapshots.interface';
 import { KeychainSshCredentials } from 'app/interfaces/keychain-credential.interface';
 import { ReplicationCreate, ReplicationTask } from 'app/interfaces/replication-task.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { WebSocketError } from 'app/interfaces/websocket-error.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { TreeNodeProvider } from 'app/modules/forms/ix-forms/components/ix-explorer/tree-node-provider.interface';
@@ -74,7 +75,7 @@ import { WebSocketService } from 'app/services/ws.service';
     TranslateModule,
   ],
 })
-export class ReplicationFormComponent implements OnInit {
+export class ReplicationFormComponent implements OnInit, SlideIn2CloseConfirmation {
   @ViewChild(GeneralSectionComponent, { static: true }) generalSection: GeneralSectionComponent;
   @ViewChild(TransportSectionComponent, { static: true }) transportSection: TransportSectionComponent;
   @ViewChild(SourceSectionComponent, { static: true }) sourceSection: SourceSectionComponent;
@@ -112,6 +113,16 @@ export class ReplicationFormComponent implements OnInit {
     this.existingReplication = this.chainedRef.getData();
   }
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(
+      this.generalSection.form.dirty
+      || this.transportSection.form.dirty
+      || this.sourceSection.form.dirty
+      || this.targetSection.form.dirty
+      || this.scheduleSection.form.dirty,
+    );
+  }
+
   ngOnInit(): void {
     this.countSnapshotsOnChanges();
     this.updateExplorersOnChanges();

src/app/pages/data-protection/replication/replication-wizard/replication-wizard.component.ts

@@ -30,6 +30,7 @@ import { CountManualSnapshotsParams, EligibleManualSnapshotsCount, TargetUnmatch
 import { PeriodicSnapshotTask, PeriodicSnapshotTaskCreate } from 'app/interfaces/periodic-snapshot-task.interface';
 import { ReplicationCreate, ReplicationTask } from 'app/interfaces/replication-task.interface';
 import { Schedule } from 'app/interfaces/schedule.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { CreateZfsSnapshot, ZfsSnapshot } from 'app/interfaces/zfs-snapshot.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import {
@@ -69,7 +70,7 @@ import { WebSocketService } from 'app/services/ws.service';
     UseIxIconsInStepperComponent,
   ],
 })
-export class ReplicationWizardComponent {
+export class ReplicationWizardComponent implements SlideIn2CloseConfirmation {
   @ViewChild(ReplicationWhatAndWhereComponent) whatAndWhere: ReplicationWhatAndWhereComponent;
   @ViewChild(ReplicationWhenComponent) when: ReplicationWhenComponent;
 
@@ -98,6 +99,11 @@ export class ReplicationWizardComponent {
     private authService: AuthService,
   ) {}
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    const steps = this.getSteps();
+    return of(steps.some((step) => step.form.dirty));
+  }
+
   getSteps(): [
     ReplicationWhatAndWhereComponent,
     ReplicationWhenComponent,

src/app/pages/data-protection/rsync-task/rsync-task-form/rsync-task-form.component.ts

@@ -16,6 +16,7 @@ import { RsyncMode, RsyncSshConnectMode } from 'app/enums/rsync-mode.enum';
 import { helptextRsyncForm } from 'app/helptext/data-protection/rsync/rsync-form';
 import { newOption } from 'app/interfaces/option.interface';
 import { RsyncTask, RsyncTaskUpdate } from 'app/interfaces/rsync-task.interface';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { SshCredentialsSelectComponent } from 'app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component';
 import { UserComboboxProvider } from 'app/modules/forms/ix-forms/classes/user-combobox-provider';
 import { IxCheckboxComponent } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component';
@@ -68,7 +69,7 @@ import { WebSocketService } from 'app/services/ws.service';
     TranslateModule,
   ],
 })
-export class RsyncTaskFormComponent implements OnInit {
+export class RsyncTaskFormComponent implements OnInit, SlideIn2CloseConfirmation {
   readonly requiredRoles = [Role.FullAdmin];
 
   get isNew(): boolean {
@@ -154,6 +155,10 @@ export class RsyncTaskFormComponent implements OnInit {
     this.editingTask = this.chainedSlideInRef.getData();
   }
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.form.dirty);
+  }
+
   get isModuleMode(): boolean {
     return this.form.value.mode === RsyncMode.Module;
   }

src/app/pages/system/advanced/access/access-form/access-form.component.ts

@@ -8,10 +8,11 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import {
-  filter, finalize, forkJoin, Observable, take,
+  filter, finalize, forkJoin, Observable, of, take,
 } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 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';
@@ -55,7 +56,7 @@ import { selectAdvancedConfig, selectGeneralConfig } from 'app/store/system-conf
     TranslateModule,
   ],
 })
-export class AccessFormComponent implements OnInit {
+export class AccessFormComponent implements OnInit, SlideIn2CloseConfirmation {
   readonly requiredRoles = [Role.AuthSessionsWrite];
 
   isLoading = false;
@@ -87,6 +88,10 @@ export class AccessFormComponent implements OnInit {
     private chainedSlideInRef: ChainedRef<unknown>,
   ) {}
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.form.dirty);
+  }
+
   ngOnInit(): void {
     this.store$.select(selectPreferences).pipe(untilDestroyed(this)).subscribe((preferences) => {
       if (preferences.lifetime) {

src/app/pages/system/advanced/allowed-addresses/allowed-addresses-form/allowed-addresses-form.component.ts

@@ -15,6 +15,7 @@ import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-r
 import { Role } from 'app/enums/role.enum';
 import { helptextSystemAdvanced } from 'app/helptext/system/advanced';
 import { helptextSystemGeneral } from 'app/helptext/system/general';
+import { SlideIn2CloseConfirmation } from 'app/interfaces/slide-in-close-confirmation.interface';
 import { WebSocketError } from 'app/interfaces/websocket-error.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { FormActionsComponent } from 'app/modules/forms/ix-forms/components/form-actions/form-actions.component';
@@ -53,7 +54,7 @@ import { generalConfigUpdated } from 'app/store/system-config/system-config.acti
     TranslateModule,
   ],
 })
-export class AllowedAddressesFormComponent implements OnInit {
+export class AllowedAddressesFormComponent implements OnInit, SlideIn2CloseConfirmation {
   protected readonly requiredRoles = [Role.FullAdmin];
   protected readonly helpText = helptextSystemAdvanced;
 
@@ -74,6 +75,10 @@ export class AllowedAddressesFormComponent implements OnInit {
     private slideInRef: ChainedRef<unknown>,
   ) {}
 
+  requiresConfirmationOnClose(): Observable<boolean> {
+    return of(this.form.dirty);
+  }
+
   ngOnInit(): void {
     this.ws.call('system.general.config').pipe(untilDestroyed(this)).subscribe({
       next: (config) => {