ui-soxo-bootstrap-core 2.6.1-dev.1 → 2.6.1-dev.10

package/core/modules/reporting/components/reporting-dashboard/display-columns/display-cell-renderer.js

@@ -0,0 +1,252 @@
+import React from 'react';
+import { Tag } from 'antd';
+import * as Icons from '@ant-design/icons';
+import { Link } from 'react-router-dom';
+
+/**
+ * Utilities for rendering Reporting Dashboard display columns.
+ *
+ * Backward-compatibility contract for action columns:
+ * 1. `entry.field === 'action'` is always treated as legacy action behavior.
+ * 2. `entry.type === 'action' && entry.field !== 'action'` is treated as the new action layer.
+ * 3. All other entries follow existing non-action render logic.
+ */
+
+/**
+ * @typedef {Object} ReplaceVariable
+ * @property {string} field Field name from row data used to replace `@field;` placeholders in `redirect_link`.
+ */
+
+/**
+ * @typedef {Object} DisplayColumnEntry
+ * @property {string} [field] Source field name from row data.
+ * @property {string} [type] Supported values include `link`, `action`, `number`.
+ * @property {string} [title] Display title.
+ * @property {string} [tooltip] Optional tooltip text for table header.
+ * @property {string} [color] Static text color for default text rendering.
+ * @property {boolean} [enableColor] Enables color-based rendering using `record.color_code`.
+ * @property {string} [columnType] When `enableColor` is true, supports `tag` and `span`.
+ * @property {Object.<string, {icon: string, color: string, size: string}>} [displayIcons] Icon mapping keyed by row value.
+ * @property {string} [display_name_link] Legacy action link label fallback.
+ * @property {string} [label] New action link label fallback.
+ * @property {string} [redirect_link] Redirect template (example: `/path/@opb_id;`).
+ * @property {ReplaceVariable[]} [replace_variables] Placeholder replacement config for `redirect_link`.
+ * @property {string} [component] Custom component name for `field === 'custom'`.
+ * @property {{field: string, value: string}[]} [props] Mapping from record fields to custom component prop keys.
+ * @property {Object} [config] Static props passed to custom component.
+ * @property {(record: DisplayRecord) => React.ReactNode} [render] Optional custom render override.
+ */
+
+/**
+ * @typedef {Object.<string, any>} DisplayRecord
+ */
+
+/**
+ * Checks if the column entry is a legacy action configuration.
+ *
+ * @param {DisplayColumnEntry} entry
+ * @returns {boolean}
+ */
+export function isLegacyActionEntry(entry = {}) {
+  return entry.field === 'action';
+}
+
+/**
+ * Checks if the column entry is a new action-type configuration.
+ *
+ * @param {DisplayColumnEntry} entry
+ * @returns {boolean}
+ */
+export function isActionTypeEntry(entry = {}) {
+  return entry.type === 'action' && entry.field !== 'action';
+}
+
+/**
+ * Builds redirect link by replacing configured placeholders with row values.
+ *
+ * Placeholder format in `redirect_link` is `@field;`.
+ * Example:
+ * redirect_link: `/visit/@opb_id;/bill/@opno;`
+ * replace_variables: [{ field: 'opb_id' }, { field: 'opno' }]
+ * result: `/visit/123/bill/OP-100`
+ *
+ * @param {DisplayColumnEntry} entry
+ * @param {DisplayRecord} record
+ * @returns {string}
+ */
+export function getRedirectLink(entry = {}, record = {}) {
+  let redirectLink = entry.redirect_link || '';
+
+  if (Array.isArray(entry.replace_variables)) {
+    entry.replace_variables.forEach((replacement) => {
+      const value = record[replacement.field] || '';
+      redirectLink = redirectLink.replace(new RegExp(`@${replacement.field};`, 'g'), value);
+    });
+  }
+
+  return redirectLink;
+}
+
+/**
+ * Resolves action label text with backward-compatible precedence.
+ *
+ * Legacy action (`field === 'action'`):
+ * - `entry.display_name_link`
+ * - `"View"`
+ *
+ * New action layer (`type === 'action' && field !== 'action'`):
+ * - `record[entry.field]`
+ * - `entry.label`
+ * - `entry.display_name_link`
+ * - `"View"`
+ *
+ * @param {DisplayColumnEntry} entry
+ * @param {DisplayRecord} record
+ * @returns {string}
+ */
+export function getActionLabel(entry = {}, record = {}) {
+  // Legacy action path should stay unchanged.
+  if (isLegacyActionEntry(entry)) {
+    return entry.display_name_link ? entry.display_name_link : 'View';
+  }
+
+  const fieldValue = entry.field ? record[entry.field] : null;
+  if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
+    return fieldValue;
+  }
+
+  if (entry.label) {
+    return entry.label;
+  }
+
+  if (entry.display_name_link) {
+    return entry.display_name_link;
+  }
+
+  return 'View';
+}
+
+/**
+ * Renders configured custom component cells (`field === 'custom'`).
+ *
+ * Each `entry.props` item maps a record field to a prop name:
+ * `{ field: 'status_text', value: 'description' }` becomes
+ * `LoadedComponent({ description: record.status_text })`.
+ *
+ * @param {Object} root0
+ * @param {DisplayColumnEntry} root0.entry
+ * @param {DisplayRecord} root0.record
+ * @param {Object.<string, React.ComponentType<any>>} root0.CustomComponents
+ * @param {Function} root0.refresh
+ * @returns {React.ReactNode}
+ */
+function renderCustomComponent({ entry, record, CustomComponents, refresh }) {
+  const componentName = entry.component;
+  const genericComponents = CustomComponents || {};
+
+  if (!componentName || !genericComponents[componentName]) {
+    return null;
+  }
+
+  const LoadedComponent = genericComponents[componentName];
+  const propValue = {};
+
+  if (Array.isArray(entry.props)) {
+    entry.props.forEach((values) => {
+      const valueCreation = record[values.field];
+      propValue[values.value] = valueCreation;
+    });
+  }
+
+  return (
+    <LoadedComponent
+      {...entry.config}
+      callback={() => {
+        refresh();
+      }}
+      {...record}
+      {...propValue}
+    />
+  );
+}
+
+/**
+ * Renders table cell content for a configured display column.
+ *
+ * Render priority:
+ * 1. `entry.render(record)` override
+ * 2. `type === 'link'`
+ * 3. action columns (legacy or new action layer)
+ * 4. custom component (`field === 'custom'`)
+ * 5. color tag/span via `record.color_code` + `enableColor`
+ * 6. dynamic icon mapping (`displayIcons`)
+ * 7. default text span
+ *
+ * @param {Object} root0
+ * @param {DisplayColumnEntry} root0.entry
+ * @param {DisplayRecord} root0.record
+ * @param {Object.<string, React.ComponentType<any>>} root0.CustomComponents
+ * @param {Function} root0.refresh
+ * @returns {React.ReactNode}
+ */
+export function renderDisplayCell({ entry, record, CustomComponents, refresh }) {
+  let textColor = 'inherit';
+
+  if (entry.color) {
+    textColor = entry.color;
+  }
+
+  if (entry.render) {
+    return entry.render(record);
+  }
+
+  if (entry.type === 'link') {
+    if (record[entry.field]) {
+      return (
+        <a href={record[entry.field]} target="_blank" rel="noopener noreferrer">
+          View
+        </a>
+      );
+    }
+    return null;
+  }
+
+  if (isLegacyActionEntry(entry) || isActionTypeEntry(entry)) {
+    const redirectLink = getRedirectLink(entry, record);
+    return <Link to={`${redirectLink}`}>{getActionLabel(entry, record)}</Link>;
+  }
+
+  if (entry.field === 'custom') {
+    return renderCustomComponent({ entry, record, CustomComponents, refresh });
+  }
+
+  if (record.color_code && entry.enableColor) {
+    if (entry.columnType === 'tag') {
+      return <Tag color={record.color_code}>{record[entry.field]}</Tag>;
+    }
+    if (entry.columnType === 'span') {
+      return <span style={{ color: record.color_code, overflowWrap: 'break-word', WebkitLineClamp: 3 }}>{record[entry.field]}</span>;
+    }
+  }
+
+  if (entry.displayIcons) {
+    const fieldValue = record[entry.field]?.toString();
+    const displayConfig = entry.displayIcons[fieldValue];
+    if (displayConfig) {
+      const DynamicIcon = Icons[displayConfig.icon];
+      if (DynamicIcon) {
+        return (
+          <DynamicIcon
+            style={{
+              color: displayConfig.color,
+              fontSize: displayConfig.size,
+            }}
+          />
+        );
+      }
+    }
+    return null;
+  }
+
+  return <span style={{ color: textColor, whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{record[entry.field]}</span>;
+}

package/core/modules/reporting/components/reporting-dashboard/display-columns/display-cell-renderer.test.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  isLegacyActionEntry,
+  isActionTypeEntry,
+  getRedirectLink,
+  getActionLabel,
+  renderDisplayCell,
+} from './display-cell-renderer';
+
+describe('display-cell-renderer', () => {
+  test('identifies legacy and new action entries correctly', () => {
+    expect(isLegacyActionEntry({ field: 'action' })).toBe(true);
+    expect(isLegacyActionEntry({ field: 'action_text', type: 'action' })).toBe(false);
+
+    expect(isActionTypeEntry({ field: 'action_text', type: 'action' })).toBe(true);
+    expect(isActionTypeEntry({ field: 'action', type: 'action' })).toBe(false);
+  });
+
+  test('builds redirect link from replace variables', () => {
+    const link = getRedirectLink(
+      {
+        redirect_link: '/bill/@opb_id;/visit/@opno;',
+        replace_variables: [{ field: 'opb_id' }, { field: 'opno' }],
+      },
+      { opb_id: 10, opno: 'OP100' },
+    );
+
+    expect(link).toBe('/bill/10/visit/OP100');
+  });
+
+  test('keeps legacy action label behavior unchanged', () => {
+    const entry = {
+      field: 'action',
+      display_name_link: 'Open',
+    };
+
+    expect(getActionLabel(entry, { action: 'Dynamic Value' })).toBe('Open');
+    expect(getActionLabel({ field: 'action' }, { action: 'Dynamic Value' })).toBe('View');
+  });
+
+  test('resolves new action label with fallback precedence', () => {
+    expect(getActionLabel({ type: 'action', field: 'action_text' }, { action_text: 'Review' })).toBe('Review');
+    expect(getActionLabel({ type: 'action', field: 'action_text', label: 'Open' }, {})).toBe('Open');
+    expect(getActionLabel({ type: 'action', field: 'action_text', display_name_link: 'Inspect' }, {})).toBe('Inspect');
+    expect(getActionLabel({ type: 'action', field: 'action_text' }, {})).toBe('View');
+  });
+
+  test('renders link column as anchor', () => {
+    const element = renderDisplayCell({
+      entry: { type: 'link', field: 'report_url' },
+      record: { report_url: 'https://example.com/report' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+
+    expect(element.type).toBe('a');
+    expect(element.props.href).toBe('https://example.com/report');
+  });
+
+  test('renders custom component with mapped props', () => {
+    const MockComponent = () => null;
+    const element = renderDisplayCell({
+      entry: {
+        field: 'custom',
+        component: 'MockComponent',
+        props: [{ field: 'status', value: 'description' }],
+        config: { sample: true },
+      },
+      record: { status: 'Pending', opb_id: 1 },
+      refresh: jest.fn(),
+      CustomComponents: { MockComponent },
+    });
+
+    expect(element.type).toBe(MockComponent);
+    expect(element.props.description).toBe('Pending');
+    expect(element.props.sample).toBe(true);
+    expect(element.props.opb_id).toBe(1);
+  });
+
+  test('renders styled tag/span/icon/text for non-action path', () => {
+    const tagElement = renderDisplayCell({
+      entry: { field: 'status', enableColor: true, columnType: 'tag' },
+      record: { color_code: 'green', status: 'Done' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+    expect(tagElement.props.color).toBe('green');
+    expect(tagElement.props.children).toBe('Done');
+
+    const spanElement = renderDisplayCell({
+      entry: { field: 'status', enableColor: true, columnType: 'span' },
+      record: { color_code: '#ff0000', status: 'Hold' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+    expect(spanElement.type).toBe('span');
+    expect(spanElement.props.style.color).toBe('#ff0000');
+
+    const iconElement = renderDisplayCell({
+      entry: {
+        field: 'state',
+        displayIcons: {
+          Pending: {
+            icon: 'ClockCircleOutlined',
+            color: 'orange',
+            size: '14px',
+          },
+        },
+      },
+      record: { state: 'Pending' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+    expect(iconElement.props.style.color).toBe('orange');
+
+    const textElement = renderDisplayCell({
+      entry: { field: 'remarks', color: '#333' },
+      record: { remarks: 'All good' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+    expect(textElement.type).toBe('span');
+    expect(textElement.props.children).toBe('All good');
+  });
+});
+