ui-soxo-bootstrap-core 2.6.62-dev.4 → 2.6.63-dev.1

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

@@ -1,335 +1,78 @@
-/**
- * @jest-environment node
- */
-import { createDecipheriv, createHmac, randomBytes, webcrypto } from 'crypto';
+import ApiUtils from '../../utils/api/api.utils';
+import { GENERATE_TOKEN_URL, MODES, getSupportUrl, openInNewTab, resolveSupportConfig } from './support-desk.utils';
 
-// The module reads Web Crypto from `window`. Provide it in the node environment.
-global.window = { crypto: webcrypto };
+jest.mock('../../utils/api/api.utils', () => ({ __esModule: true, default: { post: jest.fn() } }));
 
-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());
-}
+const config = { enabled: true };
 
 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('is enabled only when showSupportBtn is true', () => {
+    expect(resolveSupportConfig({ showSupportBtn: true }).enabled).toBe(true);
+    expect(resolveSupportConfig({ showSupportBtn: false }).enabled).toBe(false);
+    expect(resolveSupportConfig(undefined).enabled).toBe(false);
   });
 
-  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);
+describe('getSupportUrl', () => {
+  beforeEach(() => ApiUtils.post.mockReset());
 
-  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'],
+  it('posts only the mode and returns the url', async () => {
+    ApiUtils.post.mockResolvedValue({ success: true, data: { secureUrl: 'https://h.app/raise-ticket/new?d=x' } });
+    await expect(getSupportUrl(config, MODES.RAISE)).resolves.toBe('https://h.app/raise-ticket/new?d=x');
+    expect(ApiUtils.post).toHaveBeenCalledWith({
+      url: GENERATE_TOKEN_URL,
+      formBody: { mode: 'helpdesk' },
+      hideError: true,
     });
-    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('uses the tickets mode for My Tickets', async () => {
+    ApiUtils.post.mockResolvedValue({ data: { secureUrl: 'https://h.app/my-tickets?d=x' } });
+    await getSupportUrl(config, MODES.MINE);
+    expect(ApiUtils.post.mock.calls[0][0].formBody.mode).toBe('tickets');
   });
 
-  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('asks for a new url on every call', async () => {
+    ApiUtils.post.mockResolvedValue({ data: { secureUrl: 'https://h.app/x?d=1' } });
+    await getSupportUrl(config, MODES.RAISE);
+    await getSupportUrl(config, MODES.RAISE);
+    expect(ApiUtils.post).toHaveBeenCalledTimes(2);
   });
 
-  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('rejects a missing or non-https url', async () => {
+    ApiUtils.post.mockResolvedValue({ data: {} });
+    await expect(getSupportUrl(config, MODES.RAISE)).rejects.toThrow();
+    ApiUtils.post.mockResolvedValue({ data: { secureUrl: 'http://h.app/x' } });
+    await expect(getSupportUrl(config, MODES.RAISE)).rejects.toThrow();
   });
 
-  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('shows the server message when the request fails', async () => {
+    ApiUtils.post.mockRejectedValue({ message: 'Branch not found' });
+    await expect(getSupportUrl(config, MODES.RAISE)).rejects.toThrow('Branch not found');
   });
+});
 
-  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);
-          });
-        })
-    );
+describe('openInNewTab', () => {
+  afterEach(() => jest.restoreAllMocks());
 
-    const pending = fetchTickets(config, {}, controller.signal);
-    const assertion = expect(pending).rejects.toBeInstanceOf(TicketApiError);
-    await new Promise((resolve) => setTimeout(resolve, 20));
-    controller.abort();
-    await assertion;
+  it('opens the tab first, then points it at the link', async () => {
+    const popup = { close: jest.fn(), location: {} };
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    await openInNewTab(async () => 'https://h.app/x');
+    expect(popup.location.href).toBe('https://h.app/x');
+    expect(popup.opener).toBeNull();
   });
-});
 
-describe('helpers', () => {
-  it('normalize makes a lowercase, dashed key', () => {
-    expect(normalize('Work In Progress')).toBe('work-in-progress');
-    expect(normalize(undefined)).toBe('');
+  it('closes the tab when the link fails', async () => {
+    const popup = { close: jest.fn(), location: {} };
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    await expect(openInNewTab(async () => { throw new Error('x'); })).rejects.toThrow('x');
+    expect(popup.close).toHaveBeenCalled();
   });
 
-  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');
+  it('reports a blocked popup', async () => {
+    jest.spyOn(window, 'open').mockReturnValue(null);
+    await expect(openInNewTab(async () => 'https://h.app/x')).rejects.toThrow('blocked');
   });
 });

package/core/lib/elements/basic/table/column-filter/column-filter.js

@@ -0,0 +1,299 @@
+/**
+ * Excel style column filter for tables
+ *
+ * Each filterable column gets a dropdown listing the distinct values of that column,
+ * where one or more values can be picked (with Select All / Clear All). Filters of
+ * multiple columns can be active at the same time, a record is shown only when it
+ * matches the filter of every column.
+ *
+ * The values are the text shown in the cell, read from the column render (or the
+ * exportDefinition when the cell is a component, ex: status dropdowns), else the
+ * dataIndex value of the record.
+ *
+ * A column is left out with `filterable: false`.
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Checkbox, Input, Empty } from 'antd';
+
+import { FilterFilled } from '@ant-design/icons';
+
+import { useTranslation } from 'react-i18next';
+
+import Button from '../../button/button';
+
+import './column-filter.scss';
+
+/**
+ * Text of a rendered cell, ex: <Tag>Male</Tag> gives Male
+ *
+ * @param {*} node
+ * @returns {string}
+ */
+function nodeToText(node) {
+  if (node === null || node === undefined || typeof node === 'boolean') return '';
+
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+
+  if (Array.isArray(node)) return node.map(nodeToText).join('');
+
+  if (React.isValidElement(node)) return nodeToText(node.props.children);
+
+  return '';
+}
+
+/**
+ * Value of the dataIndex in the record, dataIndex can be a path array
+ *
+ * @param {Object} record
+ * @param {string|Array} dataIndex
+ * @returns {*}
+ */
+function getDataIndexValue(record, dataIndex) {
+  const path = Array.isArray(dataIndex) ? dataIndex : [dataIndex];
+
+  return path.reduce((value, key) => (value === null || value === undefined ? value : value[key]), record);
+}
+
+/**
+ * Key the filter of the column is stored against
+ *
+ * @param {Object} column
+ * @returns {string}
+ */
+export function getColumnFilterKey(column) {
+  if (column.key !== undefined && column.key !== null) return String(column.key);
+
+  if (column.dataIndex !== undefined && column.dataIndex !== null) return [].concat(column.dataIndex).join('.');
+
+  return undefined;
+}
+
+/**
+ * Value of the column for the record, used to list and match the filter values
+ *
+ * @param {Object} column
+ * @param {Object} record
+ * @returns {string}
+ */
+export function getColumnFilterValue(column, record) {
+  let text = '';
+
+  try {
+    const value = column.dataIndex !== undefined ? getDataIndexValue(record, column.dataIndex) : record;
+
+    text = column.render ? nodeToText(column.render(value, record, 0)) : nodeToText(value);
+
+    // Cells rendered as a component (ex: status change) have no text, use the export value
+    if (!text && column.exportDefinition) text = nodeToText(column.exportDefinition(record));
+  } catch (error) {
+    text = '';
+  }
+
+  return String(text).replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Whether the column can be filtered
+ *
+ * @param {Object} column
+ * @returns {boolean}
+ */
+export function isFilterableColumn(column) {
+  if (column.filterable === false) return false;
+
+  return !!getColumnFilterKey(column) && !!(column.render || column.exportDefinition || column.dataIndex !== undefined);
+}
+
+/**
+ * Records matching the filter of every column
+ *
+ * @param {Array} records
+ * @param {Array} columns
+ * @param {Object} filters - Selected values against the column key, ex: { gender: ['Male'] }
+ * @param {string} exceptKey - Key of the column to leave out (to list the values of that column)
+ * @returns {Array}
+ */
+export function applyColumnFilters(records = [], columns = [], filters = {}, exceptKey) {
+  const active = columns.filter((column) => {
+    const key = getColumnFilterKey(column);
+
+    return key !== exceptKey && isFilterableColumn(column) && Array.isArray(filters[key]);
+  });
+
+  if (!active.length) return records;
+
+  return records.filter((record) => active.every((column) => filters[getColumnFilterKey(column)].includes(getColumnFilterValue(column, record))));
+}
+
+/**
+ * Whether any column filter is applied
+ *
+ * @param {Object} filters
+ * @returns {boolean}
+ */
+export function hasColumnFilters(filters = {}) {
+  return Object.values(filters || {}).some((values) => Array.isArray(values));
+}
+
+/**
+ * Distinct values of the column in the records, sorted
+ *
+ * @param {Object} column
+ * @param {Array} records
+ * @returns {Array<string>}
+ */
+export function getColumnValues(column, records = []) {
+  const values = new Set(records.map((record) => getColumnFilterValue(column, record)));
+
+  return [...values].sort((a, b) => {
+    // Blanks are listed at the end
+    if (!a) return 1;
+    if (!b) return -1;
+
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+  });
+}
+
+/**
+ * Dropdown with the values of the column
+ *
+ * @param {Object} column - Column being filtered
+ * @param {Array} records - Records to list the values from
+ * @param {Array} applied - Values applied now, undefined when the column is not filtered
+ * @param {Function} onApply - Called with the selected values, undefined to remove the filter
+ * @param {Function} close - Closes the dropdown
+ * @param {boolean} visible - Whether the dropdown is open
+ */
+export function ColumnFilterDropdown({ column, records, applied, onApply, close, visible }) {
+  const { t } = useTranslation();
+
+  const [search, setSearch] = useState('');
+
+  const [selected, setSelected] = useState([]);
+
+  const options = useMemo(() => (visible ? getColumnValues(column, records) : []), [visible, column, records]);
+
+  // Every time the dropdown opens start from the applied filter, all values are selected when there is no filter
+  useEffect(() => {
+    if (visible) {
+      setSearch('');
+      setSelected(applied ? applied : options);
+    }
+  }, [visible]);
+
+  const visibleOptions = options.filter((value) => (value || t('(Blanks)')).toLowerCase().includes(search.trim().toLowerCase()));
+
+  const selectedVisible = visibleOptions.filter((value) => selected.includes(value));
+
+  const allSelected = visibleOptions.length > 0 && selectedVisible.length === visibleOptions.length;
+
+  /**
+   * Select / unselect all the listed values
+   */
+  function onSelectAll(event) {
+    if (event.target.checked) {
+      setSelected([...new Set([...selected, ...visibleOptions])]);
+    } else {
+      setSelected(selected.filter((value) => !visibleOptions.includes(value)));
+    }
+  }
+
+  function onToggle(value, checked) {
+    setSelected(checked ? [...selected, value] : selected.filter((ele) => ele !== value));
+  }
+
+  /**
+   * Apply the selected values, selecting every value removes the filter of the column
+   */
+  function onOk() {
+    const isEveryValue = options.every((value) => selected.includes(value));
+
+    onApply(isEveryValue ? undefined : options.filter((value) => selected.includes(value)));
+
+    // close() instead of confirm(), confirm makes antd reset the pagination to the first page
+    if (close) close();
+  }
+
+  return (
+    <div className="column-filter-dropdown" onKeyDown={(event) => event.stopPropagation()}>
+      <Input
+        size="small"
+        allowClear
+        placeholder={t('Search')}
+        value={search}
+        onChange={(event) => setSearch(event.target.value)}
+        className="column-filter-search"
+      />
+
+      {visibleOptions.length ? (
+        <>
+          <Checkbox
+            className="column-filter-select-all"
+            checked={allSelected}
+            indeterminate={selectedVisible.length > 0 && !allSelected}
+            onChange={onSelectAll}
+          >
+            {t('Select All')}
+          </Checkbox>
+
+          <div className="column-filter-options">
+            {visibleOptions.map((value) => (
+              <Checkbox key={value || '__blank__'} checked={selected.includes(value)} onChange={(event) => onToggle(value, event.target.checked)}>
+                {value || t('(Blanks)')}
+              </Checkbox>
+            ))}
+          </div>
+        </>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('No values')} />
+      )}
+
+      <div className="column-filter-actions">
+        <Button size="small" type="secondary" onClick={() => setSelected([])}>
+          {t('Clear All')}
+        </Button>
+
+        <Button size="small" type="primary" disabled={!selected.length} onClick={onOk}>
+          {t('OK')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Add the Excel style filter to the columns
+ *
+ * @param {Array} columns
+ * @param {Array} records - Records the values are listed from
+ * @param {Object} filters - Applied filters against the column key
+ * @param {Function} onChange - Called with the column key and the selected values (undefined to remove)
+ * @returns {Array}
+ */
+export function withColumnFilters(columns = [], records = [], filters = {}, onChange) {
+  return columns.map((column) => {
+    if (!isFilterableColumn(column)) return column;
+
+    const key = getColumnFilterKey(column);
+
+    const applied = filters[key];
+
+    return {
+      ...column,
+      filteredValue: applied || null,
+      filterIcon: () => <FilterFilled className={`column-filter-icon ${applied ? 'column-filter-icon--active' : ''}`} />,
+      filterDropdown: ({ close, visible }) => (
+        <ColumnFilterDropdown
+          column={column}
+          // Values are listed from the records matching the filters of the other columns
+          records={applyColumnFilters(records, columns, filters, key)}
+          applied={applied}
+          visible={visible}
+          close={close}
+          onApply={(values) => onChange(key, values)}
+        />
+      ),
+    };
+  });
+}