Support merge/col span cells horizontal in grid and hide a column

.github/scripts/release.sh

@@ -52,6 +52,7 @@ CURRENT_VERSION_PARTS=(${CURRENT_VERSION//./ })
 APP_FULL=${CURRENT_VERSION:1}
 APP_MAJOR=${CURRENT_VERSION_PARTS[0]:1}
 APP_MAJOR_MINOR=${CURRENT_VERSION_PARTS[0]:1}.${CURRENT_VERSION_PARTS[1]}
+APP_FULL=$(echo "$APP_FULL" | tr '[:upper:]' '[:lower:]')
 
 echo "Git tag:       '$CURRENT_VERSION'"
 echo "Full version:  '$APP_FULL'"

src/codegen/Common.ts

@@ -425,6 +425,28 @@ const common = {
       ),
     ).extends(CG.common('ISelectionComponent')),
 
+  IGridColumnProperties: () =>
+    new CG.obj(
+      new CG.prop(
+        'colSpan',
+        new CG.expr(ExprVal.Number)
+          .optional()
+          .setTitle('Column span')
+          .setDescription('Number of columns this cell should span. Defaults to 1 if not set.'),
+      ),
+      new CG.prop(
+        'hidden',
+        new CG.expr(ExprVal.Boolean)
+          .optional()
+          .setTitle('Hidden column')
+          .setDescription(
+            'Expression or boolean indicating whether this column should be hidden. Defaults to false if not set.',
+          ),
+      ),
+    )
+      .setTitle('Grid column properties')
+      .setDescription('Additional properties for columns in the Grid component'),
+
   // Table configuration:
   ITableColumnsAlignText: () =>
     new CG.enum('left', 'center', 'right')
@@ -588,7 +610,8 @@ const common = {
     new CG.obj(
       new CG.prop('component', new CG.str().optional().setTitle('Component ID').setDescription('ID of the component')),
       new CG.prop('columnOptions', CG.common('ITableColumnProperties').optional()),
-    ).extends(CG.common('ITableColumnProperties')),
+      new CG.prop('gridColumnOptions', CG.common('IGridColumnProperties').optional()),
+    ),
   GridCellLabelFrom: () =>
     new CG.obj(
       new CG.prop(
@@ -598,7 +621,8 @@ const common = {
           .setDescription('Set this to a component id to display the label from that component'),
       ),
       new CG.prop('columnOptions', CG.common('ITableColumnProperties').optional()),
-    ).extends(CG.common('ITableColumnProperties')),
+      new CG.prop('gridColumnOptions', CG.common('IGridColumnProperties').optional()),
+    ),
   GridCellText: () =>
     new CG.obj(
       new CG.prop(
@@ -607,7 +631,8 @@ const common = {
       ),
       new CG.prop('help', new CG.str().optional().setTitle('Help').setDescription('Help text to display')),
       new CG.prop('columnOptions', CG.common('ITableColumnProperties').optional()),
-    ).extends(CG.common('ITableColumnProperties')),
+      new CG.prop('gridColumnOptions', CG.common('IGridColumnProperties').optional()),
+    ),
   GridCell: () =>
     new CG.union(CG.common('GridComponentRef'), CG.null, CG.common('GridCellText'), CG.common('GridCellLabelFrom')),
   GridRow: () =>

src/layout/Grid/GridComponent.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { RenderGrid } from 'src/layout/Grid/GridComponent';
+import { renderGenericComponentTest } from 'src/test/renderWithProviders';
+import type { CompExternalExact } from 'src/layout/layout';
+
+describe('GridComponent', () => {
+  const render = async (hiddenValue: unknown) =>
+    await renderGenericComponentTest({
+      type: 'Grid',
+      renderer: (props) => <RenderGrid {...props} />,
+      component: {
+        rows: [
+          {
+            header: true,
+            readOnly: false,
+            cells: [
+              { text: 'accordion.title' },
+              {
+                text: 'FormLayout',
+                gridColumnOptions: { hidden: hiddenValue },
+              },
+            ],
+          },
+          {
+            header: false,
+            readOnly: false,
+            cells: [{ text: 'accordion.title' }, { text: 'FormLayout' }],
+          },
+        ],
+      } as CompExternalExact<'Grid'>,
+    });
+
+  it('hides a column when header cell hidden evaluates to true', async () => {
+    await render(true);
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(1);
+
+    const titleOccurrences = screen.getAllByText('This is a title');
+    expect(titleOccurrences).toHaveLength(2);
+    expect(screen.queryByText('This is a page title')).not.toBeInTheDocument();
+
+    const bodyCells = screen.getAllByRole('cell');
+    expect(bodyCells).toHaveLength(1);
+    expect(screen.getAllByText('This is a title')[0]).toBeInTheDocument();
+  });
+
+  it('does not hide a column when hidden expression is invalid for boolean', async () => {
+    await render(false);
+
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(2);
+
+    const titleOccurrences = screen.getAllByText('This is a title');
+    expect(titleOccurrences.length).toBeGreaterThanOrEqual(1);
+    const pageTitleOccurrences = screen.getAllByText('This is a page title');
+    expect(pageTitleOccurrences.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('applies colSpan from text cell settings', async () => {
+    await renderGenericComponentTest({
+      type: 'Grid',
+      renderer: (props) => <RenderGrid {...props} />,
+      component: {
+        rows: [
+          {
+            header: true,
+            readOnly: false,
+            cells: [
+              {
+                text: 'accordion.title',
+                colSpan: 2,
+              },
+              { text: 'FormLayout' },
+            ],
+          },
+        ],
+      } as CompExternalExact<'Grid'>,
+    });
+
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers.length).toBeGreaterThanOrEqual(1);
+    const firstHeaderCell = headers[0];
+    expect(firstHeaderCell).toHaveAttribute('colspan', '2');
+  });
+
+  it('applies colSpan for component cells', async () => {
+    await renderGenericComponentTest({
+      type: 'Grid',
+      renderer: (props) => <RenderGrid {...props} />,
+      component: {
+        rows: [
+          {
+            header: false,
+            readOnly: false,
+            cells: [
+              {
+                component: 'grid-text',
+                gridColumnOptions: {
+                  colSpan: 3,
+                },
+              },
+            ],
+          },
+        ],
+      } as CompExternalExact<'Grid'>,
+      queries: {
+        fetchLayouts: async () => ({
+          FormLayout: {
+            data: {
+              layout: [
+                {
+                  id: 'my-test-component-id',
+                  type: 'Grid',
+                  rows: [
+                    {
+                      header: false,
+                      readOnly: false,
+                      cells: [
+                        {
+                          component: 'grid-text',
+                          gridColumnOptions: {
+                            colSpan: 3,
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  id: 'grid-text',
+                  type: 'Text',
+                  value: '',
+                  textResourceBindings: {
+                    title: 'accordion.title',
+                  },
+                },
+              ],
+            },
+          },
+        }),
+      },
+    });
+
+    const cells = screen.getAllByRole('cell');
+    expect(cells.length).toBeGreaterThanOrEqual(1);
+    const firstCell = cells[0];
+    expect(firstCell).toHaveAttribute('colspan', '3');
+  });
+});