Merge pull request ceph#58478 from rhcs-dashboard/carbon-forms-fs

mgr/dashboard: carbonize fs forms

Reviewed-by: afreen23 <NOT@FOUND>
Reviewed-by: ivoalmeida <NOT@FOUND>
Reviewed-by: sayaleeraut <NOT@FOUND>

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts

@@ -107,6 +107,7 @@ export class ServicesPageHelper extends PageHelper {
             : cy.get('#count').clear().type(String(count));
           break;
       }
+      cy.wait(1000);
       if (serviceType === 'snmp-gateway') {
         cy.get('cd-submit-button').dblclick();
       } else {

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/forms-helper.feature.po.ts

@@ -6,9 +6,7 @@ import { And, Then } from 'cypress-cucumber-preprocessor/steps';
  * @param value Value that should be filled in the field.
  */
 And('enter {string} {string}', (field: string, value: string) => {
-  cy.get('.cd-col-form').within(() => {
-    cy.get(`input[id=${field}]`).clear().type(value);
-  });
+  cy.get(`input[id=${field}]`).clear().type(value);
 });
 
 /**
@@ -22,6 +20,17 @@ And('enter {string} {string} in the modal', (field: string, value: string) => {
   });
 });
 
+/**
+ * Fills in the given field using the value provided in carbon modal
+ * @param field ID of the field that needs to be filled out.
+ * @param value Value that should be filled in the field.
+ */
+And('enter {string} {string} in the carbon modal', (field: string, value: string) => {
+  cy.get('cds-modal').within(() => {
+    cy.get(`input[id=${field}]`).clear().type(value);
+  });
+});
+
 And('select options {string}', (labels: string) => {
   if (labels) {
     cy.get('a[data-testid=select-menu-edit]').click();

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

@@ -23,7 +23,7 @@ Feature: CephFS Snapshot Management
         When I expand the row "test_cephfs"
         And I go to the "Subvolumes" tab
         And I click on "Create" button from the expanded row
-        And enter "subvolumeName" "test_subvolume" in the modal
+        And enter "subvolumeName" "test_subvolume" in the carbon modal
         And I click on "Create Subvolume" button
         Then I should see a row with "test_subvolume" in the expanded row
 
@@ -38,7 +38,7 @@ Feature: CephFS Snapshot Management
         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 enter "snapshotName" "test_snapshot" in the carbon modal
         And I click on "Create Snapshot" button
         Then I should see a row with "test_snapshot" in the expanded row
 
@@ -48,7 +48,7 @@ Feature: CephFS Snapshot Management
         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 enter "cloneName" "test_clone" in the carbon modal
         And I click on "Create Clone" button
         Then I wait for "5" seconds
         And I go to the "Subvolumes" tab

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

@@ -17,7 +17,7 @@ Feature: CephFS Subvolume Group management
         When I expand the row "test_cephfs"
         And I go to the "Subvolume groups" tab
         And I click on "Create" button from the expanded row
-        And enter "subvolumegroupName" "test_subvolume_group" in the modal
+        And enter "subvolumegroupName" "test_subvolume_group" in the carbon modal
         And I click on "Create Subvolume group" button
         Then I should see a row with "test_subvolume_group" in the expanded row
 
@@ -27,7 +27,7 @@ Feature: CephFS Subvolume Group management
         And I go to the "Subvolume groups" tab
         When I select a row "test_subvolume_group" in the expanded row
         And I click on "Edit" button from the table actions in the expanded row
-        And enter "size" "1" in the modal
+        And enter "size" "1" in the carbon modal
         And I click on "Edit Subvolume group" button
         Then I should see row "test_subvolume_group" of the expanded row to have a usage bar
 

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

@@ -17,7 +17,7 @@ Feature: CephFS Subvolume management
         When I expand the row "test_cephfs"
         And I go to the "Subvolumes" tab
         And I click on "Create" button from the expanded row
-        And enter "subvolumeName" "test_subvolume" in the modal
+        And enter "subvolumeName" "test_subvolume" in the carbon modal
         And I click on "Create Subvolume" button
         Then I should see a row with "test_subvolume" in the expanded row
 
@@ -27,7 +27,7 @@ Feature: CephFS Subvolume management
         And I go to the "Subvolumes" tab
         When I select a row "test_subvolume" in the expanded row
         And I click on "Edit" button from the table actions in the expanded row
-        And enter "size" "1" in the modal
+        And enter "size" "1" in the carbon modal
         And I click on "Edit Subvolume" button
         Then I should see row "test_subvolume" of the expanded row to have a usage bar
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/nfs/nfs-export.po.ts

@@ -17,7 +17,7 @@ export class NFSPageHelper extends PageHelper {
       this.selectOption('fs_name', 'myfs');
       cy.get('#security_label').click({ force: true });
     } else {
-      cy.get('input[data-testid=rgw_path]').type(rgwPath);
+      cy.get('input[id=path]').type(rgwPath);
     }
 
     cy.get('input[name=pseudo]').type(pseudo);
@@ -28,7 +28,7 @@ export class NFSPageHelper extends PageHelper {
     cy.get('input[name=addresses]').type(client['addresses']);
 
     // Check if we can remove clients and add it again
-    cy.get('span[name=remove_client]').click({ force: true });
+    cy.get('[data-testid=remove_client]').click({ force: true });
     cy.get('button[name=add_client]').click({ force: true });
     cy.get('input[name=addresses]').type(client['addresses']);
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/page-helper.po.ts

@@ -313,6 +313,7 @@ export abstract class PageHelper {
       .parent('[cdstablerow]')
       .find('[cdstabledata] [data-testid="table-action-btn"]')
       .click({ force: true });
+    cy.wait(waitTime);
     cy.get(`button.${action}`).click({ force: true });
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html

@@ -24,7 +24,7 @@
         <cds-text-label for="siteName"
                         i18n
                         cdRequiredField="Site Name"
-                        [invalid]="!importBootstrapForm.controls['siteName'].valid && (importBootstrapForm.controls['siteName'].dirty || importBootstrapForm.controls['siteName'].touched)"
+                        [invalid]="!importBootstrapForm.controls['siteName'].valid && importBootstrapForm.controls['siteName'].dirty"
                         [invalidText]="siteNameError"
                         i18n-invalidText>Site Name
           <input cdsText
@@ -33,7 +33,7 @@
                  id="siteName"
                  name="siteName"
                  formControlName="siteName"
-                 [invalid]="importBootstrapForm.showError('siteName', formDir, 'required')"
+                 [invalid]="!importBootstrapForm.controls['siteName'].valid && importBootstrapForm.controls['siteName'].dirty"
                  autofocus>
         </cds-text-label>
         <ng-template #siteNameError>
@@ -76,7 +76,7 @@
 
       <div class="form-item">
         <cds-textarea-label for="token"
-                            [invalid]="importBootstrapForm.controls['token'].invalid && (importBootstrapForm.controls['token'].dirty || importBootstrapForm.controls['token'].touched)"
+                            [invalid]="importBootstrapForm.controls['token'].invalid && (importBootstrapForm.controls['token'].dirty)"
                             [invalidText]="tokenError"
                             cdRequiredField="Token"
                             i18n>Token
@@ -87,7 +87,7 @@
                     formControlName="token"
                     cols="200"
                     rows="5"
-                    [invalid]="importBootstrapForm.controls['token'].invalid && (importBootstrapForm.controls['token'].dirty || importBootstrapForm.controls['token'].touched)">
+                    [invalid]="importBootstrapForm.controls['token'].invalid && (importBootstrapForm.controls['token'].dirty)">
           </textarea>
         </cds-textarea-label>
         <ng-template #tokenError>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html

@@ -24,7 +24,7 @@
                     formControlName="mirrorMode"
                     name="mirrorMode"
                     id="mirrorMode"
-                    [invalid]="editModeForm.controls['mirrorMode'].invalid && (editModeForm.controls['mirrorMode'].dirty || editModeForm.controls['mirrorMode'].touched)"
+                    [invalid]="editModeForm.controls['mirrorMode'].invalid && (editModeForm.controls['mirrorMode'].dirty)"
                     [invalidText]="mirrorModeError"
                     cdRequiredField="Mode"
                     i18n>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html

@@ -23,7 +23,7 @@
 
       <div class="form-item">
         <cds-text-label for="clusterName"
-                        [invalid]="editPeerForm.controls['clusterName'].invalid && (editPeerForm.controls['clusterName'].dirty || editPeerForm.controls['clusterName'].touched)"
+                        [invalid]="editPeerForm.controls['clusterName'].invalid && (editPeerForm.controls['clusterName'].dirty)"
                         [invalidText]="clusterNameError"
                         cdRequiredField="Cluster Name"
                         i18n>Cluster Name
@@ -34,7 +34,7 @@
                  id="clusterName"
                  name="clusterName"
                  formControlName="clusterName"
-                 [invalid]="editPeerForm.controls['clusterName'].invalid && (editPeerForm.controls['clusterName'].dirty || editPeerForm.controls['clusterName'].touched)"
+                 [invalid]="editPeerForm.controls['clusterName'].invalid && (editPeerForm.controls['clusterName'].dirty)"
                  autofocus>
         </cds-text-label>
         <ng-template #clusterNameError>
@@ -49,7 +49,7 @@
 
       <div class="form-item">
         <cds-text-label for="clientID"
-                        [invalid]="editPeerForm.controls['clientID'].invalid && (editPeerForm.controls['clientID'].dirty || editPeerForm.controls['clientID'].touched)"
+                        [invalid]="editPeerForm.controls['clientID'].invalid && (editPeerForm.controls['clientID'].dirty)"
                         [invalidText]="clientIDError"
                         cdRequiredField="CephX ID"
                         i18n>CephX ID
@@ -60,7 +60,7 @@
                  id="clientID"
                  name="clientID"
                  formControlName="clientID"
-                 [invalid]="editPeerForm.controls['clientID'].invalid && (editPeerForm.controls['clientID'].dirty || editPeerForm.controls['clientID'].touched)">
+                 [invalid]="editPeerForm.controls['clientID'].invalid && (editPeerForm.controls['clientID'].dirty)">
         </cds-text-label>
         <ng-template #clientIDError>
           <span class="invalid-feedback"
@@ -74,7 +74,7 @@
 
       <div class="form-item">
         <cds-text-label for="monAddr"
-                        [invalid]="editPeerForm.controls['monAddr'].invalid && (editPeerForm.controls['monAddr'].dirty || editPeerForm.controls['monAddr'].touched)"
+                        [invalid]="editPeerForm.controls['monAddr'].invalid && (editPeerForm.controls['monAddr'].dirty)"
                         [invalidText]="monAddrError"
                         i18n>Monitor Addresses
           <input cdsText
@@ -84,7 +84,7 @@
                  id="monAddr"
                  name="monAddr"
                  formControlName="monAddr"
-                 [invalid]="editPeerForm.controls['monAddr'].invalid && (editPeerForm.controls['monAddr'].dirty || editPeerForm.controls['monAddr'].touched)">
+                 [invalid]="editPeerForm.controls['monAddr'].invalid && (editPeerForm.controls['monAddr'].dirty)">
         </cds-text-label>
         <ng-template #monAddrError>
           <span class="invalid-feedback"
@@ -95,7 +95,7 @@
 
       <div class="form-item">
         <cds-text-label for="key"
-                        [invalid]="editPeerForm.controls['key'].invalid && (editPeerForm.controls['key'].dirty || editPeerForm.controls['key'].touched)"
+                        [invalid]="editPeerForm.controls['key'].invalid && (editPeerForm.controls['key'].dirty)"
                         [invalidText]="keyError"
                         i18n>CephX Key
           <input cdsText
@@ -105,7 +105,7 @@
                  id="key"
                  name="key"
                  formControlName="key"
-                 [invalid]="editPeerForm.controls['key'].invalid && (editPeerForm.controls['key'].dirty || editPeerForm.controls['key'].touched)">
+                 [invalid]="editPeerForm.controls['key'].invalid && (editPeerForm.controls['key'].dirty)">
         </cds-text-label>
         <ng-template #keyError>
           <span class="invalid-feedback"

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html

@@ -15,7 +15,7 @@ <h5 class="cd-header">
       <div class="form-item"
            *ngFor="let option of section.options">
         <cds-text-label [helperText]="option.description"
-                        [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty || form.get('configuration').controls[option.name].touched)"
+                        [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty)"
                         [invalidText]="formError">
           {{ option.displayName }}
 
@@ -28,7 +28,7 @@ <h5 class="cd-header">
                        type="text"
                        cdsText
                        [ngDataReady]="ngDataReady"
-                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty || form.get('configuration').controls[option.name].touched)"
+                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty)"
                        cdMilliseconds>
               </ng-container>
               <ng-container *ngSwitchCase="configurationType.bps">
@@ -39,7 +39,7 @@ <h5 class="cd-header">
                        cdsText
                        defaultUnit="b"
                        [ngDataReady]="ngDataReady"
-                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty || form.get('configuration').controls[option.name].touched)"
+                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty)"
                        cdDimlessBinaryPerSecond>
               </ng-container>
               <ng-container *ngSwitchCase="configurationType.iops">
@@ -49,7 +49,7 @@ <h5 class="cd-header">
                        type="text"
                        cdsText
                        [ngDataReady]="ngDataReady"
-                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty || form.get('configuration').controls[option.name].touched)"
+                       [invalid]="form.get('configuration').controls[option.name].invalid && (form.get('configuration').controls[option.name].dirty)"
                        cdIops>
               </ng-container>
             </ng-container>