From f6e1ed657125e0f394e80da5dfeb51617304d091 Mon Sep 17 00:00:00 2001 From: Nizamudeen Date: Tue, 14 Apr 2020 12:23:09 +0530 Subject: [PATCH] mgr/dashboard: Custom Directive for verifying if user is read_only This commit introduces two new Custom Directives: `FormInputDisableDirective` and `FormScopeDirective`. By using the `cdFormScope` attribute of the directive we can customize the behaviour of the modal components. Signed-off-by: Nizamudeen --- .../osd-flags-modal.component.html | 3 +- .../osd-pg-scrub-modal.component.html | 3 +- .../osd-recv-speed-modal.component.html | 3 +- .../shared/directives/directives.module.ts | 10 ++- .../form-input-disable.directive.spec.ts | 75 +++++++++++++++++++ .../form-input-disable.directive.ts | 27 +++++++ .../directives/form-scope.directive.spec.ts | 8 ++ .../shared/directives/form-scope.directive.ts | 8 ++ 8 files changed, 132 insertions(+), 5 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html index f3094d44501f..f98bc7011de4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html @@ -6,7 +6,8 @@
+ novalidate + cdFormScope="osd">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html index 4e9e3eefd8e4..14b51cc67073 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html @@ -5,7 +5,8 @@ + novalidate + cdFormScope="osd">
+ novalidate + cdFormScope="osd">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts index 3b011043c737..ad065577c97d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts @@ -4,7 +4,9 @@ import { AutofocusDirective } from './autofocus.directive'; import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive'; import { DimlessBinaryPerSecondDirective } from './dimless-binary-per-second.directive'; import { DimlessBinaryDirective } from './dimless-binary.directive'; +import { FormInputDisableDirective } from './form-input-disable.directive'; import { FormLoadingDirective } from './form-loading.directive'; +import { FormScopeDirective } from './form-scope.directive'; import { IopsDirective } from './iops.directive'; import { MillisecondsDirective } from './milliseconds.directive'; import { PasswordButtonDirective } from './password-button.directive'; @@ -23,7 +25,9 @@ import { TrimDirective } from './trim.directive'; MillisecondsDirective, IopsDirective, FormLoadingDirective, - StatefulTabDirective + StatefulTabDirective, + FormInputDisableDirective, + FormScopeDirective ], exports: [ AutofocusDirective, @@ -35,7 +39,9 @@ import { TrimDirective } from './trim.directive'; MillisecondsDirective, IopsDirective, FormLoadingDirective, - StatefulTabDirective + StatefulTabDirective, + FormInputDisableDirective, + FormScopeDirective ] }) export class DirectivesModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.spec.ts new file mode 100644 index 000000000000..0aca1404a41d --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.spec.ts @@ -0,0 +1,75 @@ +import { Component, DebugElement, Input } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { configureTestBed } from '../../../testing/unit-test-helper'; +import { Permission } from '../models/permissions'; +import { AuthStorageService } from '../services/auth-storage.service'; +import { FormInputDisableDirective } from './form-input-disable.directive'; +import { FormScopeDirective } from './form-scope.directive'; + +@Component({ + template: ` + + + + ` +}) +export class FormDisableComponent {} + +class MockFormScopeDirective { + @Input() cdFormScope = 'osd'; +} + +describe('FormInputDisableDirective', () => { + let fakePermissions: Permission; + let authStorageService: AuthStorageService; + let directive: FormInputDisableDirective; + let fixture: ComponentFixture; + let inputElement: DebugElement; + configureTestBed({ + declarations: [FormScopeDirective, FormInputDisableDirective, FormDisableComponent] + }); + + beforeEach(() => { + directive = new FormInputDisableDirective( + new MockFormScopeDirective(), + new AuthStorageService(), + null + ); + + fakePermissions = { + create: false, + update: false, + read: false, + delete: false + }; + authStorageService = TestBed.inject(AuthStorageService); + spyOn(authStorageService, 'getPermissions').and.callFake(() => ({ + osd: fakePermissions + })); + + fixture = TestBed.createComponent(FormDisableComponent); + inputElement = fixture.debugElement.query(By.css('input')); + }); + + afterEach(() => { + directive = null; + }); + + it('should create an instance', () => { + expect(directive).toBeTruthy(); + }); + + it('should disable the input if update permission is false', () => { + fixture.detectChanges(); + expect(inputElement.nativeElement.disabled).toBeTruthy(); + }); + + it('should not disable the input if update permission is true', () => { + fakePermissions.update = true; + fakePermissions.read = false; + fixture.detectChanges(); + expect(inputElement.nativeElement.disabled).toBeFalsy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.ts new file mode 100644 index 000000000000..fe0e591d8671 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-input-disable.directive.ts @@ -0,0 +1,27 @@ +import { AfterViewInit, Directive, ElementRef, Optional } from '@angular/core'; + +import { Permissions } from '../models/permissions'; +import { AuthStorageService } from '../services/auth-storage.service'; +import { FormScopeDirective } from './form-scope.directive'; + +@Directive({ + selector: + 'input:not([cdNoFormInputDisable]), select:not([cdNoFormInputDisable]), [cdFormInputDisable]' +}) +export class FormInputDisableDirective implements AfterViewInit { + permissions: Permissions; + + constructor( + @Optional() private formScope: FormScopeDirective, + private authStorageService: AuthStorageService, + private elementRef: ElementRef + ) {} + + ngAfterViewInit() { + this.permissions = this.authStorageService.getPermissions(); + const service_name = this.formScope?.cdFormScope; + if (service_name && !this.permissions?.[service_name]?.update) { + this.elementRef.nativeElement.disabled = true; + } + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.spec.ts new file mode 100644 index 000000000000..2cf882ecea89 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.spec.ts @@ -0,0 +1,8 @@ +import { FormScopeDirective } from './form-scope.directive'; + +describe('UpdateOnlyDirective', () => { + it('should create an instance', () => { + const directive = new FormScopeDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.ts new file mode 100644 index 000000000000..8ae3f8489eee --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-scope.directive.ts @@ -0,0 +1,8 @@ +import { Directive, Input } from '@angular/core'; + +@Directive({ + selector: '[cdFormScope]' +}) +export class FormScopeDirective { + @Input() cdFormScope: any; +} -- 2.47.3