[ACA-1488] admin actions and settings (#496)

* restrict experimental settings to admins

* automatically edit new experimental flags

* extra menu items for admins

package-lock.json

@@ -10991,9 +10991,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
-      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
       "dev": true
     },
     "uglify-js": {

package.json

@@ -84,7 +84,7 @@
     "selenium-webdriver": "4.0.0-alpha.1",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.7.2",
+    "typescript": "^2.9.2",
     "wait-on": "2.1.0"
   }
 }

src/app/components/current-user/current-user.component.html

@@ -13,6 +13,18 @@
         {{ 'APP.LANGUAGE' | translate }}
     </button>
 
+    <button *ngIf="(profile$ | async)?.isAdmin"
+        mat-menu-item
+        routerLink="/about">
+        {{ 'APP.BROWSE.ABOUT.TITLE' | translate }}
+    </button>
+
+    <button *ngIf="(profile$ | async)?.isAdmin"
+        mat-menu-item
+        routerLink="/settings">
+        {{ 'APP.SETTINGS.TITLE' | translate }}
+    </button>
+
     <button mat-menu-item adf-logout>
         {{ 'APP.SIGN_OUT' | translate }}
     </button>

src/app/components/settings/settings.component.html

@@ -53,45 +53,17 @@
         </mat-checkbox>
     </mat-expansion-panel>
 
-    <mat-expansion-panel>
+    <mat-expansion-panel *ngIf="(profile$ | async)?.isAdmin">
         <mat-expansion-panel-header>
             <mat-panel-title>
                 {{ 'APP.SETTINGS.EXPERIMENTAL-FEATURES' | translate }}
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <div>
+        <div *ngFor="let flag of experimental">
             <mat-checkbox
-                [(ngModel)]="libraries"
-                (change)="onChangeLibrariesFeature($event)">
-                Library Management
-            </mat-checkbox>
-        </div>
-        <div>
-            <mat-checkbox
-                [(ngModel)]="comments"
-                (change)="onChangeCommentsFeature($event)">
-                Comments
-            </mat-checkbox>
-        </div>
-        <div>
-            <mat-checkbox
-                [(ngModel)]="cardview"
-                (change)="onChangeCardviewFeature($event)">
-                Cardview
-            </mat-checkbox>
-        </div>
-        <div>
-            <mat-checkbox
-                [(ngModel)]="share"
-                (change)="onChangeShareFeature($event)">
-                Share
-            </mat-checkbox>
-        </div>
-        <div>
-            <mat-checkbox
-                [(ngModel)]="extensions"
-                (change)="onChangeExtensionsFeature($event)">
-                Extensions
+                [(ngModel)]="flag.value"
+                (change)="onToggleExperimentalFeature(flag.key, $event)">
+                {{ flag.key }}
             </mat-checkbox>
         </div>
     </mat-expansion-panel>

src/app/components/settings/settings.component.ts

@@ -28,8 +28,8 @@ import { AppConfigService, StorageService, SettingsService } from '@alfresco/adf
 import { Validators, FormGroup, FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs/Rx';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states';
-import { appLanguagePicker, selectHeaderColor, selectAppName } from '../../store/selectors/app.selectors';
+import { AppStore, ProfileState } from '../../store/states';
+import { appLanguagePicker, selectHeaderColor, selectAppName, selectUser } from '../../store/selectors/app.selectors';
 import { MatCheckboxChange } from '@angular/material';
 import { SetLanguagePickerAction } from '../../store/actions';
 
@@ -45,14 +45,11 @@ export class SettingsComponent implements OnInit {
 
     form: FormGroup;
 
+    profile$: Observable<ProfileState>;
     appName$: Observable<string>;
     headerColor$: Observable<string>;
     languagePicker$: Observable<boolean>;
-    libraries: boolean;
-    comments: boolean;
-    cardview: boolean;
-    share: boolean;
-    extensions: boolean;
+    experimental: Array<{ key: string, value: boolean }> = [];
 
     constructor(
         private store: Store<AppStore>,
@@ -60,6 +57,7 @@ export class SettingsComponent implements OnInit {
         private settingsService: SettingsService,
         private storage: StorageService,
         private fb: FormBuilder) {
+            this.profile$ = store.select(selectUser);
             this.appName$ = store.select(selectAppName);
             this.languagePicker$ = store.select(appLanguagePicker);
             this.headerColor$ = store.select(selectHeaderColor);
@@ -76,20 +74,14 @@ export class SettingsComponent implements OnInit {
 
         this.reset();
 
-        const libraries = this.appConfig.get('experimental.libraries');
-        this.libraries = (libraries === true || libraries === 'true');
-
-        const comments = this.appConfig.get('experimental.comments');
-        this.comments = (comments === true || comments === 'true');
-
-        const cardview = this.appConfig.get('experimental.cardview');
-        this.cardview = (cardview === true || cardview === 'true');
-
-        const share = this.appConfig.get('experimental.share');
-        this.share = (share === true || share === 'true');
-
-        const extensions = this.appConfig.get('experimental.extensions');
-        this.extensions = (extensions === true || extensions === 'true');
+        const settings = this.appConfig.get('experimental');
+        this.experimental = Object.keys(settings).map(key => {
+            const value = this.appConfig.get(`experimental.${key}`);
+            return {
+                key,
+                value: (value === true || value === 'true')
+            };
+        });
     }
 
     apply(model: any, isValid: boolean) {
@@ -110,23 +102,7 @@ export class SettingsComponent implements OnInit {
         this.store.dispatch(new SetLanguagePickerAction(event.checked));
     }
 
-    onChangeLibrariesFeature(event: MatCheckboxChange) {
-        this.storage.setItem('experimental.libraries', event.checked.toString());
-    }
-
-    onChangeCommentsFeature(event: MatCheckboxChange) {
-        this.storage.setItem('experimental.comments', event.checked.toString());
-    }
-
-    onChangeCardviewFeature(event: MatCheckboxChange) {
-        this.storage.setItem('experimental.cardview', event.checked.toString());
-    }
-
-    onChangeShareFeature(event: MatCheckboxChange) {
-        this.storage.setItem('experimental.share', event.checked.toString());
-    }
-
-    onChangeExtensionsFeature(event: MatCheckboxChange) {
-        this.storage.setItem('experimental.extensions', event.checked.toString());
+    onToggleExperimentalFeature(key: string, event: MatCheckboxChange) {
+        this.storage.setItem(`experimental.${key}`, event.checked.toString());
     }
 }

src/assets/i18n/en.json

@@ -4,6 +4,7 @@
         "SIGN_IN": "Sign in",
         "SIGN_OUT": "Sign out",
         "SETTINGS": {
+            "TITLE": "Settings",
             "APPLICATION-SETTINGS": "Application Settings",
             "REPOSITORY-SETTINGS": "Repository Settings",
             "EXPERIMENTAL-FEATURES": "Experimental Features",