mgr/dashboard: fix clone async validators with different groups

Providing a way to dynamically update the async validator based on the
selector field so that when the selected value changes, the depended
field like the clone name gets validated again against the new value

Fixes: https://tracker.ceph.com/issues/66703
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 38bcce2346b3430e93d67a443a27ebdf9232fec9)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-snapshots-list/cephfs-subvolume-snapshots-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-snapshots-list/cephfs-subvolume-snapshots-list.component.ts
index c14903edc8cd0a6a0e17025be9f6f5ecf71c71dc..6f004e8e46995af8f28d6cbc44fd9a074a3e43bd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-snapshots-list/cephfs-subvolume-snapshots-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-snapshots-list/cephfs-subvolume-snapshots-list.component.ts
@@ -270,7 +270,8 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
               this.cephfsSubvolumeService,
               null,
               null,
-              this.fsName
+              this.fsName,
+              this.activeGroupName
             )
           ],
           required: true,
@@ -284,12 +285,23 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
           name: 'groupName',
           value: this.activeGroupName,
           label: $localize`Group name`,
+          valueChangeListener: true,
+          dependsOn: 'cloneName',
           typeConfig: {
             options: allGroups
           }
         }
       ],
       submitButtonText: $localize`Create Clone`,
+      updateAsyncValidators: (value: any) =>
+        CdValidators.unique(
+          this.cephfsSubvolumeService.exists,
+          this.cephfsSubvolumeService,
+          null,
+          null,
+          this.fsName,
+          value
+        ),
       onSubmit: (value: any) => {
         this.cephfsSubvolumeService
           .createSnapshotClone(

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
index 1b4af6cd69fc1dae0bf6e681a963d1035ff65b5c..aafbd604232a95ee91190ab9b81fd8b6b6536aa3 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
@@ -23,6 +23,8 @@ export class FormModalComponent implements OnInit {
   submitButtonText: string;
   onSubmit: Function;
 
+  updateAsyncValidators?: Function;
+
   // Internal
   formGroup: CdFormGroup;
 
@@ -57,13 +59,22 @@ export class FormModalComponent implements OnInit {
     if (field.asyncValidators) {
       asyncValidators = asyncValidators.concat(field.asyncValidators);
     }
-    return new UntypedFormControl(
+
+    const control = new UntypedFormControl(
       _.defaultTo(
         field.type === 'binary' ? this.dimlessBinaryPipe.transform(field.value) : field.value,
         null
       ),
       { validators, asyncValidators }
     );
+
+    if (field.valueChangeListener) {
+      control.valueChanges.subscribe((value) => {
+        const validatorToUpdate = this.updateAsyncValidators(value);
+        this.updateValidation(field.dependsOn, validatorToUpdate);
+      });
+    }
+    return control;
   }
 
   getError(field: CdFormModalFieldConfig): string {
@@ -114,4 +125,10 @@ export class FormModalComponent implements OnInit {
       this.onSubmit(values);
     }
   }
+
+  updateValidation(name?: string, validator?: AsyncValidatorFn[]) {
+    const field = this.formGroup.get(name);
+    field.setAsyncValidators(validator);
+    field.updateValueAndValidity();
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts
index a899e6daa6902fa1cec6811b1542461e27c07762..58dc6619590e23fb514dcc88e45ff9c8019e0a08 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts
@@ -13,6 +13,11 @@ export class CdFormModalFieldConfig {
   validators: ValidatorFn[];
   asyncValidators?: AsyncValidatorFn[];
 
+  // Used when you want to dynamically update the
+  // async validators based on the field value
+  valueChangeListener?: boolean;
+  dependsOn?: string;
+
   // --- Specific field properties ---
   typeConfig?: {
     [prop: string]: any;