[AAE-5124] Show counter only when attaching files (#7011)

* [AAE-5124] Show counter only when attaching files

* Reset package-lock.json

* Add another unit test

* Fix unit test

docs/content-services/components/content-node-selector-panel.component.md

@@ -45,6 +45,7 @@ Opens a [Content Node Selector](content-node-selector.component.md)  in its own
 | showDropdownSiteList | `boolean` |  | Toggle sites list dropdown rendering |
 | showFilesInResult | `void` |  | Shows the files and folders in the search result |
 | showSearch | `boolean` |  | Toggle search input rendering |
+| showNodeCounter | `boolean` | false | Shows the node counter in the breadcrumb |
 
 ### Events
 

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -43,7 +43,7 @@
         </adf-search-panel>
         <div class="adf-content-node-selector-document-list-container">
     <adf-toolbar>
-        <adf-toolbar-title [adf-node-counter]="getSelectedCount()">
+        <adf-toolbar-title>
             <ng-container *ngIf="!showBreadcrumbs()">
                 <span role="heading" aria-level="3" class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</span>
             </ng-container>
@@ -57,6 +57,7 @@
                 [root]="breadcrumbFolderTitle"
                 data-automation-id="content-node-selector-content-breadcrumb">
             </adf-dropdown-breadcrumb>
+            <ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()"></ng-container>
         </adf-toolbar-title>
     </adf-toolbar>
 

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -1387,6 +1387,12 @@ describe('ContentNodeSelectorPanelComponent', () => {
 
                 expect(component.getSelectedCount()).toBe(0);
             });
+
+            it('should not render component input if `showNodeCounter` is false', () => {
+                component.showNodeCounter = false;
+                fixture.detectChanges();
+                expect(fixture.debugElement.nativeElement.querySelector('adf-node-counter')).toBe(null);
+            });
         });
     });
 });

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -76,6 +76,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
 
     private showSiteList = true;
     private showSearchField = true;
+    private showCounter = false;
 
     /** If true will restrict the search and breadcrumbs to the currentFolderId */
     @Input()
@@ -200,6 +201,16 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
         }
     }
 
+    /** Shows the node counter in the breadcrumb */
+    @Input()
+    set showNodeCounter(value: boolean) {
+        this.showCounter = value ?? false;
+    }
+
+    get showNodeCounter(): boolean {
+        return this.showCounter;
+    }
+
     /** Emitted when the user has chosen an item. */
     @Output()
     select: EventEmitter<Node[]> = new EventEmitter<Node[]>();

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -24,6 +24,7 @@
                 [showSearch]="data?.showSearch"
                 [showDropdownSiteList]="data?.showDropdownSiteList"
                 [showFilesInResult]="data?.showFilesInResult"
+                [showNodeCounter]="isCounterVisible()"
                 (currentFolder)="onCurrentFolder($event)"
                 (folderLoaded)="onFolderLoaded()"
                 (select)="onSelect($event)"
@@ -35,7 +36,7 @@
     <mat-tab *ngIf="canPerformLocalUpload()"
              [disabled]="isNotAllowedToUpload()">
         <adf-toolbar>
-            <adf-toolbar-title [adf-node-counter]="getSelectedCount()">
+            <adf-toolbar-title>
                 <adf-dropdown-breadcrumb
                     class="adf-content-node-selector-content-breadcrumb"
                     [folderNode]="breadcrumbFolderNode"
@@ -43,6 +44,7 @@
                     [readOnly]="true"
                     data-automation-id="content-node-selector-upload-breadcrumb"
                 ></adf-dropdown-breadcrumb>
+                <ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
             </adf-toolbar-title>
         </adf-toolbar>
         <ng-template mat-tab-label>

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -446,5 +446,23 @@ describe('ContentNodeSelectorComponent', () => {
 
             expect(component.getSelectedCount()).toBe(1);
         });
+
+        it('should show the counter depending on the action', () => {
+            component.action = 'ATTACH';
+            fixture.detectChanges();
+            expect(fixture.debugElement.nativeElement.querySelector('adf-node-counter')).not.toBe(null);
+
+            component.action = 'CHOOSE';
+            fixture.detectChanges();
+            expect(fixture.debugElement.nativeElement.querySelector('adf-node-counter')).not.toBe(null);
+
+            component.action = 'COPY';
+            fixture.detectChanges();
+            expect(fixture.debugElement.nativeElement.querySelector('adf-node-counter')).toBe(null);
+
+            component.action = 'MOVE';
+            fixture.detectChanges();
+            expect(fixture.debugElement.nativeElement.querySelector('adf-node-counter')).toBe(null);
+        });
     });
 });

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -111,6 +111,10 @@ export class ContentNodeSelectorComponent implements OnInit {
         return this.chosenNode?.length || 0;
     }
 
+    isCounterVisible(): boolean {
+        return this.action === 'ATTACH' || this.action === 'CHOOSE';
+    }
+
     isMultipleSelection(): boolean {
         return this.data.selectionMode === 'multiple';
     }