@databiosphere/findable-ui 44.0.0 → 45.1.0

package/tests/rowSelectionValidation.test.ts

@@ -0,0 +1,282 @@
+import { jest } from "@jest/globals";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  Row,
+  Table,
+  TableOptions,
+  useReactTable,
+} from "@tanstack/react-table";
+import { renderHook, RenderHookResult } from "@testing-library/react";
+import { ROW_SELECTION_VALIDATION } from "../src/components/Table/features/RowSelectionValidation/constants";
+import { RowSelectionValidationOptions } from "../src/components/Table/features/RowSelectionValidation/types";
+import { getSelectionValidation } from "../src/components/Table/features/RowSelectionValidation/utils";
+
+type ValidationFn = NonNullable<
+  RowSelectionValidationOptions<RowData>["getRowSelectionValidation"]
+>;
+
+interface RowData {
+  id: number;
+  isValid: boolean;
+  name: string;
+  status: "active" | "inactive";
+}
+
+const ACCESSOR_KEY: Record<string, keyof RowData> = {
+  ID: "id",
+  IS_VALID: "isValid",
+  NAME: "name",
+  STATUS: "status",
+};
+
+// Mock data.
+const DATA: RowData[] = [
+  { id: 1, isValid: true, name: "Item 1", status: "active" },
+  { id: 2, isValid: false, name: "Item 2", status: "inactive" },
+  { id: 3, isValid: true, name: "Item 3", status: "active" },
+  { id: 4, isValid: false, name: "Item 4", status: "inactive" },
+];
+
+const columnHelper = createColumnHelper<RowData>();
+
+// Mock column definitions.
+const COLUMNS = [
+  columnHelper.accessor(ACCESSOR_KEY.ID, { header: "ID" }),
+  columnHelper.accessor(ACCESSOR_KEY.NAME, { header: "Name" }),
+  columnHelper.accessor(ACCESSOR_KEY.IS_VALID, { header: "Valid" }),
+  columnHelper.accessor(ACCESSOR_KEY.STATUS, { header: "Status" }),
+];
+
+// Test constants.
+const VALIDATION_MESSAGE = {
+  INVALID: "This item is invalid",
+  VALID: "This item is valid",
+};
+
+const createTable = (
+  tableOptions?: Omit<
+    TableOptions<RowData>,
+    "columns" | "data" | "getCoreRowModel"
+  >
+): RenderHookResult<Table<RowData>, unknown> => {
+  return renderHook(() =>
+    useReactTable({
+      _features: [ROW_SELECTION_VALIDATION],
+      columns: COLUMNS,
+      data: DATA,
+      enableRowSelectionValidation: true,
+      getCoreRowModel: getCoreRowModel(),
+      ...tableOptions,
+    })
+  );
+};
+
+describe("RowSelectionValidation Feature", () => {
+  let tableWithoutValidation: any;
+  let firstRowWithoutValidation: any;
+  let tableWithValidation: any;
+  let firstRowWithValidation: any;
+
+  beforeEach(() => {
+    const resultWithoutValidation = createTable();
+    const resultWithValidation = createTable({
+      getRowSelectionValidation: () => VALIDATION_MESSAGE.INVALID,
+    });
+    tableWithoutValidation = resultWithoutValidation.result.current;
+    firstRowWithoutValidation = tableWithoutValidation.getRowModel().rows[0];
+    tableWithValidation = resultWithValidation.result.current;
+    firstRowWithValidation = tableWithValidation.getRowModel().rows[0];
+  });
+
+  describe("ROW_SELECTION_VALIDATION TableFeature", () => {
+    test("should have correct structure", () => {
+      expect(ROW_SELECTION_VALIDATION).toHaveProperty("createRow");
+      expect(ROW_SELECTION_VALIDATION).toHaveProperty("getDefaultOptions");
+      expect(typeof ROW_SELECTION_VALIDATION.createRow).toBe("function");
+      expect(typeof ROW_SELECTION_VALIDATION.getDefaultOptions).toBe(
+        "function"
+      );
+    });
+
+    test("getDefaultOptions should return correct default options", () => {
+      const { getDefaultOptions } = ROW_SELECTION_VALIDATION;
+      expect(getDefaultOptions!(tableWithoutValidation)).toEqual({
+        enableRowSelectionValidation: false,
+        getRowSelectionValidation: undefined,
+      });
+    });
+  });
+
+  describe("getSelectionValidation utility", () => {
+    test("should return undefined when no validation function is provided", () => {
+      expect(
+        getSelectionValidation(
+          firstRowWithoutValidation,
+          tableWithoutValidation
+        )
+      ).toBeUndefined();
+    });
+
+    test("should return validation message when validation function is provided", () => {
+      expect(
+        getSelectionValidation(firstRowWithValidation, tableWithValidation)
+      ).toBe(VALIDATION_MESSAGE.INVALID);
+    });
+
+    test("should return undefined when validation function returns undefined", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockReturnValue(undefined);
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      const validationResult = getSelectionValidation(firstRow, table);
+
+      expect(validationResult).toBeUndefined();
+      expect(getRowSelectionValidation).toHaveBeenCalledWith(firstRow);
+    });
+
+    test("should work with different rows from the same table", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const status = row.getValue(ACCESSOR_KEY.STATUS);
+          return status === "inactive" ? VALIDATION_MESSAGE.INVALID : undefined;
+        });
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      expect(getSelectionValidation(rows[0], table)).toBeUndefined();
+      expect(getSelectionValidation(rows[2], table)).toBeUndefined();
+      expect(getSelectionValidation(rows[1], table)).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+      expect(getRowSelectionValidation).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe("row.getSelectionValidation method", () => {
+    test("should be attached to rows when feature is included", () => {
+      const rows = tableWithoutValidation.getRowModel().rows;
+
+      rows.forEach((row: any) => {
+        expect(row).toHaveProperty("getSelectionValidation");
+        expect(typeof row.getSelectionValidation).toBe("function");
+      });
+    });
+
+    test("should return undefined when no validation function is configured", () => {
+      expect(
+        firstRowWithoutValidation.getSelectionValidation()
+      ).toBeUndefined();
+    });
+
+    test("should return validation message when validation function is configured", () => {
+      expect(firstRowWithValidation.getSelectionValidation()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+    });
+  });
+
+  describe("Integration with table options", () => {
+    test("should work with getRowSelectionValidation function", () => {
+      const enableRowSelection = jest
+        .fn<(row: Row<RowData>) => boolean>()
+        .mockImplementation((row) => row.getValue(ACCESSOR_KEY.IS_VALID));
+
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+          return isValid ? undefined : VALIDATION_MESSAGE.INVALID;
+        });
+
+      const { result } = createTable({
+        enableRowSelection,
+        getRowSelectionValidation,
+      });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      rows.forEach((row) => {
+        const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+        const canSelect = row.getCanSelect();
+        const validationMessage = row.getSelectionValidation?.();
+
+        if (isValid) {
+          expect(canSelect).toBe(true);
+          expect(validationMessage).toBeUndefined();
+        } else {
+          expect(canSelect).toBe(false);
+          expect(validationMessage).toBe(VALIDATION_MESSAGE.INVALID);
+        }
+      });
+    });
+
+    test("should handle complex validation scenarios", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const id = row.getValue(ACCESSOR_KEY.ID);
+          const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+
+          if (!isValid) return VALIDATION_MESSAGE.INVALID;
+          if (id === 1) return VALIDATION_MESSAGE.VALID;
+          return undefined;
+        });
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      expect(rows[0].getSelectionValidation?.()).toBe(VALIDATION_MESSAGE.VALID);
+      expect(rows[1].getSelectionValidation?.()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+      expect(rows[2].getSelectionValidation?.()).toBeUndefined();
+      expect(rows[3].getSelectionValidation?.()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+    });
+  });
+
+  describe("Edge cases", () => {
+    test("should work when feature is not included", () => {
+      const { result } = createTable({
+        _features: [],
+        enableRowSelectionValidation: false,
+      });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      expect(firstRow).not.toHaveProperty("getSelectionValidation");
+    });
+
+    test("should return undefined when feature is disabled", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockReturnValue(VALIDATION_MESSAGE.INVALID);
+
+      const { result } = createTable({
+        enableRowSelectionValidation: false,
+        getRowSelectionValidation,
+      });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      expect(firstRow.getSelectionValidation?.()).toBeUndefined();
+      expect(getRowSelectionValidation).not.toHaveBeenCalled();
+    });
+  });
+});

package/types/data-explorer-ui.d.ts

@@ -23,6 +23,7 @@ import { Components } from "rehype-react";
 import { DataLayer } from "../src/common/analytics/entities";
 import { DataDictionaryAnnotation } from "../src/common/entities";
 import {
+  CustomFeatureColumn,
   CustomFeatureInitialTableState,
   CustomFeatureInstance,
   CustomFeatureOptions,
@@ -244,6 +245,14 @@ declare module "@emotion/react" {
 }
 
 declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
+  interface Column<TData extends RowData, TValue> extends CustomFeatureColumn {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
+  interface ColumnDefBase<TData extends RowData, TValue> {
+    enableTableDownload?: boolean;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
     align?: TableCellProps["align"];
@@ -253,10 +262,13 @@ declare module "@tanstack/react-table" {
     header?: string;
     width?: GridTrackSize;
   }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface InitialTableState extends CustomFeatureInitialTableState {}
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
   interface Row<TData extends RowData> extends CustomFeatureRow {}
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData is an unused variables.
   interface SortingOptions<TData extends RowData> {
     /**
@@ -265,11 +277,13 @@ declare module "@tanstack/react-table" {
      */
     enableSortingInteraction?: boolean;
   }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface Table<TData extends RowData> extends CustomFeatureInstance<TData> {}
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
+
   interface TableOptionsResolved<TData extends RowData>
-    extends CustomFeatureOptions {}
+    extends CustomFeatureOptions<TData> {}
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface TableState extends CustomFeatureTableState {}
 }

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.d.ts

@@ -1,6 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-export interface DownloadEntityResultsProps<T extends RowData> {
-    entityName: string;
-    rows: Row<T>[];
-}
-export declare const DownloadEntityResults: <T extends RowData>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
-import { BUTTON_PROPS } from "../../../common/Button/constants";
-import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
-import { generateDownloadBlob } from "../../common/utils";
-import { StyledButton } from "./downloadEntityResults.styles";
-export const DownloadEntityResults = ({ entityName, rows, }) => {
-    const [fileUrl, setFileUrl] = React.useState(undefined);
-    const onDownload = () => {
-        const blob = generateDownloadBlob(rows);
-        if (blob) {
-            setFileUrl(window.URL.createObjectURL(blob));
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, onClick: () => onDownload(), startIcon: React.createElement(DownloadIcon, null) }, "Download TSV"),
-        React.createElement(FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
-};

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.d.ts

@@ -1,5 +0,0 @@
-export interface FileDownloadButtonProps {
-    fileName?: string;
-    fileUrl?: string;
-}
-export declare const FileDownloadButton: ({ fileName, fileUrl, }: FileDownloadButtonProps) => JSX.Element;

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.js

@@ -1,14 +0,0 @@
-import { Box } from "@mui/material";
-import React, { useEffect, useRef } from "react";
-export const FileDownloadButton = ({ fileName, fileUrl, }) => {
-    const downloadRef = useRef(null);
-    // Initiates file download when file url request is successful.
-    useEffect(() => {
-        if (downloadRef.current && fileName && fileUrl) {
-            downloadRef.current.setAttribute("href", fileUrl);
-            downloadRef.current.setAttribute("download", fileName);
-            downloadRef.current.click();
-        }
-    }, [fileName, fileUrl]);
-    return (React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
-};

package/src/components/Table/components/DownloadEntityResults/downloadEntityResults.tsx

@@ -1,39 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-import React from "react";
-import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
-import { BUTTON_PROPS } from "../../../common/Button/constants";
-import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
-import { generateDownloadBlob } from "../../common/utils";
-import { StyledButton } from "./downloadEntityResults.styles";
-
-export interface DownloadEntityResultsProps<T extends RowData> {
-  entityName: string;
-  rows: Row<T>[];
-}
-
-export const DownloadEntityResults = <T extends RowData>({
-  entityName,
-  rows,
-}: DownloadEntityResultsProps<T>): JSX.Element => {
-  const [fileUrl, setFileUrl] = React.useState<string | undefined>(undefined);
-
-  const onDownload = (): void => {
-    const blob = generateDownloadBlob(rows);
-    if (blob) {
-      setFileUrl(window.URL.createObjectURL(blob));
-    }
-  };
-
-  return (
-    <>
-      <StyledButton
-        {...BUTTON_PROPS.SECONDARY_CONTAINED}
-        onClick={(): void => onDownload()}
-        startIcon={<DownloadIcon />}
-      >
-        Download TSV
-      </StyledButton>
-      <FileDownloadButton fileName={`${entityName}.tsv`} fileUrl={fileUrl} />
-    </>
-  );
-};

package/src/components/common/Button/components/FileDownloadButton/fileDownloadButton.tsx

@@ -1,27 +0,0 @@
-import { Box } from "@mui/material";
-import React, { useEffect, useRef } from "react";
-
-export interface FileDownloadButtonProps {
-  fileName?: string;
-  fileUrl?: string;
-}
-
-export const FileDownloadButton = ({
-  fileName,
-  fileUrl,
-}: FileDownloadButtonProps): JSX.Element => {
-  const downloadRef = useRef<HTMLAnchorElement>(null);
-
-  // Initiates file download when file url request is successful.
-  useEffect(() => {
-    if (downloadRef.current && fileName && fileUrl) {
-      downloadRef.current.setAttribute("href", fileUrl);
-      downloadRef.current.setAttribute("download", fileName);
-      downloadRef.current.click();
-    }
-  }, [fileName, fileUrl]);
-
-  return (
-    <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
-  );
-};