fix: improve configureSidenav configuration (#1221)

PR Close #1166

Author: tamazlykar

config-guide.md

@@ -221,20 +221,24 @@ You can set a type of comparing and ignoring VM tags, when changing service offe
 }
 ```
 
-### Configure Sidebar
-This configuration allows a user to set a list of left-sidebar sections. Configure possible if  property “allowReorderingSidebar” is true.
-For example, 
+### Configure Sidenav
+Allows you to predefine the order and visibility of menu items. The order of the menu items is determined by the order of the elements in the array. The VMS menu item can not be made invisible, the visibility property will be ignored.
+For configuration, you must specify all menu items and the "allowReorderingSidebar" parameter must be true.
+
+For example (default values),
 ```
-"configureSidebar": [
-  "vms",
-  "volumes",
-  "templates",
-  "sgs",
-  "events",
-  "ssh",
-  "accounts",
- "settings"
-]
+"allowReorderingSidebar": true,
+"configureSidenav": [
+    { "id": "VMS", "visible": true },
+    { "id": "VOLUMES", "visible": true },
+    { "id": "TEMPLATES", "visible": true },
+    { "id": "SNAPSHOTS", "visible": true },
+    { "id": "SGS", "visible": true },
+    { "id": "EVENTS", "visible": true },
+    { "id": "SSH", "visible": true },
+    { "id": "ACCOUNTS", "visible": true },
+    { "id": "SETTINGS", "visible": true }
+  ]
 ```
 
 ### Default First Day Of Week

src/app/core/components/sidenav/sidenav-routes.ts

@@ -1,6 +1,6 @@
 export interface NavigationItem {
   id: string;
-  enabled: boolean;
+  visible: boolean;
 }
 
 export interface SidenavRoute extends NavigationItem {
@@ -15,62 +15,62 @@ export const sidenavRoutes: Array<SidenavRoute> = [
     text: 'NAVIGATION_SIDEBAR.VMS',
     icon: 'mdi-cloud',
     id: 'VMS',
-    enabled: true
+    visible: true
   },
   {
     path: '/storage',
     text: 'NAVIGATION_SIDEBAR.STORAGE',
     icon: 'mdi-server',
     id: 'VOLUMES',
-    enabled: true
+    visible: true
   },
   {
     path: '/templates',
     text: 'NAVIGATION_SIDEBAR.IMAGES',
     icon: 'mdi-disk',
     id: 'TEMPLATES',
-    enabled: true
+    visible: true
   },  {
     path: '/snapshots',
     text: 'NAVIGATION_SIDEBAR.SNAPSHOTS',
     icon: 'mdi-camera',
     id: 'SNAPSHOTS',
-    enabled: true
+    visible: true
   },
   {
     path: '/security-group',
     text: 'NAVIGATION_SIDEBAR.FIREWALL_TEMPLATES',
     icon: 'mdi-security',
     id: 'SGS',
-    enabled: true
+    visible: true
   },
   {
     path: '/events',
     text: 'NAVIGATION_SIDEBAR.ACTIVITY_LOG',
     icon: 'mdi-calendar-text',
     id: 'EVENTS',
-    enabled: true
+    visible: true
   },
   {
     path: '/ssh-keys',
     text: 'NAVIGATION_SIDEBAR.SSH_KEYS',
     icon: 'mdi-key',
     id: 'SSH',
-    enabled: true
+    visible: true
   },
   {
     path: '/accounts',
     text: 'NAVIGATION_SIDEBAR.ACCOUNTS',
     icon: 'mdi-account',
     id: 'ACCOUNTS',
-    enabled: true
+    visible: true
   },
   {
     path: '/settings',
     text: 'NAVIGATION_SIDEBAR.SETTINGS',
     icon: 'mdi-settings',
     id: 'SETTINGS',
-    enabled: true
+    visible: true
   }
 ];
 
@@ -80,6 +80,6 @@ export const nonDraggableRoutes: Array<SidenavRoute> = [
     text: 'NAVIGATION_SIDEBAR.LOGOUT',
     icon: 'mdi-exit-to-app',
     id: 'LOGOUT',
-    enabled: true
+    visible: true
   }
 ];

src/app/core/components/sidenav/sidenav.component.html

@@ -43,36 +43,43 @@
     [dragulaModel]="routes"
   >
     <ng-container *ngFor="let route of routes">
-      <a
-        *ngIf="!editing && route.enabled"
-        class="navigation-link link-container"
-        [routerLink]="route.path"
-        routerLinkActive="link-active"
-        (click)="linkClick(route.path)"
-      >
-        <mat-icon [@linkSlide]="'in'" class="link-element" [ngClass]="route.icon"></mat-icon>
-        <div [@linkSlide]="'in'" class="link-element" [innerHTML]="route.text | translate"></div>
-      </a>
-      <div
-        *ngIf="editing"
-        class="drag navigation-link link-container"
-      >
-        <span
-          class="handle"
-          [@handleSlide]="'in'"
-        ></span>
-        <mat-checkbox
-          [(ngModel)]="route.enabled"
-          (change)="handleRouteChecked($event)"
-          [@handleSlide]="!editing ? 'in' : ''"
-        ></mat-checkbox>
-        <div class="link-element-edit" [innerHTML]="route.text | translate"></div>
-      </div>
+      <ng-container *ngIf="editing; then editMode else normalMode"></ng-container>
+
+      <ng-template #editMode>
+        <div class="drag navigation-link link-container">
+          <span
+            class="handle"
+            [@handleSlide]="'in'"
+          ></span>
+          <mat-checkbox
+            *ngIf="!isAlwaysVisible(route)"
+            [(ngModel)]="route.visible"
+            (change)="handleRouteChecked($event)"
+            [@handleSlide]="!editing ? 'in' : ''"
+          ></mat-checkbox>
+          <div class="link-element-edit" [innerHTML]="route.text | translate"></div>
+        </div>
+      </ng-template>
+
+      <ng-template #normalMode>
+        <a
+          *ngIf="route.visible || isAlwaysVisible(route)"
+          class="navigation-link link-container"
+          [routerLink]="route.path"
+          routerLinkActive="link-active"
+          (click)="linkClick(route.path)"
+        >
+          <mat-icon [@linkSlide]="'in'" class="link-element" [ngClass]="route.icon"></mat-icon>
+          <div [@linkSlide]="'in'" class="link-element" [innerHTML]="route.text | translate"></div>
+        </a>
+      </ng-template>
+
     </ng-container>
   </div>
+
   <ng-container *ngFor="let route of nonDraggableRoutes">
     <a
-      *ngIf="!editing && route.enabled"
+      *ngIf="!editing && route.visible"
       class="navigation-link link-container"
       [routerLink]="route.path"
       routerLinkActive="link-active"

src/app/core/components/sidenav/sidenav.component.ts

@@ -10,6 +10,7 @@ import { WithUnsubscribe } from '../../../utils/mixins/with-unsubscribe';
 import { transformHandle, transformLinks } from './sidenav-animations';
 import { NavigationItem, nonDraggableRoutes, SidenavRoute, sidenavRoutes } from './sidenav-routes';
 import { layoutActions, State, UserTagsActions, UserTagsSelectors } from '../../../root-store';
+import { SidenavRouteId } from '../../config';
 
 
 @Component({
@@ -98,6 +99,11 @@ export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDes
     this.hasChanges = true;
   }
 
+  public isAlwaysVisible(route: SidenavRoute): boolean {
+    const visibleRouteIds: SidenavRouteId[] = ['VMS'];
+    return visibleRouteIds.findIndex((id => id === route.id)) >= 0;
+  }
+
   private setUpDragula(): void {
     this.dragula.setOptions(this.dragulaContainerName, {
       moves: () => this.editing
@@ -122,7 +128,7 @@ export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDes
             this.routes.forEach((
               route,
               i
-            ) => route.enabled = (!this.canEdit || (this.canEdit && order[i].enabled)));
+            ) => route.visible = (!this.canEdit || (this.canEdit && order[i].visible)));
           }
       });
     } else {
@@ -136,21 +142,30 @@ export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDes
 
   public setUpRoutes() {
     if (this.canEdit) {
-      const defaultOrder = this.configService.get('configureSidebar');
-      if (defaultOrder) {
-        this.routes = this.routes.filter(route =>
-          defaultOrder.some(orderElement => orderElement.toUpperCase() === route.id));
-      }
+      const sidenavConfiguration = this.configService.get('configureSidenav');
+      const routesMap = this.getRoutesMap();
+      this.routes = sidenavConfiguration.map(confElement => {
+        const route = routesMap[confElement.id];
+        route.visible = confElement.visible;
+        return route;
+      });
     }
   }
 
+  private getRoutesMap(): { [id: string]: SidenavRoute } {
+    return this.routes.reduce((map, route) => {
+      map[route.id] = route;
+      return map;
+    }, {});
+  }
+
   private validateNavigationOrder(order: NavigationItem[]): boolean {
     if (order.length !== this.routes.length) {
       return false;
     }
 
     return order.every(el =>
-        el.enabled != null && el.id != null && !!this.routes.find(route => route.id === el.id));
+        el.visible != null && el.id != null && !!this.routes.find(route => route.id === el.id));
   }
 
   private navigationPredicate(order: NavigationItem[]) {
@@ -160,7 +175,7 @@ export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDes
 
   private stringifyMenuState(routes: NavigationItem[]): string {
     return routes
-      .map(el => `${el.id}:${+el.enabled}`)
+      .map(el => `${el.id}:${+el.visible}`)
       .join(';');
   }
 
@@ -169,10 +184,10 @@ export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDes
       .split(';')
       .filter(Boolean)
       .map((menuElement: string) => {
-        const [id, enabled] = menuElement.split(':');
+        const [id, visible] = menuElement.split(':');
         return {
           id,
-          enabled: enabled === '1'
+          visible: visible === '1'
         }
       });
   }

src/app/core/config/config-validation.service.ts

@@ -6,7 +6,7 @@ import * as AjvErrors from 'ajv-errors';
 import * as omit from 'lodash/omit';
 
 import { customizableProperties, defaultConfig } from './default-configuration';
-import { Config } from './config.interface';
+import { Config } from './interfaces';
 import * as validationSchemes from './validation-schemes';
 
 enum ErrorType {
@@ -66,7 +66,8 @@ export class ConfigValidationService {
     defaultInterfaceLanguage: validationSchemes.defaultInterfaceLanguage,
     defaultTimeFormat: validationSchemes.defaultTimeFormat,
     defaultThemeName: validationSchemes.defaultThemeName,
-    sessionTimeout: validationSchemes.sessionTimeout
+    sessionTimeout: validationSchemes.sessionTimeout,
+    configureSidenav: validationSchemes.configureSidenav,
   };
 
   constructor() {

src/app/core/config/config.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Config } from './config.interface';
+import { Config } from './interfaces';
 import { defaultConfig } from './default-configuration';