NAS-133358 / 25.04 / Add more warnings about unsaved changes #2 (#11313)

* NAS-133300: Migrate more instances of OldSlideInService

* NAS-133300: NAS-133317: Migrate more instances of OldSlideInService #2

* NAS-133319: Migrate more instances of OldSlideInService #3

* NAS-133319: PR update

* NAS-133319: Skip

* NAS-133325: Migrate more instances of OldSlideInService #4

* NAS-133325: PR Update

* NAS-133371: Cleanup OldSlideInService

* NAS-133358: Add more warnings about unsaved changes #2

src/app/modules/slide-ins/slide-in.ts

@@ -73,7 +73,7 @@ export class SlideIn extends ComponentStore<SlideInState> {
     return close$.asObservable().pipe(tap(() => this.focusService.restoreFocus()));
   }
 
-  popComponent = this.updater((state, id: string | undefined) => {
+  popComponent = this.updater((state, id: string) => {
     const newMap = new Map(state.components);
     newMap.set(id, { ...newMap.get(id), isComponentAlive: false });
     this.focusOnTheCloseButton();

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

@@ -13,6 +13,7 @@ import {
   combineLatest,
   filter,
   forkJoin,
+  of,
   take,
 } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
@@ -100,6 +101,9 @@ export class AppsSettingsComponent implements OnInit {
     private snackbar: SnackbarService,
     private translate: TranslateService,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.dockerStore.initialize();
   }
 

src/app/pages/apps/components/docker-images/pull-image-form/pull-image-form.component.ts

@@ -4,6 +4,7 @@ import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
 import { latestVersion } from 'app/constants/catalog.constants';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
@@ -67,7 +68,11 @@ export class PullImageFormComponent {
     private fb: FormBuilder,
     private translate: TranslateService,
     private dialogService: DialogService,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   onSubmit(): void {
     const values = this.form.value;

src/app/pages/credentials/users/user-api-keys/components/api-key-form/api-key-form.component.ts

@@ -9,7 +9,7 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
-import { filter, map } from 'rxjs';
+import { filter, map, of } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
 import { ParamsBuilder } from 'app/helpers/params-builder/params-builder.class';
@@ -117,6 +117,9 @@ export class ApiKeyFormComponent implements OnInit {
     private authService: AuthService,
     public slideInRef: SlideInRef<ApiKey | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingRow.set(slideInRef.getData());
   }
 

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

@@ -85,6 +85,7 @@ export class WidgetGroupFormComponent {
     this.slideInRef.requireConfirmationWhen(() => {
       return of(this.layoutControl.dirty || this.widgetGroupSlotForm()?.form?.dirty);
     });
+
     this.setupLayoutUpdates();
     this.setInitialFormValues();
   }

src/app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-restore-form-snapshot-form/cloud-backup-restore-from-snapshot-form.component.ts

@@ -120,6 +120,10 @@ export class CloudBackupRestoreFromSnapshotFormComponent implements OnInit {
 
     public slideInRef: SlideInRef<{ backup: CloudBackup; snapshot: CloudBackupSnapshot }, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+
     this.data = this.slideInRef.getData();
     this.form.patchValue({
       subFolder: this.data.backup.path,

src/app/pages/data-protection/replication/replication-wizard/steps/replication-what-and-where/replication-what-and-where.component.ts

@@ -162,7 +162,6 @@ export class ReplicationWhatAndWhereComponent implements OnInit, SummaryProvider
   }
 
   constructor(
-    public slideInRef: SlideInRef<unknown, unknown>,
     private formBuilder: FormBuilder,
     private replicationService: ReplicationService,
     private keychainCredentials: KeychainCredentialService,
@@ -174,7 +173,12 @@ export class ReplicationWhatAndWhereComponent implements OnInit, SummaryProvider
     private api: ApiService,
     private cdr: ChangeDetectorRef,
     private errorHandler: ErrorHandlerService,
-  ) {}
+    public slideInRef: SlideInRef<unknown, unknown>,
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.disableSource();

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

@@ -131,6 +131,9 @@ export class SnapshotTaskFormComponent implements OnInit {
     protected storageService: StorageService,
     public slideInRef: SlideInRef<PeriodicSnapshotTask | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingTask = slideInRef.getData();
   }
 

src/app/pages/data-protection/vmware-snapshot/vmware-snapshot-form/vmware-snapshot-form.component.ts

@@ -103,6 +103,9 @@ export class VmwareSnapshotFormComponent implements OnInit {
     protected dialogService: DialogService,
     public slideInRef: SlideInRef<VmwareSnapshot | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingSnapshot = slideInRef.getData();
   }
 

src/app/pages/datasets/components/dataset-capacity-management-card/dataset-capacity-settings/dataset-capacity-settings.component.ts

@@ -6,6 +6,7 @@ import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
 import { GiB } from 'app/constants/bytes.constant';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
@@ -113,6 +114,9 @@ export class DatasetCapacitySettingsComponent implements OnInit {
     private validators: IxValidatorsService,
     public slideInRef: SlideInRef<DatasetDetails | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.dataset = slideInRef.getData();
     this.setFormRelations();
   }

src/app/pages/datasets/components/dataset-form/dataset-form.component.ts

@@ -140,6 +140,15 @@ export class DatasetFormComponent implements OnInit, AfterViewInit {
     private store$: Store<AppState>,
     public slideInRef: SlideInRef<{ datasetId: string; isNew?: boolean } | undefined, Dataset>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(
+        this.form.dirty
+        || this.nameAndOptionsSection().form.dirty
+        || this.encryptionSection().form.dirty
+        || this.otherOptionsSection().form.dirty
+        || this.quotasSection()?.form.dirty,
+      );
+    });
     this.slideInData = slideInRef.getData();
   }
 

src/app/pages/datasets/components/dataset-quotas/dataset-quota-add-form/dataset-quota-add-form.component.ts

@@ -7,7 +7,7 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { combineLatest, map } from 'rxjs';
+import { combineLatest, map, of } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { DatasetQuotaType } from 'app/enums/dataset.enum';
 import { Role } from 'app/enums/role.enum';
@@ -138,6 +138,10 @@ export class DatasetQuotaAddFormComponent implements OnInit {
     private userService: UserService,
     public slideInRef: SlideInRef<{ quotaType: DatasetQuotaType; datasetId: string }, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+
     this.quotaType = slideInRef.getData().quotaType;
     this.datasetId = slideInRef.getData().datasetId;
   }

src/app/pages/datasets/components/dataset-quotas/dataset-quota-edit-form/dataset-quota-edit-form.component.ts

@@ -134,6 +134,10 @@ export class DatasetQuotaEditFormComponent implements OnInit {
     protected dialogService: DialogService,
     public slideInRef: SlideInRef<{ quotaType: DatasetQuotaType; datasetId: string; id: number }, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+
     this.datasetId = slideInRef.getData().datasetId;
     this.quotaType = slideInRef.getData().quotaType;
     this.id = slideInRef.getData().id;

src/app/pages/datasets/components/zvol-form/zvol-form.component.ts

@@ -230,6 +230,10 @@ export class ZvolFormComponent implements OnInit {
     protected snackbar: SnackbarService,
     public slideInRef: SlideInRef<{ isNew: boolean; parentId: string } | undefined, Dataset>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+
     this.slideInData = slideInRef.getData();
     this.form.controls.key.disable();
     this.form.controls.passphrase.disable();

src/app/pages/datasets/modules/snapshots/snapshot-add-form/snapshot-add-form.component.ts

@@ -104,6 +104,9 @@ export class SnapshotAddFormComponent implements OnInit {
     private datasetStore: DatasetTreeStore,
     public slideInRef: SlideInRef<string | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.datasetId = slideInRef.getData();
   }
 

src/app/pages/directory-service/components/active-directory/active-directory.component.ts

@@ -9,7 +9,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { forkJoin, Observable } from 'rxjs';
+import { forkJoin, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { DirectoryServiceState } from 'app/enums/directory-service-state.enum';
@@ -115,7 +115,11 @@ export class ActiveDirectoryComponent implements OnInit {
     private translate: TranslateService,
     private snackbarService: SnackbarService,
     public slideInRef: SlideInRef<ActiveDirectoryComponent | undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.loadFormValues();

src/app/pages/directory-service/components/idmap-form/idmap-form.component.ts

@@ -198,6 +198,9 @@ export class IdmapFormComponent implements OnInit {
     private snackbar: SnackbarService,
     public slideInRef: SlideInRef<Idmap | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.existingIdmap = slideInRef.getData();
   }
 

src/app/pages/directory-service/components/kerberos-keytabs/kerberos-keytabs-form/kerberos-keytabs-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 { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { KiB } from 'app/constants/bytes.constant';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
@@ -79,6 +79,9 @@ export class KerberosKeytabsFormComponent implements OnInit {
     public slideInRef: SlideInRef<KerberosKeytab | undefined, boolean>,
     private fileValidator: FileValidatorService,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingKerberosKeytab = slideInRef.getData();
   }
 

src/app/pages/directory-service/components/kerberos-realms-form/kerberos-realms-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 { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
 import { helptextKerberosRealms } from 'app/helptext/directory-service/kerberos-realms-form-list';
@@ -80,6 +80,9 @@ export class KerberosRealmsFormComponent implements OnInit {
     private translate: TranslateService,
     public slideInRef: SlideInRef<KerberosRealm | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingRealm = slideInRef.getData();
   }
 

src/app/pages/directory-service/components/kerberos-settings/kerberos-settings.component.ts

@@ -6,6 +6,7 @@ import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
 import { helptextKerberosSettings } from 'app/helptext/directory-service/kerberos-settings';
@@ -64,7 +65,11 @@ export class KerberosSettingsComponent implements OnInit {
     private fb: FormBuilder,
     private dialogService: DialogService,
     public slideInRef: SlideInRef<KerberosSettingsComponent | undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.isFormLoading = true;

src/app/pages/directory-service/components/ldap/ldap.component.ts

@@ -8,6 +8,7 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
@@ -113,7 +114,11 @@ export class LdapComponent implements OnInit {
     private translate: TranslateService,
     private snackbar: SnackbarService,
     public slideInRef: SlideInRef<LdapComponent | undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.loadFormValues();

src/app/pages/network/components/configuration/configuration.component.ts

@@ -229,7 +229,11 @@ export class NetworkConfigurationComponent implements OnInit {
     private systemGeneralService: SystemGeneralService,
     private store$: Store<AppState>,
     public slideInRef: SlideInRef<undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.isFormLoading = true;

src/app/pages/network/components/interface-form/interface-form.component.ts

@@ -186,6 +186,9 @@ export class InterfaceFormComponent implements OnInit {
     private store$: Store<AppState>,
     public slideInRef: SlideInRef<NetworkInterface | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.existingInterface = slideInRef.getData();
   }
 

src/app/pages/network/components/ipmi-card/ipmi-form/ipmi-form.component.ts

@@ -124,6 +124,9 @@ export class IpmiFormComponent implements OnInit {
     private dialogService: DialogService,
     public slideInRef: SlideInRef<number, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.ipmiId = this.slideInRef.getData();
   }
 

src/app/pages/reports-dashboard/components/exporters/reporting-exporters-form/reporting-exporters-form.component.ts

@@ -105,6 +105,9 @@ export class ReportingExportersFormComponent implements OnInit {
     private dialogService: DialogService,
     public slideInRef: SlideInRef<ReportingExporter | undefined, boolean>,
   ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
     this.editingExporter = this.slideInRef.getData();
   }
 

src/app/pages/services/components/service-ftp/service-ftp.component.ts

@@ -136,7 +136,11 @@ export class ServiceFtpComponent implements OnInit {
     private snackbar: SnackbarService,
     public iecFormatter: IxFormatterService,
     public slideInRef: SlideInRef<undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.loadConfig();

src/app/pages/services/components/service-nfs/service-nfs.component.ts

@@ -137,7 +137,11 @@ export class ServiceNfsComponent implements OnInit {
     private matDialog: MatDialog,
     private validatorsService: IxValidatorsService,
     public slideInRef: SlideInRef<undefined, boolean>,
-  ) {}
+  ) {
+    this.slideInRef.requireConfirmationWhen(() => {
+      return of(this.form.dirty);
+    });
+  }
 
   ngOnInit(): void {
     this.isFormLoading.set(true);