[ADF-5247] always enabled language picker (via extensions) (#1730)

* always enabled language picker

* fix tests

* update e2e tests

* fix aos plugin

docs/extending/rules.md

@@ -166,7 +166,6 @@ The button will be visible only when the linked rule evaluates to `true`.
 | 1.8.0 | canManagePermissions                | Checks if user can manage permissions for the selected node.             |
 | 1.8.0 | canToggleEditOffline                | Checks if user can toggle **Edit Offline** mode for selected node.       |
 | 1.8.0 | user.isAdmin                        | Checks if user is admin.                                                 |
-| 1.9.0 | app.canShowLanguagePicker           | Whether language picker menu should be present or not.                   |
 | 1.9.0 | app.canShowLogout                   | Whether logout action should be present or not.                          |
 | 1.12.0 | app.isLibraryManager               | Checks if user is library manager.                                       |
 

docs/getting-started/internationalization.md

@@ -123,19 +123,3 @@ Now, if you run the application and click the "New > Create Folder" menu,
 the title of the dialog should look like the following:
 
 ![](../images/aca-i18n-01.png)
-
-## Language picker
-
-You can enable internal language picker in the `app.config.json` file:
-
-```json
-{
-    ...,
-
-    "languagePicker": true,
-
-    ...
-}
-```
-
-![](../images/aca-i18n-02.png)

docs/ja/getting-started/internationalization.md

@@ -124,19 +124,3 @@ ADF リソースの翻訳を提供することもできます。
 ダイアログのタイトルは次のようになります:
 
 ![](../images/aca-i18n-01.png)
-
-## 言語ピッカー
-
-`app.config.json` ファイルで内部言語ピッカーを有効にできます:
-
-```json
-{
-    ...,
-
-    "languagePicker": true,
-
-    ...
-}
-```
-
-![](../images/aca-i18n-02.png)

e2e/suites/authentication/logout.test.ts

@@ -43,8 +43,8 @@ describe('Logout', () => {
   });
 
   it('[C213143] Sign out option is available', async () => {
-    await page.header.userInfo.openMenu();
+    await page.header.openMoreMenu();
-    expect(await page.header.isSignOutDisplayed()).toBe(true, 'Sign out option not displayed');
+    expect(await page.header.menu.isMenuItemPresent('Sign out')).toBe(true, 'Sign out option not displayed');
   });
 
   it('[C213144] redirects to Login page on sign out', async () => {

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

@@ -483,24 +483,6 @@ describe('app.evaluators', () => {
     });
   });
 
-  describe('canShowLanguagePicker', () => {
-    it('should return true when property is true', () => {
-      const context: any = {
-        languagePicker: true
-      };
-
-      expect(app.canShowLanguagePicker(context)).toBe(true);
-    });
-
-    it('should return false when property is false', () => {
-      const context: any = {
-        languagePicker: false
-      };
-
-      expect(app.canShowLanguagePicker(context)).toBe(false);
-    });
-  });
-
   describe('canShowLogout', () => {
     it('should return false when `withCredentials` property is true', () => {
       const context: any = {

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

@@ -28,7 +28,6 @@ import * as navigation from './navigation.rules';
 import * as repository from './repository.rules';
 
 export interface AcaRuleContext extends RuleContext {
-  languagePicker: boolean;
   withCredentials: boolean;
 }
 
@@ -457,15 +456,6 @@ export function canToggleFavorite(context: RuleContext): boolean {
   ].every(Boolean);
 }
 
-/**
- * Checks if application should render language picker menu.
- * JSON ref: `canShowLanguagePicker`
- * @param context Rule execution context
- */
-export function canShowLanguagePicker(context: AcaRuleContext): boolean {
-  return context.languagePicker;
-}
-
 /**
  * Checks if application should render logout option.
  * JSON ref: `canShowLogout`

projects/aca-shared/src/lib/services/app.extension.service.ts

@@ -27,7 +27,7 @@ import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { AppStore, getRuleContext, getLanguagePickerState } from '@alfresco/aca-shared/store';
+import { AppStore, getRuleContext } from '@alfresco/aca-shared/store';
 import {
   SelectionState,
   NavigationState,
@@ -102,7 +102,6 @@ export class AppExtensionService implements RuleContext {
   profile: ProfileState;
   repository: RepositoryInfo;
   withCredentials: boolean;
-  languagePicker: boolean;
 
   references$: Observable<ExtensionRef[]>;
 
@@ -125,10 +124,6 @@ export class AppExtensionService implements RuleContext {
       this.profile = result.profile;
       this.repository = result.repository;
     });
-
-    this.store.select(getLanguagePickerState).subscribe((result) => {
-      this.languagePicker = result;
-    });
   }
 
   async load() {

projects/aca-shared/src/lib/testing/lib-testing-module.ts

@@ -47,7 +47,6 @@ export const initialState = {
     headerColor: '#ffffff',
     logoPath: 'assets/images/alfresco-logo-white.svg',
     headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
-    languagePicker: false,
     sharedUrl: '',
     user: {
       isAdmin: null,

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

@@ -32,7 +32,6 @@ export const getHeaderColor = createSelector(selectApp, (state) => state.headerC
 export const getAppName = createSelector(selectApp, (state) => state.appName);
 export const getLogoPath = createSelector(selectApp, (state) => state.logoPath);
 export const getHeaderImagePath = createSelector(selectApp, (state) => state.headerImagePath);
-export const getLanguagePickerState = createSelector(selectApp, (state) => state.languagePicker);
 export const getUserProfile = createSelector(selectApp, (state) => state.user);
 export const getCurrentFolder = createSelector(selectApp, (state) => state.navigation.currentFolder);
 export const getCurrentVersion = createSelector(selectApp, (state) => state.currentNodeVersion);

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

@@ -31,7 +31,6 @@ export interface AppState {
   headerColor: string;
   logoPath: string;
   headerImagePath: string;
-  languagePicker: boolean;
   sharedUrl: string;
   currentNodeVersion: VersionEntry;
   selection: SelectionState;

projects/aca-testing-shared/src/components/header/header.ts

@@ -56,10 +56,6 @@ export class Header extends Component {
     await this.menu.waitForMenuToClose();
   }
 
-  async isSignOutDisplayed(): Promise<boolean> {
-    return this.userInfo.menu.isMenuItemPresent('Sign out');
-  }
-
   async isSidenavExpanded(): Promise<boolean> {
     return browser.isElementPresent(by.css(`[data-automation-id='expanded']`));
   }

projects/aca-testing-shared/src/pages/browsing-page.ts

@@ -36,7 +36,8 @@ export class BrowsingPage extends Page {
   pagination = new Pagination(this.appRoot);
 
   async signOut(): Promise<void> {
-    await this.header.userInfo.signOut();
+    await this.header.openMoreMenu();
+    await this.header.menu.clickMenuItem('Sign out');
   }
 
   async clickPersonalFiles(): Promise<void> {

src/app/app.component.spec.ts

@@ -46,12 +46,6 @@ describe('AppComponent', () => {
     }
   };
 
-  const storageMock: any = {
-    getItem(): string {
-      return '';
-    }
-  };
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule.withRoutes([{ path: 'fake-path', children: [] }])]
@@ -59,7 +53,7 @@ describe('AppComponent', () => {
 
     router = TestBed.inject(Router);
 
-    component = new AppComponent(null, router, null, storeMock, configMock, null, null, null, null, null, null, null, storageMock, null);
+    component = new AppComponent(null, router, null, storeMock, configMock, null, null, null, null, null, null, null, null);
 
     storeMock.dispatch = jasmine.createSpy('dispatch');
   });

src/app/app.component.ts

@@ -30,8 +30,7 @@ import {
   FileUploadErrorEvent,
   PageTitleService,
   UploadService,
-  SharedLinksApiService,
+  SharedLinksApiService
-  StorageService
 } from '@alfresco/adf-core';
 import { GroupService } from '@alfresco/adf-content-services';
 import { Component, OnInit, OnDestroy } from '@angular/core';
@@ -75,7 +74,6 @@ export class AppComponent implements OnInit, OnDestroy {
     private contentApi: ContentApiService,
     private appService: AppService,
     private sharedLinksApiService: SharedLinksApiService,
-    private storage: StorageService,
     private groupService: GroupService
   ) {}
 
@@ -161,7 +159,6 @@ export class AppComponent implements OnInit, OnDestroy {
 
     const state: AppState = {
       ...INITIAL_APP_STATE,
-      languagePicker: this.storage.getItem('languagePicker') === 'true',
       appName: this.config.get<string>('application.name'),
       headerColor: this.config.get<string>('headerColor'),
       logoPath: this.config.get<string>('application.logo'),

src/app/components/common/language-picker/language-picker.component.ts

@@ -29,6 +29,7 @@ import { Component } from '@angular/core';
   selector: 'aca-language-picker',
   template: `
     <button mat-menu-item [matMenuTriggerFor]="langMenu">
+      <mat-icon>language</mat-icon>
       {{ 'APP.LANGUAGE' | translate }}
     </button>
     <mat-menu #langMenu="matMenu">

src/app/components/common/logout/logout.component.ts

@@ -31,7 +31,8 @@ import { AppStore, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
   selector: 'aca-logout',
   template: `
     <button mat-menu-item (click)="onLogoutEvent()" adf-logout>
-      {{ 'APP.SIGN_OUT' | translate }}
+      <mat-icon>exit_to_app</mat-icon>
+      <span>{{ 'APP.SIGN_OUT' | translate }}</span>
     </button>
   `
 })

src/app/components/current-user/current-user.component.spec.ts

@@ -28,7 +28,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { AppState, SetUserProfileAction, SetSettingsParameterAction } from '@alfresco/aca-shared/store';
+import { AppState, SetUserProfileAction } from '@alfresco/aca-shared/store';
 import { AppExtensionService } from '@alfresco/aca-shared';
 
 describe('CurrentUserComponent', () => {
@@ -82,17 +82,6 @@ describe('CurrentUserComponent', () => {
     });
   });
 
-  it('should set language picker state', (done) => {
-    fixture.detectChanges();
-
-    store.dispatch(new SetSettingsParameterAction({ name: 'languagePicker', value: true }));
-
-    component.languagePicker$.subscribe((languagePicker: boolean) => {
-      expect(languagePicker).toBe(true);
-      done();
-    });
-  });
-
   it('should set menu actions', () => {
     const actions: any[] = [
       {

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

@@ -27,7 +27,7 @@ import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { ProfileState, ContentActionRef } from '@alfresco/adf-extensions';
-import { AppStore, getUserProfile, getLanguagePickerState } from '@alfresco/aca-shared/store';
+import { AppStore, getUserProfile } from '@alfresco/aca-shared/store';
 import { AppExtensionService } from '@alfresco/aca-shared';
 
 @Component({
@@ -38,14 +38,12 @@ import { AppExtensionService } from '@alfresco/aca-shared';
 })
 export class CurrentUserComponent implements OnInit {
   profile$: Observable<ProfileState>;
-  languagePicker$: Observable<boolean>;
   actions: Array<ContentActionRef> = [];
 
   constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
 
   ngOnInit() {
     this.profile$ = this.store.select(getUserProfile);
-    this.languagePicker$ = this.store.select(getLanguagePickerState);
     this.actions = this.extensions.getUserActions();
   }
 

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

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

src/app/store/initial-state.ts

@@ -30,7 +30,6 @@ export const INITIAL_APP_STATE: AppState = {
   headerColor: '#ffffff',
   logoPath: 'assets/images/alfresco-logo-white.svg',
   headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
-  languagePicker: false,
   sharedUrl: '',
   user: {
     isAdmin: null,

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

@@ -37,7 +37,6 @@ import {
   SetRepositoryInfoAction,
   SetInfoDrawerStateAction,
   SetInfoDrawerMetadataAspectAction,
-  SetSettingsParameterAction,
   SetHeaderColorAction,
   SetCurrentNodeVersionAction
 } from '@alfresco/aca-shared/store';
@@ -50,9 +49,6 @@ export function appReducer(state: AppState = INITIAL_APP_STATE, action: Action):
     case AppActionTypes.SetInitialState:
       newState = Object.assign({}, (action as SetInitialStateAction).payload);
       break;
-    case AppActionTypes.SetSettingsParameter:
-      newState = handleSettingsUpdate(state, action as SetSettingsParameterAction);
-      break;
     case AppActionTypes.SetHeaderColor:
       newState = {
         ...state,
@@ -260,13 +256,3 @@ function updateRepositoryStatus(state: AppState, action: SetRepositoryInfoAction
   newState.repository = action.payload;
   return newState;
 }
-
-function handleSettingsUpdate(state: AppState, action: SetSettingsParameterAction): AppState {
-  const newState = { ...state };
-  const { payload } = action;
-
-  if (payload.name === 'languagePicker') {
-    newState.languagePicker = !!payload.value;
-  }
-  return newState;
-}

src/assets/app.extensions.json

@@ -9,26 +9,10 @@
   "$description": "Core application extensions and features",
   "$references": [
     "aos.plugin.json",
-    "app.header.json",
     "app.about.json",
     "app.settings.json"
   ],
 
-  "settings": [
-    {
-      "id": "app.settings",
-      "name": "APP.SETTINGS.APPLICATION-SETTINGS",
-      "parameters": [
-        {
-          "name": "Language Picker",
-          "key": "languagePicker",
-          "type": "boolean",
-          "value": false
-        }
-      ]
-    }
-  ],
-
   "rules": [
     {
       "id": "app.toolbar.favorite.canAdd",
@@ -63,6 +47,43 @@
   ],
 
   "features": {
+    "header": [
+      {
+        "id": "app.header.user",
+        "type": "custom",
+        "component": "app.user",
+        "order": 100
+      },
+      {
+        "id": "app.header.more",
+        "type": "menu",
+        "order": 10000,
+        "icon": "more_vert",
+        "title": "APP.ACTIONS.MORE",
+        "children": [
+          {
+            "id": "app.languagePicker",
+            "order": 100,
+            "type": "custom",
+            "component": "app.languagePicker"
+          },
+          {
+            "id": "logout.separator",
+            "type": "separator",
+            "order": 199
+          },
+          {
+            "id": "app.logout",
+            "order": 200,
+            "type": "custom",
+            "component": "app.logout",
+            "rules": {
+              "visible": "app.canShowLogout"
+            }
+          }
+        ]
+      }
+    ],
     "icons": [
       {
         "id": "adf:join_library",

src/assets/plugins/app.create.json

@@ -1,54 +0,0 @@
-{
-  "$schema": "../../../extension.schema.json",
-  "$id": "app.demo.create",
-  "$name": "app.demo.create",
-  "$version": "1.0.0",
-  "$vendor": "Alfresco Software, Ltd.",
-  "$license": "LGPL-3.0",
-  "$runtime": "1.5.0",
-  "$description": "Simple extension that provides custom entries for Create menu",
-
-  "features": {
-    "create": [
-      {
-        "id": "app.test.create1",
-        "order": 10,
-        "icon": "extension",
-        "title": "Custom Create",
-        "type": "menu",
-        "children": [
-          {
-            "id": "level1.1",
-            "icon": "extension",
-            "title": "Level 1.1"
-          },
-          {
-            "id": "level1.separator",
-            "type": "separator"
-          },
-          {
-            "id": "level1.2",
-            "icon": "extension",
-            "title": "Level 1.2",
-            "type": "menu",
-            "children": [
-              {
-                "id": "level2.1",
-                "icon": "extension",
-                "title": "Level 2.1"
-              }
-            ],
-            "rules": {
-              "enabled": "app.navigation.folder.canCreate"
-            }
-          }
-        ]
-      },
-      {
-        "id": "app.create.separator",
-        "order": 20,
-        "type": "separator"
-      }
-    ]
-  }
-}

src/assets/plugins/app.header.json

@@ -1,48 +0,0 @@
-{
-  "$schema": "../../../extension.schema.json",
-  "$id": "app.demo.header",
-  "$name": "app.demo.header",
-  "$version": "1.0.0",
-  "$vendor": "Alfresco Software, Ltd.",
-  "$license": "LGPL-3.0",
-  "$runtime": "1.5.0",
-  "$description": "Sample app header extension",
-
-  "features": {
-    "userActions": [
-      {
-        "id": "app.languagePicker",
-        "order": 100,
-        "type": "custom",
-        "component": "app.languagePicker",
-        "rules": {
-          "visible": "app.canShowLanguagePicker"
-        }
-      },
-      {
-        "id": "app.logout",
-        "order": 200,
-        "type": "custom",
-        "component": "app.logout",
-        "rules": {
-          "visible": "app.canShowLogout"
-        }
-      }
-    ],
-    "header": [
-      {
-        "id": "app.header.user",
-        "type": "custom",
-        "component": "app.user",
-        "order": 100
-      },
-      {
-        "id": "app.header.more",
-        "type": "menu",
-        "order": 10000,
-        "icon": "more_vert",
-        "title": "APP.ACTIONS.MORE"
-      }
-    ]
-  }
-}