[ACA-4262] Content node selector - show 2 tabs only in cloud attach f…

…ile widget (#6578)
Alfresco · Jan 26, 2021 · 099bec6 · 099bec6
1 parent 06b041f
commit 099bec6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
@@ -4,7 +4,10 @@
     <h2>{{title}}</h2>
 </header>
 
-<mat-tab-group class="adf-content-node-selector-dialog-content" (selectedIndexChange)="onTabSelectionChange($event)" mat-align-tabs="start">
+<mat-tab-group class="adf-content-node-selector-dialog-content"
+               mat-align-tabs="start"
+               (selectedIndexChange)="onTabSelectionChange($event)"
+               [class.adf-content-node-selector-headless-tabs]="!canPerformLocalUpload()">
     <mat-tab label="{{ 'NODE_SELECTOR.FILE_SERVER' | translate }}">
             <adf-content-node-selector-panel
                 [currentFolderId]="data?.currentFolderId"
@@ -29,15 +32,15 @@ <h2>{{title}}</h2>
                 (navigationChange)="onNavigationChange($event)">
             </adf-content-node-selector-panel>
     </mat-tab>
-    <mat-tab *ngIf="data?.showLocalUploadButton"
+    <mat-tab *ngIf="canPerformLocalUpload()"
              label="{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}"
              [disabled]="isNotAllowedToUpload()">
     </mat-tab>
 </mat-tab-group>
 
 <mat-dialog-actions>
-    <div *ngIf="isLocalUploadTabSelected()">
-        <ng-container *ngIf="data?.showLocalUploadButton">
+    <div>
+        <ng-container *ngIf="isUploadEnabled()">
             <adf-upload-button
                 [staticTitle]="'FORM.FIELD.UPLOAD' | translate "
                 [multipleFiles]="isMultipleSelection()"

diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -3,6 +3,14 @@
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    adf-content-node-selector {
+        .adf-content-node-selector-headless-tabs {
+            .mat-tab-header {
+                display: none;
+            }
+        }
+    }
+
     .adf-content-node-selector-dialog {
         &-content {
             padding-left: 24px;

diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
@@ -371,5 +371,21 @@ describe('ContentNodeSelectorComponent', () => {
 
             expect(component.isLocalUploadTabSelected()).toEqual(true);
         });
+
+        it('should tabs be headless when local upload is not enabled', () => {
+           component.data.showLocalUploadButton = false;
+           fixture.detectChanges();
+           const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-headless-tabs'))[0];
+
+           expect(tabGroup).not.toBe(undefined);
+        });
+
+        it('should tabs show headers when local upload is enabled', () => {
+            component.data.showLocalUploadButton = true;
+            fixture.detectChanges();
+            const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-headless-tabs'))[0];
+
+            expect(tabGroup).toBe(undefined);
+        });
     });
 });
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts
@@ -137,4 +137,13 @@ export class ContentNodeSelectorComponent implements OnInit {
     isLocalUploadTabSelected (): boolean {
         return this.selectedTabIndex === 1;
     }
+
+    isUploadEnabled(): boolean {
+        return this.canPerformLocalUpload() && this.isLocalUploadTabSelected();
+    }
+
+    canPerformLocalUpload(): boolean {
+        return this.data?.showLocalUploadButton;
+    }
+
 }