Merge pull request #56351 from afreen23/wip-advanced-sec

mgr/dashboard: Add advanced fieldset component

Reviewed-by: Nizamudeen A <nia@redhat.com>
This commit is contained in:
Nizamudeen A 2024-03-26 19:21:29 +05:30 committed by GitHub
commit 00a5a3dae9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 117 additions and 42 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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

View File

@ -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">

View File

@ -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 {}

View File

@ -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>

View File

@ -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;
}

View File

@ -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();
});
});

View File

@ -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;
}