fix: "add custom table action" quick action in ALP v4 projects with multiple toolbars in tables

.changeset/cyan-sloths-grow.md

@@ -0,0 +1,7 @@
+---
+'@sap-ux-private/preview-middleware-client': patch
+'@sap-ux/preview-middleware': patch
+---
+
+fix: CPE Quick action bug fix in ALP v4 projects. Add Custom Table Action worked incorrectly on Analytical Pages with multiple action toolbars in charts and tables.
+Some V4 Quick Action code refactoring to optimize

packages/preview-middleware-client/src/adp/controllers/AddFragment.controller.ts

@@ -264,7 +264,7 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
             targetAggregation === 'columns'
         ) {
             return 'ANALYTICAL_TABLE_COLUMN';
-        } else if (currentControlName === 'sap.ui.mdc.ActionToolbar' && targetAggregation === 'actions') {
+        } else if (currentControlName === 'sap.ui.mdc.Table' && targetAggregation === 'actions') {
             return 'TABLE_ACTION';
         }
         return '';

packages/preview-middleware-client/src/adp/quick-actions/fe-v4/change-table-columns.ts

@@ -2,15 +2,15 @@ import OverlayUtil from 'sap/ui/dt/OverlayUtil';
 import FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import FlexRuntimeInfoAPI from 'sap/ui/fl/apply/api/FlexRuntimeInfoAPI';
 import { QuickActionContext, NestedQuickActionDefinition } from '../../../cpe/quick-actions/quick-action-definition';
-import { getRelevantControlFromActivePage } from '../../../cpe/quick-actions/utils';
 import { getControlById } from '../../../utils/core';
-import { TableQuickActionDefinitionBase } from './table-quick-action-base';
+import { TableQuickActionDefinitionBase } from '../table-quick-action-base';
 import { MDC_TABLE_TYPE } from '../control-types';
 import { DIALOG_ENABLEMENT_VALIDATOR } from '../dialog-enablement-validator';
+import { getRelevantControlFromActivePage } from '../../../cpe/quick-actions/utils';
+import Table from 'sap/ui/mdc/Table';
 
 export const CHANGE_TABLE_COLUMNS = 'change-table-columns';
 const ACTION_ID = 'CTX_SETTINGS0';
-const CONTROL_TYPE = 'sap.ui.mdc.Table';
 
 /**
  * Quick Action for changing table columns.
@@ -25,24 +25,50 @@ export class ChangeTableColumnsQuickAction
         ]);
     }
 
-    async execute(path: string): Promise<FlexCommand[]> {
-        const index = this.tableMap[path];
-        const smartTables = getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [
-            CONTROL_TYPE
-        ]);
-        for (let i = 0; i < smartTables.length; i++) {
-            if (i === index) {
-                const section = getControlById(smartTables[i].getId());
-                const controlOverlay = OverlayUtil.getClosestOverlayFor(section);
-                if (controlOverlay) {
-                    controlOverlay.setSelected(true);
-                }
-                const hasVariantManagement = FlexRuntimeInfoAPI.hasVariantManagement({ element: smartTables[i] });
-                if (!hasVariantManagement) {
-                    continue;
-                }
-                await this.context.actionService.execute(smartTables[i].getId(), ACTION_ID);
+    async initialize(): Promise<void> {
+        for (const smartTable of getRelevantControlFromActivePage(
+            this.context.controlIndex,
+            this.context.view,
+            this.controlTypes
+        )) {
+            const hasVariantManagement = FlexRuntimeInfoAPI.hasVariantManagement({ element: smartTable });
+            if (!hasVariantManagement) {
+                continue;
             }
+
+            const actions = await this.context.actionService.get(smartTable.getId());
+            const changeColumnAction = actions.find((action) => action.id === ACTION_ID);
+            if (changeColumnAction) {
+                this.children.push({
+                    label: `'${(smartTable as Table).getHeader()}' table`,
+                    enabled: true,
+                    children: []
+                });
+                this.tableMap[`${this.children.length - 1}`] = {
+                    table: smartTable,
+                    tableUpdateEventAttachedOnce: false
+                };
+            }
+        }
+
+        if (this.children.length > 0) {
+            this.isApplicable = true;
+        }
+    }
+
+    async execute(path: string): Promise<FlexCommand[]> {
+        const { table } = this.tableMap[path];
+        if (!table) {
+            return [];
+        }
+        const tableControl = getControlById(table.getId());
+        const controlOverlay = OverlayUtil.getClosestOverlayFor(tableControl);
+        if (controlOverlay) {
+            controlOverlay.setSelected(true);
+        }
+        const hasVariantManagement = FlexRuntimeInfoAPI.hasVariantManagement({ element: table });
+        if (hasVariantManagement) {
+            await this.context.actionService.execute(table.getId(), ACTION_ID);
         }
 
         return [];

packages/preview-middleware-client/src/adp/quick-actions/fe-v4/create-table-action.ts

@@ -2,51 +2,41 @@ import OverlayUtil from 'sap/ui/dt/OverlayUtil';
 import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 
 import { QuickActionContext, NestedQuickActionDefinition } from '../../../cpe/quick-actions/quick-action-definition';
-import { getRelevantControlFromActivePage } from '../../../cpe/quick-actions/utils';
 import { getControlById } from '../../../utils/core';
 import { DialogFactory, DialogNames } from '../../dialog-factory';
 import { DIALOG_ENABLEMENT_VALIDATOR } from '../dialog-enablement-validator';
-import { TableQuickActionDefinitionBase } from './table-quick-action-base';
+import { TableQuickActionDefinitionBase } from '../table-quick-action-base';
 import { MDC_TABLE_TYPE } from '../control-types';
+import { preprocessActionExecution } from '../fe-v2/create-table-custom-column';
 
 export const CREATE_TABLE_ACTION = 'create_table_action';
-const TOOLBAR_ACTION = 'sap.ui.mdc.ActionToolbar';
 
 /**
  * Quick Action for creating table action.
  */
 export class AddTableActionQuickAction extends TableQuickActionDefinitionBase implements NestedQuickActionDefinition {
     constructor(context: QuickActionContext) {
-        super(CREATE_TABLE_ACTION, [MDC_TABLE_TYPE], 'QUICK_ACTION_ADD_CUSTOM_TABLE_ACTION', context, true, [
+        super(CREATE_TABLE_ACTION, [MDC_TABLE_TYPE], 'QUICK_ACTION_ADD_CUSTOM_TABLE_ACTION', context, undefined, [
             DIALOG_ENABLEMENT_VALIDATOR
         ]);
     }
 
     async execute(path: string): Promise<FlexCommand[]> {
-        const index = this.tableMap[path];
-        const smartTablesToolbarAction = getRelevantControlFromActivePage(
-            this.context.controlIndex,
-            this.context.view,
-            [TOOLBAR_ACTION]
-        );
-        for (let i = 0; i < smartTablesToolbarAction.length; i++) {
-            if (i === index) {
-                const section = getControlById(smartTablesToolbarAction[i].getId());
-                const controlOverlay = OverlayUtil.getClosestOverlayFor(section);
-                if (controlOverlay) {
-                    controlOverlay.setSelected(true);
-                    await DialogFactory.createDialog(
-                        controlOverlay,
-                        this.context.rta,
-                        DialogNames.ADD_FRAGMENT,
-                        undefined,
-                        {
-                            aggregation: 'actions',
-                            title: 'QUICK_ACTION_ADD_CUSTOM_TABLE_ACTION'
-                        }
-                    );
-                }
-            }
+        const { table, sectionInfo, iconTabBarFilterKey } = this.tableMap[path];
+        if (!table) {
+            return [];
+        }
+
+        preprocessActionExecution(table, sectionInfo, this.iconTabBar, iconTabBarFilterKey);
+        const tableControl = getControlById(table.getId());
+        const controlOverlay = OverlayUtil.getClosestOverlayFor(tableControl);
+        if (controlOverlay) {
+            controlOverlay.setSelected(true);
+
+            await DialogFactory.createDialog(controlOverlay, this.context.rta, DialogNames.ADD_FRAGMENT, undefined, {
+                aggregation: 'actions',
+                title: 'QUICK_ACTION_ADD_CUSTOM_TABLE_ACTION'
+            });
         }
 
         return [];

packages/preview-middleware-client/src/adp/quick-actions/fe-v4/lr-enable-table-filtering.ts

@@ -2,7 +2,7 @@ import FlexCommand from 'sap/ui/rta/command/FlexCommand';
 
 import { NestedQuickActionDefinition, QuickActionContext } from '../../../cpe/quick-actions/quick-action-definition';
 import Table from 'sap/ui/mdc/Table';
-import { TableQuickActionDefinitionBase } from './table-quick-action-base';
+import { TableQuickActionDefinitionBase } from '../table-quick-action-base';
 import { getRelevantControlFromActivePage } from '../../../cpe/quick-actions/utils';
 import { createManifestPropertyChange } from '../../../utils/fe-v4';
 import { getUi5Version, isLowerThanMinimalUi5Version } from '../../../utils/version';
@@ -38,7 +38,7 @@ export class EnableTableFilteringQuickAction
         }
 
         const tooltipText = this.context.resourceBundle.getText('TABLE_FILTERING_CHANGE_HAS_ALREADY_BEEN_MADE');
-        let index = 0;
+
         for (const smartTable of getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [
             MDC_TABLE_TYPE
         ])) {
@@ -54,27 +54,22 @@ export class EnableTableFilteringQuickAction
                 tooltip: isFilterEnabled ? tooltipText : undefined,
                 children: []
             });
-            this.tableMap[`${this.children.length - 1}`] = index;
-            index++;
+            this.tableMap[`${this.children.length - 1}`] = {
+                table: smartTable,
+                tableUpdateEventAttachedOnce: false
+            };
         }
 
         if (this.children.length > 0) {
             this.isApplicable = true;
         }
-
-        return Promise.resolve();
     }
 
     async execute(path: string): Promise<FlexCommand[]> {
         const { flexSettings } = this.context;
-        const index = this.tableMap[path];
-
-        const smartTables = getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [
-            MDC_TABLE_TYPE
-        ]);
+        const { table } = this.tableMap[path];
 
-        const modifiedControl = smartTables[index];
-        if (!modifiedControl) {
+        if (!table) {
             return [];
         }
         const propertyChange = {
@@ -86,7 +81,7 @@ export class EnableTableFilteringQuickAction
                 aggregate: true
             }
         };
-        const command = await createManifestPropertyChange(modifiedControl, flexSettings, propertyChange);
+        const command = await createManifestPropertyChange(table, flexSettings, propertyChange);
         if (command) {
             return [command];
         } else {

packages/preview-middleware-client/test/unit/adp/controllers/AddFragment.controller.test.ts

@@ -1247,7 +1247,7 @@ describe('AddFragment', () => {
             jest.spyOn(ControlUtils, 'getRuntimeControl').mockReturnValue({
                 getMetadata: jest.fn().mockReturnValue({
                     getAllAggregations: jest.fn().mockReturnValue({}),
-                    getName: jest.fn().mockReturnValue('sap.ui.mdc.ActionToolbar')
+                    getName: jest.fn().mockReturnValue('sap.ui.mdc.Table')
                 })
             } as unknown as ManagedObject);