@databiosphere/findable-ui 2.1.0 → 3.0.0

package/src/components/common/Button/components/DropdownButton/dropdownButton.styles.ts

@@ -1,11 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { smokeLightest } from "../../../../../styles/common/mixins/colors";
 import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
 
+interface Props {
+  open: boolean;
+}
+
 // Dropdown button with "secondary" styles.
-export const DropdownButton = styled(ButtonSecondary)`
+export const DropdownButton = styled(ButtonSecondary, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
   padding-right: 8px;
 
   .MuiButton-endIcon {
     margin-left: -6px;
   }
+
+  ${({ open, ...props }) =>
+    open &&
+    css`
+      background-color: ${smokeLightest(props)};
+    `}
 `;

package/src/components/common/Button/components/DropdownButton/dropdownButton.tsx

@@ -3,15 +3,23 @@ import React from "react";
 import { ButtonProps } from "../../button";
 import { DropdownButton as Button } from "./dropdownButton.styles";
 
-export type DropdownButtonProps = Exclude<ButtonProps, "StartIcon">;
+export interface DropdownButtonProps extends Exclude<ButtonProps, "StartIcon"> {
+  open?: boolean;
+}
 
 export const DropdownButton = ({
   children,
   disabled = false,
+  open = false,
   ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */
 }: DropdownButtonProps): JSX.Element => {
   return (
-    <Button disabled={disabled} EndIcon={ArrowDropDownRoundedIcon} {...props}>
+    <Button
+      disabled={disabled}
+      EndIcon={ArrowDropDownRoundedIcon}
+      open={open}
+      {...props}
+    >
       {children}
     </Button>
   );

package/src/components/common/CustomIcon/components/IndeterminateIcon/indeterminateIcon.tsx

@@ -0,0 +1,23 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom indeterminate icon.
+ */
+
+export const IndeterminateIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M0 4C0 1.79086 1.79086 0 4 0H14C16.2091 0 18 1.79086 18 4V14C18 16.2091 16.2091 18 14 18H4C1.79086 18 0 16.2091 0 14V4Z"
+        fill="currentColor"
+      />
+      <rect x="5" y="8" width="8" height="2" rx="1" fill="white" />
+    </SvgIcon>
+  );
+};

package/src/components/common/Dialog/dialog.tsx

@@ -0,0 +1,21 @@
+import { Dialog as MDialog, DialogProps as MDialogProps } from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface DialogProps extends MDialogProps {
+  children: ReactNode | ReactNode[];
+  className?: string;
+}
+
+export const Dialog = ({
+  children,
+  className,
+  onClose,
+  open,
+  ...props /* Spread props to allow for Mui Dialog specific prop overrides e.g. "fullWidth". */
+}: DialogProps): JSX.Element => {
+  return (
+    <MDialog className={className} onClose={onClose} open={open} {...props}>
+      {children}
+    </MDialog>
+  );
+};

package/src/components/common/DropdownMenu/common/constants.ts

@@ -0,0 +1,7 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+
+export const DEFAULT_DROPDOWN_MENU_PROPS: Partial<MMenuProps> = {
+  anchorOrigin: { horizontal: "right", vertical: "bottom" },
+  slotProps: { paper: { variant: "menu" } },
+  transformOrigin: { horizontal: "right", vertical: "top" },
+};

package/src/components/common/DropdownMenu/common/entities.ts

@@ -0,0 +1,11 @@
+import {
+  ButtonProps as MButtonProps,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+
+export interface DropdownMenuItemProps {
+  closeMenu: () => void;
+}
+
+export type DropdownMenuButtonProps = MButtonProps & { open?: boolean };
+export type DropdownMenuIconButtonProps = MIconButtonProps & { open?: boolean };

package/src/components/common/DropdownMenu/components/MenuItem/menuItem.tsx

@@ -0,0 +1,24 @@
+import {
+  ListItemText as MListItemText,
+  MenuItem as MMenuItem,
+  MenuItemProps as MMenuItemProps,
+} from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface MenuItemProps extends MMenuItemProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const MenuItem = ({
+  children,
+  className,
+  onClick,
+  ...props /* Spread props to allow for Mui MenuItem specific prop overrides e.g. "disableGutters". */
+}: MenuItemProps): JSX.Element => {
+  return (
+    <MMenuItem className={className} onClick={onClick} {...props}>
+      <MListItemText disableTypography>{children}</MListItemText>
+    </MMenuItem>
+  );
+};

package/src/components/common/DropdownMenu/dropdownMenu.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+
+export const Menu = styled(MMenu)`
+  .MuiPaper-menu {
+    margin: 4px 0;
+  }
+`;

package/src/components/common/DropdownMenu/dropdownMenu.tsx

@@ -0,0 +1,48 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import React, { ElementType, Fragment, MouseEvent, useState } from "react";
+import { DEFAULT_DROPDOWN_MENU_PROPS } from "./common/constants";
+import {
+  DropdownMenuButtonProps,
+  DropdownMenuIconButtonProps,
+  DropdownMenuItemProps,
+} from "./common/entities";
+import { Menu } from "./dropdownMenu.styles";
+
+export interface DropdownMenuProps
+  extends Omit<MMenuProps, "children" | "open"> {
+  Button:
+    | ElementType<DropdownMenuButtonProps>
+    | ElementType<DropdownMenuIconButtonProps>;
+  children?: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
+  className?: string;
+}
+
+export const DropdownMenu = ({
+  Button,
+  children,
+  className,
+  ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
+}: DropdownMenuProps): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const closeMenu = (): void => setAnchorEl(null);
+  return (
+    <Fragment>
+      <Button
+        onClick={(event: MouseEvent<HTMLButtonElement>): void =>
+          setAnchorEl(event.currentTarget)
+        }
+        open={Boolean(anchorEl)}
+      />
+      <Menu
+        {...DEFAULT_DROPDOWN_MENU_PROPS}
+        anchorEl={anchorEl}
+        className={className}
+        onClose={closeMenu}
+        open={Boolean(anchorEl)}
+        {...props}
+      >
+        {children ? children({ closeMenu }) : null}
+      </Menu>
+    </Fragment>
+  );
+};

package/src/components/common/IconButton/iconButton.styles.ts

@@ -1,7 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
+import { smokeLightest } from "../../../styles/common/mixins/colors";
 import { IconButton } from "./iconButton";
 
+interface Props {
+  open: boolean;
+}
+
+export const Button = styled(MIconButton, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
+  ${({ open, ...props }) =>
+    open &&
+    css`
+      &.MuiIconButton-root {
+        background-color: ${smokeLightest(props)};
+      }
+    `}
+`;
+
 // Primary icon button.
 export const IconButtonPrimary = styled(IconButton)`
   background-color: ${({ theme }) => theme.palette.primary.main};

package/src/components/common/IconButton/iconButton.tsx

@@ -1,8 +1,9 @@
 import {
-  IconButton as MIconButton,
   IconButtonProps as MIconButtonProps,
+  IconProps as MIconProps,
 } from "@mui/material";
 import React, { ElementType } from "react";
+import { Button } from "./iconButton.styles";
 
 /**
  * Basic icon button component.
@@ -11,24 +12,22 @@ import React, { ElementType } from "react";
 
 export interface IconButtonProps extends MIconButtonProps {
   className?: string;
-  disabled?: boolean;
   Icon: ElementType;
+  iconProps?: MIconProps;
+  open?: boolean;
 }
 
 export const IconButton = ({
   className,
-  disabled = false,
   Icon,
+  iconProps = { fontSize: "small" },
+  open = false,
+  size = "large",
   ...props /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */
 }: IconButtonProps): JSX.Element => {
   return (
-    <MIconButton
-      className={className}
-      disabled={disabled}
-      size="large"
-      {...props}
-    >
-      <Icon fontSize="small" />
-    </MIconButton>
+    <Button className={className} open={open} size={size} {...props}>
+      <Icon {...iconProps} />
+    </Button>
   );
 };

package/src/config/entities.ts

@@ -1,7 +1,11 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { CategoryKey, SelectedFilterValue } from "../common/entities";
+import {
+  CategoryKey,
+  SelectedFilter,
+  SelectedFilterValue,
+} from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -56,6 +60,7 @@ export interface BackPageTabConfig extends TabConfig {
 export interface CategoryGroupConfig {
   categoryGroups: CategoryGroup[];
   key: string;
+  savedFilters?: SavedFilter[];
 }
 
 /**
@@ -256,8 +261,10 @@ export interface ListConfig<T = any> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
+  enableRowSelection?: boolean;
   listHero?: ComponentsConfig;
   relatedView?: RelatedViewConfig;
+  rowSelectionView?: ComponentsConfig;
   subTitleHero?: ComponentsConfig;
 }
 
@@ -302,6 +309,11 @@ type RelatedSearchFunction = (
   selectedCategoryValues: SelectedFilterValue | undefined
 ) => Promise<RelatedSearchResult | undefined>;
 
+export interface SavedFilter {
+  filters: SelectedFilter[];
+  sort?: ColumnSort;
+  title: string;
+}
 /**
  * Filter applied tracking payload
  */

package/src/providers/exploreState/constants.ts

@@ -0,0 +1,3 @@
+export const SELECT_CATEGORY_KEY = {
+  SAVED_FILTERS: "savedFilters",
+};

package/src/providers/exploreState/entities.ts

@@ -1,15 +1,24 @@
-import { ColumnSort } from "@tanstack/react-table";
-import { SelectCategory, SelectedFilter } from "../../common/entities";
+import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import {
+  CategoryValueKey,
+  SelectCategory,
+  SelectCategoryView,
+  SelectedFilter,
+} from "../../common/entities";
 import {
   CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityPath,
+  SavedFilter,
 } from "../../config/entities";
 
 export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
-  columnsVisibility: Record<string, boolean>;
+  columnsVisibility: VisibilityState;
+  enableRowSelection: boolean;
+  rowSelection: RowSelectionState;
   sorting: ColumnSort[];
 }
 
@@ -20,8 +29,11 @@ export interface EntityPageStateMapper {
 export interface EntityState {
   categoryConfigs?: CategoryConfig[];
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategory[];
+  categoryViews: SelectCategoryView[];
   filterState: SelectedFilter[];
+  savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
+  savedFilterState: SelectedFilter[];
+  savedSelectCategories: SelectCategory[];
 }
 
 export type EntityStateByCategoryGroupConfigKey = Map<
@@ -30,3 +42,15 @@ export type EntityStateByCategoryGroupConfigKey = Map<
 >;
 
 export type CategoryGroupConfigKey = CategoryGroupConfig["key"];
+
+export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
+  sorting?: ColumnSort[];
+}
+
+// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO revisit when adding react query or similar
+export type ListItem = any;
+
+export type SavedFilterByCategoryValueKey = Map<
+  CategoryValueKey,
+  EntityStateSavedFilter
+>;

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

@@ -4,6 +4,8 @@ import { EntityState } from "../entities";
 export const DEFAULT_ENTITY_STATE: EntityState = {
   categoryViews: [],
   filterState: [],
+  savedFilterState: [],
+  savedSelectCategories: [],
 };
 
 export const DEFAULT_PAGINATION_STATE: PaginationState = {

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

@@ -1,22 +1,88 @@
-import { SelectedFilter } from "../../../common/entities";
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
+import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
 import {
   CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityConfig,
+  SavedFilter,
   SiteConfig,
 } from "../../../config/entities";
 import { getDefaultSorting } from "../../../config/utils";
 import { ExploreState } from "../../exploreState";
+import { SELECT_CATEGORY_KEY } from "../constants";
 import {
   CategoryGroupConfigKey,
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
+  SavedFilterByCategoryValueKey,
 } from "../entities";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
 import { DEFAULT_ENTITY_STATE, INITIAL_STATE } from "./constants";
 
+/**
+ * Builds category groups from the given category group config (adds the saved filters category to the category groups).
+ * @param categoryGroupConfig - Category group config.
+ * @returns category groups with saved filters category.
+ */
+function buildCategoryGroups(
+  categoryGroupConfig: CategoryGroupConfig
+): CategoryGroup[] {
+  const { categoryGroups, savedFilters } = categoryGroupConfig;
+  if (!savedFilters) return categoryGroups;
+  const clonedCategoryGroups = [...categoryGroups];
+  const savedFiltersCategoryGroup: CategoryGroup = {
+    categoryConfigs: [
+      { key: SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+    ],
+  };
+  clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
+  return clonedCategoryGroups;
+}
+
+/**
+ * Returns the saved filters as select categories.
+ * @param savedFilters - Saved filters.
+ * @returns select categories.
+ */
+function buildSavedSelectCategories(
+  savedFilters?: SavedFilter[]
+): SelectCategory[] {
+  if (!savedFilters) return [];
+  return [
+    {
+      key: SELECT_CATEGORY_KEY.SAVED_FILTERS,
+      label: "", // Label is applied in filter hook where it has access to the config.
+      values: savedFilters.map(({ title }) => ({
+        count: 1,
+        key: title,
+        label: title,
+        selected: false, // Selected state updated in filter hook.
+      })),
+    },
+  ];
+}
+
+/**
+ * Builds saved filter by category value key.
+ * @param savedFilters - Saved filters.
+ * @returns saved filter by category value key.
+ */
+function buildSavedFilterByCategoryValueKey(
+  savedFilters?: SavedFilter[]
+): SavedFilterByCategoryValueKey | undefined {
+  if (!savedFilters) return;
+  const savedFilterByCategoryValueKey: SavedFilterByCategoryValueKey =
+    new Map();
+  for (const { filters, sort, title } of savedFilters) {
+    const sorting = sort ? [sort] : undefined;
+    savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
+  }
+  return savedFilterByCategoryValueKey;
+}
+
 /**
  * Returns entity related configured category group config where entity config takes precedence over site config.
  * @param siteConfig - Site config.
@@ -74,6 +140,22 @@ function initCategoryGroups(
     ?.categoryGroups;
 }
 
+/**
+ * Initializes column visibility for the given entity.
+ * @param entityConfig - Entity config.
+ * @returns column visibility.
+ */
+function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
+  const {
+    list: { columns },
+    listView: { enableRowSelection = false } = {},
+  } = entityConfig;
+  return {
+    [ACCESSOR_KEYS.SELECT]: enableRowSelection,
+    ...getInitialTableColumnVisibility(columns),
+  };
+}
+
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -85,7 +167,9 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
       ...acc,
       [entity.route]: {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
-        columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
+        columnsVisibility: initColumnVisibility(entity),
+        enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+        rowSelection: {},
         sorting: getDefaultSorting(entity),
       },
     };
@@ -109,13 +193,20 @@ function initEntityStateByCategoryGroupConfigKey(
   for (const entity of config.entities) {
     const categoryGroupConfig = getEntityCategoryGroupConfig(config, entity);
     if (!categoryGroupConfig) continue;
-    const { categoryGroups, key } = categoryGroupConfig;
+    const { key, savedFilters } = categoryGroupConfig;
     if (entityStateByCategoryGroupConfigKey.has(key)) continue;
+    const categoryGroups = buildCategoryGroups(categoryGroupConfig);
+    const savedSelectCategories: SelectCategory[] =
+      buildSavedSelectCategories(savedFilters);
+    const savedFilterByCategoryValueKey =
+      buildSavedFilterByCategoryValueKey(savedFilters);
     entityStateByCategoryGroupConfigKey.set(key, {
       ...DEFAULT_ENTITY_STATE,
       categoryConfigs: flattenCategoryGroups(categoryGroups),
       categoryGroups,
       filterState: key === categoryGroupConfigKey ? filterState : [],
+      savedFilterByCategoryValueKey,
+      savedSelectCategories,
     });
   }
   return entityStateByCategoryGroupConfigKey;

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

@@ -1,4 +1,8 @@
-import { ColumnSort } from "@tanstack/react-table";
+import {
+  ColumnSort,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
 import {
   CategoryKey,
   CategoryValueKey,
@@ -11,6 +15,29 @@ import {
   PaginationResponse,
   RelatedListItems,
 } from "../../exploreState";
+import { ListItem } from "../entities";
+
+/**
+ * Apply saved filter payload.
+ */
+export interface ApplySavedFilterPayload {
+  categoryKey: CategoryKey;
+  selected: boolean;
+  selectedValue: CategoryValueKey;
+}
+
+/**
+ * Paginate table payload.
+ */
+export type PaginateTablePayload = PaginationDirectionType;
+
+/**
+ * Patch explore response payload.
+ */
+export interface PatchExploreResponsePayload {
+  listItemKey: keyof ListItem;
+  updatedListItems: ListItems;
+}
 
 /**
  * Process explore response payload.
@@ -29,11 +56,6 @@ export interface ProcessRelatedResponsePayload {
   relatedListItems: RelatedListItems;
 }
 
-/**
- * Paginate table payload.
- */
-export type PaginateTablePayload = PaginationDirectionType;
-
 /**
  * Reset explore response payload.
  */
@@ -47,7 +69,14 @@ export type ToggleEntityViewPayload = ENTITY_VIEW;
 /**
  * Update column visibility payload.
  */
-export type UpdateColumnVisibilityPayload = Record<string, boolean>;
+export type UpdateColumnVisibilityPayload = VisibilityState;
+
+/**
+ * Update entity view access payload.
+ */
+export interface UpdateEntityViewAccessPayload {
+  canEdit: boolean;
+}
 
 /**
  * Update filter payload.
@@ -58,6 +87,11 @@ export interface UpdateFilterPayload {
   selectedValue: CategoryValueKey;
 }
 
+/**
+ * Update row selection payload.
+ */
+export type UpdateRowSelectionPayload = RowSelectionState;
+
 /**
  * Update sorting payload.
  */