From 3a156cff58dd9fcb98917be47ff725cea6aeef37 Mon Sep 17 00:00:00 2001
From: Afreen <afreen23.git@gmail.com>
Date: Thu, 4 Apr 2024 13:11:11 +0530
Subject: [PATCH] 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)
---
 .../frontend/cypress/e2e/pools/pools.po.ts    |  2 -
 .../rbd-configuration-form.component.ts       |  2 +-
 .../block/rbd-form/rbd-form.component.html    | 47 +++++++++----------
 3 files changed, 24 insertions(+), 27 deletions(-)

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 7cca96aa8f46..af46355ff1c5 100644
--- 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 7b5fe992f283..27408909b12e 100644
--- 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 690eb9c1282c..af6cd3963651 100644
--- 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
-- 
2.47.3