@databiosphere/findable-ui 29.0.2 → 31.0.0

package/src/hooks/useCategoryFilter.ts

@@ -1,3 +1,11 @@
+import { CategoryConfig } from "../common/categories/config/types";
+import { findSelectCategoryConfig } from "../common/categories/config/utils";
+import { isRangeCategory } from "../common/categories/models/range/typeGuards";
+import { buildNextRangeFilterState } from "../common/categories/models/range/utils";
+import { buildNextSelectFilterState } from "../common/categories/models/select/utils";
+import { Category } from "../common/categories/models/types";
+import { buildRangeCategoryView } from "../common/categories/views/range/utils";
+import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
 import {
   CategoryKey,
@@ -9,22 +17,12 @@ import {
   SelectCategoryView,
   SelectedFilter,
 } from "../common/entities";
-import { CategoryConfig } from "../config/entities";
 
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
 export type FilterState = Filters;
 
-/**
- * Shape of return value from this useCategoryFilter hook.
- */
-export interface FilterInstance {
-  categories: SelectCategoryView[];
-  filter: FilterState;
-  onFilter: OnFilterFn;
-}
-
 /**
  * Function invoked when selected state of a category value is toggled or range is selected.
  */
@@ -33,6 +31,7 @@ export type OnFilterFn = (
   selectedCategoryValue: CategoryValueKey,
   selected: boolean,
   categorySection?: string,
+  viewKind?: VIEW_KIND,
   searchTerm?: string
 ) => void;
 
@@ -62,27 +61,30 @@ function buildCategoryValueView(
 }
 
 /**
- * Build the view-specific model of the given category, including the category label pulled from the config.
- * @param category - The category to build a view model of.
- * @param categoryValueViews - Set of category value view models for the given category.
+ * Build the view-specific model of the given select category, including the category label pulled from the config.
+ * @param selectCategory - The select category to build a view model of.
+ * @param selectCategoryValueViews - Set of select category value view models for the given category.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
- * @returns Full built category value view, ready for display.
+ * @returns Full built select category view, ready for display.
  */
 function buildCategoryView(
-  category: SelectCategory,
-  categoryValueViews: SelectCategoryValueView[],
+  selectCategory: SelectCategory,
+  selectCategoryValueViews: SelectCategoryValueView[],
   categoryConfigs: CategoryConfig[]
 ): SelectCategoryView {
-  const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+  const selectCategoryConfig = findSelectCategoryConfig(
+    selectCategory.key,
+    categoryConfigs
+  );
   const mapSelectCategoryValue =
-    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
+    selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
-    annotation: categoryConfig?.annotation,
-    enableChartView: categoryConfig?.enableChartView,
+    annotation: selectCategoryConfig?.annotation,
+    enableChartView: selectCategoryConfig?.enableChartView,
     isDisabled: false,
-    key: category.key,
-    label: getCategoryLabel(category.key, categoryConfig),
-    values: categoryValueViews.map(mapSelectCategoryValue),
+    key: selectCategory.key,
+    label: getCategoryLabel(selectCategory.key, selectCategoryConfig),
+    values: selectCategoryValueViews.map(mapSelectCategoryValue),
   };
 }
 
@@ -94,10 +96,10 @@ function buildCategoryView(
  * @returns Array of category view objects.
  */
 export function buildCategoryViews(
-  categories: SelectCategory[],
+  categories: Category[],
   categoryConfigs: CategoryConfig[] | undefined,
   filterState: FilterState
-): SelectCategoryView[] {
+): CategoryView[] {
   if (!categories || !categoryConfigs) {
     return [];
   }
@@ -115,7 +117,16 @@ export function buildCategoryViews(
       filterState
     );
 
-    // Build view models for each category value in this category and sort alpha.
+    // Build view model for range categories.
+    if (isRangeCategory(category)) {
+      return buildRangeCategoryView(
+        category,
+        categoryConfigs,
+        categorySelectedFilter
+      );
+    }
+
+    // Build view model for single or multiselect categories.
     const categoryValueViews = category.values.map((categoryValue) =>
       buildCategoryValueView(categoryValue, categorySelectedFilter)
     );
@@ -136,13 +147,15 @@ export function buildCategoryViews(
  * @param categoryKey - Key of category that has been de/selected.
  * @param selectedValue - Key of category value that has been de/selected
  * @param selected - True if value is selected, false if de-selected.
+ * @param viewKind - View kind.
  * @returns New filter state generated from the current set of selected values and the newly selected value.
  */
 export function buildNextFilterState(
   filterState: FilterState,
   categoryKey: CategoryKey,
   selectedValue: CategoryValueKey,
-  selected: boolean
+  selected: boolean,
+  viewKind?: VIEW_KIND
 ): FilterState {
   // Check if the selected category already has selected values.
   const categorySelectedFilter = getCategorySelectedFilter(
@@ -162,14 +175,20 @@ export function buildNextFilterState(
     value: categorySelectedFilter ? [...categorySelectedFilter.value] : [],
   };
 
-  // Handle case where category value is selected.
-  if (selected) {
-    nextCategorySelectedFilter.value.push(selectedValue);
-  }
-  // Otherwise, category value has been de-selected; remove the selected value from the selected set of values.
-  else {
-    nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter(
-      (value: CategoryValueKey) => value !== selectedValue
+  // Build next filter state for category.
+  if (viewKind === VIEW_KIND.RANGE) {
+    // Handle range category.
+    buildNextRangeFilterState(
+      nextCategorySelectedFilter,
+      selectedValue,
+      selected
+    );
+  } else {
+    // Handle select category.
+    buildNextSelectFilterState(
+      nextCategorySelectedFilter,
+      selectedValue,
+      selected
     );
   }
 
@@ -221,19 +240,6 @@ export function getSelectCategoryValue(
   return selectCategoryValue;
 }
 
-/**
- * Returns the category config for the given category config key.
- * @param key - Category config key.
- * @param categoryConfigs - Category configs.
- * @returns category config.
- */
-function findCategoryConfig(
-  key: string,
-  categoryConfigs: CategoryConfig[]
-): CategoryConfig | undefined {
-  return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
-}
-
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.
@@ -257,7 +263,7 @@ function isCategoryValueSelected(
  * @returns true if category is to be included in filter.
  */
 function isCategoryAcceptListed(
-  category: SelectCategory,
+  category: Category,
   categoryConfigs: CategoryConfig[]
 ): boolean {
   return categoryConfigs.some(
@@ -288,9 +294,6 @@ function sortCategoryValueViews(
  * @param c1 - Second category view to compare.
  * @returns Number indicating sort precedence of c0 vs c1.
  */
-function sortCategoryViews(
-  c0: SelectCategoryView,
-  c1: SelectCategoryView
-): number {
+function sortCategoryViews(c0: CategoryView, c1: CategoryView): number {
   return COLLATOR_CASE_INSENSITIVE.compare(c0.label, c1.label);
 }

package/src/providers/exploreState/entities.ts

@@ -4,15 +4,15 @@ import {
   RowSelectionState,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CategoryConfig } from "../../common/categories/config/types";
+import { CategoryView } from "../../common/categories/views/types";
 import {
   CategoryValueKey,
   SelectCategory,
-  SelectCategoryView,
   SelectedFilter,
 } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import {
-  CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityPath,
@@ -36,7 +36,7 @@ export interface EntityPageStateMapper {
 export interface EntityState {
   categoryConfigs?: CategoryConfig[];
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategoryView[];
+  categoryViews: CategoryView[];
   filterState: SelectedFilter[];
   savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
   savedFilterState: SelectedFilter[];

package/src/providers/exploreState/initializer/utils.ts

@@ -3,10 +3,10 @@ import {
   GroupingState,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CategoryConfig } from "../../../common/categories/config/types";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import {
-  CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityConfig,

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/styles/common/mui/typography.ts

@@ -6,6 +6,7 @@ type TypographyPropsOptions = {
 };
 
 const COLOR: Record<string, TypographyOwnProps["color"]> = {
+  ERROR: "error",
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",

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();
+  });
+}