@databiosphere/findable-ui 29.0.2 → 31.0.0

package/tests/linkCell.test.tsx

@@ -0,0 +1,89 @@
+import { matchers } from "@emotion/jest";
+import { composeStories } from "@storybook/react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../src/components/Links/common/entities";
+import * as stories from "../src/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories";
+
+expect.extend(matchers);
+
+const { ClientSide, External, Invalid, WithCustomStyle } =
+  composeStories(stories);
+
+const STYLE_RULE_PROPERTIES = {
+  TEXT_DECORATION: "text-decoration",
+};
+
+const STYLE_RULE_VALUES = {
+  NONE: "none",
+  UNDERLINE: "underline",
+};
+
+describe("TableCell, LinkCell", () => {
+  it("renders client-side link", async () => {
+    render(<ClientSide />);
+    const anchorEl = screen.getByText("Explore");
+    expect(anchorEl).toBeDefined();
+    expect(anchorEl?.getAttribute("href")).toBe("/");
+    expect(anchorEl?.getAttribute("rel")).toBe(REL_ATTRIBUTE.NO_OPENER);
+    expect(anchorEl?.getAttribute("target")).toBe(ANCHOR_TARGET.SELF);
+    // Expect MuiLink-underlineAlways class and underline style.
+    expect(anchorEl).toHaveClass("MuiLink-underlineAlways");
+    expect(anchorEl).toHaveStyleRule(
+      STYLE_RULE_PROPERTIES.TEXT_DECORATION,
+      STYLE_RULE_VALUES.UNDERLINE
+    );
+  });
+
+  it("renders external link", async () => {
+    render(<External />);
+    const anchorEl = screen.getByText("Explore");
+    expect(anchorEl).toBeDefined();
+    expect(anchorEl?.getAttribute("href")).toBe("https://www.example.com");
+    expect(anchorEl?.getAttribute("rel")).toBe(
+      REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+    );
+    expect(anchorEl?.getAttribute("target")).toBe(ANCHOR_TARGET.BLANK);
+    // Expect MuiLink-underlineAlways class and underline style.
+    expect(anchorEl).toHaveClass("MuiLink-underlineAlways");
+    expect(anchorEl).toHaveStyleRule(
+      STYLE_RULE_PROPERTIES.TEXT_DECORATION,
+      STYLE_RULE_VALUES.UNDERLINE
+    );
+  });
+
+  it("renders plain text for invalid link", () => {
+    render(<Invalid />);
+    const spanEl = screen.getByText("Explore");
+    expect(spanEl.tagName).toBe("SPAN");
+    expect(spanEl.getAttribute("href")).toBeNull();
+    expect(spanEl.getAttribute("rel")).toBeNull();
+    expect(spanEl.getAttribute("target")).toBeNull();
+    // Expect no MuiLink-root class and no underline style.
+    expect(spanEl).not.toHaveClass("MuiLink-root");
+    expect(spanEl).not.toHaveStyleRule(
+      STYLE_RULE_PROPERTIES.TEXT_DECORATION,
+      STYLE_RULE_VALUES.UNDERLINE
+    );
+  });
+
+  it("renders link with custom link props", async () => {
+    render(<WithCustomStyle />);
+    const anchorEl = screen.getByText("Explore");
+    // Expect MuiLink-underlineNone class and no underline style.
+    expect(anchorEl).toHaveClass("MuiLink-underlineNone");
+    expect(anchorEl).toHaveStyleRule(
+      STYLE_RULE_PROPERTIES.TEXT_DECORATION,
+      STYLE_RULE_VALUES.NONE
+    );
+    expect(anchorEl).toHaveStyleRule(
+      STYLE_RULE_PROPERTIES.TEXT_DECORATION,
+      STYLE_RULE_VALUES.NONE,
+      { target: ":hover" }
+    );
+  });
+});

package/tests/markdownCell.test.tsx

@@ -0,0 +1,53 @@
+import { matchers } from "@emotion/jest";
+import { composeStories } from "@storybook/react";
+import { Column } from "@tanstack/react-table";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../src/components/Links/common/entities";
+import { STYLED_ANCHOR } from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/constants";
+import * as stories from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories";
+import { MarkdownCellProps } from "../src/components/Table/components/TableCell/components/MarkdownCell/types";
+
+expect.extend(matchers);
+
+const { Default, WithHtml } = composeStories(stories);
+
+describe("MarkdownCell", () => {
+  it("renders the markdown content", async () => {
+    render(<Default />);
+    expect(await screen.findByText("UBERON:0000955")).toBeInTheDocument();
+  });
+
+  it("renders HTML and anchor elements", async () => {
+    render(<WithHtml />);
+    const anchorEl = await screen.findByText("example link");
+    expect(anchorEl).toBeInTheDocument();
+    expect(anchorEl.getAttribute("href")).toBe("https://www.example.com");
+    expect(anchorEl.getAttribute("target")).toBe(ANCHOR_TARGET.BLANK);
+    expect(anchorEl.getAttribute("rel")).toBe(
+      REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+    );
+    expect(anchorEl).toHaveClass("MuiLink-root");
+  });
+
+  it("applies the correct className and component", async () => {
+    render(
+      <WithHtml
+        className="css-pygqsj"
+        column={
+          {
+            columnDef: { meta: { components: { a: STYLED_ANCHOR } } },
+          } as unknown as Column<unknown, MarkdownCellProps>
+        }
+      />
+    );
+    const anchorEl = await screen.findByText("example link");
+    expect(anchorEl).toHaveStyleRule("background-color", "green");
+    expect(anchorEl).toHaveStyleRule("color", "white");
+    expect(anchorEl.closest(".css-pygqsj")).toBeInTheDocument();
+  });
+});

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

@@ -19,6 +19,7 @@ import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import type {} from "@tanstack/react-table";
 import { RowData } from "@tanstack/react-table";
+import { Components } from "rehype-react";
 import { DataLayer } from "../src/common/analytics/entities";
 import { DataDictionaryAnnotation } from "../src/common/entities";
 import {
@@ -230,6 +231,7 @@ declare module "@tanstack/react-table" {
     align?: TableCellProps["align"];
     annotation?: DataDictionaryAnnotation;
     columnPinned?: boolean;
+    components?: Partial<Components>; // For `MarkdownRendererCell` component.
     header?: string;
     width?: GridTrackSize;
   }

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -1,3 +0,0 @@
-import { CellContext } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes } from "../../../../../../common/entities";
-export type BasicCellProps = CellContext<Attribute, AttributeValueTypes>;

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import React from "react";
-declare const meta: {
-    argTypes: {
-        tags: {
-            control: {
-                disable: true;
-            };
-        };
-    };
-    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        categorySection?: string | undefined;
-        categoryView: import("../../../../common/entities").SelectCategoryView;
-        closeAncestor?: (() => void) | undefined;
-        isFilterDrawer: boolean;
-        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
-        tags?: React.ReactNode;
-        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
-    }>) => JSX.Element)[];
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const FilterStory: Story;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { Filter } from "./filter";
-const meta = {
-    argTypes: {
-        tags: { control: { disable: true } },
-    },
-    component: Filter,
-    decorators: [
-        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            React.createElement(Story, null))),
-    ],
-    title: "Components/Filter/Filter",
-};
-export default meta;
-const onFilter = () => {
-    // onFilter function
-};
-export const FilterStory = {
-    args: {
-        categoryView: {
-            isDisabled: false,
-            key: "genusSpecies",
-            label: "Genus Species",
-            values: [
-                {
-                    count: 12,
-                    key: "homoSapiens",
-                    label: "Homo sapiens",
-                    selected: false,
-                },
-                {
-                    count: 6,
-                    key: "musMusculus",
-                    label: "Mus musculus",
-                    selected: false,
-                },
-            ],
-        },
-        isFilterDrawer: false,
-        onFilter,
-    },
-};

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -1,16 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        label: {
-            control: "text";
-        };
-        superseded: {
-            control: "boolean";
-        };
-    };
-    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const FilterTagStory: Story;

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -1,17 +0,0 @@
-import { FilterTag } from "./filterTag";
-const meta = {
-    argTypes: {
-        label: { control: "text" },
-        superseded: { control: "boolean" },
-    },
-    component: FilterTag,
-    title: "Components/Filter/FilterTag",
-};
-export default meta;
-export const FilterTagStory = {
-    args: {
-        label: "Male",
-        onRemove: () => { },
-        superseded: false,
-    },
-};

package/lib/components/Filter/components/Filters/filters.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Filters } from "./filters";
-declare const _default: Meta<typeof Filters>;
-export default _default;
-type Story = StoryObj<typeof Filters>;
-export declare const FiltersStory: Story;

package/lib/components/Filter/components/Filters/filters.stories.js

@@ -1,91 +0,0 @@
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { Filters } from "./filters";
-export default {
-    argTypes: {
-        categories: { control: { disable: true } },
-        onFilter: { control: { disable: true } },
-    },
-    component: Filters,
-    decorators: [
-        (Story) => (React.createElement("div", { style: { width: 264 } },
-            React.createElement(Story, null))),
-    ],
-    title: "Components/Filter/Filters",
-};
-const onFilter = () => {
-    // onFilter function
-};
-const defaultValues = [
-    {
-        count: 1,
-        key: "item1",
-        label: "Item 1",
-        selected: false,
-    },
-    {
-        count: 10,
-        key: "item2",
-        label: "Item 2",
-        selected: false,
-    },
-];
-export const FiltersStory = {
-    args: {
-        categoryFilters: [
-            {
-                categoryViews: [
-                    {
-                        isDisabled: false,
-                        key: "genusSpecies",
-                        label: "Genus Species",
-                        values: [
-                            {
-                                count: 12,
-                                key: "homoSapiens",
-                                label: "Homo sapiens",
-                                selected: false,
-                            },
-                            {
-                                count: 6,
-                                key: "musMusculus",
-                                label: "Mus musculus",
-                                selected: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                categoryViews: [
-                    {
-                        isDisabled: false,
-                        key: "donorDisease",
-                        label: "Donor Disease",
-                        values: FilterMenuStory.args?.values || defaultValues,
-                    },
-                    {
-                        isDisabled: true,
-                        key: "anatomicalEntity",
-                        label: "Anatomical Entity",
-                        values: [
-                            {
-                                count: 12,
-                                key: "oralCavity",
-                                label: "oral cavity",
-                                selected: true,
-                            },
-                            {
-                                count: 6,
-                                key: "pancreas",
-                                label: "pancreas",
-                                selected: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-        onFilter: onFilter,
-    },
-};

package/src/components/DataDictionary/components/Table/components/BasicCell/types.ts

@@ -1,7 +0,0 @@
-import { CellContext } from "@tanstack/react-table";
-import {
-  Attribute,
-  AttributeValueTypes,
-} from "../../../../../../common/entities";
-
-export type BasicCellProps = CellContext<Attribute, AttributeValueTypes>;

package/src/components/Filter/components/Filter/filter.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Filter } from "./filter";
-
-const meta = {
-  argTypes: {
-    tags: { control: { disable: true } },
-  },
-  component: Filter,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ padding: "8px 12px 8px 16px", width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/Filter",
-} satisfies Meta<typeof Filter>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const onFilter = (): void => {
-  // onFilter function
-};
-
-export const FilterStory: Story = {
-  args: {
-    categoryView: {
-      isDisabled: false,
-      key: "genusSpecies",
-      label: "Genus Species",
-      values: [
-        {
-          count: 12,
-          key: "homoSapiens",
-          label: "Homo sapiens",
-          selected: false,
-        },
-        {
-          count: 6,
-          key: "musMusculus",
-          label: "Mus musculus",
-          selected: false,
-        },
-      ],
-    },
-    isFilterDrawer: false,
-    onFilter,
-  },
-};

package/src/components/Filter/components/FilterTag/filterTag.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { FilterTag } from "./filterTag";
-
-const meta = {
-  argTypes: {
-    label: { control: "text" },
-    superseded: { control: "boolean" },
-  },
-  component: FilterTag,
-  title: "Components/Filter/FilterTag",
-} satisfies Meta<typeof FilterTag>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const FilterTagStory: Story = {
-  args: {
-    label: "Male",
-    onRemove: () => {},
-    superseded: false,
-  },
-};

package/src/components/Filter/components/Filters/filters.stories.tsx

@@ -1,101 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { Filters } from "./filters";
-
-export default {
-  argTypes: {
-    categories: { control: { disable: true } },
-    onFilter: { control: { disable: true } },
-  },
-  component: Filters,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/Filters",
-} as Meta<typeof Filters>;
-
-type Story = StoryObj<typeof Filters>;
-
-const onFilter = (): void => {
-  // onFilter function
-};
-
-const defaultValues = [
-  {
-    count: 1,
-    key: "item1",
-    label: "Item 1",
-    selected: false,
-  },
-  {
-    count: 10,
-    key: "item2",
-    label: "Item 2",
-    selected: false,
-  },
-];
-
-export const FiltersStory: Story = {
-  args: {
-    categoryFilters: [
-      {
-        categoryViews: [
-          {
-            isDisabled: false,
-            key: "genusSpecies",
-            label: "Genus Species",
-            values: [
-              {
-                count: 12,
-                key: "homoSapiens",
-                label: "Homo sapiens",
-                selected: false,
-              },
-              {
-                count: 6,
-                key: "musMusculus",
-                label: "Mus musculus",
-                selected: false,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        categoryViews: [
-          {
-            isDisabled: false,
-            key: "donorDisease",
-            label: "Donor Disease",
-            values: FilterMenuStory.args?.values || defaultValues,
-          },
-          {
-            isDisabled: true,
-            key: "anatomicalEntity",
-            label: "Anatomical Entity",
-            values: [
-              {
-                count: 12,
-                key: "oralCavity",
-                label: "oral cavity",
-                selected: true,
-              },
-              {
-                count: 6,
-                key: "pancreas",
-                label: "pancreas",
-                selected: false,
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    onFilter: onFilter,
-  },
-};

package/tests/filterRangeMock.test.tsx

@@ -1,38 +0,0 @@
-import { jest } from "@jest/globals";
-import { composeStories } from "@storybook/react";
-import { render, screen } from "@testing-library/react";
-import React, { FormEvent } from "react";
-import { RANGE_OPERATOR } from "../src/components/Filter/components/FilterRange/types";
-
-const ON_SUBMIT = jest.fn();
-
-jest.unstable_mockModule(
-  "../src/components/Filter/components/FilterRange/hooks/UseFilterRange/hook",
-  () => ({
-    useFilterRange: jest.fn(() => ({
-      onChange: jest.fn(),
-      onSubmit: (e: FormEvent): void => {
-        e.preventDefault();
-        ON_SUBMIT(e);
-      },
-      value: RANGE_OPERATOR.BETWEEN,
-    })),
-  })
-);
-
-const stories = await import(
-  "../src/components/Filter/components/FilterRange/stories/filterRange.stories"
-);
-const { Default } = composeStories(stories);
-
-describe("FilterRangeWithMockedHook", () => {
-  describe("submit button", () => {
-    beforeEach(() => {
-      render(<Default />);
-    });
-    it("has a submit button that can be clicked", () => {
-      screen.getByText("Filter").click();
-      expect(ON_SUBMIT).toHaveBeenCalledTimes(1);
-    });
-  });
-});