ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

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

@@ -0,0 +1,448 @@
+import React, { useState, useContext } from 'react';
+import { Modal, Tag } from 'antd';
+import * as Icons from '@ant-design/icons';
+import { Link } from 'react-router-dom';
+import { GlobalContext, safeJSON, Location } from '../../../../../lib';
+// import { PdfViewer } from '../../../../../lib';
+import { CoreScripts } from '../../../../../models';
+
+/**
+ * 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 = {}, CustomComponents = {}) {
+  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 the PDF/file location for file-based action entries.
+ *
+ * Supports either:
+ * - `entry.file_location` as a direct URL/path
+ * - `entry.file_location` as a record field name
+ *
+ * @param {DisplayColumnEntry} entry
+ * @param {DisplayRecord} record
+ * @returns {string}
+ */
+export function getFileLocation(entry = {}, record = {}) {
+  if (entry.file_location && typeof entry.file_location === 'string' && record[entry.file_location]) {
+    return record[entry.file_location];
+  }
+
+  return record.file_location || entry.file_location || '';
+}
+
+/**
+ * Resolves a value from the row when a config field points to a record key,
+ * otherwise returns the provided literal value.
+ *
+ * @param {*} value
+ * @param {DisplayRecord} record
+ * @returns {*}
+ */
+function resolveRecordValue(value, record = {}) {
+  if (typeof value === 'string' && Object.prototype.hasOwnProperty.call(record, value)) {
+    return record[value];
+  }
+
+  return value;
+}
+
+/**
+ * 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 a PDF file action inside a modal viewer.
+ *
+ * @param {Object} root0
+ * @param {DisplayColumnEntry} root0.entry
+ * @param {DisplayRecord} root0.record
+ * @param {Object.<string, React.ComponentType<any>>} root0.CustomComponents
+ * @returns {React.ReactNode}
+ */
+function FileActionLink({ entry, record, CustomComponents }) {
+  const [isPdfVisible, setIsPdfVisible] = useState(false);
+  const fileUrl = getFileLocation(entry, record);
+  const actionLabel = getActionLabel(entry, record);
+  const FileLoaderComponent = CustomComponents?.FileLoader;
+
+  if (!fileUrl) {
+    return null;
+  }
+
+  const fileLoaderProps = {
+    url: fileUrl,
+    type: resolveRecordValue(entry.file_type, record) || 'pdf',
+    defaultScale: resolveRecordValue(entry.default_scale, record),
+    viewerType: resolveRecordValue(entry.viewer_type, record),
+    config: {
+      requireLinuxPath: resolveRecordValue(entry.require_linux_path, record),
+      replaceBranch: resolveRecordValue(entry.replace_branch, record),
+      ...(entry.file_loader_config || {}),
+    },
+    entry,
+    record,
+  };
+
+  return (
+    <>
+      {/* 1. Add the trigger link/button here */}
+      <a
+        onClick={(e) => {
+          e.preventDefault();
+          setIsPdfVisible(true);
+        }}
+        style={{ cursor: 'pointer' }}
+      >
+        {actionLabel}
+      </a>
+
+      <Modal
+        open={isPdfVisible}
+        onCancel={() => setIsPdfVisible(false)}
+        footer={null}
+        destroyOnClose
+        width={950}
+        style={{ top: 10 }}
+        title={actionLabel}
+      >
+        {/* 2. Ensure the loader component exists */}
+        {FileLoaderComponent ? <FileLoaderComponent {...fileLoaderProps} /> : <p>Loader not found</p>}
+      </Modal>
+    </>
+  );
+}
+
+/**
+ * Returns the branch access list from the signed-in user's organization details.
+ *
+ * `organization_details` may arrive as a JSON string, so this helper keeps the
+ * parsing logic in one place before branch comparisons are made.
+ *
+ * @param {Object} user
+ * @returns {Array}
+ */
+function getAccessibleBranches(user = {}) {
+  const orgDetails = safeJSON(user?.organization_details);
+  return Array.isArray(orgDetails?.branch) ? orgDetails.branch : [];
+}
+
+/**
+ * Resolves branch metadata used to decide whether an action link should prompt
+ * for a branch switch before navigation.
+ *
+ * When an action entry includes `replace_variables` with the `index` field, the
+ * row is treated as branch-aware content. We compare the record's branch id
+ * against the active branch from `localStorage.db_ptr`, and also resolve whether
+ * the user has access to the target branch.
+ *
+ * @param {DisplayColumnEntry} entry
+ * @param {DisplayRecord} record
+ * @param {Object} user
+ * @returns {{requiresBranchSwitch: boolean, hasTargetBranchAccess: boolean}}
+ */
+function getBranchNavigationState(entry = {}, record = {}, user = {}) {
+  const branchFieldConfig = entry.replace_variables?.find((variable) => variable.field === 'index');
+
+  if (!branchFieldConfig) {
+    return { requiresBranchSwitch: false, hasTargetBranchAccess: false };
+  }
+
+  const accessibleBranches = getAccessibleBranches(user);
+  const activeDbPtr = localStorage.getItem('db_ptr');
+  const activeBranch = accessibleBranches.find((branch) => String(branch.dbPtr) === String(activeDbPtr));
+  const targetBranchId = record[branchFieldConfig.field];
+  const targetBranch = accessibleBranches.find((branch) => String(branch.branch_id) === String(targetBranchId));
+
+  return {
+    requiresBranchSwitch: Boolean(targetBranchId) && String(activeBranch?.branch_id) !== String(targetBranchId),
+    hasTargetBranchAccess: Boolean(targetBranch),
+  };
+}
+
+/**
+ * Renders a branch-switch confirmation link for cross-branch records.
+ *
+ * The actual branch change is handled by the landing page via the `index`
+ * query parameter. This link only confirms intent and blocks navigation when
+ * the user does not have access to the target branch.
+ *
+ * @param {Object} root0
+ * @param {string} root0.label
+ * @param {string} root0.redirectLink
+ * @param {boolean} root0.hasTargetBranchAccess
+ * @returns {React.ReactNode}
+ */
+function BranchAwareActionLink({ label, redirectLink, hasTargetBranchAccess }) {
+  return (
+    <a
+      onClick={(e) => {
+        e.preventDefault();
+        Modal.confirm({
+          content: 'This data is another branch. Switch to that branch to view details?',
+          onOk: () => {
+            if (hasTargetBranchAccess) {
+              Location.navigate({ url: redirectLink });
+              return;
+            }
+
+            Modal.error({
+              title: 'Branch Switch Failed',
+              content: "You don't have permission to view this branch's details.",
+            });
+          },
+        });
+      }}
+    >
+      {label}
+    </a>
+  );
+}
+/**
+ * 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)) {
+    if (entry.redirect_link_type === 'file') {
+      return <FileActionLink entry={entry} record={record} CustomComponents={CustomComponents} />;
+    }
+    const { user = {} } = useContext(GlobalContext);
+
+    const redirectLink = getRedirectLink(entry, record);
+    const label = getActionLabel(entry, record);
+    const { requiresBranchSwitch, hasTargetBranchAccess } = getBranchNavigationState(entry, record, user);
+
+    if (requiresBranchSwitch) {
+      return <BranchAwareActionLink label={label} redirectLink={redirectLink} hasTargetBranchAccess={hasTargetBranchAccess} />;
+    }
+
+    return <Link to={`${redirectLink}`}>{label}</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,199 @@
+import React from 'react';
+import {
+  isLegacyActionEntry,
+  isActionTypeEntry,
+  getRedirectLink,
+  getFileLocation,
+  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('resolves file location from direct config value or record field', () => {
+    expect(getFileLocation({ file_location: 'https://example.com/report.pdf' }, {})).toBe('https://example.com/report.pdf');
+    expect(getFileLocation({ file_location: 'document_url' }, { document_url: 'https://example.com/record.pdf' })).toBe(
+      'https://example.com/record.pdf',
+    );
+  });
+
+  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 file action entry as pdf viewer trigger', () => {
+    const element = renderDisplayCell({
+      entry: {
+        type: 'action',
+        field: 'action_text',
+        redirect_link_type: 'file',
+        file_location: 'https://example.com/report.pdf',
+        label: 'Open PDF',
+      },
+      record: { action_text: 'Preview PDF' },
+      refresh: jest.fn(),
+      CustomComponents: {},
+    });
+
+    expect(typeof element.type).toBe('function');
+    expect(element.props.entry.redirect_link_type).toBe('file');
+    expect(element.props.entry.file_location).toBe('https://example.com/report.pdf');
+  });
+
+  test('passes file action props to CustomComponents.FileUpload when available', () => {
+    const FileUpload = () => null;
+    const element = renderDisplayCell({
+      entry: {
+        type: 'action',
+        field: 'action_text',
+        redirect_link_type: 'file',
+        file_location: 'document_path',
+        file_type: 'document_type',
+        default_scale: 'zoom_level',
+        viewer_type: 'inline_viewer',
+        require_linux_path: 'needs_linux_path',
+        replace_branch: 'should_replace_branch',
+        file_loader_config: {
+          sample: true,
+        },
+      },
+      record: {
+        action_text: 'Preview',
+        document_path: '\\\\server\\reports\\doc.pdf',
+        document_type: 'pdf',
+        zoom_level: 1.25,
+        inline_viewer: true,
+        needs_linux_path: true,
+        should_replace_branch: false,
+      },
+      refresh: jest.fn(),
+      CustomComponents: { FileUpload },
+    });
+
+    expect(typeof element.type).toBe('function');
+
+    const modalContent = element.props.children[1].props.children;
+    expect(modalContent.type).toBe(FileUpload);
+    expect(modalContent.props.url).toBe('\\\\server\\reports\\doc.pdf');
+    expect(modalContent.props.type).toBe('pdf');
+    expect(modalContent.props.defaultScale).toBe(1.25);
+    expect(modalContent.props.viewerType).toBe(true);
+    expect(modalContent.props.config).toEqual({
+      requireLinuxPath: true,
+      replaceBranch: false,
+      sample: true,
+    });
+    expect(modalContent.props.record.document_path).toBe('\\\\server\\reports\\doc.pdf');
+  });
+
+  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');
+  });
+});
+