fix(admin-ui): Fix infinite loop hang on CollectionList page

Fixes #170

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

@@ -3,13 +3,13 @@
     class="tree-node"
     #dropList
     [cdkDropListData]="collectionTree"
-    [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
+    [cdkDropListDisabled]="!(hasUpdatePermission$ | async)"
     (cdkDropListDropped)="drop($event)"
 >
     <div
         class="collection"
         [class.private]="collection.isPrivate"
-        *ngFor="let collection of collectionTree.children; index as i"
+        *ngFor="let collection of collectionTree.children; index as i; trackBy: trackByFn"
         cdkDrag
         [cdkDragData]="collection"
     >
@@ -56,7 +56,7 @@
                     <button
                         type="button"
                         vdrDropdownItem
-                        [disabled]="i === 0 || !('UpdateCatalog' | hasPermission)"
+                        [disabled]="i === 0 || !(hasUpdatePermission$ | async)"
                         (click)="moveUp(collection, i)"
                     >
                         <clr-icon shape="caret up"></clr-icon>
@@ -66,7 +66,7 @@
                         type="button"
                         vdrDropdownItem
                         [disabled]="
-                            i === collectionTree.children.length - 1 || !('UpdateCatalog' | hasPermission)
+                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)
                         "
                         (click)="moveDown(collection, i)"
                     >
@@ -79,7 +79,7 @@
                         vdrDropdownItem
                         *ngFor="let item of getMoveListItems(collection)"
                         (click)="move(collection, item.id)"
-                        [disabled]="!('UpdateCatalog' | hasPermission)"
+                        [disabled]="!(hasUpdatePermission$ | async)"
                     >
                         <clr-icon shape="child-arrow"></clr-icon>
                         {{ item.path }}
@@ -89,7 +89,7 @@
                         class="button"
                         vdrDropdownItem
                         (click)="delete(collection.id)"
-                        [disabled]="!('DeleteCatalog' | hasPermission)"
+                        [disabled]="!(hasDeletePermission$ | async)"
                     >
                         <clr-icon shape="trash" class="is-danger"></clr-icon>
                         {{ 'common.delete' | translate }}

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts

@@ -1,5 +1,8 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { DataService } from '@vendure/admin-ui/src/app/data/providers/data.service';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
 
 import { Collection } from '../../../common/generated-types';
 
@@ -17,10 +20,13 @@ export class CollectionTreeNodeComponent implements OnInit {
     parentName: string;
     @Input() collectionTree: TreeNode<Collection.Fragment>;
     @Input() activeCollectionId: string;
+    hasUpdatePermission$: Observable<boolean>;
+    hasDeletePermission$: Observable<boolean>;
 
     constructor(
         @SkipSelf() @Optional() private parent: CollectionTreeNodeComponent,
         private root: CollectionTreeComponent,
+        private dataService: DataService,
     ) {
         if (parent) {
             this.depth = parent.depth + 1;
@@ -29,6 +35,16 @@ export class CollectionTreeNodeComponent implements OnInit {
 
     ngOnInit() {
         this.parentName = this.collectionTree.name || '<root>';
+        const permissions$ = this.dataService.client
+            .userStatus()
+            .mapStream(data => data.userStatus.permissions)
+            .pipe(shareReplay(1));
+        this.hasUpdatePermission$ = permissions$.pipe(map(perms => perms.includes('UpdateCatalog')));
+        this.hasDeletePermission$ = permissions$.pipe(map(perms => perms.includes('DeleteCatalog')));
+    }
+
+    trackByFn(index: number, item: Collection.Fragment) {
+        return item.id;
     }
 
     getMoveListItems(collection: Collection.Fragment): Array<{ path: string; id: string }> {