[ACA-2948] Add process services extension in settings page (#1374)

* [ACA-2948] Add toggle in settings page for process services extension

* [ACA-2948] Remove console log

* [ACA-2948] Fix import

projects/aca-shared/rules/src/app.rules.ts

@@ -30,6 +30,7 @@ import * as repository from './repository.rules';
 export interface AcaRuleContext extends RuleContext {
   languagePicker: boolean;
   withCredentials: boolean;
+  processServices: boolean;
 }
 
 /**
@@ -546,3 +547,12 @@ export function canShowLanguagePicker(context: AcaRuleContext): boolean {
 export function canShowLogout(context: AcaRuleContext): boolean {
   return !context.withCredentials;
 }
+
+/**
+ * Checks if application should render process services extension.
+ * JSON ref: `canShowProcessServices`
+ * @param context Rule execution context
+ */
+export function canShowProcessServices(context: AcaRuleContext): boolean {
+  return context.processServices;
+}

projects/aca-shared/store/src/actions/app.actions.ts

@@ -41,7 +41,8 @@ export enum AppActionTypes {
   ResetSelection = 'RESET_SELECTION',
   SetInfoDrawerState = 'SET_INFO_DRAWER_STATE',
   SetInfoDrawerMetadataAspect = 'SET_INFO_DRAWER_METADATA_ASPECT',
-  CloseModalDialogs = 'CLOSE_MODAL_DIALOGS'
+  CloseModalDialogs = 'CLOSE_MODAL_DIALOGS',
+  ToggleProcessServices = 'TOGGLE_PROCESS_SERVICES'
 }
 
 export class SetInitialStateAction implements Action {
@@ -113,3 +114,9 @@ export class SetRepositoryInfoAction implements Action {
 
   constructor(public payload: RepositoryInfo) {}
 }
+
+export class ToggleProcessServicesAction implements Action {
+  readonly type = AppActionTypes.ToggleProcessServices;
+
+  constructor(public payload: boolean) {}
+}

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -133,3 +133,8 @@ export const infoDrawerMetadataAspect = createSelector(
   selectApp,
   state => state.infoDrawerMetadataAspect
 );
+
+export const getProcessServicesState = createSelector(
+  selectApp,
+  state => state.processServices
+);

projects/aca-shared/store/src/states/app.state.ts

@@ -44,6 +44,7 @@ export interface AppState {
   showFacetFilter: boolean;
   documentDisplayMode: string;
   repository: RepositoryInfo;
+  processServices: boolean;
 }
 
 export interface AppStore {

src/app.config.json

@@ -27,6 +27,7 @@
   "sharedLinkDateTimePickerType": "date",
   "headerColor": "#1565c0",
   "languagePicker": true,
+  "processServices": true,
   "pagination": {
     "size": 25,
     "supportedPageSizes": [25, 50, 100]

src/app/app.component.ts

@@ -179,6 +179,7 @@ export class AppComponent implements OnInit, OnDestroy {
     const state: AppState = {
       ...INITIAL_APP_STATE,
       languagePicker: this.config.get<boolean>('languagePicker'),
+      processServices: this.config.get<boolean>('processServices'),
       appName: this.config.get<string>('application.name'),
       headerColor: this.config.get<string>('headerColor'),
       logoPath: this.config.get<string>('application.logo'),

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

@@ -87,11 +87,20 @@
       <mat-panel-title>Extensions</mat-panel-title>
     </mat-expansion-panel-header>
 
-    <mat-checkbox
+    <div class="aca-settings-extensions-list">
-      [ngModel]="aiExtensions$ | async"
+      <mat-checkbox
-      (change)="onToggleAiExtensions($event)"
+        [ngModel]="aiExtensions$ | async"
-    >
+        (change)="onToggleAiExtensions($event)"
-      Enable AI Extensions
+      >
-    </mat-checkbox>
+        Enable AI Extensions
+      </mat-checkbox>
+
+      <mat-checkbox
+        [ngModel]="psExtensions$ | async"
+        (change)="onTogglePsExtensions($event)"
+      >
+        Enable Process Services Extensions
+      </mat-checkbox>
+    </div>
   </mat-expansion-panel>
 </mat-accordion>

src/app/components/settings/settings.component.theme.scss

@@ -3,6 +3,11 @@
   $app-menu-height: 64px;
 
   .aca-settings {
+    &-extensions-list {
+      display: flex;
+      flex-direction: column;
+    }
+
     .settings-input {
       width: 50%;
     }

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

@@ -39,7 +39,8 @@ import {
   getHeaderColor,
   getAppName,
   getUserProfile,
-  getLanguagePickerState
+  getLanguagePickerState,
+  ToggleProcessServicesAction
 } from '@alfresco/aca-shared/store';
 import { ProfileState } from '@alfresco/adf-extensions';
 
@@ -65,6 +66,7 @@ export class SettingsComponent implements OnInit {
   headerColor$: Observable<string>;
   languagePicker$: Observable<boolean>;
   aiExtensions$: Observable<boolean>;
+  psExtensions$: Observable<boolean>;
 
   constructor(
     private store: Store<AppStore>,
@@ -87,6 +89,10 @@ export class SettingsComponent implements OnInit {
       this.storage.getItem('ai') === 'true'
     );
 
+    this.psExtensions$ = new BehaviorSubject(
+      this.storage.getItem('processServices') === 'true'
+    );
+
     this.form = this.fb.group({
       ecmHost: [
         '',
@@ -141,4 +147,9 @@ export class SettingsComponent implements OnInit {
   onToggleAiExtensions(event: MatCheckboxChange) {
     this.storage.setItem('ai', event.checked.toString());
   }
+
+  onTogglePsExtensions(event: MatCheckboxChange) {
+    this.storage.setItem('processServices', event.checked.toString());
+    this.store.dispatch(new ToggleProcessServicesAction(event.checked));
+  }
 }

src/app/extensions/core.extensions.module.ts

@@ -172,7 +172,8 @@ export class CoreExtensionsModule {
       'repository.isQuickShareEnabled': rules.hasQuickShareEnabled,
       'user.isAdmin': rules.isAdmin,
       'app.canShowLanguagePicker': rules.canShowLanguagePicker,
-      'app.canShowLogout': rules.canShowLogout
+      'app.canShowLogout': rules.canShowLogout,
+      'app.canShowProcessServices': rules.canShowProcessServices
     });
   }
 }

src/app/extensions/extension.service.ts

@@ -31,7 +31,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   AppStore,
   getRuleContext,
-  getLanguagePickerState
+  getLanguagePickerState,
+  getProcessServicesState
 } from '@alfresco/aca-shared/store';
 import { NodePermissionService } from '@alfresco/aca-shared';
 import {
@@ -110,6 +111,7 @@ export class AppExtensionService implements RuleContext {
   repository: RepositoryInfo;
   withCredentials: boolean;
   languagePicker: boolean;
+  processServices: boolean;
 
   references$: Observable<ExtensionRef[]>;
 
@@ -135,6 +137,10 @@ export class AppExtensionService implements RuleContext {
     this.store.select(getLanguagePickerState).subscribe(result => {
       this.languagePicker = result;
     });
+
+    this.store.select(getProcessServicesState).subscribe(result => {
+      this.processServices = result;
+    });
   }
 
   async load() {

src/app/store/initial-state.ts

@@ -54,7 +54,8 @@ export const INITIAL_APP_STATE: AppState = {
     status: <any>{
       isQuickShareEnabled: true
     }
-  }
+  },
+  processServices: false
 };
 
 export const INITIAL_STATE: AppStore = {

src/app/store/reducers/app.reducer.ts

@@ -37,7 +37,8 @@ import {
   SetSelectedNodesAction,
   SetRepositoryInfoAction,
   SetInfoDrawerStateAction,
-  SetInfoDrawerMetadataAspectAction
+  SetInfoDrawerMetadataAspectAction,
+  ToggleProcessServicesAction
 } from '@alfresco/aca-shared/store';
 import { INITIAL_APP_STATE } from '../initial-state';
 
@@ -92,6 +93,11 @@ export function appReducer(
     case SearchActionTypes.HideFilter:
       newState = hideSearchFilter(state);
       break;
+    case AppActionTypes.ToggleProcessServices:
+      newState = updateProcessServices(state, <ToggleProcessServicesAction>(
+        action
+      ));
+      break;
     default:
       newState = Object.assign({}, state);
   }
@@ -268,3 +274,12 @@ function updateRepositoryStatus(
   newState.repository = action.payload;
   return newState;
 }
+
+function updateProcessServices(
+  state: AppState,
+  action: ToggleProcessServicesAction
+) {
+  const newState = Object.assign({}, state);
+  newState.processServices = action.payload;
+  return newState;
+}