[ACS-3757] returning focus to element from which they were opened (#2837)

* ACS-3757 Return focus to More Actions button after closing modals opened from that button

* ACS-3757 Return focus to specific row from personal files after closing modal opened from context menu from row

* ACS-3757 Fixed issue that sometimes node was undefined

* ACS-3757 Return focus after closing upload new version modal

* ACS-3757 Added restore focus on list of libraries, restoring focus to correct row when multi rows are selected, little refactoring

* ACS-3757 Use runActionById function instead of runAction

* ACS-3757 Fixed unit tests

* ACS-3757 Updated description

* ACS-3757 Adrressing comments for static and for selectors in jsons

* ACS-3757 Remove boolean flag from jsons

* ACS-3757 Added some unit tests

* ACS-3757 Resolved conflicts

* ACS-3757 Created ModalConfiguration interface

* ACS-3757 Increase version of ADF

* ACS-3757 Fix for e2e

* ACS-3757 Fix some more e2e

* ACS-3757 Removed log

projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts

@@ -53,7 +53,9 @@ export class ToolbarButtonComponent {
 
   runAction() {
     if (this.hasClickAction(this.actionRef)) {
-      this.extensions.runActionById(this.actionRef.actions.click);
+      this.extensions.runActionById(this.actionRef.actions.click, {
+        focusedElementOnCloseSelector: `#${this.actionRef.id.replace(/\./g, '\\.')}`
+      });
     }
   }
 

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -44,6 +44,8 @@ import { MatMenuItem } from '@angular/material/menu';
 export class ToolbarMenuItemComponent {
   @Input()
   actionRef: ContentActionRef;
+  @Input()
+  menuId?: string;
 
   @ViewChild(MatMenuItem)
   menuItem: MatMenuItem;
@@ -52,7 +54,14 @@ export class ToolbarMenuItemComponent {
 
   runAction() {
     if (this.hasClickAction(this.actionRef)) {
-      this.extensions.runActionById(this.actionRef.actions.click);
+      this.extensions.runActionById(
+        this.actionRef.actions.click,
+        this.menuId
+          ? {
+              focusedElementOnCloseSelector: `#${this.menuId.replace(/\./g, '\\.')}`
+            }
+          : undefined
+      );
     }
   }
 

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -18,7 +18,7 @@
         <adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
+        <app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item>
       </ng-container>
     </ng-container>
   </ng-container>

projects/aca-shared/src/lib/models/modal-configuration.ts

@@ -0,0 +1,3 @@
+export interface ModalConfiguration {
+  focusedElementOnCloseSelector?: string;
+}

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

@@ -498,7 +498,7 @@ export class AppExtensionService implements RuleContext {
     return false;
   }
 
-  runActionById(id: string) {
+  runActionById(id: string, additionalPayload?: { [key: string]: any }) {
     const action = this.extensions.getActionById(id);
     if (action) {
       const { type, payload } = action;
@@ -507,9 +507,21 @@ export class AppExtensionService implements RuleContext {
       };
       const expression = this.extensions.runExpression(payload, context);
 
-      this.store.dispatch({ type, payload: expression });
+      this.store.dispatch({
+        type,
+        payload:
+          typeof expression === 'object'
+            ? {
+                ...expression,
+                ...additionalPayload
+              }
+            : expression
+      });
     } else {
-      this.store.dispatch({ type: id });
+      this.store.dispatch({
+        type: id,
+        payload: additionalPayload
+      });
     }
   }
 

projects/aca-shared/src/public-api.ts

@@ -48,6 +48,7 @@ export * from './lib/directives/shared.directives.module';
 
 export * from './lib/models/types';
 export * from './lib/models/viewer.rules';
+export * from './lib/models/modal-configuration';
 
 export * from './lib/routing/shared.guard';
 

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

@@ -25,6 +25,7 @@
 
 import { Action } from '@ngrx/store';
 import { SiteBody } from '@alfresco/js-api';
+import { ModalConfiguration } from '@alfresco/aca-shared';
 
 export enum LibraryActionTypes {
   Delete = 'DELETE_LIBRARY',
@@ -59,5 +60,5 @@ export class UpdateLibraryAction implements Action {
 export class LeaveLibraryAction implements Action {
   readonly type = LibraryActionTypes.Leave;
 
-  constructor(public payload?: string) {}
+  constructor(public payload?: string | ModalConfiguration) {}
 }

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

@@ -25,6 +25,7 @@
 
 import { Action } from '@ngrx/store';
 import { MinimalNodeEntity } from '@alfresco/js-api';
+import { ModalConfiguration } from '@alfresco/aca-shared';
 
 export enum NodeActionTypes {
   SetSelection = 'SET_SELECTED_NODES',
@@ -84,7 +85,7 @@ export class PurgeDeletedNodesAction implements Action {
 export class DownloadNodesAction implements Action {
   readonly type = NodeActionTypes.Download;
 
-  constructor(public payload: MinimalNodeEntity[] = []) {}
+  constructor(public payload: MinimalNodeEntity[] | ModalConfiguration = []) {}
 }
 
 export class CreateFolderAction implements Action {
@@ -96,13 +97,13 @@ export class CreateFolderAction implements Action {
 export class EditFolderAction implements Action {
   readonly type = NodeActionTypes.EditFolder;
 
-  constructor(public payload: MinimalNodeEntity) {}
+  constructor(public payload: MinimalNodeEntity & ModalConfiguration) {}
 }
 
 export class ShareNodeAction implements Action {
   readonly type = NodeActionTypes.Share;
 
-  constructor(public payload: MinimalNodeEntity) {}
+  constructor(public payload: MinimalNodeEntity & ModalConfiguration) {}
 }
 
 export class UnshareNodesAction implements Action {
@@ -114,13 +115,13 @@ export class UnshareNodesAction implements Action {
 export class CopyNodesAction implements Action {
   readonly type = NodeActionTypes.Copy;
 
-  constructor(public payload: Array<MinimalNodeEntity>) {}
+  constructor(public payload: Array<MinimalNodeEntity> | ModalConfiguration) {}
 }
 
 export class MoveNodesAction implements Action {
   readonly type = NodeActionTypes.Move;
 
-  constructor(public payload: Array<MinimalNodeEntity>) {}
+  constructor(public payload: Array<MinimalNodeEntity> | ModalConfiguration) {}
 }
 
 export class ManagePermissionsAction implements Action {
@@ -143,7 +144,7 @@ export class PrintFileAction implements Action {
 export class ManageVersionsAction implements Action {
   readonly type = NodeActionTypes.ManageVersions;
 
-  constructor(public payload: MinimalNodeEntity) {}
+  constructor(public payload: MinimalNodeEntity & ModalConfiguration) {}
 }
 
 export class EditOfflineAction implements Action {
@@ -172,7 +173,7 @@ export class RemoveFavoriteAction implements Action {
 export class ManageAspectsAction implements Action {
   readonly type = NodeActionTypes.ChangeAspects;
 
-  constructor(public payload: MinimalNodeEntity) {}
+  constructor(public payload: MinimalNodeEntity & ModalConfiguration) {}
 }
 
 export class ManageRulesAction implements Action {

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

@@ -24,6 +24,7 @@
  */
 
 import { Action } from '@ngrx/store';
+import { ModalConfiguration } from '@alfresco/aca-shared';
 
 export enum UploadActionTypes {
   UploadFiles = 'UPLOAD_FILES',
@@ -46,5 +47,5 @@ export class UploadFolderAction implements Action {
 export class UploadFileVersionAction implements Action {
   readonly type = UploadActionTypes.UploadFileVersion;
 
-  constructor(public payload: CustomEvent) {}
+  constructor(public payload: CustomEvent | ModalConfiguration) {}
 }