From 132a7259c90659eb431b73cbe69ed85cebfa50d4 Mon Sep 17 00:00:00 2001 From: Afreen Misbah Date: Mon, 29 Dec 2025 10:21:36 +0530 Subject: [PATCH] mgr/dashboard: Add generic wizard component Fixes https://tracker.ceph.com/issues/74291 - made on top of carbon modal - carbon design system used - wide tearsheet - added a step component as well to support navigation code - added unit tests Signed-off-by: Afreen Misbah --- .../nvmeof-subsystems-form.component.html | 117 +++++++------- .../nvmeof-subsystems-form.component.ts | 44 ++++- .../shared/components/components.module.ts | 16 +- .../tearsheet-step.component.html | 3 + .../tearsheet-step.component.scss | 0 .../tearsheet-step.component.spec.ts | 24 +++ .../tearsheet-step.component.ts | 12 ++ .../tearsheet/tearsheet.component.html | 69 ++++++++ .../tearsheet/tearsheet.component.scss | 65 ++++++++ .../tearsheet/tearsheet.component.spec.ts | 153 ++++++++++++++++++ .../tearsheet/tearsheet.component.ts | 91 +++++++++++ 11 files changed, 524 insertions(+), 70 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.html index 4bb762e9ea5f1..ad17ad83deb80 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.html @@ -1,71 +1,64 @@ - - {{ action | titlecase }} {{ resource | upperFirst }} - + +
-
- -
- -
- - - A unique and permanent name for the lifetime of the subsystem. - - This field is required. - This NQN is already in use. - Expected NQN format
<nqn.$year-$month.$reverseDomainName:$utf8-string".> or
<nqn.2014-08.org.nvmexpress:uuid:$UUID-string".> - An NQN may not be more than 223 bytes in length. -
-
- -
- -
- - The maximum namespaces per subsystem. Default is {{defaultMaxNamespace}} - The value must be at least 1. - The value must be a positive integer. -
+ +
+ +
+ + + A unique and permanent name for the lifetime of the subsystem. + + This field is required. + This NQN is already in use. + Expected NQN format
<nqn.$year-$month.$reverseDomainName:$utf8-string".> or
<nqn.2014-08.org.nvmexpress:uuid:$UUID-string".> + An NQN may not be more than 223 bytes in length.
-
-
- + +
+ +
+ + The maximum namespaces per subsystem. Default is {{defaultMaxNamespace}} + The value must be at least 1. + The value must be a positive integer.
- - + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.ts index bb20cfce61beb..b89e823b32e41 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { UntypedFormControl, Validators } from '@angular/forms'; +import { Component, DestroyRef, OnInit } from '@angular/core'; +import { FormControlStatus, UntypedFormControl, Validators } from '@angular/forms'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants'; @@ -14,6 +15,8 @@ import { DEFAULT_MAX_NAMESPACE_PER_SUBSYSTEM, NvmeofService } from '~/app/shared/api/nvmeof.service'; +import { Step } from 'carbon-components-angular'; +import { startWith } from 'rxjs/operators'; @Component({ selector: 'cd-nvmeof-subsystems-form', @@ -29,6 +32,28 @@ export class NvmeofSubsystemsFormComponent implements OnInit { pageURL: string; defaultMaxNamespace: number = DEFAULT_MAX_NAMESPACE_PER_SUBSYSTEM; group: string; + steps: Step[] = [ + { + label: $localize`Subsystem Details`, + complete: false, + invalid: false + }, + { + label: $localize`Host access control`, + complete: false + }, + { + label: $localize`Authentication`, + complete: false + }, + { + label: $localize`Advanced Options`, + complete: false, + secondaryLabel: $localize`Advanced` + } + ]; + title: string = $localize`Create Subsystem`; + description: string = $localize`Subsytems define how hosts connect to NVMe namespaces and ensure secure access to storage.`; constructor( private authStorageService: AuthStorageService, @@ -37,7 +62,8 @@ export class NvmeofSubsystemsFormComponent implements OnInit { private nvmeofService: NvmeofService, private taskWrapperService: TaskWrapperService, private router: Router, - private route: ActivatedRoute + private route: ActivatedRoute, + private destroyRef: DestroyRef ) { this.permission = this.authStorageService.getPermissions().nvmeof; this.resource = $localize`Subsystem`; @@ -55,11 +81,19 @@ export class NvmeofSubsystemsFormComponent implements OnInit { ); ngOnInit() { - this.route.queryParams.subscribe((params) => { + this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => { this.group = params?.['group']; }); + this.createForm(); this.action = this.actionLabels.CREATE; + + this.subsystemForm.statusChanges + .pipe(startWith(this.subsystemForm.status), takeUntilDestroyed(this.destroyRef)) + .subscribe((status: FormControlStatus) => { + const step = this.steps[0]; + step.invalid = status === 'INVALID'; + }); } createForm() { @@ -115,6 +149,8 @@ export class NvmeofSubsystemsFormComponent implements OnInit { }) .subscribe({ error() { + // instead have error message set, not setting form status INVALID + // which will show input as false component.subsystemForm.setErrors({ cdSubmitButton: true }); }, complete: () => { 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 a01f806999d56..12d70e741f969 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 @@ -41,7 +41,8 @@ import { TilesModule, PopoverModule, InlineLoadingModule, - TagModule + TagModule, + LinkModule } from 'carbon-components-angular'; import EditIcon from '@carbon/icons/es/edit/20'; import CodeIcon from '@carbon/icons/es/code/16'; @@ -92,6 +93,7 @@ import { InlineMessageComponent } from './inline-message/inline-message.componen import { IconComponent } from './icon/icon.component'; import { DetailsCardComponent } from './details-card/details-card.component'; import { ToastComponent } from './notification-toast/notification-toast.component'; +import { TearsheetComponent } from './tearsheet/tearsheet.component'; // Icons import InfoIcon from '@carbon/icons/es/information/16'; @@ -99,6 +101,7 @@ import CopyIcon from '@carbon/icons/es/copy/32'; import downloadIcon from '@carbon/icons/es/download/16'; import IdeaIcon from '@carbon/icons/es/idea/20'; import CloseIcon from '@carbon/icons/es/close/16'; +import { TearsheetStepComponent } from './tearsheet-step/tearsheet-step.component'; @NgModule({ imports: [ @@ -144,7 +147,8 @@ import CloseIcon from '@carbon/icons/es/close/16'; TilesModule, PopoverModule, InlineLoadingModule, - TagModule + TagModule, + LinkModule ], declarations: [ SparklineComponent, @@ -190,7 +194,9 @@ import CloseIcon from '@carbon/icons/es/close/16'; IconComponent, InlineMessageComponent, DetailsCardComponent, - ToastComponent + ToastComponent, + TearsheetComponent, + TearsheetStepComponent ], providers: [provideCharts(withDefaultRegisterables())], exports: [ @@ -233,7 +239,9 @@ import CloseIcon from '@carbon/icons/es/close/16'; IconComponent, InlineMessageComponent, DetailsCardComponent, - ToastComponent + ToastComponent, + TearsheetComponent, + TearsheetStepComponent ] }) export class ComponentsModule { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.html new file mode 100644 index 0000000000000..a4bd3d8f63ebc --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.html @@ -0,0 +1,3 @@ + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.spec.ts new file mode 100644 index 0000000000000..775f20ea13295 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SharedModule } from '~/app/shared/shared.module'; +import { configureTestBed } from '~/testing/unit-test-helper'; +import { TearsheetStepComponent } from './tearsheet-step.component'; + +describe('WizardComponent', () => { + let component: TearsheetStepComponent; + let fixture: ComponentFixture; + + configureTestBed({ + imports: [SharedModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TearsheetStepComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.ts new file mode 100644 index 0000000000000..243ba899463f9 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet-step/tearsheet-step.component.ts @@ -0,0 +1,12 @@ +import { Component, TemplateRef, ViewChild } from '@angular/core'; + +@Component({ + selector: 'cd-tearsheet-step', + standalone: false, + templateUrl: './tearsheet-step.component.html', + styleUrls: ['./tearsheet-step.component.scss'] +}) +export class TearsheetStepComponent { + @ViewChild(TemplateRef, { static: true }) + template!: TemplateRef; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html new file mode 100644 index 0000000000000..9508fafadb6ac --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html @@ -0,0 +1,69 @@ + + + +
+

+ {{title}} +

+

+ {{description}} +

+
+
+ +
+ + +
+
+ +
+ + +
+ + + + + @if (currentStep === lastStep) { + + } + @else { + + } + +
+
+ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss new file mode 100644 index 0000000000000..c72bcd6560a29 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss @@ -0,0 +1,65 @@ +// No css variable to apply css to modal div hence using css ngdeep +// This is needed to set the width of tearsheet as per carbon standards. +:host ::ng-deep .cds--modal-container { + block-size: 100%; + inset-block-start: auto; + inline-size: calc(100% - 8rem); + max-block-size: calc(100% - 5.5rem); +} + +.tearsheet-header { + fill: var(--cds-icon-primary); + background-color: var(--cds-layer-01); + padding: var(--cds-spacing-06) var(--cds-spacing-07); + border-block-end: 1px solid var(--cds-border-subtle-01); + + .tearsheet-title { + color: var(--cds-text-primary); + } + + .tearsheet-description { + margin-top: var(--cds-spacing-04); + color: var(--cds-text-secondary); + } +} + +.tearsheet-body { + padding-block: 0; + padding-inline: 0; + padding: 0; + margin: 0; + height: 100%; + + .tearsheet-influencer { + background-color: var(--cds-layer-01); + padding: var(--cds-spacing-06) var(--cds-spacing-07); + overflow-block: auto; + overflow-y: auto; + border-inline-end: 1px solid var(--cds-border-subtle-01); + margin: 0; + } + + .tearsheet-main { + margin: 0; + display: flex; + flex-direction: column; + height: 100%; + + .tearsheet-content { + background-color: var(--cds-background); + margin: 0; + padding: var(--cds-spacing-06) var(--cds-spacing-07); + flex: 1; + overflow-y: auto; + } + } +} + +.tearsheet-footer { + border-top: 1px solid var(--cds-border-subtle); + background: var(--cds-background); + + .tearsheet-footer-cancel { + margin-left: var(--cds-spacing-05); + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.spec.ts new file mode 100644 index 0000000000000..4a8e979302595 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.spec.ts @@ -0,0 +1,153 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, ViewChild } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { SharedModule } from '../../shared.module'; +import { TearsheetStepComponent } from '../tearsheet-step/tearsheet-step.component'; +import { TearsheetComponent } from './tearsheet.component'; +import { ActivatedRoute } from '@angular/router'; + +// Mock Component that uses tearsheet +@Component({ + template: ` + + +
Step 1 Content
+ + +
Step 2 Content
+ + +
Step 3 Content
+ + + `, + standalone: false +}) +class MockHostComponent { + steps = [ + { + label: 'Step 1', + complete: false, + invalid: false + }, + { + label: 'Step 2', + complete: false + }, + { + label: 'Step 3', + complete: false + } + ]; + title = 'Test Title'; + description = 'Test Description'; + + onSubmit() {} + + @ViewChild(TearsheetComponent) + tearsheet!: TearsheetComponent; +} + +describe('TearsheetComponent', () => { + let hostFixture: ComponentFixture; + let hostComponent: MockHostComponent; + let tearsheetComponent: TearsheetComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TearsheetComponent, TearsheetStepComponent, MockHostComponent], + imports: [SharedModule], + providers: [ + { + provide: ActivatedRoute, + useValue: { outlet: 'modal' } + } + ] + }).compileComponents(); + }); + + beforeEach(() => { + hostFixture = TestBed.createComponent(MockHostComponent); + hostComponent = hostFixture.componentInstance; + hostFixture.detectChanges(); + tearsheetComponent = hostComponent.tearsheet; + }); + + it('should create component', () => { + expect(tearsheetComponent).toBeTruthy(); + }); + + it('should have 3 steps from input', () => { + expect(tearsheetComponent.steps.length).toBe(3); + }); + + it('should have title from input', () => { + expect(tearsheetComponent.title).toBe('Test Title'); + }); + + it('should have description from input', () => { + expect(tearsheetComponent.description).toBe('Test Description'); + }); + + it('should detect 3 step children via ContentChildren', () => { + expect(tearsheetComponent.stepContents).toBeDefined(); + expect(tearsheetComponent.stepContents.length).toBe(3); + }); + + it('should have first step selected by default', () => { + expect(tearsheetComponent.currentStep).toBe(0); + const firstStep = tearsheetComponent.stepContents.first; + expect(firstStep).toBeDefined(); + }); + + it('should render step content', () => { + const step1Content = hostFixture.debugElement.query(By.css('.step-1-content')); + expect(step1Content).toBeTruthy(); + expect(step1Content.nativeElement.textContent).toContain('Step 1 Content'); + }); + + it('should emit submitRequested event', () => { + spyOn(hostComponent, 'onSubmit'); + + tearsheetComponent.submitRequested.emit(); + + expect(hostComponent.onSubmit).toHaveBeenCalled(); + }); + + describe('step navigation', () => { + it('should go to next step', () => { + tearsheetComponent.onNext(); + expect(tearsheetComponent.currentStep).toBe(1); + }); + + it('should go to previous step', () => { + tearsheetComponent.currentStep = 2; + tearsheetComponent.onPrevious(); + expect(tearsheetComponent.currentStep).toBe(1); + }); + + it('should not go beyond last step', () => { + tearsheetComponent.currentStep = 2; + tearsheetComponent.onNext(); + expect(tearsheetComponent.currentStep).toBe(2); + }); + + it('should not go before first step', () => { + tearsheetComponent.currentStep = 0; + tearsheetComponent.onPrevious(); + expect(tearsheetComponent.currentStep).toBe(0); + }); + + it('should not go to next step on invalid', () => { + tearsheetComponent.currentStep = 0; + hostComponent.steps[0].invalid = true; + tearsheetComponent.onNext(); + expect(tearsheetComponent.currentStep).toBe(0); + }); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts new file mode 100644 index 0000000000000..01e56d2dc874b --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts @@ -0,0 +1,91 @@ +import { + ChangeDetectorRef, + Component, + ContentChildren, + EventEmitter, + Input, + OnInit, + Output, + QueryList, + AfterViewChecked +} from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { Step } from 'carbon-components-angular'; +import { TearsheetStepComponent } from '../tearsheet-step/tearsheet-step.component'; +import { ModalCdsService } from '../../services/modal-cds.service'; +import { ActivatedRoute } from '@angular/router'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'cd-tearsheet', + standalone: false, + templateUrl: './tearsheet.component.html', + styleUrls: ['./tearsheet.component.scss'] +}) +export class TearsheetComponent implements OnInit, AfterViewChecked { + @Input() title!: string; + @Input() steps!: Array; + @Input() description!: string; + + @Output() submitRequested = new EventEmitter(); + + @ContentChildren(TearsheetStepComponent) + stepContents!: QueryList; + + get activeStepTemplate() { + return this.stepContents?.toArray()[this.currentStep]?.template; + } + + currentStep: number = 0; + lastStep: number = null; + isOpen: boolean = true; + hasModalOutlet: boolean = false; + + constructor( + protected formBuilder: FormBuilder, + private changeDetectorRef: ChangeDetectorRef, + private cdsModalService: ModalCdsService, + private route: ActivatedRoute, + private location: Location + ) {} + + ngOnInit() { + this.lastStep = this.steps.length - 1; + this.hasModalOutlet = this.route.outlet === 'modal'; + } + + onStepSelect(event: { step: Step; index: number }) { + this.currentStep = event.index; + } + + closeWizard() { + this.isOpen = false; + if (this.hasModalOutlet) { + this.location.back(); + } else { + this.cdsModalService.dismissAll(); + } + } + + onPrevious() { + if (this.currentStep !== 0) { + this.currentStep = this.currentStep - 1; + } + } + + onNext() { + if (this.currentStep !== this.lastStep && !this.steps[this.currentStep].invalid) { + this.currentStep = this.currentStep + 1; + } + } + + onSubmit() { + if (!this.steps[this.currentStep].invalid) { + this.submitRequested.emit(); + } + } + + ngAfterViewChecked() { + this.changeDetectorRef.detectChanges(); + } +} -- 2.47.3