Add deployment modeling flags (#174)

* fix configuration

* fix config saving in only admin mode
fix some code analysis errors

* fix some code analysis errors

* enable editing deployment modeling props

* fixed compilation errors - new pattern fields

* use new auth port

Co-authored-by: Alex <[email protected]>

Author: lharzenetter

src/app/app.component.html

@@ -32,35 +32,35 @@
             <button *ngIf="!planqkUi" mat-menu-item routerLink="/user-info"> UserInfo </button>
             <button *ngIf="p.userHasPrivilege('USER_READ_ALL') | async" mat-menu-item routerLink="/admin"> Admin </button>
             <!-- <button mat-menu-item routerLink="/developer"> Developer </button> -->
-            <button *ngIf="!planqkUi" mat-menu-item (click)="openFeatureToggleDialog()">
+            <button *ngIf="showFeatureFlag" mat-menu-item (click)="openFeatureToggleDialog()">
               <span>Feature Toggles</span>
             </button>
-            <button mat-menu-item color="warn" (click)="logout()"> Logout </button>
+            <button mat-menu-item (click)="logout()"> Logout </button>
         </mat-menu>
     </div>
   </mat-toolbar>
 
   <nav mat-tab-nav-bar>
     <a mat-tab-link [routerLink]="'/' + pathConstants.patternLanguages"
-       routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
+       routerLinkActive="" #rla1="routerLinkActive" [active]="rla1.isActive">
       Pattern Languages
     </a>
     <a mat-tab-link [routerLink]="'/' + pathConstants.patternViews"
-       *patternAtlasUiShowOnFeature="UiFeatures.PATTERNVIEWS"
-       routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">
+       *patternAtlasUiShowOnFeature="UiFeatures.PATTERN_VIEWS"
+       routerLinkActive="" #rla2="routerLinkActive" [active]="rla2.isActive">
       Pattern Views
     </a>
     <a mat-tab-link [routerLink]="'/' + pathConstants.designModels"
        *patternAtlasUiShowOnFeature="UiFeatures.DESIGN_MODEL"
-       routerLinkActive #rla3="routerLinkActive" [active]="rla3.isActive">
+       routerLinkActive="" #rla3="routerLinkActive" [active]="rla3.isActive">
       Design Models
     </a>
-    <a mat-tab-link [routerLink]="'/candidate'" *patternAtlasUiShowOnFeature="UiFeatures.PATTERNCANDIDATE"
-       routerLinkActive #rla4="routerLinkActive" [active]="rla4.isActive">
+    <a mat-tab-link [routerLink]="'/candidate'" *patternAtlasUiShowOnFeature="UiFeatures.PATTERN_CANDIDATE"
+       routerLinkActive="" #rla4="routerLinkActive" [active]="rla4.isActive">
       Pattern Candidate
     </a>
     <a mat-tab-link [routerLink]="'/issue'" *patternAtlasUiShowOnFeature="UiFeatures.ISSUE"
-       routerLinkActive #rla5="routerLinkActive" [active]="rla5.isActive">
+       routerLinkActive="" #rla5="routerLinkActive" [active]="rla5.isActive">
       Issue
     </a>
   </nav>

src/app/app.component.ts

@@ -12,7 +12,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  */
 
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AuthenticationService } from './authentication/_services/authentication.service';
 import { PrivilegeService } from './authentication/_services/privilege.service';
 import { globals } from './globals';
@@ -23,7 +23,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ToasterService } from 'angular2-toaster';
 import { MatDialog } from '@angular/material/dialog';
 import { FeatureToggleDialogComponent } from './core/component/feature-toggle-dialog/feature-toggle-dialog.component';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UserRole } from './core/user-management';
 
 @Component({
   selector: 'pp-root',
@@ -41,13 +41,14 @@ export class AppComponent implements OnInit {
   readonly pathConstants = globals.pathConstants;
   loading = true;
   planqkUi = false;
+  showFeatureFlag = false;
+  private isAdmin: boolean;
 
   constructor(public auth: AuthenticationService,
               public p: PrivilegeService,
               private toasterService: ToasterService,
               private configService: PatternAtlasUiRepositoryConfigurationService,
-              private dialog: MatDialog,
-              private cdr: ChangeDetectorRef, private router: Router, private route: ActivatedRoute) {
+              private dialog: MatDialog) {
   }
 
   login() {
@@ -63,33 +64,42 @@ export class AppComponent implements OnInit {
       () => {
         this.loading = false;
         this.planqkUi = this.configService.configuration.features[UiFeatures.PLANQK_UI];
+        this.updateShowFeatureDialogFlag();
       },
       (error: HttpErrorResponse) => {
         this.loading = false;
         this.planqkUi = true;
-        if(error.status === globals.statusCodeNotFound){
+
+        if (error.status === globals.statusCodeNotFound) {
           this.configService.getDefaultConfiguration();
-        }
-        else if (this.configService.configuration.features[UiFeatures.SHOW_SETTINGS]) {
+        } else if (this.configService.configuration.features[UiFeatures.SHOW_SETTINGS]) {
           console.log('default values applied');
         }
+        this.updateShowFeatureDialogFlag();
       }
     );
     this.auth.user.subscribe(_user => {
       if (_user) {
+        this.isAdmin = _user.role == UserRole.ADMIN;
         this.userName = _user.name;
         this.loggedIn = true;
+        this.updateShowFeatureDialogFlag();
       } else {
         this.userName = null;
         this.loggedIn = false;
+        this.updateShowFeatureDialogFlag();
       }
     })
   }
 
   openFeatureToggleDialog() {
-    this.dialog.open(FeatureToggleDialogComponent).afterClosed().subscribe(() => {
+    this.dialog.open(FeatureToggleDialogComponent, { data: { isAdmin: this.isAdmin } }).afterClosed().subscribe(() => {
       // reload page to trigger ShowOnFeatureDirectives which use the ngOnInit lifecycle hook
       window.location.reload();
     });
   }
+
+  private updateShowFeatureDialogFlag() {
+    this.showFeatureFlag = !this.planqkUi || this.isAdmin;
+  }
 }

src/app/core/component/edit-url-dialog/edit-url-dialog.component.html

@@ -2,19 +2,29 @@ <h1 mat-dialog-title>Edit Title or Icon for {{data.pattern.name}}</h1>
 <div mat-dialog-content>
   <mat-form-field>
     <mat-label>Adjust Pattern Name</mat-label>
-    <input matInput placeholder={{data.pattern.name}} [(ngModel)]="data.name">
+    <input matInput placeholder={{data.pattern.name}} [(ngModel)]="data.pattern.name">
   </mat-form-field>
   <mat-form-field>
     <mat-label>Adjust Icon URL</mat-label>
-    <input matInput placeholder={{data.pattern.iconUrl}} [(ngModel)]="data.icon">
+    <input matInput placeholder={{data.pattern.iconUrl}} [(ngModel)]="data.pattern.iconUrl">
   </mat-form-field>
   <mat-form-field>
     <mat-label>Adjust Paper Reference</mat-label>
-    <input matInput placeholder={{data.pattern.patternRef}} [(ngModel)]="data.paperRef">
+    <input matInput placeholder={{data.pattern.paperRef}} [(ngModel)]="data.pattern.paperRef">
   </mat-form-field>
 
+  <div *patternAtlasUiShowOnFeature="UiFeatures.DEPLOYMENT_MODELLING">
+    <mat-checkbox [(ngModel)]="data.pattern.deploymentModelingBehaviorPattern">
+      Behavior Pattern
+    </mat-checkbox>
+    <br>
+    <mat-checkbox [(ngModel)]="data.pattern.deploymentModelingStructurePattern">
+      Component Pattern
+    </mat-checkbox>
+  </div>
+
 </div>
-<mat-dialog-actions align="end">
+<mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancel</button>
-  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
+  <button mat-button [mat-dialog-close]="data">Ok</button>
 </mat-dialog-actions>

src/app/core/component/edit-url-dialog/edit-url-dialog.component.ts

@@ -1,5 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { UiFeatures } from '../../directives/pattern-atlas-ui-repository-configuration.service';
+import Pattern from '../../model/hal/pattern.model';
 
 @Component({
   selector: 'pp-edit-url-dialog',
@@ -8,9 +10,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 })
 export class EditUrlDialogComponent {
 
+  readonly UiFeatures = UiFeatures;
+
   constructor(
     public dialogRef: MatDialogRef<EditUrlDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data) {
+    @Inject(MAT_DIALOG_DATA) public data: {
+      pattern: Pattern
+    }) {
   }
 
   onNoClick(): void {

src/app/core/component/feature-toggle-dialog/feature-toggle-dialog.component.html

@@ -2,34 +2,40 @@ <h1 mat-dialog-title>Enable or Disable Feature: </h1>
 <div mat-card-content>
   <input type="checkbox" [(ngModel)]="config.features.designModel" id="designModel" name="designModel"
          [checked]="config.features.designModel" (change)="toggleFeature(UiFeatures.DESIGN_MODEL, $event)"
-         [disabled]="!config.features.showSettings">
+         [disabled]="disabled()">
   <label for="designModel">Design Model</label>
   <br>
   <input type="checkbox" [(ngModel)]="config.features.issue"
          id="issue" name="issue"
          [checked]="config.features.issue"
-         [disabled]="!config.features.showSettings"
+         [disabled]="disabled()"
          (change)="toggleFeature(UiFeatures.ISSUE, $event)">
   <label for="issue">Issue</label>
   <br>
   <input type="checkbox" [(ngModel)]="config.features.patternCandidate" id="patternCandidate"
          name="patternCandidate"
          [checked]="config.features.patternCandidate"
-         [disabled]="!config.features.showSettings"
-         (change)="toggleFeature(UiFeatures.PATTERNCANDIDATE, $event)">
+         [disabled]="disabled()"
+         (change)="toggleFeature(UiFeatures.PATTERN_CANDIDATE, $event)">
   <label for="patternCandidate">Pattern Candidate</label>
   <br>
   <input type="checkbox" [(ngModel)]="config.features.patternViews" id="patternViews" name="patternViews"
          [checked]="config.features.patternViews"
-         [disabled]="!config.features.showSettings"
-         (change)="toggleFeature(UiFeatures.PATTERNVIEWS, $event)">
+         [disabled]="disabled()"
+         (change)="toggleFeature(UiFeatures.PATTERN_VIEWS, $event)">
   <label for="patternViews">Pattern Views</label>
   <br>
   <input type="checkbox" [(ngModel)]="config.features.editing" id="editing" name="editing"
          [checked]="config.features.editing"
-         [disabled]="!config.features.showSettings"
+         [disabled]="disabled()"
          (change)="toggleFeature(UiFeatures.EDITING, $event)">
-  <label for="patternViews">Editing</label>
+  <label for="editing">Editing</label>
+  <br>
+  <input type="checkbox" [(ngModel)]="config.features.deploymentModelling" id="deploymentModeling" name="deploymentModeling"
+         [checked]="config.features.deploymentModelling"
+         [disabled]="disabled()"
+         (change)="toggleFeature(UiFeatures.DEPLOYMENT_MODELLING, $event)">
+  <label for="deploymentModeling">Show Deployment Modeling settings</label>
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onCloseDialogClick()">Close</button>

src/app/core/component/feature-toggle-dialog/feature-toggle-dialog.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import {
   PatternAtlasUiConfiguration, PatternAtlasUiRepositoryConfigurationService, UiFeatures
 } from '../../directives/pattern-atlas-ui-repository-configuration.service';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { ToasterService } from 'angular2-toaster';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'pp-feature-toggle-dialog',
@@ -19,19 +19,24 @@ export class FeatureToggleDialogComponent implements OnInit {
   constructor(
     private http: HttpClient, private toasterService: ToasterService,
     private configService: PatternAtlasUiRepositoryConfigurationService,
-    public dialogRef: MatDialogRef<FeatureToggleDialogComponent>
+    public dialogRef: MatDialogRef<FeatureToggleDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { isAdmin: boolean }
   ) {
   }
 
+  public disabled(): boolean {
+    return !(this.config.features.showSettings || this.data.isAdmin);
+  }
+
   ngOnInit(): void {
     this.config = this.configService.configuration;
   }
 
   toggleFeature(feature: UiFeatures, event: Event): void {
-    if (this.config.features.showSettings) {
+    if (this.config.features.showSettings || this.data.isAdmin) {
       this.configService.applyConfig(feature, event.target['checked']).subscribe(
         () => this.toasterService.pop('success', 'Successfully updated the config!'),
-        (error: HttpErrorResponse) =>
+        () =>
           this.toasterService.pop(
             'error', 'Error while saving config!'
           )