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 7cca96aa8f4..af46355ff1c 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 7b5fe992f28..27408909b12 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 690eb9c1282..af6cd396365 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.39.5