Add scopes to configuration menu (#203)

* Add scopes to menu

* remove logs

src/app/app-routing.module.ts

@@ -17,93 +17,85 @@ import { StepComponent } from './step/step-component/step.component';
 import { TerminalComponent } from './step/terminal/terminal.component';
 import { RolesComponent } from './configuration/roles/roles/roles.component';
 import { SessionStatisticsComponent } from './session-statistics/session-statistics.component';
-import {SettingsComponent} from './configuration/settings/settings.component';
+import { SettingsComponent } from './configuration/settings/settings.component';
 import { DashboardDetailsComponent } from './dashboards/dashboard-details/dashboard-details.component';
 
 const routes: Routes = [
-  {path: '', redirectTo: '/home', pathMatch: 'full'},
-  {path: 'login', component: LoginComponent},
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
   {
     path: 'home',
     component: HomeComponent,
-    canActivate: [
-      AuthGuard
-    ],
+    canActivate: [AuthGuard],
     children: [
       {
         path: 'statistics/sessions',
-        component: SessionStatisticsComponent
-      }
-    ]
+        component: SessionStatisticsComponent,
+      },
+    ],
   },
   {
     path: 'dashboards',
     component: DashboardsComponent,
-    canActivate: [
-      AuthGuard
-    ],
+    canActivate: [AuthGuard],
     children: [
       {
         path: 'event/:id',
-        component: DashboardDetailsComponent
-      }
-    ]
+        component: DashboardDetailsComponent,
+      },
+    ],
   },
   {
     path: 'events',
     component: EventComponent,
-    canActivate: [
-      AuthGuard
-    ]
+    canActivate: [AuthGuard],
   },
   {
     path: 'content',
     component: ContentComponent,
-    canActivate: [
-      AuthGuard
-    ],
+    canActivate: [AuthGuard],
     children: [
       {
         path: 'scenarios',
-        component: ScenarioComponent
+        component: ScenarioComponent,
       },
       {
         path: 'courses',
-        component: CourseComponent
-      }
-    ]
+        component: CourseComponent,
+      },
+    ],
   },
   {
     path: 'users',
     component: UserComponent,
-    canActivate: [
-      AuthGuard
-    ]
+    canActivate: [AuthGuard],
   },
   {
     path: 'configuration',
     component: ConfigurationComponent,
-    canActivate: [
-      AuthGuard
-    ],
+    canActivate: [AuthGuard],
     children: [
+      {
+        path: 'settings/:scope',
+        component: SettingsComponent,
+      },
       {
         path: 'settings',
-        component: SettingsComponent
+        component: SettingsComponent,
       },
       {
         path: 'environments',
-        component: EnvironmentsComponent
+        component: EnvironmentsComponent,
       },
       {
         path: 'vmtemplates',
-        component: VmtemplatesComponent
+        component: VmtemplatesComponent,
       },
       {
         path: 'roles',
-        component: RolesComponent
-      }
-    ]
+        component: RolesComponent,
+      },
+    ],
   },
   {
     path: 'session/:session/steps/:step',
@@ -113,14 +105,12 @@ const routes: Routes = [
   {
     path: 'scenario/:scenario/printable',
     component: PrintableComponent,
-    canActivate: [
-      AuthGuard
-    ]
-  }
+    canActivate: [AuthGuard],
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/configuration/configuration.component.html

@@ -2,13 +2,6 @@
   <header class="header header-7" app-header></header>
   <div class="content-container">
     <clr-vertical-nav>
-      <a
-        clrVerticalNavLink
-        routerLink="./settings"
-        routerLinkActive="active"
-        *ngIf="showSettings"
-        >Settings</a
-      >
       <a
         clrVerticalNavLink
         routerLink="./environments"
@@ -30,6 +23,25 @@
         *ngIf="listRoles"
         >Roles</a
       >
+
+      <clr-vertical-nav-group routerLinkActive="active">
+        <a routerLink="./settings" hidden aria-hidden="true"></a>
+        Settings
+        <clr-vertical-nav-group-children
+          #activeChildren
+          *clrIfExpanded="expandedSettingsGroup"
+        >
+          <a
+            *ngFor="let scope of scopes"
+            clrVerticalNavLink
+            [routerLink]="['./settings/', scope.name]"
+            routerLinkActive="active"
+            [title]="scope.displayName"
+          >
+            {{ scope.displayName }}
+          </a>
+        </clr-vertical-nav-group-children>
+      </clr-vertical-nav-group>
     </clr-vertical-nav>
     <div class="content-area">
       <router-outlet></router-outlet>

src/app/configuration/configuration.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { RbacService } from '../data/rbac.service';
 import { Router } from '@angular/router';
+import {
+  PreparedScope,
+  TypedSettingsService,
+} from '../data/typedSettings.service';
 
 @Component({
   selector: 'app-configuration',
@@ -12,7 +16,15 @@ export class ConfigurationComponent implements OnInit {
   public listVMTemplates = false;
   public listRoles = false;
 
-  constructor(private rbacService: RbacService, private router: Router) {}
+  public scopes: PreparedScope[] = [];
+  public scopesLoading: boolean = true;
+  public expandedSettingsGroup = true;
+
+  constructor(
+    private rbacService: RbacService,
+    private router: Router,
+    private typedSettingsService: TypedSettingsService
+  ) {}
 
   ngOnInit() {
     const authorizationRequests = Promise.all([
@@ -31,15 +43,19 @@ export class ConfigurationComponent implements OnInit {
         this.listRoles = permissions[4];
 
         if (this.showSettings) {
-          this.router.navigateByUrl(`/configuration/settings`);
-        } else if (this.listEnvironments) {
-          this.router.navigateByUrl(`/configuration/environments`);
-        } else if (this.listVMTemplates) {
-          this.router.navigateByUrl(`/configuration/vmtemplates`);
-        } else if (this.listRoles) {
-          this.router.navigateByUrl(`/configuration/roles`);
+          this.getScopes();
         }
       }
     );
   }
+
+  getScopes() {
+    this.scopes = [];
+    this.typedSettingsService.listScopes().subscribe({
+      next: (scopes: PreparedScope[]) => {
+        this.scopes = scopes;
+        this.scopesLoading = false;
+      },
+    });
+  }
 }

src/app/configuration/environments/edit-environment/edit-environment.component.ts

@@ -81,7 +81,6 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
       .Grants('virtualmachinetemplates', 'list')
       .then((allowVMTemplateList: boolean) => {
         if (!allowVMTemplateList) {
-          console.log('Disallow');
           return;
         }
         vmTemplateService

src/app/configuration/environments/environment-detail/environment-detail.component.ts

@@ -29,7 +29,6 @@ export class EnvironmentDetailComponent implements OnInit {
       .Grants('virtualmachinetemplates', 'list')
       .then((allowVMTemplateList: boolean) => {
         if (!allowVMTemplateList) {
-          console.log("Disallow")
           return;
         }
         vmTemplateService

src/app/configuration/settings/settings.component.html

@@ -2,64 +2,34 @@
   <div class="clr-col">
     <h3>
       Settings
-      <span class="scope">{{ this.selectedScope?.displayName ?? "scope" }}</span>
+      <span class="scope">{{
+        this.selectedScope?.displayName ?? "scope"
+      }}</span>
     </h3>
   </div>
 </div>
-<alert #alert></alert>
-<ng-container *ngIf="scopesLoading">
+<clr-alert #alert [(clrAlertClosed)]="alertClosed"></clr-alert>
+
+<button class="btn" (click)="onSubmit()" [disabled]="!hasChanges || !valid">
+  Save Changes
+</button>
+<ng-container *ngIf="loading">
   <div>
     <span class="spinner spinner-inline"> Please wait... </span>
-    <span> Scopes are being loaded... </span>
+    <span> Settings are being loaded... </span>
   </div>
 </ng-container>
-<ng-container *ngIf="!scopesLoading">
-  <clr-dropdown>
-    <b><label>Scope</label></b>
-    <button
-      class="dropdown-toggle btn btn-link"
-      clrDropdownTrigger
-      [disabled]="scopes.length == 0"
-    >
-      <span *ngIf="!this.selectedScope">Select Scope</span>
-      <span *ngIf="this.selectedScope">{{
-        this.selectedScope.displayName
-      }}</span>
-      <cds-icon shape="angle" direction="down"></cds-icon>
-    </button>
-
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-      <clr-row
-        *ngFor="let sc of scopes"
-        clrDropdownItem
-        (click)="setScope(sc)"
-        [ngClass]="{ selected: this.selectedScope == sc }"
-      >
-        {{ sc.displayName }}
-      </clr-row>
-    </clr-dropdown-menu>
-  </clr-dropdown>
-  <button class="btn" (click)="onSubmit()" [disabled]="!hasChanges || !valid">
-    Save Changes
-  </button>
-  <ng-container *ngIf="loading">
-    <div>
-      <span class="spinner spinner-inline"> Please wait... </span>
-      <span> Settings are being loaded... </span>
-    </div>
-  </ng-container>
-  <ng-container *ngIf="!loading">
-    <app-typed-form
-      *ngIf="settings.length > 0"
-      [typedInputs]="settings"
-      (syncedInputs)="onFormChange($event)"
-      (inputsValid)="changeFormValidity($event)"
-      [groupType]="FormGroupType.TABS"
-    ></app-typed-form>
-    <div *ngIf="settings.length == 0">
-      No settings available for scope
-      <code>{{ this.selectedScope.displayName }}</code
-      >.
-    </div>
-  </ng-container>
+<ng-container *ngIf="!loading">
+  <app-typed-form
+    *ngIf="settings.length > 0"
+    [typedInputs]="settings"
+    (syncedInputs)="onFormChange($event)"
+    (inputsValid)="changeFormValidity($event)"
+    [groupType]="FormGroupType.TABS"
+  ></app-typed-form>
+  <div *ngIf="settings.length == 0">
+    No settings available for scope
+    <code>{{ this.selectedScope.displayName }}</code
+    >.
+  </div>
 </ng-container>