ui-soxo-bootstrap-core 2.6.62-dev.1 → 2.6.62-dev.3

package/core/lib/components/support-desk/support-desk.utils.test.js

@@ -0,0 +1,335 @@
+/**
+ * @jest-environment node
+ */
+import { createDecipheriv, createHmac, randomBytes, webcrypto } from 'crypto';
+
+// The module reads Web Crypto from `window`. Provide it in the node environment.
+global.window = { crypto: webcrypto };
+
+function setOnline(value) {
+  Object.defineProperty(global, 'navigator', { value: { onLine: value }, configurable: true, writable: true });
+}
+
+const {
+  API_ERROR_MESSAGES,
+  TicketApiError,
+  buildFormUrl,
+  buildTicketsApiUrl,
+  buildTicketsPageUrl,
+  createToken,
+  fetchTickets,
+  formatDate,
+  normalize,
+  resolveSupportConfig,
+} = require('./support-desk.utils');
+
+const SECRET = randomBytes(64);
+
+const SETTING = {
+  helpDeskLink: 'https://help.example.com/raise-ticket/new',
+  projectToken: 'PROJECT_TOKEN',
+  encryptedToken: SECRET.toString('base64'),
+};
+
+const USER = { email: 'jane@example.com' };
+
+const b64 = (value) => Buffer.from(value, 'base64url');
+
+/** Decrypts a compact JWE the same way the Helpdesk does, and checks its integrity tag. */
+function decryptJwe(jwe, secret = SECRET) {
+  const [header, encryptedKey, iv, ciphertext, tag] = jwe.split('.');
+  expect(encryptedKey).toBe('');
+  expect(JSON.parse(b64(header).toString())).toEqual({ alg: 'dir', enc: 'A256CBC-HS512' });
+
+  const al = Buffer.alloc(8);
+  al.writeBigUInt64BE(BigInt(header.length * 8));
+  const expectedTag = createHmac('sha512', secret.subarray(0, 32))
+    .update(Buffer.concat([Buffer.from(header), b64(iv), b64(ciphertext), al]))
+    .digest()
+    .subarray(0, 32);
+  expect(expectedTag.equals(b64(tag))).toBe(true);
+
+  const decipher = createDecipheriv('aes-256-cbc', secret.subarray(32), b64(iv));
+  return JSON.parse(Buffer.concat([decipher.update(b64(ciphertext)), decipher.final()]).toString());
+}
+
+describe('resolveSupportConfig', () => {
+  it('is enabled when the link, project token and secret are set', () => {
+    const config = resolveSupportConfig(SETTING, USER);
+
+    expect(config.enabled).toBe(true);
+    expect(config.formUrl).toBe(SETTING.helpDeskLink);
+    expect(config.user).toBe('jane@example.com');
+  });
+
+  it.each(['helpDeskLink', 'projectToken', 'encryptedToken'])('is disabled when %s is missing', (key) => {
+    expect(resolveSupportConfig({ ...SETTING, [key]: undefined }, USER).enabled).toBe(false);
+  });
+
+  it('is disabled for an empty or missing setting', () => {
+    expect(resolveSupportConfig(undefined, USER).enabled).toBe(false);
+    expect(resolveSupportConfig(null, USER).enabled).toBe(false);
+  });
+
+  it('derives the ticket list and API host from the form link', () => {
+    const config = resolveSupportConfig(SETTING, USER);
+
+    expect(config.ticketsUrl).toBe('https://help.example.com/my-tickets');
+    expect(config.apiBase).toBe('https://help.example.com');
+  });
+
+  it('prefers myTicketsLink and apiUrl, and trims trailing slashes', () => {
+    const config = resolveSupportConfig(
+      { ...SETTING, myTicketsLink: 'https://other.example.com/tickets', apiUrl: 'https://api.example.com//' },
+      USER
+    );
+
+    expect(config.ticketsUrl).toBe('https://other.example.com/tickets');
+    expect(config.apiBase).toBe('https://api.example.com');
+  });
+
+  it('uses the username when the user has no email', () => {
+    expect(resolveSupportConfig(SETTING, { username: 'jane' }).user).toBe('jane');
+    expect(resolveSupportConfig(SETTING, {}).user).toBe('');
+  });
+
+  it('defaults the token lifetime and enforces the minimum', () => {
+    expect(resolveSupportConfig(SETTING, USER).ttlSeconds).toBe(300);
+    expect(resolveSupportConfig({ ...SETTING, tokenTtlSeconds: 'abc' }, USER).ttlSeconds).toBe(300);
+    expect(resolveSupportConfig({ ...SETTING, tokenTtlSeconds: 5 }, USER).ttlSeconds).toBe(30);
+    expect(resolveSupportConfig({ ...SETTING, tokenTtlSeconds: 60 }, USER).ttlSeconds).toBe(60);
+  });
+});
+
+describe('createToken', () => {
+  beforeEach(() => {
+    jest.spyOn(Date, 'now').mockReturnValue(1_700_000_000_000);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('encrypts the project token and user into a JWE the Helpdesk can read', async () => {
+    const payload = decryptJwe(await createToken(resolveSupportConfig(SETTING, USER)));
+
+    expect(payload.token).toBe('PROJECT_TOKEN');
+    expect(payload.user).toBe('jane@example.com');
+  });
+
+  it('adds clock skew leeway on both sides of the lifetime', async () => {
+    const payload = decryptJwe(await createToken(resolveSupportConfig({ ...SETTING, tokenTtlSeconds: 60 }, USER)));
+
+    expect(payload.iat).toBe(1_700_000_000 - 30);
+    expect(payload.exp).toBe(1_700_000_000 + 60 + 30);
+  });
+
+  it('makes a different token every time', async () => {
+    const config = resolveSupportConfig(SETTING, USER);
+
+    expect(await createToken(config)).not.toBe(await createToken(config));
+  });
+
+  it('rejects a secret that is not 64 bytes', async () => {
+    const config = resolveSupportConfig({ ...SETTING, encryptedToken: randomBytes(32).toString('base64') }, USER);
+
+    await expect(createToken(config)).rejects.toThrow('must decode to 64 bytes (got 32)');
+  });
+
+  it('rejects a secret that is not base64', async () => {
+    const config = resolveSupportConfig({ ...SETTING, encryptedToken: '***not base64***' }, USER);
+
+    await expect(createToken(config)).rejects.toThrow('not valid base64');
+  });
+
+  it('rejects when the user has no email or username', async () => {
+    await expect(createToken(resolveSupportConfig(SETTING, {}))).rejects.toThrow('no email');
+  });
+
+  it('rejects when the project token is missing', async () => {
+    const config = resolveSupportConfig({ ...SETTING, projectToken: '' }, USER);
+
+    await expect(createToken(config)).rejects.toThrow('not configured');
+  });
+});
+
+describe('link builders', () => {
+  const config = resolveSupportConfig(SETTING, USER);
+
+  it('adds the token to the form link', async () => {
+    const url = new URL(await buildFormUrl(config));
+
+    expect(`${url.origin}${url.pathname}`).toBe('https://help.example.com/raise-ticket/new');
+    expect(decryptJwe(url.searchParams.get('d')).user).toBe('jane@example.com');
+  });
+
+  it('uses & when the link already has a query', async () => {
+    const withQuery = resolveSupportConfig({ ...SETTING, helpDeskLink: 'https://help.example.com/new?x=1' }, USER);
+    const url = new URL(await buildFormUrl(withQuery));
+
+    expect(url.searchParams.get('x')).toBe('1');
+    expect(url.searchParams.get('d')).toBeTruthy();
+  });
+
+  it('adds the token to the ticket list page link', async () => {
+    const url = new URL(await buildTicketsPageUrl(config));
+
+    expect(url.pathname).toBe('/my-tickets');
+    expect(url.searchParams.get('d')).toBeTruthy();
+  });
+
+  it('builds the API link and skips empty params', async () => {
+    const url = new URL(await buildTicketsApiUrl(config, { page: 2, search: '', status: undefined, priority: 'High' }));
+
+    expect(url.pathname).toBe('/api/method/get_tickets_based_on_token');
+    expect(url.searchParams.get('page')).toBe('2');
+    expect(url.searchParams.get('priority')).toBe('High');
+    expect(url.searchParams.has('search')).toBe(false);
+    expect(url.searchParams.has('status')).toBe(false);
+  });
+
+  it('fails clearly when a link is not configured', async () => {
+    const noLinks = { ...config, formUrl: '', ticketsUrl: '', apiBase: '' };
+
+    await expect(buildFormUrl(noLinks)).rejects.toThrow('form link is not configured');
+    await expect(buildTicketsPageUrl(noLinks)).rejects.toThrow('list link is not configured');
+    await expect(buildTicketsApiUrl(noLinks)).rejects.toThrow('API is not configured');
+  });
+});
+
+describe('fetchTickets', () => {
+  const config = resolveSupportConfig(SETTING, USER);
+  const reply = (body, ok = true, status = 200) => ({ ok, status, json: async () => body });
+
+  beforeEach(() => setOnline(true));
+
+  afterEach(() => {
+    delete global.fetch;
+    jest.restoreAllMocks();
+  });
+
+  it('returns tickets from a Frappe style response', async () => {
+    global.fetch = jest.fn().mockResolvedValue(
+      reply({ message: { success: true, tickets: [{ name: 'HD-1' }], total_count: 7, statuses: ['Open'], priorities: ['High'] } })
+    );
+
+    expect(await fetchTickets(config, { page: 1 })).toEqual({
+      tickets: [{ name: 'HD-1' }],
+      total: 7,
+      statuses: ['Open'],
+      priorities: ['High'],
+    });
+    expect(global.fetch.mock.calls[0][1]).toMatchObject({ credentials: 'omit' });
+  });
+
+  it('accepts a response that is not wrapped in message', async () => {
+    global.fetch = jest.fn().mockResolvedValue(reply({ success: true }));
+
+    expect(await fetchTickets(config, {})).toEqual({ tickets: [], total: 0, statuses: [], priorities: [] });
+  });
+
+  it('retries once with a new token when the token has expired', async () => {
+    global.fetch = jest
+      .fn()
+      .mockResolvedValueOnce(reply({ message: { success: false, error: 'expired_token' } }))
+      .mockResolvedValueOnce(reply({ message: { success: true, tickets: [] } }));
+
+    await expect(fetchTickets(config, {})).resolves.toMatchObject({ tickets: [] });
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+    const tokens = global.fetch.mock.calls.map(([url]) => new URL(url).searchParams.get('d'));
+    expect(tokens[0]).not.toBe(tokens[1]);
+  });
+
+  it('gives up after one retry', async () => {
+    global.fetch = jest.fn().mockResolvedValue(reply({ message: { success: false, error: 'expired_token' } }));
+
+    await expect(fetchTickets(config, {})).rejects.toThrow(API_ERROR_MESSAGES.expired_token);
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('turns a known API error into a readable message', async () => {
+    global.fetch = jest.fn().mockResolvedValue(reply({ message: { success: false, error: 'project_not_found' } }));
+
+    await expect(fetchTickets(config, {})).rejects.toThrow(API_ERROR_MESSAGES.project_not_found);
+  });
+
+  it('falls back to a generic message for an unknown API error', async () => {
+    global.fetch = jest.fn().mockResolvedValue(reply({ message: { success: false, error: 'something_new' } }));
+
+    await expect(fetchTickets(config, {})).rejects.toThrow(API_ERROR_MESSAGES.invalid_token);
+  });
+
+  it('reports an HTTP error status', async () => {
+    global.fetch = jest.fn().mockResolvedValue(reply({}, false, 500));
+
+    await expect(fetchTickets(config, {})).rejects.toMatchObject({ code: 'http', message: expect.stringContaining('500') });
+  });
+
+  it('reports a blocked request (CORS) so the page can fall back', async () => {
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'));
+
+    await expect(fetchTickets(config, {})).rejects.toMatchObject({ code: 'blocked' });
+  });
+
+  it('reports offline before blocked', async () => {
+    setOnline(false);
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'));
+
+    await expect(fetchTickets(config, {})).rejects.toMatchObject({ code: 'offline' });
+  });
+
+  it('reports a cancelled request as aborted', async () => {
+    const abort = new Error('aborted');
+    abort.name = 'AbortError';
+    global.fetch = jest.fn().mockRejectedValue(abort);
+
+    await expect(fetchTickets(config, {})).rejects.toMatchObject({ code: 'aborted' });
+  });
+
+  it('reports a slow Helpdesk as a timeout', async () => {
+    // Fire the 15 second request timer immediately.
+    const realSetTimeout = global.setTimeout;
+    jest.spyOn(global, 'setTimeout').mockImplementation((fn, ms, ...args) => (ms === 15000 ? (fn(), 0) : realSetTimeout(fn, ms, ...args)));
+    global.fetch = jest.fn((url, { signal }) => new Promise((resolve, reject) => {
+      const abort = () => reject(Object.assign(new Error('aborted'), { name: 'AbortError' }));
+      if (signal.aborted) abort();
+      signal.addEventListener('abort', abort);
+    }));
+
+    await expect(fetchTickets(config, {})).rejects.toMatchObject({ code: 'timeout' });
+  });
+
+  it('stops when the caller cancels', async () => {
+    const controller = new AbortController();
+    global.fetch = jest.fn(
+      (url, { signal }) =>
+        new Promise((resolve, reject) => {
+          signal.addEventListener('abort', () => {
+            const err = new Error('aborted');
+            err.name = 'AbortError';
+            reject(err);
+          });
+        })
+    );
+
+    const pending = fetchTickets(config, {}, controller.signal);
+    const assertion = expect(pending).rejects.toBeInstanceOf(TicketApiError);
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    controller.abort();
+    await assertion;
+  });
+});
+
+describe('helpers', () => {
+  it('normalize makes a lowercase, dashed key', () => {
+    expect(normalize('Work In Progress')).toBe('work-in-progress');
+    expect(normalize(undefined)).toBe('');
+  });
+
+  it('formatDate formats the Helpdesk timestamp and tolerates bad input', () => {
+    expect(formatDate('2026-10-21 12:07:02')).toMatch(/21/);
+    expect(formatDate('')).toBe('-');
+    expect(formatDate('not a date')).toBe('not a date');
+  });
+});

package/core/lib/elements/basic/table/table.js

@@ -3,7 +3,16 @@ import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { GlobalContext } from '../../../Store';
 
-const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange }) => {
+import './table.scss';
+
+/**
+ * Table with the theme styling.
+ *
+ * `freezeHeader` keeps the header row fixed while the rows scroll vertically. It is opt-in,
+ * use it for long lists only. The header cells stay inside the same table as the rows
+ * (see table.scss), so the columns always line up with the header.
+ */
+const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange, freezeHeader }) => {
   const { state } = useContext(GlobalContext);
 
   useEffect(() => {}, [state.theme.colors]);
@@ -60,6 +69,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
     <Table
       title={title ? () => title : undefined}
       scroll={scroll}
+      className={freezeHeader ? 'frozen-header-table' : undefined}
       dataSource={dataSource}
       loading={loading}
       bordered
@@ -86,10 +96,12 @@ TableComponent.propTypes = {
   columns: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
   loading: PropTypes.bool,
+  freezeHeader: PropTypes.bool,
 };
 
 TableComponent.defaultProps = {
   loading: false,
+  freezeHeader: false,
 };
 
 export default TableComponent;

package/core/lib/elements/basic/table/table.scss

@@ -0,0 +1,37 @@
+// Table with a frozen header (freezeHeader).
+//
+// Not the antd `scroll.y` : there the header is a separate table and takes its column
+// widths from the body, so a header wider than its cells wraps or overlaps. Here the
+// header stays in the same table as the rows, the content scrolls in both directions
+// and the header cells stick to the top of it.
+.frozen-header-table {
+    .ant-table-content {
+        // rows scroll under the header, the pagination below the table stays in view
+        max-height: max(400px, calc(100vh - 220px));
+        overflow: auto !important;
+    }
+
+    // antd draws the top line of a bordered table on the `table` element, which scrolls
+    // away with the rows. Draw it on the content wrapper instead, that one stays in place.
+    &.ant-table-wrapper .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content {
+        border-top: 1px solid #f0f0f0;
+
+        >table {
+            border-top: 0;
+        }
+    }
+
+    .ant-table-thead>tr>th {
+        position: sticky;
+        top: 0;
+        z-index: 3;
+    }
+
+    // Header cells of the fixed columns stick to the top and to the side,
+    // above the header cells that scroll
+    .ant-table-thead>tr>th.ant-table-cell-fix-left,
+    .ant-table-thead>tr>th.ant-table-cell-fix-right {
+        top: 0;
+        z-index: 4;
+    }
+}

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

@@ -292,7 +292,8 @@ function BranchAwareActionLink({ label, redirectLink, hasTargetBranchAccess }) {
       onClick={(e) => {
         e.preventDefault();
         Modal.confirm({
-          content: 'This data is another branch. Switch to that branch to view details?',
+          title: 'Switch Branch?', // Adding a title makes it look more standard
+          content: 'This record belongs to another branch. Would you like to switch branches to view the details?',
           onOk: () => {
             if (hasTargetBranchAccess) {
               Location.navigate({ url: redirectLink });
@@ -300,8 +301,8 @@ function BranchAwareActionLink({ label, redirectLink, hasTargetBranchAccess }) {
             }
 
             Modal.error({
-              title: 'Branch Switch Failed',
-              content: "You don't have permission to view this branch's details.",
+              title: 'Access Denied',
+              content: 'This data belongs to another branch.Would you like to switch branches to view the details?',
             });
           },
         });

package/core/modules/steps/steps.scss

@@ -342,7 +342,7 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Thin connecting line drawn into the gap toward the next step.
+/* Thin connecting "strip" drawn into the gap toward the next step.
    Width matches the strip's gap so it spans the space without overhanging. */
 .steps-breadcrumb-item:not(:last-child)::after {
   content: '';
@@ -350,9 +350,9 @@
   left: 100%;
   top: 50%;
   width: clamp(28px, 3vw, 52px);
-  height: 1px;
-  background: rgba(37, 58, 91, 0.2);
-  transform: translateY(-50%);
+  height: 0px;
+  border-top: 0.5px solid #ffffff66;
+  transform: translateY(-50%) rotate(0deg);
 }
 
 .steps-breadcrumb-item:active {
@@ -414,11 +414,11 @@
   color: #253a5b;
 }
 
-/* COMPLETED — filled navy circle. */
+/* COMPLETED — translucent white circle (was solid navy/blue). */
 .steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #253a5b;
-  border-color: #253a5b;
-  color: #ffffff;
+  background: #ffffff80;
+  border-color: #ffffff80;
+  color: #253a5b;
 }
 
 /* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.62-dev.1",
+  "version": "2.6.62-dev.3",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"