Add alert and hide upload view when no upload is possible (#2966)

* Add alert and hide upload view when no upload is possible

* Add about instance link to alert

* Hide videos and imports links when no upload is possible

* Correct curly spacing lint

* Put logic canUpload to User model + add isHidden param to to-menu-dropdown

* Use canSeeVideoLinks from user model

* Rename and change logic canUpload to isUploadDisabled

* Use isDisplayed() method intead of isHidden value

* Refactor client and check videos count using quota

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Chocobozzz <me@florianbigard.com>

2 files changed, 27 insertions, 13 deletions

diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index c737b40c7..530b9e376 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,9 +1,9 @@
 <div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
+    <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
       #dropdown="ngbDropdown" autoClose="outside">
       <span
         *ngIf="isInSmallView"
@@ -25,11 +25,15 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }" [routerLink]="menuChild.routerLink">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+        <ng-container *ngFor="let menuChild of menuEntry.children">
+          <a *ngIf="isDisplayed(menuChild)" class="dropdown-item"
+            [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }"
+            [routerLink]="menuChild.routerLink">
+            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
-          {{ menuChild.label }}
-        </a>
+            {{ menuChild.label }}
+          </a>
+        </ng-container>
       </div>
     </div>
   </ng-container>
@@ -39,13 +43,15 @@
   <div class="modal-body">
     <ng-container *ngFor="let menuEntry of menuEntries; index as id">
       <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
-        <a *ngFor="let menuChild of menuEntry.children"
-          [ngClass]="{ icon: hasIcons }"
-          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+        <ng-container *ngFor="let menuChild of menuEntry.children">
+          <a *ngIf="isDisplayed(menuChild)"
+            [ngClass]="{ icon: hasIcons }"
+            [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
-          {{ menuChild.label }}
-        </a>
+            {{ menuChild.label }}
+          </a>
+        </ng-container>
       </div>
     </ng-container>
   </div>
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
index 66f8f7e55..c3cd22307 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -9,12 +9,14 @@ import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export type TopMenuDropdownParam = {
   label: string
   routerLink?: string
+  isDisplayed?: () => boolean // Default: () => true
 
   children?: {
     label: string
     routerLink: string
-
     iconName?: GlobalIconName
+
+    isDisplayed?: () => boolean // Default: () => true
   }[]
 }
 
@@ -92,6 +94,12 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.modalService.dismissAll()
   }
 
+  isDisplayed (obj: { isDisplayed?: () => boolean }) {
+    if (typeof obj.isDisplayed !== 'function') return true
+
+    return obj.isDisplayed()
+  }
+
   private updateChildLabels (path: string) {
     this.suffixLabels = {}