multisiteInfo: this.multisiteInfo
};
if (entityName === 'realm') {
- this.bsModalRef = this.modalService.show(RgwMultisiteRealmFormComponent, initialState, {
- size: 'lg'
- });
+ this.bsModalRef = this.cdsModalService.show(RgwMultisiteRealmFormComponent, initialState);
} else if (entityName === 'zonegroup') {
this.bsModalRef = this.modalService.show(RgwMultisiteZonegroupFormComponent, initialState, {
size: 'lg'
-<cd-modal [modalRef]="activeModal">
- <ng-container i18n="form title"
- class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
+<cds-modal size="sm"
+ [open]="open"
+ [hasScrollingContent]="false"
+ (overlaySelected)="closeModal()">
+ <cds-modal-header (closeSelect)="closeModal()">
+ <h3 cdsModalHeaderHeading
+ i18n>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
+ </cds-modal-header>
- <ng-container class="modal-content">
+ <div cdsModalContent>
<form name="multisiteRealmForm"
#formDir="ngForm"
[formGroup]="multisiteRealmForm"
novalidate>
- <div class="modal-body">
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="realmName"
- i18n>Realm Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Realm name..."
- id="realmName"
- name="realmName"
- formControlName="realmName">
- <span class="invalid-feedback"
- *ngIf="multisiteRealmForm.showError('realmName', formDir, 'required')"
- i18n>This field is required.</span>
- <span class="invalid-feedback"
- *ngIf="multisiteRealmForm.showError('realmName', formDir, 'uniqueName')"
- i18n>The chosen realm name is already in use.</span>
- <div class="custom-control custom-checkbox">
- <input class="form-check-input"
- id="default_realm"
- name="default_realm"
- formControlName="default_realm"
- [attr.disabled]="action === 'edit' ? true: null"
- type="checkbox">
- <label class="form-check-label"
- for="default_realm"
- i18n>Default</label>
- <cd-helper *ngIf="action === 'edit' && info.data.is_default">
- <span i18n>You cannot unset the default flag.</span>
- </cd-helper>
- <cd-helper *ngIf="action === 'edit' && !info.data.is_default">
- <span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
- </cd-helper>
- <cd-helper *ngIf="defaultRealmDisabled && action === 'create'">
- <span i18n>Default realm already exists.</span>
- </cd-helper>
- </div>
- </div>
+ <div class="form-item">
+ <cds-text-label
+ labelInputID="realmName"
+ [invalid]="
+ multisiteRealmForm.controls.realmName.invalid &&
+ (multisiteRealmForm.controls.realmName.touched ||
+ multisiteRealmForm.controls.realmName.dirty)
+ "
+ [invalidText]="realmNameError"
+ cdRequiredField="Realm Name"
+ i18n
+ >Realm Name
+ <input
+ cdsText
+ type="text"
+ placeholder="Realm name..."
+ id="realmName"
+ name="realmName"
+ formControlName="realmName"
+ [invalid]="
+ multisiteRealmForm.controls.realmName.invalid &&
+ (multisiteRealmForm.controls.realmName.touched ||
+ multisiteRealmForm.controls.realmName.dirty)
+ "
+ [autofocus]="true"
+ modal-primary-focus
+ />
+ </cds-text-label>
+ <ng-template #realmNameError>
+ <span
+ class="invalid-feedback"
+ *ngIf="multisiteRealmForm.showError('realmName', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ <span
+ class="invalid-feedback"
+ *ngIf="multisiteRealmForm.showError('realmName', formDir, 'uniqueName')"
+ i18n
+ >The chosen realm name is already in use.</span
+ >
+ </ng-template>
+ </div>
+
+ <div class="form-item">
+ <cds-checkbox
+ label="Default"
+ for="default_realm"
+ formControlName="default_realm"
+ name="default_realm"
+ [disabled]="action === actionLabels.EDIT"
+ i18n
+ >Default
+ <cd-help-text *ngIf="action === actionLabels.EDIT && info.data.is_default">
+ <span>You cannot unset the default flag.</span>
+ </cd-help-text>
+ <cd-help-text *ngIf="action === actionLabels.EDIT && !info.data.is_default">
+ <span
+ >Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover
+ mechanism</span
+ >
+ </cd-help-text>
+ <cd-help-text *ngIf="defaultRealmDisabled && action === actionLabels.CREATE">
+ <span>Default realm already exists.</span>
+ </cd-help-text>
+ </cds-checkbox>
</div>
- </div>
- <div class="modal-footer">
- <cd-form-button-panel (submitActionEvent)="submit()"
- [form]="multisiteRealmForm"
- [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
- </div>
</form>
- </ng-container>
-</cd-modal>
+ </div>
+ <cd-form-button-panel
+ (submitActionEvent)="submit()"
+ [form]="multisiteRealmForm"
+ [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+ [modalForm]="true"
+ >
+ </cd-form-button-panel>
+</cds-modal>
import { RgwMultisiteRealmFormComponent } from './rgw-multisite-realm-form.component';
import { configureTestBed } from '~/testing/unit-test-helper';
+import { CheckboxModule, InputModule, ModalModule } from 'carbon-components-angular';
describe('RgwMultisiteRealmFormComponent', () => {
let component: RgwMultisiteRealmFormComponent;
ReactiveFormsModule,
RouterTestingModule,
HttpClientTestingModule,
- ToastrModule.forRoot()
+ ToastrModule.forRoot(),
+ ModalModule,
+ InputModule,
+ CheckboxModule
+ ],
+ providers: [
+ NgbActiveModal,
+ { provide: 'multisiteInfo', useValue: [[]] },
+ { provide: 'info', useValue: { data: { name: 'null' } } }
],
- providers: [NgbActiveModal],
declarations: [RgwMultisiteRealmFormComponent]
});
it('tests create success notification', () => {
spyOn(rgwRealmService, 'create').and.returnValue(observableOf([]));
- component.action = 'create';
component.multisiteRealmForm.markAsDirty();
component.submit();
expect(notificationService.show).toHaveBeenCalledWith(
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Optional } from '@angular/core';
import { UntypedFormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
import { NotificationService } from '~/app/shared/services/notification.service';
import { RgwRealm } from '../models/rgw-multisite';
import { DocService } from '~/app/shared/services/doc.service';
+import { BaseModal } from 'carbon-components-angular';
@Component({
selector: 'cd-rgw-multisite-realm-form',
templateUrl: './rgw-multisite-realm-form.component.html',
styleUrls: ['./rgw-multisite-realm-form.component.scss']
})
-export class RgwMultisiteRealmFormComponent implements OnInit {
- action: string;
+export class RgwMultisiteRealmFormComponent extends BaseModal implements OnInit {
multisiteRealmForm: CdFormGroup;
- info: any;
- editing = false;
- resource: string;
- multisiteInfo: object[] = [];
realm: RgwRealm;
realmList: RgwRealm[] = [];
zonegroupList: RgwRealm[] = [];
realmNames: string[];
newRealmName: string;
isMaster: boolean;
- defaultsInfo: string[];
defaultRealmDisabled = false;
docUrl: string;
public actionLabels: ActionLabelsI18n,
public rgwRealmService: RgwRealmService,
public notificationService: NotificationService,
- public docService: DocService
+ public docService: DocService,
+ @Optional() @Inject('action') public action: string,
+ @Optional() @Inject('resource') public resource: string,
+ @Optional() @Inject('info') public info: any,
+ @Optional() @Inject('multisiteInfo') public multisiteInfo: object[],
+ @Optional() @Inject('defaultsInfo') public defaultsInfo: string[],
+ @Optional() @Inject('editing') public editing: boolean
) {
- this.action = this.editing
- ? this.actionLabels.EDIT + this.resource
- : this.actionLabels.CREATE + this.resource;
+ super();
+
+ this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
this.createForm();
}
Validators.required,
CdValidators.custom('uniqueName', (realmName: string) => {
return (
- this.action === 'create' &&
+ this.action === this.actionLabels.CREATE &&
this.realmNames &&
this.realmNames.indexOf(realmName) !== -1
);
this.realmNames = this.realmList.map((realm) => {
return realm['name'];
});
- if (this.action === 'edit') {
+ if (this.action === this.actionLabels.EDIT) {
this.zonegroupList =
this.multisiteInfo[1] !== undefined && this.multisiteInfo[1].hasOwnProperty('zonegroups')
? this.multisiteInfo[1]['zonegroups']
submit() {
const values = this.multisiteRealmForm.getRawValue();
this.realm = new RgwRealm();
- if (this.action === 'create') {
+ if (this.action === this.actionLabels.CREATE) {
this.realm.name = values['realmName'];
this.rgwRealmService.create(this.realm, values['default_realm']).subscribe(
() => {
NotificationType.success,
$localize`Realm: '${values['realmName']}' created successfully`
);
- this.activeModal.close();
+ this.closeModal();
},
() => {
this.multisiteRealmForm.setErrors({ cdSubmitButton: true });
}
);
- } else if (this.action === 'edit') {
+ } else {
this.realm.name = this.info.data.name;
this.newRealmName = values['realmName'];
this.rgwRealmService.update(this.realm, values['default_realm'], this.newRealmName).subscribe(
NotificationType.success,
$localize`Realm: '${values['realmName']}' updated successfully`
);
- this.activeModal.close();
+ this.closeModal();
},
() => {
this.multisiteRealmForm.setErrors({ cdSubmitButton: true });
LoadingModule,
ModalModule,
ProgressIndicatorModule,
- CodeSnippetModule
+ CodeSnippetModule,
+ InputModule,
+ CheckboxModule
} from 'carbon-components-angular';
import { CephSharedModule } from '../shared/ceph-shared.module';
ButtonModule,
LoadingModule,
IconModule,
- NgbProgressbar
+ NgbProgressbar,
+ InputModule,
+ CheckboxModule
],
exports: [
RgwDaemonListComponent,
projects / ceph.git / commitdiff