@sap/ux-ui5-tooling 1.20.4 → 1.21.0

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/lr-enable-semantic-date-range-filter-bar.js

@@ -0,0 +1,58 @@
+"use strict";
+
+sap.ui.define(["../../../cpe/quick-actions/utils", "../../../utils/core", "./utils", "../simple-quick-action-base"], function (_____cpe_quick_actions_utils, _____utils_core, ___utils, ___simple_quick_action_base) {
+  "use strict";
+
+  const pageHasControlId = _____cpe_quick_actions_utils["pageHasControlId"];
+  const getControlById = _____utils_core["getControlById"];
+  const executeToggleAction = ___utils["executeToggleAction"];
+  const SimpleQuickActionDefinitionBase = ___simple_quick_action_base["SimpleQuickActionDefinitionBase"];
+  const ENABLE_SEMANTIC_DATE_RANGE = 'enable-semantic-date-range';
+  const PROPERTY_NAME = 'useSemanticDateRange';
+  const PROPERTY_PATH = `controlConfiguration/@com.sap.vocabularies.UI.v1.SelectionFields/${PROPERTY_NAME}`;
+  const CONTROL_TYPE = 'sap.fe.macros.controls.FilterBar';
+  const boolMap = {
+    'true': true,
+    'false': false
+  };
+  /**
+   * Quick Action for toggling the visibility of "Semantic date range" for filter bar fields in LR.
+   */
+  class ToggleSemanticDateRangeFilterBar extends SimpleQuickActionDefinitionBase {
+    constructor(context) {
+      super(ENABLE_SEMANTIC_DATE_RANGE, [], '', context);
+    }
+    forceRefreshAfterExecution = true;
+    isUseDateRangeTypeEnabled = false;
+    initialize() {
+      const controls = this.context.controlIndex[CONTROL_TYPE] ?? [];
+      for (const control of controls) {
+        const isActionApplicable = pageHasControlId(this.context.view, control.controlId);
+        const filterBar = getControlById(control.controlId);
+        if (isActionApplicable && filterBar) {
+          this.control = filterBar;
+          const value = this.context.changeService.getConfigurationPropertyValue(control.controlId, PROPERTY_NAME);
+          this.isUseDateRangeTypeEnabled = value === undefined ? boolMap[this.control.data('useSemanticDateRange')] : value;
+        }
+      }
+      return Promise.resolve();
+    }
+    get textKey() {
+      return this.isUseDateRangeTypeEnabled ? 'QUICK_ACTION_LR_DISABLE_SEMANTIC_DATE_RANGE_FILTER_BAR' : 'QUICK_ACTION_LR_ENABLE_SEMANTIC_DATE_RANGE_FILTER_BAR';
+    }
+    async execute() {
+      const command = await executeToggleAction(this.context, this.isUseDateRangeTypeEnabled, CONTROL_TYPE, PROPERTY_PATH);
+      if (command.length) {
+        this.isUseDateRangeTypeEnabled = !this.isUseDateRangeTypeEnabled;
+      }
+      return command;
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ENABLE_SEMANTIC_DATE_RANGE = ENABLE_SEMANTIC_DATE_RANGE;
+  __exports.ToggleSemanticDateRangeFilterBar = ToggleSemanticDateRangeFilterBar;
+  return __exports;
+});
+//# sourceMappingURL=lr-enable-semantic-date-range-filter-bar.js.map

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/lr-enable-semantic-date-range-filter-bar.ts

@@ -0,0 +1,70 @@
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import type FilterBar from 'sap/ui/mdc/FilterBar';
+
+import type {
+    QuickActionContext,
+    SimpleQuickActionDefinition
+} from '../../../cpe/quick-actions/quick-action-definition';
+import { pageHasControlId } from '../../../cpe/quick-actions/utils';
+import { getControlById } from '../../../utils/core';
+import { executeToggleAction } from './utils';
+import { SimpleQuickActionDefinitionBase } from '../simple-quick-action-base';
+
+export const ENABLE_SEMANTIC_DATE_RANGE = 'enable-semantic-date-range';
+const PROPERTY_NAME = 'useSemanticDateRange';
+const PROPERTY_PATH = `controlConfiguration/@com.sap.vocabularies.UI.v1.SelectionFields/${PROPERTY_NAME}`;
+const CONTROL_TYPE = 'sap.fe.macros.controls.FilterBar';
+const boolMap: { [key: string]: boolean } = {
+    'true': true,
+    'false': false
+};
+/**
+ * Quick Action for toggling the visibility of "Semantic date range" for filter bar fields in LR.
+ */
+export class ToggleSemanticDateRangeFilterBar
+    extends SimpleQuickActionDefinitionBase
+    implements SimpleQuickActionDefinition
+{
+    constructor(context: QuickActionContext) {
+        super(ENABLE_SEMANTIC_DATE_RANGE, [], '', context);
+    }
+    readonly forceRefreshAfterExecution = true;
+    private isUseDateRangeTypeEnabled = false;
+
+    initialize(): Promise<void> {
+        const controls = this.context.controlIndex[CONTROL_TYPE] ?? [];
+        for (const control of controls) {
+            const isActionApplicable = pageHasControlId(this.context.view, control.controlId);
+            const filterBar = getControlById<FilterBar>(control.controlId);
+            if (isActionApplicable && filterBar) {
+                this.control = filterBar;
+                const value = this.context.changeService.getConfigurationPropertyValue(
+                    control.controlId,
+                    PROPERTY_NAME
+                );
+                this.isUseDateRangeTypeEnabled =
+                    value === undefined ? boolMap[this.control.data('useSemanticDateRange')] : (value as boolean);
+            }
+        }
+        return Promise.resolve();
+    }
+
+    protected get textKey() {
+        return this.isUseDateRangeTypeEnabled
+            ? 'QUICK_ACTION_LR_DISABLE_SEMANTIC_DATE_RANGE_FILTER_BAR'
+            : 'QUICK_ACTION_LR_ENABLE_SEMANTIC_DATE_RANGE_FILTER_BAR';
+    }
+
+    async execute(): Promise<FlexCommand[]> {
+        const command = await executeToggleAction(
+            this.context,
+            this.isUseDateRangeTypeEnabled,
+            CONTROL_TYPE,
+            PROPERTY_PATH
+        );
+        if (command.length) {
+            this.isUseDateRangeTypeEnabled = !this.isUseDateRangeTypeEnabled;
+        }
+        return command;
+    }
+}

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/lr-enable-table-filtering.js

@@ -0,0 +1,86 @@
+"use strict";
+
+sap.ui.define(["../table-quick-action-base", "../../../cpe/quick-actions/utils", "../../../utils/fe-v4", "../../../utils/version", "../control-types"], function (___table_quick_action_base, _____cpe_quick_actions_utils, _____utils_fe_v4, _____utils_version, ___control_types) {
+  "use strict";
+
+  const TableQuickActionDefinitionBase = ___table_quick_action_base["TableQuickActionDefinitionBase"];
+  const getRelevantControlFromActivePage = _____cpe_quick_actions_utils["getRelevantControlFromActivePage"];
+  const createManifestPropertyChange = _____utils_fe_v4["createManifestPropertyChange"];
+  const getUi5Version = _____utils_version["getUi5Version"];
+  const isLowerThanMinimalUi5Version = _____utils_version["isLowerThanMinimalUi5Version"];
+  const MDC_TABLE_TYPE = ___control_types["MDC_TABLE_TYPE"];
+  const ENABLE_TABLE_FILTERING = 'enable-table-filtering';
+  /**
+   * Quick Action for enabling table filtering using table personalization settings.
+   */
+  class EnableTableFilteringQuickAction extends TableQuickActionDefinitionBase {
+    constructor(context) {
+      super(ENABLE_TABLE_FILTERING, [MDC_TABLE_TYPE], 'QUICK_ACTION_ENABLE_TABLE_FILTERING', context);
+    }
+    forceRefreshAfterExecution = true;
+    async initialize() {
+      const version = await getUi5Version();
+      if (isLowerThanMinimalUi5Version(version, {
+        major: 1,
+        minor: 131
+      })) {
+        this.isApplicable = false;
+        return;
+      }
+      const tooltipText = this.context.resourceBundle.getText('TABLE_FILTERING_CHANGE_HAS_ALREADY_BEEN_MADE');
+      for (const smartTable of getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [MDC_TABLE_TYPE])) {
+        const personalizationData = smartTable.getP13nMode();
+        const value = this.context.changeService.getConfigurationPropertyValue(smartTable.getId(), 'personalization');
+        const isFilterEnabled = value?.filter === undefined ? personalizationData.includes('Filter') : value.filter;
+        const path = this.children.length.toString();
+        this.children.push({
+          path,
+          label: `'${smartTable.getHeader()}' table`,
+          enabled: !isFilterEnabled,
+          tooltip: isFilterEnabled ? tooltipText : undefined,
+          children: []
+        });
+        this.tableMap[path] = {
+          table: smartTable,
+          tableUpdateEventAttachedOnce: false
+        };
+      }
+      if (this.children.length > 0) {
+        this.isApplicable = true;
+      }
+    }
+    async execute(path) {
+      const {
+        flexSettings
+      } = this.context;
+      const {
+        table
+      } = this.tableMap[path];
+      if (!table) {
+        return [];
+      }
+      const propertyChange = {
+        personalization: {
+          sort: true,
+          column: true,
+          filter: true,
+          group: true,
+          aggregate: true
+        }
+      };
+      const command = await createManifestPropertyChange(table, flexSettings, propertyChange);
+      if (command) {
+        return [command];
+      } else {
+        return [];
+      }
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ENABLE_TABLE_FILTERING = ENABLE_TABLE_FILTERING;
+  __exports.EnableTableFilteringQuickAction = EnableTableFilteringQuickAction;
+  return __exports;
+});
+//# sourceMappingURL=lr-enable-table-filtering.js.map

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

@@ -0,0 +1,96 @@
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+
+import type {
+    NestedQuickActionDefinition,
+    QuickActionContext
+} from '../../../cpe/quick-actions/quick-action-definition';
+import type Table from 'sap/ui/mdc/Table';
+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';
+import { MDC_TABLE_TYPE } from '../control-types';
+
+export const ENABLE_TABLE_FILTERING = 'enable-table-filtering';
+
+type Personalization = {
+    sort: boolean;
+    column: boolean;
+    filter: boolean;
+    group: boolean;
+    aggregate: boolean;
+};
+
+/**
+ * Quick Action for enabling table filtering using table personalization settings.
+ */
+export class EnableTableFilteringQuickAction
+    extends TableQuickActionDefinitionBase
+    implements NestedQuickActionDefinition
+{
+    constructor(context: QuickActionContext) {
+        super(ENABLE_TABLE_FILTERING, [MDC_TABLE_TYPE], 'QUICK_ACTION_ENABLE_TABLE_FILTERING', context);
+    }
+    readonly forceRefreshAfterExecution = true;
+
+    async initialize(): Promise<void> {
+        const version = await getUi5Version();
+        if (isLowerThanMinimalUi5Version(version, { major: 1, minor: 131 })) {
+            this.isApplicable = false;
+            return;
+        }
+
+        const tooltipText = this.context.resourceBundle.getText('TABLE_FILTERING_CHANGE_HAS_ALREADY_BEEN_MADE');
+
+        for (const smartTable of getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [
+            MDC_TABLE_TYPE
+        ])) {
+            const personalizationData = (smartTable as Table).getP13nMode();
+            const value = this.context.changeService.getConfigurationPropertyValue(
+                smartTable.getId(),
+                'personalization'
+            ) as Personalization;
+            const isFilterEnabled = value?.filter === undefined ? personalizationData.includes('Filter') : value.filter;
+            const path = this.children.length.toString();
+            this.children.push({
+                path,
+                label: `'${(smartTable as Table).getHeader()}' table`,
+                enabled: !isFilterEnabled,
+                tooltip: isFilterEnabled ? tooltipText : undefined,
+                children: []
+            });
+            this.tableMap[path] = {
+                table: smartTable,
+                tableUpdateEventAttachedOnce: false
+            };
+        }
+
+        if (this.children.length > 0) {
+            this.isApplicable = true;
+        }
+    }
+
+    async execute(path: string): Promise<FlexCommand[]> {
+        const { flexSettings } = this.context;
+        const { table } = this.tableMap[path];
+
+        if (!table) {
+            return [];
+        }
+        const propertyChange = {
+            personalization: {
+                sort: true,
+                column: true,
+                filter: true,
+                group: true,
+                aggregate: true
+            }
+        };
+        const command = await createManifestPropertyChange(table, flexSettings, propertyChange);
+        if (command) {
+            return [command];
+        } else {
+            return [];
+        }
+    }
+}

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/lr-toggle-clear-filter-bar.js

@@ -0,0 +1,55 @@
+"use strict";
+
+sap.ui.define(["../../../cpe/quick-actions/utils", "../../../utils/core", "./utils", "../simple-quick-action-base"], function (_____cpe_quick_actions_utils, _____utils_core, ___utils, ___simple_quick_action_base) {
+  "use strict";
+
+  const pageHasControlId = _____cpe_quick_actions_utils["pageHasControlId"];
+  const getControlById = _____utils_core["getControlById"];
+  const executeToggleAction = ___utils["executeToggleAction"];
+  const SimpleQuickActionDefinitionBase = ___simple_quick_action_base["SimpleQuickActionDefinitionBase"];
+  const ENABLE_CLEAR_FILTER_BAR_TYPE = 'enable-clear-filter-bar';
+  const PROPERTY_NAME = 'showClearButton';
+  const PROPERTY_PATH = `controlConfiguration/@com.sap.vocabularies.UI.v1.SelectionFields/${PROPERTY_NAME}`;
+  const CONTROL_TYPE = 'sap.fe.macros.controls.FilterBar';
+
+  /**
+   * Quick Action for toggling the visibility of "clear filter bar" button in List Report page.
+   */
+  class ToggleClearFilterBarQuickAction extends SimpleQuickActionDefinitionBase {
+    constructor(context) {
+      super(ENABLE_CLEAR_FILTER_BAR_TYPE, [], '', context);
+    }
+    forceRefreshAfterExecution = true;
+    isClearButtonEnabled = false;
+    initialize() {
+      const controls = this.context.controlIndex[CONTROL_TYPE] ?? [];
+      for (const control of controls) {
+        const isActionApplicable = pageHasControlId(this.context.view, control.controlId);
+        const filterBar = getControlById(control.controlId);
+        if (isActionApplicable && filterBar) {
+          this.control = filterBar;
+          const value = this.context.changeService.getConfigurationPropertyValue(control.controlId, PROPERTY_NAME);
+          this.isClearButtonEnabled = value === undefined ? filterBar.getShowClearButton() : value;
+        }
+      }
+      return Promise.resolve();
+    }
+    get textKey() {
+      return this.isClearButtonEnabled ? 'V4_QUICK_ACTION_LR_DISABLE_CLEAR_FILTER_BAR' : 'V4_QUICK_ACTION_LR_ENABLE_CLEAR_FILTER_BAR';
+    }
+    async execute() {
+      const command = await executeToggleAction(this.context, this.isClearButtonEnabled, CONTROL_TYPE, PROPERTY_PATH);
+      if (command.length) {
+        this.isClearButtonEnabled = !this.isClearButtonEnabled;
+      }
+      return command;
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ENABLE_CLEAR_FILTER_BAR_TYPE = ENABLE_CLEAR_FILTER_BAR_TYPE;
+  __exports.ToggleClearFilterBarQuickAction = ToggleClearFilterBarQuickAction;
+  return __exports;
+});
+//# sourceMappingURL=lr-toggle-clear-filter-bar.js.map

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/lr-toggle-clear-filter-bar.ts

@@ -0,0 +1,61 @@
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import type FilterBar from 'sap/ui/mdc/FilterBar';
+
+import type {
+    QuickActionContext,
+    SimpleQuickActionDefinition
+} from '../../../cpe/quick-actions/quick-action-definition';
+import { pageHasControlId } from '../../../cpe/quick-actions/utils';
+import { getControlById } from '../../../utils/core';
+import { executeToggleAction } from './utils';
+import { SimpleQuickActionDefinitionBase } from '../simple-quick-action-base';
+
+export const ENABLE_CLEAR_FILTER_BAR_TYPE = 'enable-clear-filter-bar';
+const PROPERTY_NAME = 'showClearButton';
+const PROPERTY_PATH = `controlConfiguration/@com.sap.vocabularies.UI.v1.SelectionFields/${PROPERTY_NAME}`;
+const CONTROL_TYPE = 'sap.fe.macros.controls.FilterBar';
+
+/**
+ * Quick Action for toggling the visibility of "clear filter bar" button in List Report page.
+ */
+export class ToggleClearFilterBarQuickAction
+    extends SimpleQuickActionDefinitionBase
+    implements SimpleQuickActionDefinition
+{
+    constructor(context: QuickActionContext) {
+        super(ENABLE_CLEAR_FILTER_BAR_TYPE, [], '', context);
+    }
+    readonly forceRefreshAfterExecution = true;
+    private isClearButtonEnabled = false;
+
+    initialize(): Promise<void> {
+        const controls = this.context.controlIndex[CONTROL_TYPE] ?? [];
+        for (const control of controls) {
+            const isActionApplicable = pageHasControlId(this.context.view, control.controlId);
+            const filterBar = getControlById<FilterBar>(control.controlId);
+            if (isActionApplicable && filterBar) {
+                this.control = filterBar;
+                const value = this.context.changeService.getConfigurationPropertyValue(
+                    control.controlId,
+                    PROPERTY_NAME
+                );
+                this.isClearButtonEnabled = value === undefined ? filterBar.getShowClearButton() : (value as boolean);
+            }
+        }
+        return Promise.resolve();
+    }
+
+    protected get textKey() {
+        return this.isClearButtonEnabled
+            ? 'V4_QUICK_ACTION_LR_DISABLE_CLEAR_FILTER_BAR'
+            : 'V4_QUICK_ACTION_LR_ENABLE_CLEAR_FILTER_BAR';
+    }
+
+    async execute(): Promise<FlexCommand[]> {
+        const command = await executeToggleAction(this.context, this.isClearButtonEnabled, CONTROL_TYPE, PROPERTY_PATH);
+        if (command.length) {
+            this.isClearButtonEnabled = !this.isClearButtonEnabled;
+        }
+        return command;
+    }
+}

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/op-add-custom-section.js

@@ -0,0 +1,73 @@
+"use strict";
+
+sap.ui.define(["../../../utils/fe-v4", "../simple-quick-action-base", "../common/op-add-custom-section", "../dialog-enablement-validator", "../../../cpe/quick-actions/utils", "sap/ui/dt/OverlayRegistry", "../../dialog-factory"], function (_____utils_fe_v4, ___simple_quick_action_base, ___common_op_add_custom_section, ___dialog_enablement_validator, _____cpe_quick_actions_utils, OverlayRegistry, ____dialog_factory) {
+  "use strict";
+
+  const getV4AppComponent = _____utils_fe_v4["getV4AppComponent"];
+  const SimpleQuickActionDefinitionBase = ___simple_quick_action_base["SimpleQuickActionDefinitionBase"];
+  const OP_ADD_CUSTOM_SECTION = ___common_op_add_custom_section["OP_ADD_CUSTOM_SECTION"];
+  const DIALOG_ENABLEMENT_VALIDATOR = ___dialog_enablement_validator["DIALOG_ENABLEMENT_VALIDATOR"];
+  const getRelevantControlFromActivePage = _____cpe_quick_actions_utils["getRelevantControlFromActivePage"];
+  const DialogFactory = ____dialog_factory["DialogFactory"];
+  const DialogNames = ____dialog_factory["DialogNames"];
+  const OP_PAGE_LAYOUT = ['sap.uxap.ObjectPageLayout'];
+  /**
+   * Quick Action for adding a custom page action.
+   */
+  class AddCustomSectionQuickAction extends SimpleQuickActionDefinitionBase {
+    get currentPageDescriptor() {
+      const appComponent = getV4AppComponent(this.context.view);
+      const projectId = this.context.flexSettings.projectId;
+      const objectPageLayout = getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, OP_PAGE_LAYOUT)[0];
+      const sections = objectPageLayout.getSections();
+      let anchor = null;
+      const pageId = this.context.view.getViewData()?.stableId.split('::').pop();
+      if (sections.length > 0) {
+        // Use the first section as the anchor if available
+        anchor = (this.context.view.getLocalId(sections[sections.length - 1].getId()) ?? '').split('::').pop();
+      }
+      if (!pageId) {
+        throw new Error('pageId is not defined');
+      }
+      if (!projectId) {
+        throw new Error('app reference is not defined');
+      }
+      if (!appComponent) {
+        throw new Error('appComponent is not defined');
+      }
+      if (!anchor) {
+        throw new Error('appComponent is not defined');
+      }
+      return {
+        appType: 'fe-v4',
+        appComponent,
+        anchor,
+        pageId,
+        projectId
+      };
+    }
+    constructor(context) {
+      super(OP_ADD_CUSTOM_SECTION, OP_PAGE_LAYOUT, 'QUICK_ACTION_OP_ADD_CUSTOM_SECTION', context, [DIALOG_ENABLEMENT_VALIDATOR]);
+    }
+    async execute() {
+      const objectPageLayout = getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, OP_PAGE_LAYOUT)[0];
+      const overlay = OverlayRegistry.getOverlay(objectPageLayout) || [];
+      await DialogFactory.createDialog(overlay, this.context.rta, DialogNames.ADD_CUSTOM_FRAGMENT, undefined, {
+        propertyPath: 'content/body/sections/',
+        title: 'QUICK_ACTION_OP_ADD_CUSTOM_SECTION',
+        appDescriptor: this.currentPageDescriptor,
+        type: 'section'
+      }, {
+        actionName: this.type,
+        telemetryEventIdentifier: this.getTelemetryIdentifier()
+      });
+      return [];
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.AddCustomSectionQuickAction = AddCustomSectionQuickAction;
+  return __exports;
+});
+//# sourceMappingURL=op-add-custom-section.js.map

package/dist/preview-middleware/dist/client/adp/quick-actions/fe-v4/op-add-custom-section.ts

@@ -0,0 +1,91 @@
+import { getV4AppComponent } from '../../../utils/fe-v4';
+import { PageDescriptorV4 } from '../../controllers/types';
+import { SimpleQuickActionDefinitionBase } from '../simple-quick-action-base';
+import { QuickActionContext, SimpleQuickActionDefinition } from '../../../cpe/quick-actions/quick-action-definition';
+import { OP_ADD_CUSTOM_SECTION } from '../common/op-add-custom-section';
+import { DIALOG_ENABLEMENT_VALIDATOR } from '../dialog-enablement-validator';
+import FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import { getRelevantControlFromActivePage } from '../../../cpe/quick-actions/utils';
+import ObjectPageLayout from 'sap/uxap/ObjectPageLayout';
+import OverlayRegistry from 'sap/ui/dt/OverlayRegistry';
+import { DialogFactory, DialogNames } from '../../dialog-factory';
+
+const OP_PAGE_LAYOUT = ['sap.uxap.ObjectPageLayout'];
+
+interface ViewDataType {
+    stableId: string;
+}
+/**
+ * Quick Action for adding a custom page action.
+ */
+export class AddCustomSectionQuickAction
+    extends SimpleQuickActionDefinitionBase
+    implements SimpleQuickActionDefinition
+{
+    protected get currentPageDescriptor(): PageDescriptorV4 {
+        const appComponent = getV4AppComponent(this.context.view);
+        const projectId = this.context.flexSettings.projectId;
+        const objectPageLayout = getRelevantControlFromActivePage(
+            this.context.controlIndex,
+            this.context.view,
+            OP_PAGE_LAYOUT
+        )[0] as ObjectPageLayout;
+        const sections = objectPageLayout.getSections();
+        let anchor: string | null = null;
+        const pageId = (this.context.view.getViewData() as ViewDataType)?.stableId.split('::').pop() as string;
+        if (sections.length > 0) {
+            // Use the first section as the anchor if available
+            anchor = (this.context.view.getLocalId(sections[sections.length - 1].getId()) ?? '')
+                .split('::')
+                .pop() as string;
+        }
+        if (!pageId) {
+            throw new Error('pageId is not defined');
+        }
+        if (!projectId) {
+            throw new Error('app reference is not defined');
+        }
+        if (!appComponent) {
+            throw new Error('appComponent is not defined');
+        }
+        if (!anchor) {
+            throw new Error('appComponent is not defined');
+        }
+        return {
+            appType: 'fe-v4',
+            appComponent,
+            anchor,
+            pageId,
+            projectId
+        };
+    }
+    constructor(context: QuickActionContext) {
+        super(OP_ADD_CUSTOM_SECTION, OP_PAGE_LAYOUT, 'QUICK_ACTION_OP_ADD_CUSTOM_SECTION', context, [
+            DIALOG_ENABLEMENT_VALIDATOR
+        ]);
+    }
+
+    async execute(): Promise<FlexCommand[]> {
+        const objectPageLayout = getRelevantControlFromActivePage(
+            this.context.controlIndex,
+            this.context.view,
+            OP_PAGE_LAYOUT
+        )[0] as ObjectPageLayout;
+
+        const overlay = OverlayRegistry.getOverlay(objectPageLayout) || [];
+        await DialogFactory.createDialog(
+            overlay,
+            this.context.rta,
+            DialogNames.ADD_CUSTOM_FRAGMENT,
+            undefined,
+            {
+                propertyPath: 'content/body/sections/',
+                title: 'QUICK_ACTION_OP_ADD_CUSTOM_SECTION',
+                appDescriptor: this.currentPageDescriptor,
+                type: 'section'
+            },
+            { actionName: this.type, telemetryEventIdentifier: this.getTelemetryIdentifier() }
+        );
+        return [];
+    }
+}