[ACS-5143] Tree component expand/collapse fix (#8528)

* [ACS-5143] Tree component expand/collapse fix

* [ACS-5143] Remove extra empty space

lib/content-services/src/lib/tree/components/tree.component.html

@@ -51,8 +51,7 @@
                 <div class="adf-tree-expand-collapse-container">
                     <button *ngIf="node.hasChildren"
                         class="adf-tree-expand-collapse-button"
-                        mat-icon-button
+                        mat-icon-button>
-                        matTreeNodeToggle>
                         <mat-progress-spinner
                             color="primary"
                             mode="indeterminate"

lib/content-services/src/lib/tree/components/tree.component.spec.ts

@@ -172,6 +172,16 @@ describe('TreeComponent', () => {
         expect(getNodesSpy).toHaveBeenCalledWith('-root-', 0, 25, 'some term');
     });
 
+    it('should not collapse node when loading', () => {
+        component.refreshTree();
+        component.treeService.treeNodes[0].isLoading = true;
+        fixture.detectChanges();
+        const collapseSpy = spyOn(component.treeService, 'collapseNode');
+        spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(true);
+        getNodeSpinner(component.treeService.treeNodes[0].id).dispatchEvent(new Event('click'));
+        expect(collapseSpy).not.toHaveBeenCalled();
+    });
+
     it('should call correct server method on collapsing node', () => {
         component.refreshTree();
         component.treeService.treeNodes[0].isLoading = false;
@@ -182,8 +192,19 @@ describe('TreeComponent', () => {
         expect(collapseSpy).toHaveBeenCalledWith(component.treeService.treeNodes[0]);
     });
 
+    it('should not expand node when loading', () => {
+        component.refreshTree();
+        component.treeService.treeNodes[0].isLoading = true;
+        fixture.detectChanges();
+        const expandSpy = spyOn(component.treeService, 'expandNode');
+        spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(false);
+        getNodeSpinner(component.treeService.treeNodes[0].id).dispatchEvent(new Event('click'));
+        expect(expandSpy).not.toHaveBeenCalled();
+    });
+
     it('should call correct server method on expanding node', () => {
         component.refreshTree();
+        component.treeService.treeNodes[0].isLoading = false;
         fixture.detectChanges();
         const collapseSpy = spyOn(component.treeService, 'expandNode');
         spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(false);

lib/content-services/src/lib/tree/components/tree.component.ts

@@ -201,7 +201,7 @@ export class TreeComponent<T extends TreeNode> implements OnInit, OnDestroy {
      * @param node node to be collapsed/expanded
      */
     public expandCollapseNode(node: T): void {
-        if (node.hasChildren) {
+        if (node.hasChildren && !node.isLoading) {
             if (this.treeService.treeControl.isExpanded(node)) {
                 this.treeService.collapseNode(node);
             } else {

lib/content-services/src/lib/tree/services/tree.service.spec.ts

@@ -50,8 +50,10 @@ describe('TreeService', () => {
         const treeNodesMockCopy = Array.from(treeNodesMock);
         service.treeNodes = treeNodesMockCopy;
         const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
+        const treeControlExpandSpy = spyOn(service.treeControl, 'expand');
         service.expandNode(treeNodesMockCopy[0], Array.from(treeNodesChildrenMock));
         expect(nodesSourceSpy).toHaveBeenCalled();
+        expect(treeControlExpandSpy).toHaveBeenCalledWith(treeNodesMockCopy[0]);
         expect(service.treeNodes.length).toEqual(treeNodesMockCopy.length);
     });
 
@@ -59,8 +61,10 @@ describe('TreeService', () => {
         const treeNodesMockExpandedCopy = Array.from(treeNodesMockExpanded);
         service.treeNodes = treeNodesMockExpandedCopy;
         const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
+        const treeControlCollapseSpy = spyOn(service.treeControl, 'collapse');
         service.collapseNode(treeNodesMockExpandedCopy[0]);
         expect(nodesSourceSpy).toHaveBeenCalled();
+        expect(treeControlCollapseSpy).toHaveBeenCalledWith(treeNodesMockExpandedCopy[0]);
         expect(service.treeNodes.length).toEqual(treeNodesMock.length);
     });
 
@@ -75,16 +79,20 @@ describe('TreeService', () => {
     it('should not expand node without children', () => {
         service.treeNodes = Array.from(treeNodesNoChildrenMock);
         const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
+        const treeControlExpandSpy = spyOn(service.treeControl, 'expand');
         service.expandNode(Array.from(treeNodesNoChildrenMock)[0], []);
         expect(nodesSourceSpy).not.toHaveBeenCalled();
+        expect(treeControlExpandSpy).not.toHaveBeenCalled();
         expect(service.treeNodes.length).toEqual(treeNodesNoChildrenMock.length);
     });
 
     it('should not collapse node without children', () => {
         service.treeNodes = Array.from(treeNodesNoChildrenMock);
         const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
+        const treeControlCollapseSpy = spyOn(service.treeControl, 'collapse');
         service.collapseNode(Array.from(treeNodesNoChildrenMock)[0]);
         expect(nodesSourceSpy).not.toHaveBeenCalled();
+        expect(treeControlCollapseSpy).not.toHaveBeenCalled();
         expect(service.treeNodes.length).toEqual(treeNodesNoChildrenMock.length);
     });
 

lib/content-services/src/lib/tree/services/tree.service.ts

@@ -52,6 +52,7 @@ export abstract class TreeService<T extends TreeNode> extends DataSource<T>  {
      */
     public expandNode(nodeToExpand: T, subNodes: T[]): void {
         if (nodeToExpand != null && subNodes != null && nodeToExpand.hasChildren) {
+            this.treeControl.expand(nodeToExpand);
             const index: number = this.treeNodes.indexOf(nodeToExpand);
             this.treeNodes.splice(index + 1, 0, ...subNodes);
             nodeToExpand.isLoading = false;
@@ -66,6 +67,7 @@ export abstract class TreeService<T extends TreeNode> extends DataSource<T>  {
      */
     public collapseNode(nodeToCollapse: T): void {
         if (nodeToCollapse != null && nodeToCollapse.hasChildren) {
+            this.treeControl.collapse(nodeToCollapse);
             const children: T[] = this.treeNodes.filter((node: T) => nodeToCollapse.id === node.parentId);
             children.forEach((child: T) => {
                 this.collapseInnerNode(child);