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 <[email protected]>

Author: nizamial09

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(

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();
+  }
 }

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;