Merge pull request ceph#58286 from rhcs-dashboard/clone-validation

mgr/dashboard: fix clone async validators with different groups

Reviewed-by: Ankush Behl <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/global.feature.po.ts

@@ -38,3 +38,7 @@ And('I go to the {string} tab', (names: string) => {
     cy.contains('.nav.nav-tabs a', name).click();
   }
 });
+
+And('I wait for {string} seconds', (seconds: number) => {
+  cy.wait(seconds * 1000);
+});

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/snapshots.e2e-spec.feature

@@ -1,6 +1,6 @@
 Feature: CephFS Snapshot Management
 
-    Goal: To test out the CephFS snapshot management features
+    Goal: To test out the CephFS snapshot and clone management features
 
     Background: Login
         Given I am logged in
@@ -33,6 +33,48 @@ Feature: CephFS Snapshot Management
         And I go to the "Snapshots" tab
         Then I should see a table in the expanded row
 
+    Scenario: Create a CephFS Subvolume Snapshot
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Snapshots" tab
+        And I click on "Create" button from the expanded row
+        And enter "snapshotName" "test_snapshot" in the modal
+        And I click on "Create Snapshot" button
+        Then I should see a row with "test_snapshot" in the expanded row
+
+    Scenario: Create a CephFS Subvolume Snapshot Clone
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Snapshots" tab
+        And I select a row "test_snapshot" in the expanded row
+        And I click on "Clone" button from the table actions in the expanded row
+        And enter "cloneName" "test_clone" in the modal
+        And I click on "Create Clone" button
+        Then I wait for "5" seconds
+        And I go to the "Subvolumes" tab
+        Then I should see a row with "test_clone" in the expanded row
+
+    Scenario: Remove a CephFS Subvolume Snapshot Clone
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Subvolumes" tab
+        And I select a row "test_clone" in the expanded row
+        And I click on "Remove" button from the table actions in the expanded row
+        And I check the tick box in modal
+        And I click on "Remove Subvolume" button
+        Then I wait for "5" seconds
+        And I should not see a row with "test_clone" in the expanded row
+
+    Scenario: Remove a CephFS Subvolume Snapshot
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Snapshots" tab
+        And I select a row "test_snapshot" in the expanded row
+        And I click on "Remove" button from the table actions in the expanded row
+        And I check the tick box in modal
+        And I click on "Remove Snapshot" button
+        Then I should not see a row with "test_snapshot" in the expanded row
+
     Scenario: Remove a CephFS Subvolume
         Given I am on the "cephfs" page
         When I expand the row "test_cephfs"

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-snapshots-list/cephfs-subvolume-snapshots-list.component.ts

@@ -113,7 +113,7 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
         click: () => this.cloneModal()
       },
       {
-        name: this.actionLabels.DELETE,
+        name: this.actionLabels.REMOVE,
         permission: 'delete',
         icon: Icons.destroy,
         disable: () => !this.selection.hasSingleSelection,
@@ -224,7 +224,7 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
     const subVolumeGroupName = this.activeGroupName;
     const fsName = this.fsName;
     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
-      actionDescription: 'Delete',
+      actionDescription: this.actionLabels.REMOVE,
       itemNames: [snapshotName],
       itemDescription: 'Snapshot',
       submitAction: () =>
@@ -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;