mgr/dashboard: Move features to advanced section

Fixes https://tracker.ceph.com/issues/65207

- Moves "features" section in rbd image create form to "Advanced" section.
- makes rbd configuration section to be expanded by default rather than
  being collapsed as it has only single section. This will improve user experience as it will not
require two clicks.
- updates e2e test

Signed-off-by: Afreen <afreen23.git@gmail.com>
(cherry picked from commit 921a5249fd1b1b2828d055bc92abf2fa428875ce)

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/pools/pools.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/pools/pools.po.ts
index 7cca96aa8f466dc0340b462231173171d7cd8bf5..af46355ff1c51032033c614bea9473d11924cb55 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/pools/pools.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/pools/pools.po.ts
@@ -44,7 +44,6 @@ export class PoolPageHelper extends PageHelper {
   edit_pool_configuration(name: string, bpsLimit: string) {
     this.navigateEdit(name);
 
-    cy.get('.collapsible').click();
     cy.get('cd-rbd-configuration-form')
       .get('input[name=rbd_qos_bps_limit]')
       .clear()
@@ -53,7 +52,6 @@ export class PoolPageHelper extends PageHelper {
 
     this.navigateEdit(name);
 
-    cy.get('.collapsible').click();
     cy.get('cd-rbd-configuration-form')
       .get('input[name=rbd_qos_bps_limit]')
       .should('have.value', bpsLimit);

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.ts
index 7b5fe992f283e68102bbfc98364f2103d856d49c..27408909b12e447e0223e40c398b1004da7aa67e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.ts
@@ -69,7 +69,7 @@ export class RbdConfigurationFormComponent implements OnInit {
 
     this.rbdConfigurationService
       .getWritableSections()
-      .forEach((section) => (this.sectionVisibility[section.class] = false));
+      .forEach((section) => (this.sectionVisibility[section.class] = true));
   }
 
   getDirtyValues(includeLocalValues = false, localFieldType?: RbdConfigurationSourceField) {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index 690eb9c1282cc4b5ba4699149300fd07dee7287c..af6cd3963651a40fc8eb8f11d0256a4b395a9559 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -219,29 +219,6 @@
           </div>
         </div>
 
-        <!-- Features -->
-        <div class="form-group row"
-             formGroupName="features">
-          <label i18n
-                 class="cd-col-form-label"
-                 for="features">Features</label>
-          <div class="cd-col-form-input">
-            <div class="custom-control custom-checkbox"
-                 *ngFor="let feature of featuresList">
-              <input type="checkbox"
-                     class="custom-control-input"
-                     id="{{ feature.key }}"
-                     name="{{ feature.key }}"
-                     formControlName="{{ feature.key }}">
-              <label class="custom-control-label"
-                     for="{{ feature.key }}">{{ feature.desc }}</label>
-              <cd-helper *ngIf="feature.helperHtml"
-                         html="{{ feature.helperHtml }}">
-              </cd-helper>
-            </div>
-          </div>
-        </div>
-
         <!-- Mirroring -->
         <div class="form-group row">
           <div class="cd-col-form-offset">
@@ -300,9 +277,31 @@
 
         <!-- Advanced -->
         <cd-form-advanced-fieldset>
+          <!-- Features -->
+          <div class="form-group row"
+               formGroupName="features">
+            <label i18n
+                   class="cd-col-form-label"
+                   for="features">Features</label>
+            <div class="cd-col-form-input">
+              <div class="custom-control custom-checkbox"
+                   *ngFor="let feature of featuresList">
+                <input type="checkbox"
+                       class="custom-control-input"
+                       id="{{ feature.key }}"
+                       name="{{ feature.key }}"
+                       formControlName="{{ feature.key }}">
+                <label class="custom-control-label"
+                       for="{{ feature.key }}">{{ feature.desc }}</label>
+                <cd-helper *ngIf="feature.helperHtml"
+                           html="{{ feature.helperHtml }}">
+                </cd-helper>
+              </div>
+            </div>
+          </div>
+
           <h4 class="cd-header"
               i18n>Striping</h4>
-
           <!-- Object Size -->
           <div class="form-group row">
             <label i18n