Skip to content

Commit ec6e923

Browse files
nizamial09nizamial09
authored
Merge pull request ceph#59846 from rhcs-dashboard/usermanagment-roles
mgr/dashboard: carbonize user management-role form Reviewed-by: Pedro Gonzalez Gomez <[email protected]> Reviewed-by: Nizamudeen A <[email protected]> Reviewed-by: nmunet <NOT@FOUND>
2 parents 4127d5b + f6b86bb commit ec6e923

File tree

5 files changed

+104
-103
lines changed

5 files changed

+104
-103
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { UserFormComponent } from './user-form/user-form.component';
1717
import { UserListComponent } from './user-list/user-list.component';
1818
import { UserPasswordFormComponent } from './user-password-form/user-password-form.component';
1919
import { UserTabsComponent } from './user-tabs/user-tabs.component';
20-
20+
import { ButtonModule, GridModule, IconModule, InputModule } from 'carbon-components-angular';
2121
@NgModule({
2222
imports: [
2323
CommonModule,
@@ -28,7 +28,11 @@ import { UserTabsComponent } from './user-tabs/user-tabs.component';
2828
NgbPopoverModule,
2929
NgxPipeFunctionModule,
3030
RouterModule,
31-
NgbModule
31+
NgbModule,
32+
IconModule,
33+
GridModule,
34+
ButtonModule,
35+
InputModule
3236
],
3337
declarations: [
3438
LoginComponent,

‎src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html‎

Lines changed: 67 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,74 @@
1-
<div class="cd-col-form"
2-
*cdFormLoading="loading">
3-
<form name="roleForm"
4-
#formDir="ngForm"
5-
[formGroup]="roleForm"
6-
novalidate>
7-
<div class="card">
1+
<div cdsCol
2+
[columnNumbers]="{md: 4}">
3+
<ng-container *cdFormLoading="loading">
4+
<form name="roleForm"
5+
#formDir="ngForm"
6+
[formGroup]="roleForm"
7+
novalidate>
88
<div i18n="form title"
9-
class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
10-
<div class="card-body">
11-
12-
<!-- Name -->
13-
<div class="form-group row">
14-
<label class="cd-col-form-label"
15-
[ngClass]="{'required': mode !== roleFormMode.editing}"
16-
for="name"
17-
i18n>Name</label>
18-
<div class="cd-col-form-input">
19-
<input class="form-control"
20-
type="text"
21-
i18n-placeholder
22-
placeholder="Name..."
23-
id="name"
24-
name="name"
25-
formControlName="name"
26-
autofocus>
27-
<span class="invalid-feedback"
28-
*ngIf="roleForm.showError('name', formDir, 'required')"
29-
i18n>This field is required.</span>
30-
<span class="invalid-feedback"
31-
*ngIf="roleForm.showError('name', formDir, 'notUnique')"
32-
i18n>The chosen name is already in use.</span>
33-
</div>
34-
</div>
35-
36-
<!-- Description -->
37-
<div class="form-group row">
38-
<label i18n
39-
class="cd-col-form-label"
40-
for="description">Description</label>
41-
<div class="cd-col-form-input">
42-
<input class="form-control"
43-
type="text"
44-
i18n-placeholder
45-
placeholder="Description..."
46-
id="description"
47-
name="description"
48-
formControlName="description">
49-
</div>
50-
</div>
51-
52-
<!-- Permissions -->
53-
<div class="form-group row">
54-
<label i18n
55-
class="cd-col-form-label">Permissions</label>
56-
<div class="cd-col-form-input">
57-
<cd-checked-table-form [data]="scopes_permissions"
58-
[columns]="columns"
59-
[form]="roleForm"
60-
inputField="scopes_permissions"
61-
[scopes]="scopes"
62-
[initialValue]="initialValue"></cd-checked-table-form>
63-
</div>
64-
</div>
65-
9+
class="form-header">{{ action | titlecase }} {{ resource | upperFirst }}
6610
</div>
67-
<div class="card-footer">
11+
<!--Name -->
12+
<div class="form-item">
13+
<cds-text-label for="name"
14+
cdRequiredField="Name"
15+
[invalid]="!roleForm.controls.name.valid && roleForm.controls.name.dirty"
16+
[invalidText]="nameError"
17+
i18n>Name
18+
<span [ngClass]="{'required': mode !== roleFormMode.editing}"></span>
19+
<input cdsText
20+
placeholder="Name..."
21+
i18n-placeholder
22+
id="name"
23+
name="name"
24+
formControlName="name"
25+
[invalid]="!roleForm.controls.name.valid && roleForm.controls.name.dirty"
26+
autofocus>
27+
</cds-text-label>
28+
<ng-template #nameError>
29+
<span *ngIf="roleForm.showError('name', formDir, 'required')">
30+
<ng-container i18n>
31+
This field is required.
32+
</ng-container>
33+
</span>
34+
<span *ngIf="roleForm.showError('name', formDir, 'notUnique')">
35+
<ng-container i18n>
36+
The chosen name is already in use.
37+
</ng-container>
38+
</span>
39+
</ng-template>
40+
</div>
41+
<!-- Description -->
42+
<div class="form-item">
43+
<cds-text-label for="name"
44+
i18n>Description
45+
<input cdsText
46+
type="text"
47+
class="input-field"
48+
placeholder="Description.."
49+
id="description"
50+
name="description"
51+
formControlName="description">
52+
</cds-text-label>
53+
</div>
54+
<!-- Permissions -->
55+
<div class="form-item">
56+
<cds-text-label>Permissions</cds-text-label>
57+
<cd-checked-table-form [data]="scopes_permissions"
58+
[columns]="columns"
59+
[form]="roleForm"
60+
inputField="scopes_permissions"
61+
[scopes]="scopes"
62+
[initialValue]="initialValue"></cd-checked-table-form>
63+
</div>
64+
<!--Submit Button-->
65+
<div class="form-item">
6866
<cd-form-button-panel (submitActionEvent)="submit()"
6967
[form]="roleForm"
7068
[submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
71-
wrappingClass="text-right"></cd-form-button-panel>
69+
wrappingClass="text-right">
70+
</cd-form-button-panel>
7271
</div>
73-
</div>
74-
</form>
72+
</form>
73+
</ng-container>
7574
</div>

‎src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.html‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,46 @@
99
[layer]="0"
1010
[limit]="0">
1111
</cd-table>
12-
1312
<ng-template #cellScopeCheckboxTpl
1413
let-column="data.column"
1514
let-row="data.row"
1615
let-value="data.value">
17-
<div class="custom-control custom-checkbox">
18-
<input class="custom-control-input"
19-
id="scope_{{ row.scope }}"
20-
type="checkbox"
21-
[checked]="isRowChecked(row.scope)"
22-
[disabled]="isDisabled"
23-
(change)="onClickCellCheckbox(row.scope, column.prop, $event)">
24-
<label class="datatable-permissions-scope-cell-label custom-control-label"
25-
for="scope_{{ row.scope }}">{{ value }}</label>
16+
<div class="m-2">
17+
<cds-checkbox id="scope_{{ row.scope }}"
18+
[checked]="isRowChecked(row.scope)"
19+
[disabled]="isDisabled"
20+
(checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
21+
i18n>
22+
<span class="datatable-permissions-scope-cell-label custom-control-label"
23+
for="scope_{{ row.scope }}">{{ value }}</span>
24+
</cds-checkbox>
2625
</div>
2726
</ng-template>
28-
2927
<ng-template #cellPermissionCheckboxTpl
3028
let-column="data.column"
3129
let-row="data.row"
3230
let-value="data.value">
33-
<div class="custom-control custom-checkbox">
34-
<input class="custom-control-input"
35-
type="checkbox"
36-
[checked]="value"
37-
[disabled]="isDisabled"
38-
[id]="row.scope + '-' + column.prop"
39-
(change)="onClickCellCheckbox(row.scope, column.prop, $event)">
40-
<label class="custom-control-label"
41-
[for]="row.scope + '-' + column.prop"></label>
31+
<div class="m-2">
32+
<cds-checkbox [id]="row.scope + '-' + column.prop"
33+
[checked]="value"
34+
[disabled]="isDisabled"
35+
(checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
36+
i18n>
37+
<span class="custom-control-label"
38+
[for]="row.scope + '-' + column.prop"></span>
39+
</cds-checkbox>
4240
</div>
4341
</ng-template>
44-
4542
<ng-template #headerPermissionCheckboxTpl
4643
let-column="data">
47-
<div class="custom-control custom-checkbox">
48-
<input class="custom-control-input"
49-
id="header_{{ column.prop }}"
50-
type="checkbox"
51-
[disabled]="isDisabled"
52-
[checked]="isHeaderChecked(column.prop)"
53-
(change)="onClickHeaderCheckbox(column.prop, $event)">
54-
<label class="datatable-permissions-header-cell-label custom-control-label"
55-
for="header_{{ column.prop }}">{{ column.name }}</label>
44+
<div class="m-2">
45+
<cds-checkbox id="header_{{ column.prop }}"
46+
[disabled]="isDisabled"
47+
[checked]="isHeaderChecked(column.prop)"
48+
(checkedChange)="onClickHeaderCheckbox(column.prop, $event)"
49+
i18n>
50+
<span class="datatable-permissions-header-cell-label custom-control-label"
51+
for="header_{{ column.prop }}">{{ column.name }}</span>
52+
</cds-checkbox>
5653
</div>
5754
</ng-template>

‎src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ describe('CheckedTableFormComponent', () => {
106106
owner: ['read', 'write'],
107107
group: ['execute']
108108
});
109-
component.onClickHeaderCheckbox('scope', ({ target: { checked: true } } as unknown) as Event);
109+
component.onClickHeaderCheckbox('scope', true);
110110
const scopes_permissions = form.getValue('scopes_permissions');
111111
const keys = Object.keys(scopes_permissions);
112112
expect(keys).toEqual(['owner', 'group']);

‎src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/checked-table-form/checked-table-form.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@ export class CheckedTableFormComponent implements OnInit {
126126
// Add or remove the given permission(s) depending on the click event or if no
127127
// click event is given then add/remove them if they are absent/exist.
128128
if (
129-
(event && event.target['checked']) ||
129+
event ||
130+
event === true ||
130131
!_.isEqual(permissions.sort(), _.intersection(scopes_permissions[scope], permissions).sort())
131132
) {
132133
scopes_permissions[scope] = _.union(scopes_permissions[scope], permissions);
@@ -151,7 +152,7 @@ export class CheckedTableFormComponent implements OnInit {
151152
}
152153
_.each(permissions, (permission) => {
153154
_.each(this.scopes, (scope) => {
154-
if (event.target['checked']) {
155+
if (event === true) {
155156
scopes_permissions[scope] = _.union(scopes_permissions[scope], [permission]);
156157
} else {
157158
scopes_permissions[scope] = _.difference(scopes_permissions[scope], [permission]);

0 commit comments

Comments
 (0)