Admin menu header consistency for system entries

4 files changed, 76 insertions, 57 deletions

diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 4b6fab6ed..15739f8d3 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -22,7 +22,24 @@ export class AdminComponent implements OnInit {
   }
 
   ngOnInit () {
-    const federationItems: TopMenuDropdownParam = {
+    this.buildOverviewItems()
+    this.buildFederationItems()
+    this.buildModerationItems()
+    this.buildConfigurationItems()
+    this.buildPluginItems()
+    this.buildSystemItems()
+  }
+
+  private buildOverviewItems () {
+    if (this.hasUsersRight()) {
+      this.menuEntries.push({ label: $localize`Users`, routerLink: '/admin/users' })
+    }
+  }
+
+  private buildFederationItems () {
+    if (!this.hasServerFollowRight()) return
+
+    this.menuEntries.push({
       label: $localize`Federation`,
       children: [
         {
@@ -41,8 +58,10 @@ export class AdminComponent implements OnInit {
           iconName: 'videos'
         }
       ]
-    }
+    })
+  }
 
+  private buildModerationItems () {
     const moderationItems: TopMenuDropdownParam = {
       label: $localize`Moderation`,
       children: []
@@ -55,6 +74,7 @@ export class AdminComponent implements OnInit {
         iconName: 'flag'
       })
     }
+
     if (this.hasVideoBlocklistRight()) {
       moderationItems.children.push({
         label: $localize`Video blocks`,
@@ -62,6 +82,7 @@ export class AdminComponent implements OnInit {
         iconName: 'cross'
       })
     }
+
     if (this.hasVideoCommentsRight()) {
       moderationItems.children.push({
         label: $localize`Video comments`,
@@ -69,6 +90,7 @@ export class AdminComponent implements OnInit {
         iconName: 'message-circle'
       })
     }
+
     if (this.hasAccountsBlocklistRight()) {
       moderationItems.children.push({
         label: $localize`Muted accounts`,
@@ -76,6 +98,7 @@ export class AdminComponent implements OnInit {
         iconName: 'user-x'
       })
     }
+
     if (this.hasServersBlocklistRight()) {
       moderationItems.children.push({
         label: $localize`Muted servers`,
@@ -84,71 +107,101 @@ export class AdminComponent implements OnInit {
       })
     }
 
-    if (this.hasUsersRight()) {
-      this.menuEntries.push({ label: $localize`Users`, routerLink: '/admin/users' })
-    }
-
-    if (this.hasServerFollowRight()) this.menuEntries.push(federationItems)
-    if (this.hasAbusesRight() || this.hasVideoBlocklistRight()) this.menuEntries.push(moderationItems)
+    if (moderationItems.children.length !== 0) this.menuEntries.push(moderationItems)
+  }
 
+  private buildConfigurationItems () {
     if (this.hasConfigRight()) {
       this.menuEntries.push({ label: $localize`Configuration`, routerLink: '/admin/config' })
     }
+  }
 
+  private buildPluginItems () {
     if (this.hasPluginsRight()) {
       this.menuEntries.push({ label: $localize`Plugins/Themes`, routerLink: '/admin/plugins' })
     }
+  }
+
+  private buildSystemItems () {
+    const systemItems: TopMenuDropdownParam = {
+      label: $localize`System`,
+      children: []
+    }
+
+    if (this.hasJobsRight()) {
+      systemItems.children.push({
+        label: $localize`Jobs`,
+        iconName: 'circle-tick',
+        routerLink: '/admin/system/jobs'
+      })
+    }
+
+    if (this.hasLogsRight()) {
+      systemItems.children.push({
+        label: $localize`Logs`,
+        iconName: 'playlists',
+        routerLink: '/admin/system/logs'
+      })
+    }
+
+    if (this.hasDebugRight()) {
+      systemItems.children.push({
+        label: $localize`Debug`,
+        iconName: 'cog',
+        routerLink: '/admin/system/debug'
+      })
+    }
 
-    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) {
-      this.menuEntries.push({ label: $localize`System`, routerLink: '/admin/system' })
+    if (systemItems.children.length !== 0) {
+      this.menuEntries.push(systemItems)
     }
   }
 
-  hasUsersRight () {
+  private hasUsersRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
   }
 
-  hasServerFollowRight () {
+  private hasServerFollowRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW)
   }
 
-  hasAbusesRight () {
+  private hasAbusesRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_ABUSES)
   }
 
-  hasVideoBlocklistRight () {
+  private hasVideoBlocklistRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
   }
 
-  hasAccountsBlocklistRight () {
+  private hasAccountsBlocklistRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)
   }
 
-  hasServersBlocklistRight () {
+  private hasServersBlocklistRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)
   }
 
-  hasConfigRight () {
+  private hasConfigRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_CONFIGURATION)
   }
 
-  hasPluginsRight () {
+  private hasPluginsRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_PLUGINS)
   }
 
-  hasLogsRight () {
+  private hasLogsRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_LOGS)
   }
 
-  hasJobsRight () {
+  private hasJobsRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
   }
 
-  hasDebugRight () {
+  private hasDebugRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG)
   }
 
-  hasVideoCommentsRight () {
+  private hasVideoCommentsRight () {
     return this.auth.getUser().hasRight(UserRight.SEE_ALL_COMMENTS)
   }
 }
diff --git a/client/src/app/+admin/system/system.component.html b/client/src/app/+admin/system/system.component.html
index 5385887b7..0680b43f9 100644
--- a/client/src/app/+admin/system/system.component.html
+++ b/client/src/app/+admin/system/system.component.html
@@ -1,11 +1 @@
-<div class="admin-sub-header">
-  <div class="admin-sub-nav">
-    <a *ngIf="hasJobsRight()" i18n routerLink="jobs" routerLinkActive="active">Jobs</a>
-
-    <a *ngIf="hasLogsRight()" i18n routerLink="logs" routerLinkActive="active">Logs</a>
-
-    <a *ngIf="hasDebugRight()" i18n routerLink="debug" routerLinkActive="active">Debug</a>
-  </div>
-</div>
-
 <router-outlet></router-outlet>
diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss
deleted file mode 100644
index 18858ac1c..000000000
--- a/client/src/app/+admin/system/system.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-.form-sub-title {
-  @include margin-right(30px);
-
-  flex-grow: 0;
-}
diff --git a/client/src/app/+admin/system/system.component.ts b/client/src/app/+admin/system/system.component.ts
index b544c2a97..b63160b86 100644
--- a/client/src/app/+admin/system/system.component.ts
+++ b/client/src/app/+admin/system/system.component.ts
@@ -1,24 +1,8 @@
 import { Component } from '@angular/core'
-import { UserRight } from '@shared/models'
-import { AuthService } from '@app/core'
 
 @Component({
   templateUrl: './system.component.html',
-  styleUrls: [ './system.component.scss' ]
+  styleUrls: []
 })
 export class SystemComponent {
-
-  constructor (private auth: AuthService) {}
-
-  hasLogsRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_LOGS)
-  }
-
-  hasJobsRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
-  }
-
-  hasDebugRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG)
-  }
 }