@databiosphere/findable-ui 29.0.2 → 30.0.0

package/src/providers/exploreState/payloads/entities.ts

@@ -3,11 +3,12 @@ import {
   GroupingState,
   RowSelectionState,
 } from "@tanstack/react-table";
+import { Category } from "../../../common/categories/models/types";
+import { VIEW_KIND } from "../../../common/categories/views/types";
 import {
   CategoryKey,
   CategoryValueKey,
   PaginationDirectionType,
-  SelectCategory,
   SelectedFilter,
 } from "../../../common/entities";
 import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
@@ -21,6 +22,7 @@ export interface ApplySavedFilterPayload {
   categoryKey: CategoryKey;
   selected: boolean;
   selectedValue: CategoryValueKey;
+  viewKind?: VIEW_KIND; // viewKind is included here because this payload shares a dispatch with UpdateFilter.
 }
 
 /**
@@ -43,7 +45,7 @@ export interface ProcessExploreResponsePayload {
   listItems: ListItems;
   loading: boolean;
   paginationResponse: PaginationResponse;
-  selectCategories?: SelectCategory[];
+  selectCategories?: Category[];
 }
 
 /**
@@ -74,6 +76,7 @@ export interface UpdateFilterPayload {
   categoryKey: CategoryKey;
   selected: boolean;
   selectedValue: CategoryValueKey;
+  viewKind?: VIEW_KIND;
 }
 
 /**

package/src/providers/exploreState.tsx

@@ -9,7 +9,8 @@ import React, {
   useState,
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategoryView, SelectedFilter } from "../common/entities";
+import { CategoryView } from "../common/categories/views/types";
+import { SelectedFilter } from "../common/entities";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useToken } from "../hooks/authentication/token/useToken";
@@ -78,7 +79,7 @@ export interface ExploreContext {
 export type ExploreState = {
   catalogState: CatalogState;
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategoryView[];
+  categoryViews: CategoryView[];
   entityPageState: EntityPageStateMapper;
   entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
   featureFlagState: FeatureFlagState;
@@ -638,7 +639,8 @@ function exploreReducer(
         state.filterState,
         payload.categoryKey,
         payload.selectedValue,
-        payload.selected
+        payload.selected,
+        payload.viewKind
       );
       const rowPreview = closeRowPreview(state.rowPreview);
       const rowSelection: RowSelectionState = {};

package/src/tests/utils.ts

@@ -0,0 +1,44 @@
+import { screen } from "@testing-library/react";
+import { escapeRegExp } from "../common/utils";
+
+/**
+ * Retrieves a button by its name.
+ * @param name - The name of the button.
+ * @returns The button element.
+ */
+export function getButton<T extends HTMLElement = HTMLElement>(
+  name: string | RegExp
+): T {
+  return screen.getByRole("button", { name });
+}
+
+/**
+ * Retrieves an input element by its label text.
+ * @param text - The label text of the input element.
+ * @returns The input element.
+ */
+export function getLabelText<T extends HTMLElement = HTMLElement>(
+  text: string
+): T {
+  return screen.getByLabelText(text);
+}
+
+/**
+ * Returns regex that matches the start of the given text.
+ * @param text - Text to match.
+ * @returns RegExp.
+ */
+export function getStartsWithRegex(text: string): RegExp {
+  return new RegExp(`^${escapeRegExp(text)}`);
+}
+
+/**
+ * Retrieves an element by its text content.
+ * @param text - The text content of the element.
+ * @returns The element.
+ */
+export function getText<T extends HTMLElement = HTMLElement>(
+  text: string | RegExp
+): T {
+  return screen.getByText(text);
+}

package/src/theme/common/components.ts

@@ -410,6 +410,14 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
       },
       label: {
         ...theme.typography[TEXT_BODY_SMALL_400],
+        variants: [
+          {
+            props: { variant: "status" },
+            style: {
+              ...theme.typography[TEXT_BODY_SMALL_500],
+            },
+          },
+        ],
       },
     },
     variants: [
@@ -489,13 +497,18 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
       {
         props: { variant: "status" },
         style: {
-          ...theme.typography[TEXT_BODY_SMALL_500],
           boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
           height: 20,
           maxWidth: "fit-content",
           minWidth: 0,
         },
       },
+      {
+        props: { color: "default", variant: "status" },
+        style: {
+          color: PALETTE.INK_LIGHT,
+        },
+      },
     ],
   };
 };
@@ -902,6 +915,11 @@ export const MuiLink: Components["MuiLink"] = {
       textDecorationSkipInk: "none",
       textUnderlinePosition: "from-font",
     },
+    underlineNone: {
+      "&:hover": {
+        textDecoration: "none",
+      },
+    },
   },
 };
 

package/src/views/ExploreView/exploreView.tsx

@@ -5,11 +5,8 @@ import {
 } from "../../apis/azul/common/entities";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
-import {
-  CategoryKey,
-  CategoryValueKey,
-  SelectCategoryView,
-} from "../../common/entities";
+import { CategoryView, VIEW_KIND } from "../../common/categories/views/types";
+import { CategoryKey, CategoryValueKey } from "../../common/entities";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import {
@@ -76,6 +73,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
    * @param selectedCategoryValue - The value to set or clear.
    * @param selected - Indication of whether the selected value is being set or cleared.
    * @param categorySection - Name of group the category is in.
+   * @param viewKind - View kind.
    * @param searchTerm - Search term used to find the value.
    */
   const onFilterChange = (
@@ -84,6 +82,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     selectedCategoryValue: CategoryValueKey,
     selected: boolean,
     categorySection?: string,
+    viewKind?: VIEW_KIND,
     searchTerm?: string
   ): void => {
     const dispatchType =
@@ -96,6 +95,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         categoryKey,
         selected,
         selectedValue: selectedCategoryValue,
+        viewKind,
       },
       type: dispatchType,
     });
@@ -188,33 +188,28 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
 
 /**
  * Builds the category views into category views grouped by the given category group configuration.
- * @param selectCategoryViews - View models of categories to display.
+ * @param categoryViews - View models of categories to display.
  * @param categoryGroups - Category groups.
  * @returns category filters.
  */
 function buildCategoryFilters(
-  selectCategoryViews: SelectCategoryView[],
+  categoryViews: CategoryView[],
   categoryGroups?: CategoryGroup[]
 ): CategoryFilter[] {
   if (!categoryGroups) {
-    return [{ categoryViews: selectCategoryViews }];
+    return [{ categoryViews }];
   }
   return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
     // Grab the category views for the configured grouped categories.
-    const categoryViews = categoryConfigs.reduce(
-      (accViews, { key: categoryKey }) => {
-        const categoryView = selectCategoryViews.find(
-          ({ key }) => key === categoryKey
-        );
-        if (categoryView) {
-          accViews.push(categoryView);
-        }
-        return accViews;
-      },
-      [] as SelectCategoryView[]
-    );
-    if (categoryViews.length > 0) {
-      accGroups.push({ categoryViews, label });
+    const views = categoryConfigs.reduce((accViews, { key: categoryKey }) => {
+      const categoryView = categoryViews.find(({ key }) => key === categoryKey);
+      if (categoryView) {
+        accViews.push(categoryView);
+      }
+      return accViews;
+    }, [] as CategoryView[]);
+    if (views.length > 0) {
+      accGroups.push({ categoryViews: views, label });
     }
     return accGroups;
   }, [] as CategoryFilter[]);

package/tests/filter.test.tsx

@@ -0,0 +1,100 @@
+import { jest } from "@jest/globals";
+import { composeStories } from "@storybook/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import React from "react";
+import { VIEW_KIND } from "../src/common/categories/views/types";
+import * as stories from "../src/components/Filter/components/Filter/stories/filter.stories";
+import { TEST_IDS } from "../src/tests/testIds";
+import { getButton } from "../src/tests/utils";
+
+const { RangeCategory } = composeStories(stories);
+
+const TEST_VALUES = {
+  ON_FILTER_BY_RANGE: RangeCategory.args.onFilter,
+  RANGE_CATEGORY: RangeCategory.args.categoryView,
+  RANGE_CATEGORY_KEY: RangeCategory.args.categoryView?.key,
+};
+
+/**
+ * Tests for the Filter component.
+ * TODO(cc) add tests:
+ * - selected values (rending of tags) for select and range categories
+ * - disabled state
+ * - select category view
+ */
+
+describe("Filter", () => {
+  describe("RANGE Category", () => {
+    let buttonEl: HTMLButtonElement;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      render(<RangeCategory />);
+      const expectedLabel = TEST_VALUES.RANGE_CATEGORY?.label;
+      buttonEl = screen.getByRole("button", { name: expectedLabel });
+    });
+
+    it("renders filter label", () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    it("opens popover when filter button is clicked", async () => {
+      await openPopover(buttonEl);
+    });
+
+    it("calls onFilter with correct values", async () => {
+      await openPopover(buttonEl);
+      const popoverEl = getPopoverEl();
+      const inputEl = within(popoverEl).getByLabelText("Min");
+      await userEvent.type(inputEl, "100");
+      await userEvent.click(getButton("Filter"));
+      await waitFor(() => {
+        expect(TEST_VALUES.ON_FILTER_BY_RANGE).toHaveBeenCalledTimes(1);
+        expect(TEST_VALUES.ON_FILTER_BY_RANGE).toHaveBeenCalledWith(
+          TEST_VALUES.RANGE_CATEGORY_KEY,
+          [100, null],
+          true,
+          undefined,
+          VIEW_KIND.RANGE
+        );
+      });
+    });
+
+    it("closes popover with keyboard escape", async () => {
+      await openPopover(buttonEl);
+      await closePopover();
+    });
+  });
+});
+
+/**
+ * Retrieves the popover element.
+ * @returns The popover element.
+ */
+function getPopoverEl(): HTMLElement {
+  return screen.getByTestId(TEST_IDS.FILTER_POPOVER);
+}
+
+/**
+ * Closes the popover with keyboard escape.
+ * @returns A promise that resolves when the popover is closed.
+ */
+async function closePopover(): Promise<void> {
+  await userEvent.keyboard("{Escape}");
+  await waitFor(() => {
+    expect(screen.queryByTestId(TEST_IDS.FILTER_POPOVER)).toBeNull();
+  });
+}
+
+/**
+ * Opens the popover by clicking the button.
+ * @param buttonEl - The button element to click.
+ * @returns A promise that resolves when the popover is opened.
+ */
+async function openPopover(buttonEl: HTMLButtonElement): Promise<void> {
+  await userEvent.click(buttonEl);
+  await waitFor(() => {
+    expect(screen.getByTestId(TEST_IDS.FILTER_POPOVER)).toBeDefined();
+  });
+}