[AAE-4430] Upload from local tab visibility with info icon error message (#6592)

* [AAE-4430] Upload from local tab visibility with info icon error message

* Fix restore deleted site e2e

e2e/content-services/directives/restore-content-directive.e2e.ts

@@ -287,10 +287,7 @@ describe('Restore content directive', () => {
 
             await browser.sleep(browser.params.testConfig.timeouts.index_search);
 
-            await navigationBarPage.navigateToContentServices();
+            await navigationBarPage.goToSite(publicSite);
-            await contentServicesPage.waitForTableBody();
-
-            await contentServicesPage.selectSite(publicSite.entry.title);
             await contentServicesPage.waitForTableBody();
             await contentServicesPage.checkContentIsDisplayed(siteFolder.entry.name);
             await contentServicesPage.openFolder(siteFolder.entry.name);

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

@@ -33,8 +33,14 @@
             </adf-content-node-selector-panel>
     </mat-tab>
     <mat-tab *ngIf="canPerformLocalUpload()"
-             label="{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}"
              [disabled]="isNotAllowedToUpload()">
+        <ng-template mat-tab-label>
+            {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
+            <mat-icon *ngIf="hasUploadError()"
+                      data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
+                      matTooltip="{{ getWarningMessage() | translate }}">info
+            </mat-icon>
+        </ng-template>
         <adf-upload-drag-area [rootFolderId]="currentDirectoryId">
             <div class="adf-upload-dialog-container">
                 <adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
@@ -53,16 +59,6 @@
                 [disabled]="isNotAllowedToUpload()"
                 (error)="onError($event)">
             </adf-upload-button>
-            <ng-container>
-                <div class="adf-content-node-upload-button-warning-message" *ngIf="showingSearch">
-                    <mat-icon>warning</mat-icon>
-                    <span>{{ 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE' | translate }}</span>
-                </div>
-                <div class="adf-content-node-upload-button-warning-message" *ngIf="(!hasAllowableOperations && !showingSearch) && !isLoading">
-                    <mat-icon>warning</mat-icon>
-                    <span>{{ 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE' | translate }}</span>
-                </div>
-            </ng-container>
         </ng-container>
     </div>
     <div>

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

@@ -86,13 +86,4 @@
             }
         }
     }
-
-    .adf-content-node-upload-button-warning-message {
-        margin-left: 20px;
-        display: flex;
-        font-size: 12px;
-        mat-icon {
-            font-size: 16px;
-        }
-    }
 }

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

@@ -284,10 +284,13 @@ describe('ContentNodeSelectorComponent', () => {
             selectTabByIndex(1);
 
             fixture.detectChanges();
-            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const infoMatIcon = fixture.debugElement.query(By.css('[data-automation-id="adf-content-node-selector-disabled-tab-info-icon"]'));
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
 
-            expect(warningMessage).not.toBeNull();
+            const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE';
-            expect(warningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE');
+
+            expect(component.getWarningMessage()).toEqual(expectedMessage);
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message if it is not in search mode', () => {
@@ -339,10 +342,12 @@ describe('ContentNodeSelectorComponent', () => {
             selectTabByIndex(1);
 
             fixture.detectChanges();
-            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const infoMatIcon = fixture.debugElement.query(By.css('[data-automation-id="adf-content-node-selector-disabled-tab-info-icon"]'));
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
+            const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE';
 
-            expect(warningMessage).not.toBeNull();
+            expect(component.getWarningMessage()).toEqual(expectedMessage);
-            expect(warningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE');
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message while loading documents', () => {

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

@@ -146,4 +146,17 @@ export class ContentNodeSelectorComponent implements OnInit {
         return this.data?.showLocalUploadButton;
     }
 
+    getWarningMessage(): string {
+        return this.showingSearch ? 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE' :
+            (this.hasNoPermissionToUpload() ? 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE' : '');
+    }
+
+    hasNoPermissionToUpload(): boolean {
+        return (!this.hasAllowableOperations && !this.showingSearch) && !this.isLoading;
+    }
+
+    hasUploadError(): boolean {
+        return this.showingSearch || this.hasNoPermissionToUpload();
+    }
+
 }