[ADF-3794] Update individual rows without reloading DocumentList (#4213)

* reload table cells on node updates

* update unit tests

* update dynamic columns

* fix value type

* fix tests

* update code as per review

* update variable name

* test fixes, core automation service

* fix test

lib/content-services/document-list/components/library-name-column/library-name-column.component.ts

@@ -16,75 +16,112 @@
  */
 
 import {
-  Component,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  OnInit,
-  Input,
-  ElementRef
+    Component,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    OnInit,
+    Input,
+    ElementRef,
+    OnDestroy
 } from '@angular/core';
-import { NodeEntry } from '@alfresco/js-api';
+import { NodeEntry, Node, Site } from '@alfresco/js-api';
 import { ShareDataRow } from '../../data/share-data-row.model';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { BehaviorSubject, Subscription } from 'rxjs';
 
 @Component({
-  selector: 'adf-library-name-column',
-  template: `
-    <span title="{{ displayTooltip }}" (click)="onClick()">
-      {{ displayText }}
-    </span>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'adf-datatable-cell adf-datatable-link adf-library-name-column' }
+    selector: 'adf-library-name-column',
+    template: `
+        <span title="{{ displayTooltip$ | async }}" (click)="onClick()">
+            {{ displayText$ | async }}
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        class: 'adf-datatable-cell adf-datatable-link adf-library-name-column'
+    }
 })
-export class LibraryNameColumnComponent implements OnInit {
-  @Input()
-  context: any;
+export class LibraryNameColumnComponent implements OnInit, OnDestroy {
+    @Input()
+    context: any;
 
-  displayTooltip: string;
-  displayText: string;
-  node: NodeEntry;
+    displayTooltip$ = new BehaviorSubject<string>('');
+    displayText$ = new BehaviorSubject<string>('');
+    node: NodeEntry;
 
-  constructor(private element: ElementRef) {}
+    private sub: Subscription;
 
-  ngOnInit() {
-    this.node = this.context.row.node;
-    const rows: Array<ShareDataRow> = this.context.data.rows || [];
-    if (this.node && this.node.entry) {
-      this.displayText = this.makeLibraryTitle(this.node.entry, rows);
-      this.displayTooltip = this.makeLibraryTooltip(this.node.entry);
+    constructor(
+        private element: ElementRef,
+        private alfrescoApiService: AlfrescoApiService
+    ) {}
+
+    ngOnInit() {
+        this.updateValue();
+
+        this.sub = this.alfrescoApiService.nodeUpdated.subscribe(
+            (node: Node) => {
+                const row: ShareDataRow = this.context.row;
+                if (row) {
+                    const { entry } = row.node;
+
+                    if (entry === node) {
+                        row.node = { entry };
+                        this.updateValue();
+                    }
+                }
+            }
+        );
     }
-  }
 
-  onClick() {
-    this.element.nativeElement.dispatchEvent(
-      new CustomEvent('name-click', {
-        bubbles: true,
-        detail: {
-          node: this.node
+    protected updateValue() {
+        this.node = this.context.row.node;
+        const rows: Array<ShareDataRow> = this.context.data.rows || [];
+        if (this.node && this.node.entry) {
+            this.displayText$.next(
+                this.makeLibraryTitle(<any> this.node.entry, rows)
+            );
+            this.displayTooltip$.next(this.makeLibraryTooltip(this.node.entry));
         }
-      })
-    );
-  }
-
-  makeLibraryTooltip(library: any): string {
-    const { description, title } = library;
-
-    return description || title || '';
-  }
-
-  makeLibraryTitle(library: any, rows: Array<ShareDataRow>): string {
-    const entries = rows.map((r: ShareDataRow) => r.node.entry);
-    const { title, id } = library;
-
-    let isDuplicate = false;
-
-    if (entries) {
-      isDuplicate = entries.some((entry: any) => {
-        return entry.id !== id && entry.title === title;
-      });
     }
 
-    return isDuplicate ? `${title} (${id})` : `${title}`;
-  }
+    onClick() {
+        this.element.nativeElement.dispatchEvent(
+            new CustomEvent('name-click', {
+                bubbles: true,
+                detail: {
+                    node: this.node
+                }
+            })
+        );
+    }
+
+    makeLibraryTooltip(library: any): string {
+        const { description, title } = library;
+
+        return description || title || '';
+    }
+
+    makeLibraryTitle(library: Site, rows: Array<ShareDataRow>): string {
+        const entries = rows.map((row: ShareDataRow) => row.node.entry);
+        const { title, id } = library;
+
+        let isDuplicate = false;
+
+        if (entries) {
+            isDuplicate = entries.some((entry: any) => {
+                return entry.id !== id && entry.title === title;
+            });
+        }
+
+        return isDuplicate ? `${title} (${id})` : `${title}`;
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+    }
 }

lib/content-services/document-list/components/library-role-column/library-role-column.component.spec.ts

@@ -39,39 +39,59 @@ describe('LibraryNameColumnComponent', () => {
         component.context = {
             row: { node: { entry: { role: 'SiteManager' } } }
         };
+
+        let value = '';
+        component.displayText$.subscribe((val) => value = val);
+
         fixture.detectChanges();
-        expect(component.displayText).toBe('LIBRARY.ROLE.MANAGER');
+        expect(value).toBe('LIBRARY.ROLE.MANAGER');
     });
 
     it('should render Collaborator', () => {
         component.context = {
             row: { node: { entry: { role: 'SiteCollaborator' } } }
         };
+
+        let value = '';
+        component.displayText$.subscribe((val) => value = val);
+
         fixture.detectChanges();
-        expect(component.displayText).toBe('LIBRARY.ROLE.COLLABORATOR');
+        expect(value).toBe('LIBRARY.ROLE.COLLABORATOR');
     });
 
     it('should render Contributor', () => {
         component.context = {
             row: { node: { entry: { role: 'SiteContributor' } } }
         };
+
+        let value = '';
+        component.displayText$.subscribe((val) => value = val);
+
         fixture.detectChanges();
-        expect(component.displayText).toBe('LIBRARY.ROLE.CONTRIBUTOR');
+        expect(value).toBe('LIBRARY.ROLE.CONTRIBUTOR');
     });
 
     it('should render Consumer', () => {
         component.context = {
             row: { node: { entry: { role: 'SiteConsumer' } } }
         };
+
+        let value = '';
+        component.displayText$.subscribe((val) => value = val);
+
         fixture.detectChanges();
-        expect(component.displayText).toBe('LIBRARY.ROLE.CONSUMER');
+        expect(value).toBe('LIBRARY.ROLE.CONSUMER');
     });
 
     it('should not render text for unknown', () => {
         component.context = {
             row: { node: { entry: { role: 'ROLE' } } }
         };
+
+        let value = '';
+        component.displayText$.subscribe((val) => value = val);
+
         fixture.detectChanges();
-        expect(component.displayText).toBe('');
+        expect(value).toBe('');
     });
 });

lib/content-services/document-list/components/library-role-column/library-role-column.component.ts

@@ -15,44 +15,84 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    Input,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    OnDestroy
+} from '@angular/core';
+import { Subscription, BehaviorSubject } from 'rxjs';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Node, SiteEntry, Site } from '@alfresco/js-api';
+import { ShareDataRow } from '../../data/share-data-row.model';
 
 @Component({
-  selector: 'adf-library-role-column',
-  template: `
-    <span title="{{ displayText | translate }}">
-      {{ displayText | translate }}
-    </span>
-  `,
-  host: { class: 'adf-library-role-column' }
+    selector: 'adf-library-role-column',
+    template: `
+        <span title="{{ (displayText$ | async) | translate }}">
+            {{ (displayText$ | async) | translate }}
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-library-role-column' }
 })
-export class LibraryRoleColumnComponent implements OnInit {
-  @Input()
-  context: any;
+export class LibraryRoleColumnComponent implements OnInit, OnDestroy {
+    @Input()
+    context: any;
 
-  displayText: string;
+    displayText$ = new BehaviorSubject<string>('');
 
-  ngOnInit() {
-    const node = this.context.row.node;
-    if (node && node.entry) {
-      const role: string = node.entry.role;
-      switch (role) {
-        case 'SiteManager':
-          this.displayText = 'LIBRARY.ROLE.MANAGER';
-          break;
-        case 'SiteCollaborator':
-          this.displayText = 'LIBRARY.ROLE.COLLABORATOR';
-          break;
-        case 'SiteContributor':
-          this.displayText = 'LIBRARY.ROLE.CONTRIBUTOR';
-          break;
-        case 'SiteConsumer':
-          this.displayText = 'LIBRARY.ROLE.CONSUMER';
-          break;
-        default:
-          this.displayText = '';
-          break;
-      }
+    private sub: Subscription;
+
+    constructor(private api: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.updateValue();
+
+        this.sub = this.api.nodeUpdated.subscribe((node: Node) => {
+            const row: ShareDataRow = this.context.row;
+            if (row) {
+                const { entry } = row.node;
+
+                if (entry === node) {
+                    row.node = { entry };
+                    this.updateValue();
+                }
+            }
+        });
+    }
+
+    protected updateValue() {
+        const node: SiteEntry = this.context.row.node;
+        if (node && node.entry) {
+            const role: string = node.entry.role;
+            switch (role) {
+                case Site.RoleEnum.SiteManager:
+                    this.displayText$.next('LIBRARY.ROLE.MANAGER');
+                    break;
+                case Site.RoleEnum.SiteCollaborator:
+                    this.displayText$.next('LIBRARY.ROLE.COLLABORATOR');
+                    break;
+                case Site.RoleEnum.SiteContributor:
+                    this.displayText$.next('LIBRARY.ROLE.CONTRIBUTOR');
+                    break;
+                case Site.RoleEnum.SiteConsumer:
+                    this.displayText$.next('LIBRARY.ROLE.CONSUMER');
+                    break;
+                default:
+                    this.displayText$.next('');
+                    break;
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
     }
-  }
 }

lib/content-services/document-list/components/library-status-column/library-status-column.component.ts

@@ -15,42 +15,73 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Subscription, BehaviorSubject } from 'rxjs';
+import { Node, Site, SiteEntry } from '@alfresco/js-api';
+import { ShareDataRow } from '../../data/share-data-row.model';
 
 @Component({
-  selector: 'adf-library-status-column',
-  template: `
-    <span title="{{ displayText | translate }}">
-      {{ displayText | translate }}
-    </span>
-  `,
-  host: { class: 'adf-library-status-column' }
+    selector: 'adf-library-status-column',
+    template: `
+        <span title="{{ (displayText$ | async) | translate }}">
+            {{ (displayText$ | async) | translate }}
+        </span>
+    `,
+    host: { class: 'adf-library-status-column' }
 })
-export class LibraryStatusColumnComponent implements OnInit {
-  @Input()
-  context: any;
+export class LibraryStatusColumnComponent implements OnInit, OnDestroy {
+    @Input()
+    context: any;
 
-  displayText: string;
+    displayText$ = new BehaviorSubject<string>('');
 
-  ngOnInit() {
-    const node = this.context.row.node;
-    if (node && node.entry) {
-      const visibility: string = node.entry.visibility;
+    private sub: Subscription;
 
-      switch (visibility.toUpperCase()) {
-        case 'PUBLIC':
-          this.displayText = 'LIBRARY.VISIBILITY.PUBLIC';
-          break;
-        case 'PRIVATE':
-          this.displayText = 'LIBRARY.VISIBILITY.PRIVATE';
-          break;
-        case 'MODERATED':
-          this.displayText = 'LIBRARY.VISIBILITY.MODERATED';
-          break;
-        default:
-          this.displayText = 'UNKNOWN';
-          break;
-      }
+    constructor(private api: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.updateValue();
+
+        this.sub = this.api.nodeUpdated.subscribe((node: Node) => {
+            const row: ShareDataRow = this.context.row;
+            if (row) {
+                const { entry } = row.node;
+
+                if (entry === node) {
+                    row.node = { entry };
+                    this.updateValue();
+                }
+            }
+        });
+    }
+
+    protected updateValue() {
+        const node: SiteEntry = this.context.row.node;
+        if (node && node.entry) {
+            const visibility: string = node.entry.visibility;
+
+            switch (visibility) {
+                case Site.VisibilityEnum.PUBLIC:
+                    this.displayText$.next('LIBRARY.VISIBILITY.PUBLIC');
+                    break;
+                case Site.VisibilityEnum.PRIVATE:
+                    this.displayText$.next('LIBRARY.VISIBILITY.PRIVATE');
+                    break;
+                case Site.VisibilityEnum.MODERATED:
+                    this.displayText$.next('LIBRARY.VISIBILITY.MODERATED');
+                    break;
+                default:
+                    this.displayText$.next('UNKNOWN');
+                    break;
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
     }
-  }
 }

lib/content-services/document-list/components/name-column/name-column.component.ts

@@ -16,50 +16,81 @@
  */
 
 import {
-  Component,
-  Input,
-  OnInit,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  ElementRef
+    Component,
+    Input,
+    OnInit,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    ElementRef,
+    OnDestroy
 } from '@angular/core';
 import { NodeEntry } from '@alfresco/js-api';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Node } from '@alfresco/js-api';
+import { ShareDataRow } from '../../data/share-data-row.model';
 
 @Component({
-  selector: 'adf-name-column',
-  template: `
-    <span title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
-      {{ displayText }}
-    </span>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+    selector: 'adf-name-column',
+    template: `
+        <span title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
+            {{ displayText$ | async }}
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
 })
-export class NameColumnComponent implements OnInit {
-  @Input()
-  context: any;
+export class NameColumnComponent implements OnInit, OnDestroy {
+    @Input()
+    context: any;
 
-  displayText: string;
-  node: NodeEntry;
+    displayText$ = new BehaviorSubject<string>('');
+    node: NodeEntry;
 
-  constructor(private element: ElementRef) {}
+    private sub: Subscription;
 
-  ngOnInit() {
-    this.node = this.context.row.node;
-    if (this.node && this.node.entry) {
-      this.displayText = this.node.entry.name || this.node.entry.id;
+    constructor(private element: ElementRef, private alfrescoApiService: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.updateValue();
+
+        this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
+            const row: ShareDataRow = this.context.row;
+            if (row) {
+                const { entry } = row.node;
+
+                if (entry === node) {
+                    row.node = { entry };
+                    this.updateValue();
+                }
+            }
+        });
     }
-  }
 
-  onClick() {
-    this.element.nativeElement.dispatchEvent(
-      new CustomEvent('name-click', {
-        bubbles: true,
-        detail: {
-          node: this.node
+    protected updateValue() {
+        this.node = this.context.row.node;
+
+        if (this.node && this.node.entry) {
+            this.displayText$.next(this.node.entry.name || this.node.entry.id);
         }
-      })
-    );
-  }
+    }
+
+    onClick() {
+        this.element.nativeElement.dispatchEvent(
+            new CustomEvent('name-click', {
+                bubbles: true,
+                detail: {
+                    node: this.node
+                }
+            })
+        );
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+    }
 }