mgr/dashboard: Add advanced fieldset component

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

- adds a new shared component for displaying advanced fields in /shared
- utilizes that component in bucket form
- placement targets are under advanced fieldset
- minor help text changes in object locking help text
- updated e2e tests

Signed-off-by: Afreen <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts

@@ -41,7 +41,7 @@ describe('nfsExport page', () => {
 
     it('should create a nfs-export with RGW backend', () => {
       buckets.navigateTo('create');
-      buckets.create(bucketName, 'dashboard', 'default-placement');
+      buckets.create(bucketName, 'dashboard');
 
       nfsExport.navigateTo();
       nfsExport.existTableCell(rgwPseudo, false);

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.e2e-spec.ts

@@ -18,7 +18,7 @@ describe('RGW buckets page', () => {
   describe('create, edit & delete bucket tests', () => {
     it('should create bucket', () => {
       buckets.navigateTo('create');
-      buckets.create(bucket_name, BucketsPageHelper.USERS[0], 'default-placement');
+      buckets.create(bucket_name, BucketsPageHelper.USERS[0]);
       buckets.getFirstTableCell(bucket_name).should('exist');
     });
 
@@ -38,7 +38,7 @@ describe('RGW buckets page', () => {
 
     it('should create bucket with object locking enabled', () => {
       buckets.navigateTo('create');
-      buckets.create(bucket_name, BucketsPageHelper.USERS[0], 'default-placement', true);
+      buckets.create(bucket_name, BucketsPageHelper.USERS[0], true);
       buckets.getFirstTableCell(bucket_name).should('exist');
     });
 
@@ -57,7 +57,7 @@ describe('RGW buckets page', () => {
 
     it('should test invalid input in edit owner field', () => {
       buckets.navigateTo('create');
-      buckets.create(bucket_name, BucketsPageHelper.USERS[0], 'default-placement');
+      buckets.create(bucket_name, BucketsPageHelper.USERS[0]);
       buckets.testInvalidEdit(bucket_name);
       buckets.navigateTo();
       buckets.delete(bucket_name);

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts

@@ -22,26 +22,19 @@ export class BucketsPageHelper extends PageHelper {
     return this.selectOption('owner', owner);
   }
 
-  private selectPlacementTarget(placementTarget: string) {
-    return this.selectOption('placement-target', placementTarget);
-  }
-
   private selectLockMode(lockMode: string) {
     return this.selectOption('lock_mode', lockMode);
   }
 
   @PageHelper.restrictTo(pages.create.url)
-  create(name: string, owner: string, placementTarget: string, isLocking = false) {
+  create(name: string, owner: string, isLocking = false) {
     // Enter in bucket name
     cy.get('#bid').type(name);
 
     // Select bucket owner
     this.selectOwner(owner);
     cy.get('#owner').should('have.class', 'ng-valid');
 
-    // Select bucket placement target:
-    this.selectPlacementTarget(placementTarget);
-
     if (isLocking) {
       cy.get('#lock_enabled').click({ force: true });
       // Select lock mode:
@@ -71,6 +64,7 @@ export class BucketsPageHelper extends PageHelper {
 
     // Placement target is not allowed to be edited and should be hidden
     cy.get('input[name=placement-target]').should('not.exist');
+
     this.selectOwner(new_owner);
 
     // If object locking is enabled versioning shouldn't be visible

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html

@@ -94,34 +94,6 @@
           </div>
         </div>
 
-        <!-- Placement target -->
-        <div class="form-group row"
-             *ngIf="!editing">
-          <label class="cd-col-form-label"
-                 for="placement-target"
-                 i18n>Placement target</label>
-          <div class="cd-col-form-input">
-            <select id="placement-target"
-                    name="placement-target"
-                    formControlName="placement-target"
-                    class="form-select">
-              <option i18n
-                      *ngIf="placementTargets === null"
-                      [ngValue]="null">Loading...</option>
-              <option i18n
-                      *ngIf="placementTargets !== null"
-                      [ngValue]="null">-- Select a placement target --</option>
-              <option *ngFor="let placementTarget of placementTargets"
-                      [value]="placementTarget.name">{{ placementTarget.description }}</option>
-            </select>
-            <cd-help-text>
-              <span i18n>
-                When creating a bucket, a placement target can be provided as part of the LocationConstraint to override the default placement targets from the user and zonegroup.
-              </span>
-            </cd-help-text>
-          </div>
-        </div>
-
         <!-- Versioning -->
         <fieldset *ngIf="editing">
           <legend class="cd-header"
@@ -547,6 +519,36 @@
             </div>
           </div>
         </fieldset>
+
+        <!--Advanced-->
+        <cd-form-advanced-fieldset *ngIf="!editing">
+          <!-- Placement target -->
+          <div class="form-group row">
+            <label class="cd-col-form-label"
+                   for="placement-target"
+                   i18n>Placement target</label>
+            <div class="cd-col-form-input">
+              <select id="placement-target"
+                      name="placement-target"
+                      formControlName="placement-target"
+                      class="form-select">
+                <option i18n
+                        *ngIf="placementTargets === null"
+                        [ngValue]="null">Loading...</option>
+                <option i18n
+                        *ngIf="placementTargets !== null"
+                        [ngValue]="null">-- Select a placement target --</option>
+                <option *ngFor="let placementTarget of placementTargets"
+                        [value]="placementTarget.name">{{ placementTarget.description }}</option>
+              </select>
+              <cd-help-text>
+                <span i18n>
+                  When creating a bucket, a placement target can be provided as part of the LocationConstraint to override the default placement targets from the user and zonegroup.
+                </span>
+              </cd-help-text>
+            </div>
+          </div>
+        </cd-form-advanced-fieldset>
       </div>
 
       <div class="card-footer">

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -55,6 +55,7 @@ import { CodeBlockComponent } from './code-block/code-block.component';
 import { VerticalNavigationComponent } from './vertical-navigation/vertical-navigation.component';
 import { CardGroupComponent } from './card-group/card-group.component';
 import { HelpTextComponent } from './help-text/help-text.component';
+import { FormAdvancedFieldsetComponent } from './form-advanced-fieldset/form-advanced-fieldset.component';
 
 @NgModule({
   imports: [
@@ -113,7 +114,8 @@ import { HelpTextComponent } from './help-text/help-text.component';
     CodeBlockComponent,
     VerticalNavigationComponent,
     CardGroupComponent,
-    HelpTextComponent
+    HelpTextComponent,
+    FormAdvancedFieldsetComponent
   ],
   providers: [],
   exports: [
@@ -149,7 +151,8 @@ import { HelpTextComponent } from './help-text/help-text.component';
     CodeBlockComponent,
     VerticalNavigationComponent,
     CardGroupComponent,
-    HelpTextComponent
+    HelpTextComponent,
+    FormAdvancedFieldsetComponent
   ]
 })
 export class ComponentsModule {}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html

@@ -0,0 +1,22 @@
+<fieldset>
+  <legend class="cd-header">
+    <div class="accordion accordion-flush">
+      <button class="accordion-button cd-form-advanced-fieldset-buttton p-0"
+              type="button"
+              id="advanced-fieldset"
+              aria-label="toggle advanced mode"
+              [ngClass]="{collapsed: !showAdvanced}"
+              (click)="showAdvanced = !showAdvanced"
+              i18n>Advanced
+      </button>
+    </div>
+  </legend>
+  <div class="accordion-collapse collapse"
+       [ngClass]="{show: showAdvanced}">
+    <div class="accordion-body">
+      <div class="card-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+</fieldset>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss

@@ -0,0 +1,22 @@
+/*
+  Overrides the active and focus states of bootstrap accordion,
+  in order to align the accordion css with rest of the form.
+
+  Summary of overrides:
+  - font-size was 1 rem
+  - color was blue when higlighted
+  - border,outlines and box-shadow were set
+  - accordion down button in active form was a blue svg icon
+
+ */
+.cd-form-advanced-fieldset-buttton {
+  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
+  background-color: inherit;
+  border: hidden;
+  border-color: inherit;
+  box-shadow: none;
+  color: inherit;
+  font-size: inherit;
+  outline: 0;
+  text-decoration: none;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormAdvancedFieldsetComponent } from './form-advanced-fieldset.component';
+
+describe('FormAdvancedFieldsetComponent', () => {
+  let component: FormAdvancedFieldsetComponent;
+  let fixture: ComponentFixture<FormAdvancedFieldsetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FormAdvancedFieldsetComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FormAdvancedFieldsetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cd-form-advanced-fieldset',
+  templateUrl: './form-advanced-fieldset.component.html',
+  styleUrls: ['./form-advanced-fieldset.component.scss']
+})
+export class FormAdvancedFieldsetComponent {
+  showAdvanced: boolean = false;
+}