From f6b86bbf2fec6e656c65c6cc8c427b916193a1b1 Mon Sep 17 00:00:00 2001
From: pujashahu <pujashahu@li-37e364cc-2d5a-11b2-a85c-fd7027b8f826.ibm.com>
Date: Tue, 17 Sep 2024 19:58:24 +0530
Subject: [PATCH] mgr/dashboard: carbonize user management-role form

Fixes: https://tracker.ceph.com/issues/68123

Signed-off-by: Puja Shahu <pshahu@redhat.com>
Signed-off-by: pujashahu <pujashahu@li-37e364cc-2d5a-11b2-a85c-fd7027b8f826.ibm.com>
---
 .../frontend/src/app/core/auth/auth.module.ts |   8 +-
 .../auth/role-form/role-form.component.html   | 135 +++++++++---------
 .../checked-table-form.component.html         |  57 ++++----
 .../checked-table-form.component.spec.ts      |   2 +-
 .../checked-table-form.component.ts           |   5 +-
 5 files changed, 104 insertions(+), 103 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
index eedcdd686021d..c0e0517896cd1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
@@ -17,7 +17,7 @@ import { UserFormComponent } from './user-form/user-form.component';
 import { UserListComponent } from './user-list/user-list.component';
 import { UserPasswordFormComponent } from './user-password-form/user-password-form.component';
 import { UserTabsComponent } from './user-tabs/user-tabs.component';
-
+import { ButtonModule, GridModule, IconModule, InputModule } from 'carbon-components-angular';
 @NgModule({
   imports: [
     CommonModule,
@@ -28,7 +28,11 @@ import { UserTabsComponent } from './user-tabs/user-tabs.component';
     NgbPopoverModule,
     NgxPipeFunctionModule,
     RouterModule,
-    NgbModule
+    NgbModule,
+    IconModule,
+    GridModule,
+    ButtonModule,
+    InputModule
   ],
   declarations: [
     LoginComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
index 9b792d127f125..7f79f92464d71 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
@@ -1,75 +1,74 @@
-<div class="cd-col-form"
-     *cdFormLoading="loading">
-  <form name="roleForm"
-        #formDir="ngForm"
-        [formGroup]="roleForm"
-        novalidate>
-    <div class="card">
+<div cdsCol
+     [columnNumbers]="{md: 4}">
+  <ng-container *cdFormLoading="loading">
+    <form name="roleForm"
+          #formDir="ngForm"
+          [formGroup]="roleForm"
+          novalidate>
       <div i18n="form title"
-           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
-      <div class="card-body">
-
-        <!-- Name -->
-        <div class="form-group row">
-          <label class="cd-col-form-label"
-                 [ngClass]="{'required': mode !== roleFormMode.editing}"
-                 for="name"
-                 i18n>Name</label>
-          <div class="cd-col-form-input">
-            <input class="form-control"
-                   type="text"
-                   i18n-placeholder
-                   placeholder="Name..."
-                   id="name"
-                   name="name"
-                   formControlName="name"
-                   autofocus>
-            <span class="invalid-feedback"
-                  *ngIf="roleForm.showError('name', formDir, 'required')"
-                  i18n>This field is required.</span>
-            <span class="invalid-feedback"
-                  *ngIf="roleForm.showError('name', formDir, 'notUnique')"
-                  i18n>The chosen name is already in use.</span>
-          </div>
-        </div>
-
-        <!-- Description -->
-        <div class="form-group row">
-          <label i18n
-                 class="cd-col-form-label"
-                 for="description">Description</label>
-          <div class="cd-col-form-input">
-            <input class="form-control"
-                   type="text"
-                   i18n-placeholder
-                   placeholder="Description..."
-                   id="description"
-                   name="description"
-                   formControlName="description">
-          </div>
-        </div>
-
-        <!-- Permissions -->
-        <div class="form-group row">
-          <label i18n
-                 class="cd-col-form-label">Permissions</label>
-          <div class="cd-col-form-input">
-            <cd-checked-table-form [data]="scopes_permissions"
-                                   [columns]="columns"
-                                   [form]="roleForm"
-                                   inputField="scopes_permissions"
-                                   [scopes]="scopes"
-                                   [initialValue]="initialValue"></cd-checked-table-form>
-          </div>
-        </div>
-
+           class="form-header">{{ action | titlecase }} {{ resource | upperFirst }}
       </div>
-      <div class="card-footer">
+        <!--Name -->
+      <div class="form-item">
+        <cds-text-label for="name"
+                        cdRequiredField="Name"
+                        [invalid]="!roleForm.controls.name.valid && roleForm.controls.name.dirty"
+                        [invalidText]="nameError"
+                        i18n>Name
+          <span [ngClass]="{'required': mode !== roleFormMode.editing}"></span>
+          <input cdsText
+                 placeholder="Name..."
+                 i18n-placeholder
+                 id="name"
+                 name="name"
+                 formControlName="name"
+                 [invalid]="!roleForm.controls.name.valid && roleForm.controls.name.dirty"
+                 autofocus>
+        </cds-text-label>
+        <ng-template #nameError>
+          <span *ngIf="roleForm.showError('name', formDir, 'required')">
+            <ng-container i18n>
+               This field is required.
+            </ng-container>
+          </span>
+          <span *ngIf="roleForm.showError('name', formDir, 'notUnique')">
+            <ng-container i18n>
+                The chosen name is already in use.
+            </ng-container>
+          </span>
+        </ng-template>
+      </div>
+    <!-- Description -->
+      <div class="form-item">
+        <cds-text-label for="name"
+                        i18n>Description
+        <input cdsText
+               type="text"
+               class="input-field"
+               placeholder="Description.."
+               id="description"
+               name="description"
+               formControlName="description">
+        </cds-text-label>
+      </div>
+      <!-- Permissions -->
+      <div  class="form-item">
+        <cds-text-label>Permissions</cds-text-label>
+        <cd-checked-table-form [data]="scopes_permissions"
+                               [columns]="columns"
+                               [form]="roleForm"
+                               inputField="scopes_permissions"
+                               [scopes]="scopes"
+                               [initialValue]="initialValue"></cd-checked-table-form>
+      </div>
+      <!--Submit Button-->
+      <div class="form-item">
         <cd-form-button-panel (submitActionEvent)="submit()"
                               [form]="roleForm"
                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
-                              wrappingClass="text-right"></cd-form-button-panel>
+                              wrappingClass="text-right">
+        </cd-form-button-panel>
       </div>
-    </div>
-  </form>
+    </form>
+  </ng-container>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.html
index 267d3e798fb79..da5080f3cc28d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.html
@@ -9,49 +9,46 @@
           [layer]="0"
           [limit]="0">
 </cd-table>
-
 <ng-template #cellScopeCheckboxTpl
              let-column="data.column"
              let-row="data.row"
              let-value="data.value">
-  <div class="custom-control custom-checkbox">
-    <input class="custom-control-input"
-           id="scope_{{ row.scope }}"
-           type="checkbox"
-           [checked]="isRowChecked(row.scope)"
-           [disabled]="isDisabled"
-           (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
-    <label class="datatable-permissions-scope-cell-label custom-control-label"
-           for="scope_{{ row.scope }}">{{ value }}</label>
+  <div class="m-2">
+    <cds-checkbox id="scope_{{ row.scope }}"
+                  [checked]="isRowChecked(row.scope)"
+                  [disabled]="isDisabled"
+                  (checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
+                  i18n>
+    <span class="datatable-permissions-scope-cell-label custom-control-label"
+          for="scope_{{ row.scope }}">{{ value }}</span>
+    </cds-checkbox>
   </div>
 </ng-template>
-
 <ng-template #cellPermissionCheckboxTpl
              let-column="data.column"
              let-row="data.row"
              let-value="data.value">
-  <div class="custom-control custom-checkbox">
-    <input class="custom-control-input"
-           type="checkbox"
-           [checked]="value"
-           [disabled]="isDisabled"
-           [id]="row.scope + '-' + column.prop"
-           (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
-    <label class="custom-control-label"
-           [for]="row.scope + '-' + column.prop"></label>
+  <div class="m-2">
+    <cds-checkbox [id]="row.scope + '-' + column.prop"
+                  [checked]="value"
+                  [disabled]="isDisabled"
+                  (checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
+                  i18n>
+    <span class="custom-control-label"
+          [for]="row.scope + '-' + column.prop"></span>
+    </cds-checkbox>
   </div>
 </ng-template>
-
 <ng-template #headerPermissionCheckboxTpl
              let-column="data">
-  <div class="custom-control custom-checkbox">
-    <input class="custom-control-input"
-           id="header_{{ column.prop }}"
-           type="checkbox"
-           [disabled]="isDisabled"
-           [checked]="isHeaderChecked(column.prop)"
-           (change)="onClickHeaderCheckbox(column.prop, $event)">
-    <label class="datatable-permissions-header-cell-label custom-control-label"
-           for="header_{{ column.prop }}">{{ column.name }}</label>
+  <div class="m-2">
+    <cds-checkbox id="header_{{ column.prop }}"
+                  [disabled]="isDisabled"
+                  [checked]="isHeaderChecked(column.prop)"
+                  (checkedChange)="onClickHeaderCheckbox(column.prop, $event)"
+                  i18n>
+    <span class="datatable-permissions-header-cell-label custom-control-label"
+          for="header_{{ column.prop }}">{{ column.name }}</span>
+    </cds-checkbox>
   </div>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.spec.ts
index 73c7e7e3bff24..fbd2c63fc4898 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.spec.ts
@@ -106,7 +106,7 @@ describe('CheckedTableFormComponent', () => {
       owner: ['read', 'write'],
       group: ['execute']
     });
-    component.onClickHeaderCheckbox('scope', ({ target: { checked: true } } as unknown) as Event);
+    component.onClickHeaderCheckbox('scope', true);
     const scopes_permissions = form.getValue('scopes_permissions');
     const keys = Object.keys(scopes_permissions);
     expect(keys).toEqual(['owner', 'group']);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.ts
index e592c3ff4f57b..5c1b2a71054c6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.ts
@@ -126,7 +126,8 @@ export class CheckedTableFormComponent implements OnInit {
     // Add or remove the given permission(s) depending on the click event or if no
     // click event is given then add/remove them if they are absent/exist.
     if (
-      (event && event.target['checked']) ||
+      event ||
+      event === true ||
       !_.isEqual(permissions.sort(), _.intersection(scopes_permissions[scope], permissions).sort())
     ) {
       scopes_permissions[scope] = _.union(scopes_permissions[scope], permissions);
@@ -151,7 +152,7 @@ export class CheckedTableFormComponent implements OnInit {
     }
     _.each(permissions, (permission) => {
       _.each(this.scopes, (scope) => {
-        if (event.target['checked']) {
+        if (event === true) {
           scopes_permissions[scope] = _.union(scopes_permissions[scope], [permission]);
         } else {
           scopes_permissions[scope] = _.difference(scopes_permissions[scope], [permission]);
-- 
2.39.5