feat: DH-14630 - ACL Editor Hooks

package.json

@@ -71,6 +71,7 @@
     "@playwright/test": "^1.30.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.3",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/bootstrap": "^4.4.1",
     "@types/color-convert": "^2.0.0",

packages/jsapi-components/package.json

@@ -29,6 +29,7 @@
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/utils": "file:../utils",
+    "lodash.debounce": "^4.0.8",
     "@react-stately/data": "^3.9.1",
     "@types/js-cookie": "^3.0.3",
     "classnames": "^2.3.2",
@@ -38,7 +39,6 @@
   "devDependencies": {
     "@deephaven/jsapi-shim": "file:../jsapi-shim",
     "@deephaven/tsconfig": "file:../tsconfig",
-    "@testing-library/react-hooks": "^8.0.1",
     "react-test-renderer": "^17.0.2"
   },
   "peerDependencies": {

packages/jsapi-components/src/index.ts

@@ -3,10 +3,15 @@ export * from './RefreshTokenBootstrap';
 export * from './RefreshTokenUtils';
 export { default as useBroadcastChannel } from './useBroadcastChannel';
 export { default as useBroadcastLoginListener } from './useBroadcastLoginListener';
+export { default as useDebouncedViewportSearch } from './useDebouncedViewportSearch';
 export { default as useInitializeViewportData } from './useInitializeViewportData';
 export { default as useTable } from './useTable';
 export { default as useTableColumn } from './useTableColumn';
 export { default as useTableListener } from './useTableListener';
 export { default as useSelectDistinctTable } from './useSelectDistinctTable';
 export { default as useSetPaddedViewportCallback } from './useSetPaddedViewportCallback';
+export { default as useTableClose } from './useTableClose';
+export { default as useTableSize } from './useTableSize';
 export { default as useViewportData } from './useViewportData';
+export type { UseSelectDistinctTableResult } from './useSelectDistinctTable';
+export type { UseViewportDataResult } from './useViewportData';

packages/jsapi-components/src/useDebouncedViewportSearch.test.ts

@@ -0,0 +1,132 @@
+import { renderHook } from '@testing-library/react-hooks';
+import type {
+  Column,
+  FilterCondition,
+  FilterValue,
+  Table,
+} from '@deephaven/jsapi-types';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import { TestUtils } from '@deephaven/utils';
+import useDebouncedViewportSearch, {
+  DEBOUNCE_VIEWPORT_SEARCH_MS,
+} from './useDebouncedViewportSearch';
+import { UseViewportDataResult } from './useViewportData';
+
+// Mock js api objects
+const column = TestUtils.createMockProxy<Column>({
+  type: 'java.lang.String',
+});
+const filterCondition = TestUtils.createMockProxy<FilterCondition>({});
+const columnFilterValue = TestUtils.createMockProxy<FilterValue>({});
+const matchFilterValue = TestUtils.createMockProxy<FilterValue>({});
+const table = TestUtils.createMockProxy<Table>({});
+const viewportData = TestUtils.createMockProxy<
+  UseViewportDataResult<unknown, Table>
+>({ table });
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.useFakeTimers();
+
+  TestUtils.asMock(column.filter).mockReturnValue(columnFilterValue);
+  TestUtils.asMock(columnFilterValue.contains).mockReturnValue(filterCondition);
+  TestUtils.asMock(table.findColumn).mockReturnValue(column);
+
+  jest.spyOn(TableUtils, 'makeFilterValue').mockReturnValue(matchFilterValue);
+});
+
+it.each([undefined, 400])(
+  'should return a function that debounces search filtering',
+  debounceMs => {
+    const searchText = 'mock.searchText';
+
+    const { result } = renderHook(() =>
+      useDebouncedViewportSearch(viewportData, 'mock.column', debounceMs)
+    );
+
+    result.current(searchText);
+
+    expect(viewportData.applyFiltersAndRefresh).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(debounceMs ?? DEBOUNCE_VIEWPORT_SEARCH_MS);
+
+    expect(TableUtils.makeFilterValue).toHaveBeenCalledWith(
+      column.type,
+      searchText
+    );
+    expect(viewportData.applyFiltersAndRefresh).toHaveBeenCalledWith([
+      filterCondition,
+    ]);
+  }
+);
+
+it('should return a function that safely ignores no table', () => {
+  const viewportNoTable = TestUtils.createMockProxy<
+    UseViewportDataResult<unknown, Table>
+  >({ table: null });
+
+  const searchText = 'mock.searchText';
+  const debounceMs = 400;
+
+  const { result } = renderHook(() =>
+    useDebouncedViewportSearch(viewportNoTable, 'mock.column', debounceMs)
+  );
+
+  result.current(searchText);
+  jest.advanceTimersByTime(debounceMs);
+
+  expect(TableUtils.makeFilterValue).not.toHaveBeenCalled();
+  expect(viewportNoTable.applyFiltersAndRefresh).not.toHaveBeenCalled();
+});
+
+it('should trim search text', () => {
+  const searchText = '    mock.searchText    ';
+  const trimmedSearchText = 'mock.searchText';
+  const debounceMs = 400;
+
+  const { result } = renderHook(() =>
+    useDebouncedViewportSearch(viewportData, 'mock.column', debounceMs)
+  );
+
+  result.current(searchText);
+  jest.advanceTimersByTime(debounceMs);
+
+  expect(TableUtils.makeFilterValue).toHaveBeenCalledWith(
+    column.type,
+    trimmedSearchText
+  );
+});
+
+it.each(['', '    '])(
+  'should pass apply empty filter if search text is empty',
+  searchText => {
+    const debounceMs = 400;
+
+    const { result } = renderHook(() =>
+      useDebouncedViewportSearch(viewportData, 'mock.column', debounceMs)
+    );
+
+    result.current(searchText);
+    jest.advanceTimersByTime(debounceMs);
+
+    expect(TableUtils.makeFilterValue).not.toHaveBeenCalled();
+    expect(viewportData.applyFiltersAndRefresh).toHaveBeenCalledWith([]);
+  }
+);
+
+it('should cancel debounce on unmount', () => {
+  const searchText = 'mock.searchText';
+  const debounceMs = 400;
+
+  const { result, unmount } = renderHook(() =>
+    useDebouncedViewportSearch(viewportData, 'mock.column', debounceMs)
+  );
+
+  result.current(searchText);
+  jest.advanceTimersByTime(5);
+  unmount();
+  jest.advanceTimersByTime(debounceMs);
+
+  expect(TableUtils.makeFilterValue).not.toHaveBeenCalled();
+  expect(viewportData.applyFiltersAndRefresh).not.toHaveBeenCalled();
+});

packages/jsapi-components/src/useDebouncedViewportSearch.ts

@@ -0,0 +1,58 @@
+import debounce from 'lodash.debounce';
+import type { Table, TreeTable } from '@deephaven/jsapi-types';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import { useEffect, useMemo } from 'react';
+import { UseViewportDataResult } from './useViewportData';
+
+export const DEBOUNCE_VIEWPORT_SEARCH_MS = 200;
+
+/**
+ * React hook that returns a debounced search callback for filtering a table
+ * viewport.
+ * @param viewportData Table viewport to filter
+ * @param columnName Column name to filter by
+ * @param debounceMs Millisecond value to debounce
+ */
+export default function useDebouncedViewportSearch<
+  I,
+  T extends Table | TreeTable
+>(
+  viewportData: UseViewportDataResult<I, T>,
+  columnName: string,
+  debounceMs = DEBOUNCE_VIEWPORT_SEARCH_MS
+): (searchText: string) => void {
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((searchText: string) => {
+        if (viewportData.table == null) {
+          return;
+        }
+
+        const searchTextTrimmed = searchText.trim();
+
+        if (searchTextTrimmed === '') {
+          viewportData.applyFiltersAndRefresh([]);
+          return;
+        }
+
+        const column = viewportData.table.findColumn(columnName);
+        const value = TableUtils.makeFilterValue(
+          column.type,
+          searchTextTrimmed
+        );
+        const filter = [column.filter().contains(value)];
+
+        viewportData.applyFiltersAndRefresh(filter);
+      }, debounceMs),
+    [columnName, debounceMs, viewportData]
+  );
+
+  useEffect(
+    () => () => {
+      debouncedSearch.cancel();
+    },
+    [debouncedSearch]
+  );
+
+  return debouncedSearch;
+}

packages/jsapi-components/src/useInitializeViewportData.test.ts

@@ -1,8 +1,11 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-import { Table } from '@deephaven/jsapi-shim';
+import type { Table } from '@deephaven/jsapi-types';
 import { KeyedItem } from '@deephaven/jsapi-utils';
 import { TestUtils } from '@deephaven/utils';
 import useInitializeViewportData from './useInitializeViewportData';
+import useTableSize from './useTableSize';
+
+jest.mock('./useTableSize');
 
 const tableA = TestUtils.createMockProxy<Table>({ size: 4 });
 const expectedInitialA: KeyedItem<unknown>[] = [
@@ -15,6 +18,15 @@ const expectedInitialA: KeyedItem<unknown>[] = [
 const tableB = TestUtils.createMockProxy<Table>({ size: 2 });
 const expectedInitialB = [{ key: '0' }, { key: '1' }];
 
+beforeEach(() => {
+  TestUtils.asMock(useTableSize).mockImplementation(table => table?.size ?? 0);
+});
+
+it.each([null])('should safely handle no table: %s', noTable => {
+  const { result } = renderHook(() => useInitializeViewportData(noTable));
+  expect(result.current.items).toEqual([]);
+});
+
 it('should initialize a ListData object based on Table size', () => {
   const { result } = renderHook(() => useInitializeViewportData(tableA));
 
@@ -43,3 +55,26 @@ it('should re-initialize a ListData object if Table reference changes', () => {
 
   expect(result.current.items).toEqual(expectedInitialB);
 });
+
+it.each([
+  [3, [...expectedInitialA.slice(0, -1)]],
+  [5, [...expectedInitialA, { key: '4' }]],
+])(
+  'should re-initialize a ListData object if Table size changes',
+  (newSize, expectedAfterSizeChange) => {
+    const { result, rerender } = renderHook(
+      ({ table }) => useInitializeViewportData(table),
+      {
+        initialProps: { table: tableA },
+      }
+    );
+
+    expect(result.current.items).toEqual(expectedInitialA);
+
+    // Re-render with new size
+    TestUtils.asMock(useTableSize).mockImplementation(() => newSize);
+    rerender({ table: tableA });
+
+    expect(result.current.items).toEqual(expectedAfterSizeChange);
+  }
+);