From 25552117b433dbe39bf245aeda99761def5749eb Mon Sep 17 00:00:00 2001
From: Afreen <afreen23.git@gmail.com>
Date: Wed, 27 Mar 2024 15:05:58 +0530
Subject: [PATCH] mgr/dashboard:Use advanced fieldset for rbd image

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

- using cd-advanced-fieldset component for advanced section
- this will align advanced sections of forms in dashboard
- changed heading of sections of rbd-configuration to h5 to better represent it
  as a sub section.
- added unit tests for rbd image config

Signed-off-by: Afreen <afreen23.git@gmail.com>
---
 .../rbd-configuration-form.component.html     |   4 +-
 .../block/rbd-form/rbd-form.component.html    | 134 ++++++++----------
 .../block/rbd-form/rbd-form.component.spec.ts |  20 ++-
 3 files changed, 77 insertions(+), 81 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
index 62707db349961..de43588713d27 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
@@ -4,13 +4,13 @@
 
   <div *ngFor="let section of rbdConfigurationService.sections"
        class="col-12">
-    <h4 class="cd-header">
+    <h5 class="cd-header">
       <span (click)="toggleSectionVisibility(section.class)"
             class="collapsible">
         {{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
                                  aria-hidden="true"></i>
       </span>
-    </h4>
+    </h5>
     <div class="{{ section.class }}"
          [hidden]="!sectionVisibility[section.class]">
       <div class="form-group row"
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 df0d0b8da3d0d..690eb9c1282cc 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
@@ -299,92 +299,76 @@
         </div>
 
         <!-- Advanced -->
-        <div class="row">
-          <div class="col-sm-12">
-            <a class="float-end margin-right-md"
-               (click)="advancedEnabled = true; false"
-               *ngIf="!advancedEnabled"
-               href=""
-               i18n>Advanced...</a>
-          </div>
-        </div>
-
-        <div [hidden]="!advancedEnabled">
+        <cd-form-advanced-fieldset>
+          <h4 class="cd-header"
+              i18n>Striping</h4>
 
-          <legend class="cd-header"
-                  i18n>Advanced</legend>
-
-          <div class="col-md-12">
-            <h4 class="cd-header"
-                i18n>Striping</h4>
-
-            <!-- Object Size -->
-            <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="size">Object size<cd-helper>Objects in the Ceph Storage Cluster have a maximum configurable size (e.g., 2MB, 4MB, etc.). The object size should be large enough to accommodate many stripe units, and should be a multiple of the stripe unit.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <select id="obj_size"
-                        name="obj_size"
-                        class="form-select"
-                        formControlName="obj_size">
-                  <option *ngFor="let objectSize of objectSizes"
-                          [value]="objectSize">{{ objectSize }}</option>
-                </select>
-              </div>
+          <!-- Object Size -->
+          <div class="form-group row">
+            <label i18n
+                   class="cd-col-form-label"
+                   for="size">Object size<cd-helper>Objects in the Ceph Storage Cluster have a maximum configurable size (e.g., 2MB, 4MB, etc.). The object size should be large enough to accommodate many stripe units, and should be a multiple of the stripe unit.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <select id="obj_size"
+                      name="obj_size"
+                      class="form-select"
+                      formControlName="obj_size">
+                <option *ngFor="let objectSize of objectSizes"
+                        [value]="objectSize">{{ objectSize }}</option>
+              </select>
             </div>
+          </div>
 
-            <!-- stripingUnit -->
-            <div class="form-group row">
-              <label class="cd-col-form-label"
-                     [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
-                     for="stripingUnit"
-                     i18n>Stripe unit<cd-helper>Stripes have a configurable unit size (e.g., 64kb). The Ceph Client divides the data it will write to objects into equally sized stripe units, except for the last stripe unit. A stripe width, should be a fraction of the Object Size so that an object may contain many stripe units.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <select id="stripingUnit"
-                        name="stripingUnit"
-                        class="form-select"
-                        formControlName="stripingUnit">
-                  <option i18n
-                          [ngValue]="null">-- Select stripe unit --</option>
-                  <option *ngFor="let objectSize of objectSizes"
-                          [value]="objectSize">{{ objectSize }}</option>
-                </select>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
-                      i18n>This field is required because stripe count is defined!</span>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
-                      i18n>Stripe unit is greater than object size.</span>
-              </div>
+          <!-- stripingUnit -->
+          <div class="form-group row">
+            <label class="cd-col-form-label"
+                   [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
+                   for="stripingUnit"
+                   i18n>Stripe unit<cd-helper>Stripes have a configurable unit size (e.g., 64kb). The Ceph Client divides the data it will write to objects into equally sized stripe units, except for the last stripe unit. A stripe width, should be a fraction of the Object Size so that an object may contain many stripe units.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <select id="stripingUnit"
+                      name="stripingUnit"
+                      class="form-select"
+                      formControlName="stripingUnit">
+                <option i18n
+                        [ngValue]="null">-- Select stripe unit --</option>
+                <option *ngFor="let objectSize of objectSizes"
+                        [value]="objectSize">{{ objectSize }}</option>
+              </select>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
+                    i18n>This field is required because stripe count is defined!</span>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
+                    i18n>Stripe unit is greater than object size.</span>
             </div>
+          </div>
 
-            <!-- Stripe Count -->
-            <div class="form-group row">
-              <label class="cd-col-form-label"
-                     [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
-                     for="stripingCount"
-                     i18n>Stripe count<cd-helper>The Ceph Client writes a sequence of stripe units over a series of objects determined by the stripe count. The series of objects is called an object set. After the Ceph Client writes to the last object in the object set, it returns to the first object in the object set.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <input id="stripingCount"
-                       name="stripingCount"
-                       formControlName="stripingCount"
-                       class="form-control"
-                       type="number">
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
-                      i18n>This field is required because stripe unit is defined!</span>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
-                      i18n>Stripe count must be greater than 0.</span>
-              </div>
+          <!-- Stripe Count -->
+          <div class="form-group row">
+            <label class="cd-col-form-label"
+                   [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
+                   for="stripingCount"
+                   i18n>Stripe count<cd-helper>The Ceph Client writes a sequence of stripe units over a series of objects determined by the stripe count. The series of objects is called an object set. After the Ceph Client writes to the last object in the object set, it returns to the first object in the object set.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <input id="stripingCount"
+                     name="stripingCount"
+                     formControlName="stripingCount"
+                     class="form-control"
+                     type="number">
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
+                    i18n>This field is required because stripe unit is defined!</span>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
+                    i18n>Stripe count must be greater than 0.</span>
             </div>
           </div>
 
           <cd-rbd-configuration-form [form]="rbdForm"
                                      [initializeData]="initializeConfigData"
                                      (changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
-        </div>
+        </cd-form-advanced-fieldset>
 
       </div>
       <div class="card-footer">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
index 33b512e4d9ee9..7605348d406ba 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
@@ -293,12 +293,24 @@ describe('RbdFormComponent', () => {
   });
 
   describe('test image configuration component', () => {
-    it('is visible', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+    it('is hidden by default under Advanced', () => {
+      fixture.detectChanges();
+      expect(
+        queryNativeElement('cd-rbd-configuration-form')
+          .closest('.accordion-collapse')
+          .classList.contains('show')
+      ).toBeFalsy();
+    });
+
+    it('is visible when Advanced is not collapsed', () => {
+      queryNativeElement('#advanced-fieldset').click();
       fixture.detectChanges();
       expect(
-        fixture.debugElement.query(By.css('cd-rbd-configuration-form')).nativeElement.parentElement
-          .hidden
-      ).toBe(true);
+        queryNativeElement('cd-rbd-configuration-form').closest('.accordion-collapse').classList
+      ).toContain('show');
     });
   });
 
-- 
2.39.5