From: Afreen Date: Fri, 1 Mar 2024 07:26:25 +0000 (+0530) Subject: mgr/dashboard: Add advanced fieldset component X-Git-Tag: v18.2.4~64^2 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=2349fff4f5bf00bb207b30230ec4272fee8408c0;p=ceph.git 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 (cherry picked from commit d0979e9c5223231a0fd3ef6408323d2fd5cd2ac5) Conflicts: src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts --- diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts index 6380e5a13e6eb..fdd96d7e975ea 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts +++ b/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); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.e2e-spec.ts index 99c0732fc6e69..8b05c309f695a 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.e2e-spec.ts +++ b/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); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts index 53756f0a2569a..8d87826da7798 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts @@ -22,16 +22,12 @@ 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); @@ -39,9 +35,6 @@ export class BucketsPageHelper extends PageHelper { 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 diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html index 108b1ba6ce569..74b4915cd9c92 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html @@ -94,34 +94,6 @@ - -
- -
- - - - 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. - - -
-
-
+ + + + +
+ +
+ + + + 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. + + +
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index d5180f5db9dac..c3baa9c13f59c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -54,6 +54,7 @@ import { CardRowComponent } from './card-row/card-row.component'; import { CodeBlockComponent } from './code-block/code-block.component'; import { VerticalNavigationComponent } from './vertical-navigation/vertical-navigation.component'; import { HelpTextComponent } from './help-text/help-text.component'; +import { FormAdvancedFieldsetComponent } from './form-advanced-fieldset/form-advanced-fieldset.component'; @NgModule({ imports: [ @@ -111,7 +112,8 @@ import { HelpTextComponent } from './help-text/help-text.component'; CardRowComponent, CodeBlockComponent, VerticalNavigationComponent, - HelpTextComponent + HelpTextComponent, + FormAdvancedFieldsetComponent ], providers: [], exports: [ @@ -146,7 +148,8 @@ import { HelpTextComponent } from './help-text/help-text.component'; CardRowComponent, CodeBlockComponent, VerticalNavigationComponent, - HelpTextComponent + HelpTextComponent, + FormAdvancedFieldsetComponent ] }) export class ComponentsModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html new file mode 100644 index 0000000000000..133bc8440e675 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html @@ -0,0 +1,22 @@ +
+ +
+ +
+ +
+
+
+ +
+
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss new file mode 100644 index 0000000000000..e3bc7aaed0ca0 --- /dev/null +++ b/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; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.spec.ts new file mode 100644 index 0000000000000..de2c48c48d74c --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FormAdvancedFieldsetComponent] + }).compileComponents(); + + fixture = TestBed.createComponent(FormAdvancedFieldsetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts new file mode 100644 index 0000000000000..e4b71d10e6572 --- /dev/null +++ b/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; +}