Merge pull request #60054 from rhcs-dashboard/realm-popup

mgr/dashboard: Carbon Design - Create realm popup

Reviewed-by: Afreen Misbah <afreen@ibm.com>

5 files changed, 120 insertions, 77 deletions

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
index 22da2851d5a..67c98b0a59f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
@@ -139,9 +139,7 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit {
       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'
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.html
index 1fa5b08f60d..5ca36f4bd2f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.html
@@ -1,58 +1,91 @@
-<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&nbsp;<a href="{{ docUrl }}">documentation</a>&nbsp;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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.spec.ts
index becb1569ad6..f68619fe9ff 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.spec.ts
@@ -14,6 +14,7 @@ import { SharedModule } from '~/app/shared/shared.module';
 
 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;
@@ -26,9 +27,16 @@ describe('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]
   });
 
@@ -68,7 +76,6 @@ describe('RgwMultisiteRealmFormComponent', () => {
 
     it('tests create success notification', () => {
       spyOn(rgwRealmService, 'create').and.returnValue(observableOf([]));
-      component.action = 'create';
       component.multisiteRealmForm.markAsDirty();
       component.submit();
       expect(notificationService.show).toHaveBeenCalledWith(
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.ts
index 20cd2032faf..1e18598b0db 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-realm-form/rgw-multisite-realm-form.component.ts
@@ -1,4 +1,4 @@
-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';
@@ -9,26 +9,21 @@ import { CdValidators } from '~/app/shared/forms/cd-validators';
 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;
 
@@ -37,11 +32,17 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
     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();
   }
 
@@ -52,7 +53,7 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
           Validators.required,
           CdValidators.custom('uniqueName', (realmName: string) => {
             return (
-              this.action === 'create' &&
+              this.action === this.actionLabels.CREATE &&
               this.realmNames &&
               this.realmNames.indexOf(realmName) !== -1
             );
@@ -71,7 +72,7 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
     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']
@@ -97,7 +98,7 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
   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(
         () => {
@@ -105,13 +106,13 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
             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(
@@ -120,7 +121,7 @@ export class RgwMultisiteRealmFormComponent implements OnInit {
             NotificationType.success,
             $localize`Realm: '${values['realmName']}' updated successfully`
           );
-          this.activeModal.close();
+          this.closeModal();
         },
         () => {
           this.multisiteRealmForm.setErrors({ cdSubmitButton: true });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 5f8c6f50135..a55cb179778 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -71,7 +71,9 @@ import {
   LoadingModule,
   ModalModule,
   ProgressIndicatorModule,
-  CodeSnippetModule
+  CodeSnippetModule,
+  InputModule,
+  CheckboxModule
 } from 'carbon-components-angular';
 import { CephSharedModule } from '../shared/ceph-shared.module';
 
@@ -99,7 +101,9 @@ import { CephSharedModule } from '../shared/ceph-shared.module';
     ButtonModule,
     LoadingModule,
     IconModule,
-    NgbProgressbar
+    NgbProgressbar,
+    InputModule,
+    CheckboxModule
   ],
   exports: [
     RgwDaemonListComponent,