Restore original functionality of node-permission directive (#2698)

lib/core/directives/node-permission.directive.spec.ts

@@ -15,94 +15,150 @@
  * limitations under the License.
  */
 
-import { Component, DebugElement } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { ContentService } from './../services/content.service';
-import { NodePermissionDirective } from './node-permission.directive';
+import { NodePermissionDirective, NodePermissionSubject } from './node-permission.directive';
 
 @Component({
-    template: `
+    selector: 'adf-text-subject'
-        <div [adf-node-permission]="'delete'" [adf-nodes]="selection">
-        </div>`
 })
-class TestComponent {
+class TestComponent implements NodePermissionSubject {
-    selection = [];
+    disabled: boolean = false;
-    disabled = false;
-    done = jasmine.createSpy('done');
 }
 
 describe('NodePermissionDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let element: DebugElement;
-    let component: TestComponent;
-    let alfrescoContentService: ContentService;
 
-    beforeEach(async(() => {
+    let changeDetectorMock: ChangeDetectorRef;
-        TestBed.configureTestingModule({
 
-            declarations: [
+    beforeEach(() => {
-                TestComponent
+        changeDetectorMock = <ChangeDetectorRef> { detectChanges: () => {} };
-            ]
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(TestComponent);
-                alfrescoContentService = TestBed.get(ContentService);
-                component = fixture.componentInstance;
-                element = fixture.debugElement.query(By.directive(NodePermissionDirective));
-            });
-    }));
-
-    it('Should be disabled if no nodes are passed', () => {
-        component.selection = undefined;
-
-        fixture.detectChanges();
-
-        component.selection = null;
-
-        fixture.detectChanges();
-
-        expect(element.nativeElement.disabled).toEqual(true);
     });
 
-    it('Should be disabled if nodes is an empty array', () => {
+    describe('HTML nativeElement as subject', () => {
-        component.selection = null;
 
-        fixture.detectChanges();
+        it('updates element once it is loaded', () => {
+            const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
+            spyOn(directive, 'updateElement').and.stub();
 
-        component.selection = [];
+            const nodes = [{}, {}];
+            const change = new SimpleChange([], nodes, false);
+            directive.ngOnChanges({ nodes: change });
 
-        fixture.detectChanges();
+            expect(directive.updateElement).toHaveBeenCalled();
+        });
 
-        expect(element.nativeElement.disabled).toEqual(true);
+        it('updates element on nodes change', () => {
+            const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
+            spyOn(directive, 'updateElement').and.stub();
+
+            const nodes = [{}, {}];
+            const change = new SimpleChange([], nodes, false);
+            directive.ngOnChanges({ nodes: change });
+
+            expect(directive.updateElement).toHaveBeenCalled();
+        });
+
+        it('updates element only on subsequent change', () => {
+            const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
+            spyOn(directive, 'updateElement').and.stub();
+
+            const nodes = [{}, {}];
+            const change = new SimpleChange([], nodes, true);
+            directive.ngOnChanges({ nodes: change });
+
+            expect(directive.updateElement).not.toHaveBeenCalled();
+        });
+
+        it('enables decorated element', () => {
+            const renderer = jasmine.createSpyObj('renderer', ['removeAttribute']);
+            const elementRef = new ElementRef({});
+            const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
+
+            directive.enableElement();
+
+            expect(renderer.removeAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled');
+        });
+
+        it('disables decorated element', () => {
+            const renderer = jasmine.createSpyObj('renderer', ['setAttribute']);
+            const elementRef = new ElementRef({});
+            const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
+
+            directive.disableElement();
+
+            expect(renderer.setAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled', 'true');
+        });
+
+        it('disables element when nodes not available', () => {
+            const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
+            spyOn(directive, 'disableElement').and.stub();
+
+            directive.nodes = null;
+            expect(directive.updateElement()).toBeFalsy();
+
+            directive.nodes = [];
+            expect(directive.updateElement()).toBeFalsy();
+        });
+
+        it('enables element when all nodes have expected permission', () => {
+            const contentService = new ContentService(null, null, null, null);
+            spyOn(contentService, 'hasPermission').and.returnValue(true);
+
+            const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
+            spyOn(directive, 'enableElement').and.stub();
+
+            directive.nodes = <any> [{}, {}];
+
+            expect(directive.updateElement()).toBeTruthy();
+            expect(directive.enableElement).toHaveBeenCalled();
+        });
+
+        it('disables element when one of the nodes have no permission', () => {
+            const contentService = new ContentService(null, null, null, null);
+            spyOn(contentService, 'hasPermission').and.returnValue(false);
+
+            const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
+            spyOn(directive, 'disableElement').and.stub();
+
+            directive.nodes = <any> [{}, {}];
+
+            expect(directive.updateElement()).toBeFalsy();
+            expect(directive.disableElement).toHaveBeenCalled();
+        });
     });
 
-    it('enables element when all nodes have expected permission', () => {
+    describe('Angular component as subject', () => {
-        spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
 
-        component.selection = null;
+        it('disables decorated component', () => {
+            const contentService = new ContentService(null, null, null, null);
+            spyOn(contentService, 'hasPermission').and.returnValue(false);
+            spyOn(changeDetectorMock, 'detectChanges');
 
-        fixture.detectChanges();
+            let testComponent = new TestComponent();
+            testComponent.disabled = false;
+            const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
+            directive.nodes = <any> [{}, {}];
 
-        component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
+            directive.updateElement();
 
-        fixture.detectChanges();
+            expect(testComponent.disabled).toBeTruthy();
+            expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
+        });
 
-        expect(element.nativeElement.disabled).toEqual(false);
+        it('enables decorated component', () => {
-    });
+            const contentService = new ContentService(null, null, null, null);
+            spyOn(contentService, 'hasPermission').and.returnValue(true);
+            spyOn(changeDetectorMock, 'detectChanges');
 
-    it('disables element when one of the nodes have no permission', () => {
+            let testComponent = new TestComponent();
-        spyOn(alfrescoContentService, 'hasPermission').and.returnValue(false);
+            testComponent.disabled = true;
+            const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
+            directive.nodes = <any> [{}, {}];
 
-        component.selection = null;
+            directive.updateElement();
 
-        fixture.detectChanges();
+            expect(testComponent.disabled).toBeFalsy();
-
+            expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
-        component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
+        });
-
-        fixture.detectChanges();
-
-        expect(element.nativeElement.disabled).toEqual(true);
     });
 });

lib/core/directives/node-permission.directive.ts

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2,  SimpleChanges } from '@angular/core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import { ContentService } from './../services/content.service';
+import { EXTENDIBLE_COMPONENT } from './../interface/injection.tokens';
 
 export interface NodePermissionSubject {
     disabled: boolean;
@@ -29,13 +30,19 @@ export interface NodePermissionSubject {
 export class NodePermissionDirective implements OnChanges {
 
     @Input('adf-node-permission')
-    permission: string = null;
+    permission: string  = null;
 
     @Input('adf-nodes')
     nodes: MinimalNodeEntity[] = [];
 
     constructor(private elementRef: ElementRef,
-                private contentService: ContentService) {
+                private renderer: Renderer2,
+                private contentService: ContentService,
+                private changeDetector: ChangeDetectorRef,
+
+                @Host()
+                @Optional()
+                @Inject(EXTENDIBLE_COMPONENT) private parentComponent?: NodePermissionSubject) {
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -45,17 +52,57 @@ export class NodePermissionDirective implements OnChanges {
     }
 
     /**
-     * Updates disabled state for the decorated element
+     * Updates disabled state for the decorated elememtn
+     *
+     * @returns {boolean} True if decorated element got disabled, otherwise False
+     * @memberof NodePermissionDirective
+     */
+    updateElement(): boolean {
+        let enable = this.hasPermission(this.nodes, this.permission);
+
+        if (enable) {
+            this.enable();
+        } else {
+            this.disable();
+        }
+
+        return enable;
+    }
+
+    private enable(): void {
+        if (this.parentComponent) {
+            this.parentComponent.disabled = false;
+            this.changeDetector.detectChanges();
+        } else {
+            this.enableElement();
+        }
+    }
+
+    private disable(): void {
+        if (this.parentComponent) {
+            this.parentComponent.disabled = true;
+            this.changeDetector.detectChanges();
+        } else {
+            this.disableElement();
+        }
+    }
+
+    /**
+     * Enables decorated element
      *
      * @memberof NodePermissionDirective
      */
-    updateElement(): void {
+    enableElement(): void {
-        let hasPermission = this.hasPermission(this.nodes, this.permission);
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
-        this.setDisableAttribute(!hasPermission);
     }
 
-    private setDisableAttribute(disable: boolean) {
+    /**
-        this.elementRef.nativeElement.disabled = disable;
+     * Disables decorated element
+     *
+     * @memberof NodePermissionDirective
+     */
+    disableElement(): void {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
     }
 
     /**
@@ -73,5 +120,4 @@ export class NodePermissionDirective implements OnChanges {
 
         return false;
     }
-
 }