feat(fpm-writer): table building block custom columns (#3665)

* feat(fpm-writer): building block custom columns

* feat(fpm-writer): lint

* feat(fpm-writer): tests

* feat(fe-fpm-writer): move custom column building block logic

* feat(fe-fpm-writer): fixes event handler, custom section

* fix(fe-fpm-writer): lint and cleanup

* fix(fe-fpm-writer): review comment/cleanup

* fix(fe-fpm-writer): sonar cleanup

* feat(fe-fpm-writer): code review, interface updates

* fix(fe-fpm-writer): remove eventhandler from interface

* fix(fe-fpm-writer): review comments

* fix(fe-fpm-writer): review comments

* fix: avoid unused property

avoid unused property

* test: adjust tests after unused property

adjust tests after unused property

* test: adjust test to generate correct example in snapshot

adjust test to generate correct example in snapshot

* test: missing call for generator and check new column is sibling of existing column

missing call for generator and check new column is sibling of existing column

* feat(fe-fpm-writer): changeset

* fix: reuse calculated fragment folder path from common

reuse calculated fragment folder path from common

* fix: unused and deprecated line which is calculated within common functions

unused and deprecated line which is calculated within common functions

* test: additional expects

additional expects

---------

Co-authored-by: Andis Redmans <[email protected]>

Author: docirl

.changeset/clever-rocks-fly.md

@@ -0,0 +1,5 @@
+---
+'@sap-ux/fe-fpm-writer': patch
+---
+
+Add custom columns for building blocks

packages/fe-fpm-writer/src/building-block/index.ts

@@ -8,8 +8,10 @@ import {
     type BuildingBlock,
     type BuildingBlockConfig,
     type BuildingBlockMetaPath,
+    type CustomColumn,
     type RichTextEditor,
-    bindingContextAbsolute
+    bindingContextAbsolute,
+    type TemplateConfig
 } from './types';
 import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
 import * as xpath from 'xpath';
@@ -22,8 +24,10 @@ import type { Manifest } from '../common/types';
 import { getMinimumUI5Version } from '@sap-ux/project-access';
 import { detectTabSpacing, extendJSON } from '../common/file';
 import { getManifest, getManifestPath } from '../common/utils';
+import { getDefaultFragmentContent, setCommonDefaults } from '../common/defaults';
 import { getOrAddNamespace } from './prompts/utils/xml';
 import { i18nNamespaces, translate } from '../i18n';
+import { applyEventHandlerConfiguration } from '../common/event-handler';
 
 const PLACEHOLDERS = {
     'id': 'REPLACE_WITH_BUILDING_BLOCK_ID',
@@ -60,10 +64,17 @@ export async function generateBuildingBlock<T extends BuildingBlock>(
         throw new Error(`Invalid view path ${viewOrFragmentPath}.`);
     }
 
+    const { path: manifestPath, content: manifest } = await getManifest(basePath, fs);
+
     // Read the view xml and template files and update contents of the view xml file
     const xmlDocument = getUI5XmlDocument(basePath, viewOrFragmentPath, fs);
-    const { content: manifest } = await getManifest(basePath, fs);
-    const templateDocument = getTemplateDocument(buildingBlockData, xmlDocument, fs, manifest);
+    const { updatedAggregationPath, processedBuildingBlockData, hasAggregation, aggregationNamespace } =
+        processBuildingBlock(buildingBlockData, xmlDocument, manifestPath, manifest, aggregationPath, fs);
+    const templateConfig: TemplateConfig = {
+        hasAggregation,
+        aggregationNamespace
+    };
+    const templateDocument = getTemplateDocument(processedBuildingBlockData, xmlDocument, fs, manifest, templateConfig);
 
     if (buildingBlockData.buildingBlockType === BuildingBlockType.RichTextEditor) {
         const minUI5Version = manifest ? coerce(getMinimumUI5Version(manifest)) : undefined;
@@ -77,7 +88,7 @@ export async function generateBuildingBlock<T extends BuildingBlock>(
     fs = updateViewFile(
         basePath,
         viewOrFragmentPath,
-        aggregationPath,
+        updatedAggregationPath,
         xmlDocument,
         templateDocument,
         fs,
@@ -100,6 +111,124 @@ export async function generateBuildingBlock<T extends BuildingBlock>(
     return fs;
 }
 
+/**
+ * Updates aggregation path for table columns based on XML document structure.
+ *
+ * @param {Document} xmlDocument - The XML document to analyze
+ * @param {string} aggregationPath - The current aggregation path
+ * @param {CustomColumn} buildingBlockData - The building block data with embedded fragment
+ * @returns {object} Object containing the updated aggregation path
+ */
+function updateAggregationPathForTableColumns(
+    xmlDocument: Document,
+    aggregationPath: string,
+    buildingBlockData: CustomColumn
+): { updatedAggregationPath: string; hasTableColumns: boolean } {
+    if (!buildingBlockData.embededFragment) {
+        return { updatedAggregationPath: aggregationPath, hasTableColumns: false };
+    }
+
+    const xpathSelect = xpath.useNamespaces((xmlDocument.firstChild as any)._nsMap);
+    const hasColumnsAggregation = xpathSelect("//*[local-name()='columns']", xmlDocument);
+    if (hasColumnsAggregation && Array.isArray(hasColumnsAggregation) && hasColumnsAggregation.length > 0) {
+        return {
+            updatedAggregationPath: aggregationPath + `/${getOrAddNamespace(xmlDocument)}:columns`,
+            hasTableColumns: true
+        };
+    } else {
+        const useDefaultAggregation = xpathSelect("//*[local-name()='Column']", xmlDocument);
+        if (useDefaultAggregation && Array.isArray(useDefaultAggregation) && useDefaultAggregation.length > 0) {
+            return { updatedAggregationPath: aggregationPath, hasTableColumns: true };
+        }
+    }
+
+    return { updatedAggregationPath: aggregationPath, hasTableColumns: false };
+}
+
+/**
+ * Processes custom column building block configuration.
+ *
+ * @param {BuildingBlock} buildingBlockData - The building block data
+ * @param {Document} xmlDocument - The XML document
+ * @param {string} manifestPath - The manifest file path
+ * @param {Manifest} manifest - The manifest object
+ * @param {string} aggregationPath - The aggregation path
+ * @param {Editor} fs - The memfs editor instance
+ * @returns {object} Object containing updated aggregation path and processed building block data
+ */
+function processBuildingBlock<T extends BuildingBlock>(
+    buildingBlockData: T,
+    xmlDocument: Document,
+    manifestPath: string,
+    manifest: Manifest,
+    aggregationPath: string,
+    fs: Editor
+): {
+    updatedAggregationPath: string;
+    processedBuildingBlockData: T;
+    hasAggregation: boolean;
+    aggregationNamespace: string;
+} {
+    let updatedAggregationPath = aggregationPath;
+    let hasAggregation = false;
+    let aggregationNamespace = 'macrosTable';
+
+    if (isCustomColumn(buildingBlockData) && buildingBlockData.embededFragment) {
+        const embededFragment = setCommonDefaults(buildingBlockData.embededFragment, manifestPath, manifest);
+        const viewPath = join(
+            embededFragment.path,
+            `${embededFragment.fragmentFile ?? embededFragment.name}.fragment.xml`
+        );
+
+        // Apply event handler
+        if (buildingBlockData.embededFragment.eventHandler) {
+            buildingBlockData.embededFragment.eventHandler = applyEventHandlerConfiguration(
+                fs,
+                buildingBlockData.embededFragment,
+                buildingBlockData.embededFragment.eventHandler,
+                {
+                    controllerSuffix: false,
+                    typescript: buildingBlockData.embededFragment.typescript
+                }
+            );
+        }
+        buildingBlockData.embededFragment.content = getDefaultFragmentContent(
+            'Sample Text',
+            buildingBlockData.embededFragment.eventHandler
+        );
+        if (!fs.exists(viewPath)) {
+            fs.copyTpl(getTemplatePath('common/Fragment.xml'), viewPath, buildingBlockData.embededFragment);
+        }
+        // check xmlDocument for macrosTable element
+        const tableColumnsResult = updateAggregationPathForTableColumns(
+            xmlDocument,
+            aggregationPath,
+            buildingBlockData
+        );
+        updatedAggregationPath = tableColumnsResult.updatedAggregationPath;
+        hasAggregation = tableColumnsResult.hasTableColumns;
+
+        aggregationNamespace = getOrAddNamespace(xmlDocument, 'sap.fe.macros.table', 'macrosTable');
+    }
+
+    return {
+        updatedAggregationPath,
+        processedBuildingBlockData: buildingBlockData,
+        hasAggregation,
+        aggregationNamespace
+    };
+}
+
+/**
+ * Type guard to check if the building block data is a custom column.
+ *
+ * @param {BuildingBlock} data - The building block data to check
+ * @returns {boolean} True if the data is a custom column
+ */
+function isCustomColumn(data: BuildingBlock): data is CustomColumn {
+    return data.buildingBlockType === BuildingBlockType.CustomColumn;
+}
+
 /**
  * Returns the UI5 xml file document (view/fragment).
  *
@@ -206,14 +335,16 @@ function getMetaPath(
  * @param {Manifest} manifest - the manifest content
  * @param {Editor} fs - the memfs editor instance
  * @param {boolean} usePlaceholders - apply placeholder values if value for attribute/property is not provided
+ * @param {Record<string, unknown>} templateConfig - additional template configuration
  * @returns {string} the template xml file content
  */
 function getTemplateContent<T extends BuildingBlock>(
     buildingBlockData: T,
     viewDocument: Document | undefined,
     manifest: Manifest | undefined,
     fs: Editor,
-    usePlaceholders?: boolean
+    usePlaceholders?: boolean,
+    templateConfig?: TemplateConfig
 ): string {
     const templateFolderName = buildingBlockData.buildingBlockType;
     const templateFilePath = getTemplatePath(`/building-block/${templateFolderName}/View.xml`);
@@ -245,7 +376,8 @@ function getTemplateContent<T extends BuildingBlock>(
         fs.read(templateFilePath),
         {
             macrosNamespace: viewDocument ? getOrAddNamespace(viewDocument, 'sap.fe.macros', 'macros') : 'macros',
-            data: buildingBlockData
+            data: buildingBlockData,
+            config: templateConfig
         },
         {}
     );
@@ -255,12 +387,13 @@ function getTemplateContent<T extends BuildingBlock>(
  * Method returns the manifest content for the required dependency library.
  *
  * @param {Editor} fs - the memfs editor instance
+ * @param {string} library - the dependency library
  * @returns {Promise<string>} Manifest content for the required dependency library.
  */
-export async function getManifestContent(fs: Editor): Promise<string> {
+export async function getManifestContent(fs: Editor, library = 'sap.fe.macros'): Promise<string> {
     // "sap.fe.macros" is missing - enhance manifest.json for missing "sap.fe.macros"
     const templatePath = getTemplatePath('/building-block/common/manifest.json');
-    return render(fs.read(templatePath), { libraries: { 'sap.fe.macros': {} } });
+    return render(fs.read(templatePath), { libraries: { [library]: {} } });
 }
 
 /**
@@ -270,15 +403,24 @@ export async function getManifestContent(fs: Editor): Promise<string> {
  * @param {Document} viewDocument - the view xml file document
  * @param {Editor} fs - the memfs editor instance
  * @param  {Manifest} manifest - the manifest content
+ * @param {Record<string, unknown>} templateConfig - additional template configuration
  * @returns {Document} the template xml file document
  */
 function getTemplateDocument<T extends BuildingBlock>(
     buildingBlockData: T,
     viewDocument: Document | undefined,
     fs: Editor,
-    manifest: Manifest | undefined
+    manifest: Manifest | undefined,
+    templateConfig: TemplateConfig
 ): Document {
-    const templateContent = getTemplateContent(buildingBlockData, viewDocument, manifest, fs);
+    const templateContent = getTemplateContent(
+        buildingBlockData,
+        viewDocument,
+        manifest,
+        fs,
+        undefined,
+        templateConfig
+    );
     const errorHandler = (level: string, message: string) => {
         throw new Error(`Unable to parse template file with building block data. Details: [${level}] - ${message}`);
     };

packages/fe-fpm-writer/src/building-block/prompts/utils/xml.ts

@@ -123,9 +123,6 @@ export async function getFilterBarIdsInFile(viewOrFragmentPath: string, fs: Edit
 }
 
 /**
- * Finds the prefix associated with a given namespace URI in the root element's attributes.
- * Handles both default namespaces (xmlns="...") and prefixed namespaces (xmlns:prefix="...").
- *
  * @example
  * // Default namespace (no prefix)
  * // <core:FragmentDefinition xmlns="sap.fe.macros">

packages/fe-fpm-writer/src/building-block/types.ts

@@ -1,3 +1,5 @@
+import type { CustomElement, CustomFragment, EventHandler, FragmentContentData, Position } from '../common/types';
+
 /**
  * Building block type.
  *
@@ -9,6 +11,7 @@ export enum BuildingBlockType {
     Field = 'field',
     Page = 'page',
     Table = 'table',
+    CustomColumn = 'custom-column',
     RichTextEditor = 'rich-text-editor'
 }
 
@@ -22,6 +25,11 @@ export type BindingContextType = 'absolute' | 'relative';
 export const bindingContextAbsolute: BindingContextType = 'absolute';
 export const bindingContextRelative: BindingContextType = 'relative';
 
+export type TemplateConfig = {
+    hasAggregation?: boolean;
+    aggregationNamespace: string;
+};
+
 /**
  * Represents a building block metaPath object.
  */
@@ -409,6 +417,16 @@ export interface Page extends BuildingBlock {
     description?: string;
 }
 
+export interface CustomColumn extends BuildingBlock {
+    title: string;
+    width?: string;
+    columnKey?: string;
+    position?: Position;
+    embededFragment?: EmbededFragment;
+}
+
+export type EmbededFragment = EventHandler & CustomFragment & CustomElement & FragmentContentData;
+
 /**
  * Building block used to create a rich text editor based on the metadata provided by OData V4.
  * MetaPath construction example: metaPath="/EntitySet/targetProperty"

packages/fe-fpm-writer/src/column/index.ts

@@ -91,6 +91,12 @@ export async function generateCustomColumn(
     // merge with defaults
     const completeColumn = enhanceConfig(fs, customColumn, manifestPath, manifest);
 
+    // add fragment
+    const viewPath = join(completeColumn.path, `${completeColumn.fragmentFile ?? completeColumn.name}.fragment.xml`);
+    if (completeColumn.control || !fs.exists(viewPath)) {
+        fs.copyTpl(getTemplatePath('common/Fragment.xml'), viewPath, completeColumn);
+    }
+
     // enhance manifest with column definition
     const manifestRoot = getManifestRoot(customColumn.minUI5Version);
     const filledTemplate = render(fs.read(join(manifestRoot, `manifest.json`)), completeColumn, {});
@@ -100,11 +106,5 @@ export async function generateCustomColumn(
         tabInfo: customColumn.tabInfo
     });
 
-    // add fragment
-    const viewPath = join(completeColumn.path, `${completeColumn.fragmentFile ?? completeColumn.name}.fragment.xml`);
-    if (completeColumn.control || !fs.exists(viewPath)) {
-        fs.copyTpl(getTemplatePath('common/Fragment.xml'), viewPath, completeColumn);
-    }
-
     return fs;
 }

packages/fe-fpm-writer/src/index.ts

@@ -29,6 +29,7 @@ export {
     Table,
     BuildingBlockConfig,
     Page,
+    CustomColumn,
     RichTextEditor
 } from './building-block/types';
 export { generateBuildingBlock, getSerializedFileContent } from './building-block';

packages/fe-fpm-writer/templates/building-block/custom-column/View.xml

@@ -0,0 +1,5 @@
+<% if (!config?.hasAggregation) { %><<%- macrosNamespace %>:columns>
+    <% } %><<%- config?.aggregationNamespace %>:Column header="<%- data.title %>" importance="High" <% if (data.width) { %>width="<%- data.width %>"<% } %>  <% if (data.position.anchor) { %>anchor="<%- data.position.anchor %>"<% } %>  <% if (data.position.placement) { %>placement="<%- data.position.placement %>"<% } %>  key="<%- data.columnKey || 'myColumnKey' %>">
+        <core:Fragment fragmentName="<%- data.embededFragment.ns %>.<%- data.embededFragment.name %>" type="XML" />
+    </<%- config?.aggregationNamespace %>:Column>
+<% if (!config?.hasAggregation) { %></<%- macrosNamespace %>:columns><% } %>