Add feature to manipulate title in tablecard on startpage (#1333)

* feat: add table card title transformation utility and tests

* feat: implement table card title transformation and update configuration schema

* Update pull-request.yml

* temp remove dynamic title override

* Resetting temporary config an deploy

Author: PerIngeVaaje

.github/workflows/pull-request.yml

@@ -2,9 +2,9 @@ name: Build and Deploy
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
   pull_request:
-    branches: ['main']
+    branches: ["main"]
 
 permissions:
   contents: read
@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          cache: "npm"
 
       - run: npm ci
       - run: npm run build
@@ -45,7 +45,7 @@ jobs:
       - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: 24.x
-          cache: 'npm'
+          cache: "npm"
 
       - run: npm ci && npm run build && npm run coverage
 
@@ -96,7 +96,7 @@ jobs:
       - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: 24.x
-          cache: 'npm'
+          cache: "npm"
 
       - run: npm ci && npm run build-artifact
 

packages/pxweb2/src/app/pages/StartPage/StartPage.tsx

@@ -60,6 +60,7 @@ import {
 } from '../../util/createBreadcrumbItems';
 import { createTableListSEO } from '../../util/seo/tableListSEO';
 import WipStatusMessage from '../../components/Banners/WipStatusMessage';
+import { applyTableCardTitleTransform } from '../../util/tableCardTitleTransform';
 
 const StartPage = () => {
   const { t, i18n } = useTranslation();
@@ -433,7 +434,7 @@ const StartPage = () => {
         lastPeriodString = table.lastPeriod?.slice(5, 9);
       }
 
-      const cardTitle = table.label ?? '';
+      const cardTitle = applyTableCardTitleTransform(table.label ?? '');
       const cardUpdatedDate = table.updated
         ? t('date.simple_date', {
             value: new Date(table.updated),

packages/pxweb2/src/app/util/config/config.schema.json

@@ -76,6 +76,25 @@
       "type": "boolean",
       "description": "Set to true to show breadcrumb on start page"
     },
+    "tableCardTitleTransform": {
+      "type": "object",
+      "description": "Optional regex transform applied to start page card titles before rendering.",
+      "properties": {
+        "pattern": {
+          "type": "string",
+          "description": "Regular expression source string used to match parts of a title."
+        },
+        "flags": {
+          "type": "string",
+          "description": "Regular expression flags, for example 'g' or 'gi'."
+        },
+        "replacement": {
+          "type": "string",
+          "description": "Replacement string used with String.replace. Defaults to empty string."
+        }
+      },
+      "required": ["pattern"]
+    },
     "presentationPage": {
       "type": "object",
       "description": "Configuration for the presentation page",

packages/pxweb2/src/app/util/config/configType.ts

@@ -13,6 +13,11 @@ export type Config = {
   showBreadCrumbOnStartPage: boolean;
   specialCharacters: string[];
   variableFilterExclusionList: { [propName: string]: string[] };
+  tableCardTitleTransform?: {
+    pattern: string;
+    flags?: string;
+    replacement?: string;
+  };
   homePage?: {
     [lang: string]: string;
   };

packages/pxweb2/src/app/util/tableCardTitleTransform.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { applyTableCardTitleTransform } from './tableCardTitleTransform';
+
+vi.mock('./config/getConfig', () => ({
+  getConfig: vi.fn(() => ({})),
+}));
+
+describe('applyTableCardTitleTransform', () => {
+  it('returns original title when transform config is missing', () => {
+    expect(applyTableCardTitleTransform('1234: Example title')).toBe(
+      '1234: Example title',
+    );
+  });
+
+  it('applies regex replacement from config', () => {
+    const result = applyTableCardTitleTransform('1234: Example title', {
+      pattern: String.raw`^\d+:\s*`,
+      replacement: '',
+    });
+
+    expect(result).toBe('Example title');
+  });
+
+  it('supports regex flags from config', () => {
+    const result = applyTableCardTitleTransform('ABC test abc test', {
+      pattern: 'abc',
+      flags: 'gi',
+      replacement: 'X',
+    });
+
+    expect(result).toBe('X test X test');
+  });
+
+  it('returns original title when regex is invalid', () => {
+    const result = applyTableCardTitleTransform('Title', {
+      pattern: '[',
+      replacement: '',
+    });
+
+    expect(result).toBe('Title');
+  });
+});

packages/pxweb2/src/app/util/tableCardTitleTransform.ts

@@ -0,0 +1,26 @@
+import { getConfig } from './config/getConfig';
+import type { Config } from './config/configType';
+
+type TableCardTitleTransformConfig = NonNullable<
+  Config['tableCardTitleTransform']
+>;
+
+export function applyTableCardTitleTransform(
+  title: string,
+  transformConfig?: TableCardTitleTransformConfig,
+): string {
+  const transform = transformConfig ?? getConfig().tableCardTitleTransform;
+
+  if (!transform?.pattern) {
+    return title;
+  }
+
+  try {
+    return title.replace(
+      new RegExp(transform.pattern, transform.flags ?? ''),
+      transform.replacement ?? '',
+    );
+  } catch {
+    return title;
+  }
+}