[ADF-4159] DemoShell - add nested menu on ProcessCloud (#4385)

* [ADF-4159] DemoShell - add nested menu on ProcessCloud

* [ADF-4159] DemoShell - fix e2e tests

* [ADF-4159] DemoShell fix typo

* [ADF-4159] - fix e2e lint

* [ADF-4159] - change app nested menu for process list

* [ADF-4159] - lint

demo-shell/resources/i18n/en.json

@@ -53,6 +53,7 @@
     }
   },
   "APP_LAYOUT": {
+    "APP": "App",
     "APP_NAME": "ADF Demo Application",
     "HOME": "Home",
     "NODE-SELECTOR": "Node Selector",

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -1,19 +1,12 @@
 <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
-                    [expandedSidenav]="expandedSidenav" (expanded)="setState($event)"
+    [expandedSidenav]="expandedSidenav" (expanded)="setState($event)" [position]="position">
-                    [position]="position">
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
 
-            <adf-layout-header id="adf-header"
+            <adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo"
-                               [title]="title | translate"
+                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" [position]="position"
-                               [redirectUrl]="redirectUrl"
+                (clicked)=toggleMenu($event)>
-                               [logo]="logo"
-                               [tooltip]="tooltip | translate"
-                               [showSidenavToggle]="showMenu"
-                               [color]="color"
-                               [position]="position"
-                               (clicked)=toggleMenu($event)>
 
                 <div class="adf-app-layout-menu-spacer"></div>
 
@@ -21,10 +14,7 @@
 
                 <div class="adf-header-delimiexpandedSidenavter"></div>
 
-                <adf-userinfo
+                <adf-userinfo class="adf-app-layout-user-profile" [menuPositionX]="'before'" [menuPositionY]="'above'">
-                    class="adf-app-layout-user-profile"
-                    [menuPositionX]="'before'"
-                    [menuPositionY]="'above'">
                 </adf-userinfo>
 
                 <app-theme-picker></app-theme-picker>
@@ -42,14 +32,29 @@
     <adf-sidenav-layout-navigation>
         <ng-template let-isMenuMinimized="isMenuMinimized">
             <mat-nav-list class="adf-sidenav-linklist">
-                <a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate"
+
-                   [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
+                <ng-container *ngFor="let link of links">
-                   class="adf-sidenav-link">
+                    <a mat-list-item *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
-                    <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
+                        class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu"
-                    <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
+                        [matMenuTriggerData]="{links: link.children}">
-                </a>
+
+                        <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
+                        <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
+                            {{link.title | translate }}</div>
+                    </a>
+
+                    <a mat-list-item *ngIf="!link.children" [attr.data-automation-id]="link.title | translate"
+                        class="adf-sidenav-link" [routerLink]="link.href" routerLinkActive="active"
+                        [routerLinkActiveOptions]="{ exact: true }">
+
+                        <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
+                        <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
+                            {{link.title | translate }}</div>
+                    </a>
+                </ng-container>
+
                 <a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
-                   class="adf-sidenav-link">
+                    class="adf-sidenav-link">
                     <mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon>
                     <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
                 </a>
@@ -66,3 +71,17 @@
 
 </adf-sidenav-layout>
 <app-log></app-log>
+
+<mat-menu #nestedMenu="matMenu">
+    <ng-template matMenuContent let-links="links">
+        <button mat-menu-item *ngFor="let link of links"
+            [attr.data-automation-id]="link.title | translate"
+            routerLinkActive="active"
+            [routerLink]="link.href"
+            [routerLinkActiveOptions]="{ exact: true }">
+
+            <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
+            {{ link.title | translate }}
+        </button>
+    </ng-template>
+</mat-menu>

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -39,19 +39,25 @@ export class AppLayoutComponent implements OnInit {
         { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
-        { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
+        { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
-        { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
+            { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
-        { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
+            { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' }
-        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
+        ]},
+        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES', children: [
+            { href: '/activiti', icon: 'vpn_key', title: 'APP_LAYOUT.APP' },
+            { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
+            { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+            { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
+            { href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' }
+        ]},
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
         { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
-        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE', children: [
-        { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
+            { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+            { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' }
+        ]},
         { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
-        { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
-        { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
-        { href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },

e2e/pages/adf/navigationBarPage.ts

@@ -26,10 +26,14 @@ export class NavigationBarPage {
 
     contentServicesButton = element(by.css('a[data-automation-id="Content Services"]'));
     dataTableButton = element(by.css('a[data-automation-id="Datatable"]'));
+    dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]'));
     taskListButton = element(by.css("a[data-automation-id='Task List']"));
     configEditorButton = element(by.css('a[data-automation-id="Configuration Editor"]'));
     processServicesButton = element(by.css('a[data-automation-id="Process Services"]'));
+    processServicesNestedButton = element(by.css('button[data-automation-id="App"]'));
     processServicesCloudButton = element(by.css('a[data-automation-id="Process Cloud"]'));
+    processServicesCloudHomeButton = element(by.css('button[data-automation-id="Home"]'));
+    processServicesCloudPeopleGroupButton = element(by.css('button[data-automation-id="People/Group Cloud"]'));
     loginButton = element(by.css('a[data-automation-id="Login"]'));
     trashcanButton = element(by.css('a[data-automation-id="Trashcan"]'));
     overlayViewerButton = element(by.css('a[data-automation-id="Overlay Viewer"]'));
@@ -41,7 +45,7 @@ export class NavigationBarPage {
     appTitle = element(by.css('.adf-app-title'));
     headerDataButton = element(by.css('a[data-automation-id="Header Data"]'));
     menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]'));
-    formButton = element(by.css('a[data-automation-id="Form"]'));
+    formButton = element(by.css('button[data-automation-id="Form"]'));
     treeViewButton = element(by.css('a[data-automation-id="Tree View"]'));
     iconsButton = element(by.css('a[data-automation-id="Icons"]'));
     customSourcesButton = element(by.css('a[data-automation-id="Custom Sources"]'));
@@ -52,6 +56,7 @@ export class NavigationBarPage {
     navigateToDatatable() {
         Util.waitUntilElementIsVisible(this.dataTableButton);
         this.dataTableButton.click();
+        this.dataTableNestedButton.click();
     }
 
     clickContentServicesButton() {
@@ -72,12 +77,16 @@ export class NavigationBarPage {
     navigateToProcessServicesPage() {
         Util.waitUntilElementIsVisible(this.processServicesButton);
         this.processServicesButton.click();
+        Util.waitUntilElementIsVisible(this.processServicesNestedButton);
+        this.processServicesNestedButton.click();
         return new ProcessServicesPage();
     }
 
     navigateToProcessServicesCloudPage() {
         Util.waitUntilElementIsVisible(this.processServicesCloudButton);
         this.processServicesCloudButton.click();
+        Util.waitUntilElementIsVisible(this.processServicesCloudHomeButton);
+        this.processServicesCloudHomeButton.click();
         return new AppListCloudPage();
     }
 
@@ -188,6 +197,8 @@ export class NavigationBarPage {
     }
 
     clickFormButton() {
+        Util.waitUntilElementIsVisible(this.processServicesButton);
+        this.processServicesButton.click();
         Util.waitUntilElementIsVisible(this.formButton);
         return this.formButton.click();
     }