@databiosphere/findable-ui 2.2.0 → 3.0.0

package/src/components/TableCreator/tableCreator.tsx

@@ -1,4 +1,5 @@
 import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
+import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core";
 import React, { useMemo } from "react";
 import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
@@ -10,12 +11,17 @@ import {
   getInitialState,
   sortingFn,
 } from "../Table/common/utils";
+import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
 import { Table } from "../Table/table";
+import { COLUMN_CONFIGS } from "./common/constants";
+import { buildBaseColumnDef } from "./common/utils";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
   defaultSort: ColumnSort | undefined;
+  getRowId?: CoreOptions<T>["getRowId"];
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
@@ -26,9 +32,8 @@ export interface TableCreatorProps<T> {
   total?: number;
 }
 
-const createCell = <T extends object>(config: ColumnConfig<T>) =>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We can't determine the cell type
-  function CellCreator({ row }: CellContext<T, any>): JSX.Element {
+const createCell = <T extends RowData>(config: ColumnConfig<T>) =>
+  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
     return (
       <ComponentCreator
         components={[config.componentConfig]}
@@ -37,9 +42,20 @@ const createCell = <T extends object>(config: ColumnConfig<T>) =>
     );
   };
 
+const createHeaderSelectionCell = <T extends RowData>() =>
+  function CellCreator({ table }: HeaderContext<T, unknown>): JSX.Element {
+    return <HeadSelectionCell tableInstance={table} />;
+  };
+
+const createRowSelectionCell = <T extends RowData>() =>
+  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
+    return <RowSelectionCell row={row} />;
+  };
+
 export const TableCreator = <T extends object>({
   columns,
   defaultSort,
+  getRowId,
   items,
   listView,
   loading,
@@ -51,21 +67,25 @@ export const TableCreator = <T extends object>({
 }: TableCreatorProps<T>): JSX.Element => {
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
-      columns.map(({ disableHiding, disableSorting, ...columnConfig }) => ({
-        accessorKey: columnConfig.id,
-        cell: createCell(columnConfig),
-        enableHiding: !disableHiding,
-        enableSorting: !disableSorting,
-        filterFn: arrIncludesSome,
-        header: columnConfig.header,
-        id: columnConfig.id,
-        meta: {
-          columnPinned: columnConfig.columnPinned,
-          header: columnConfig.header,
-          width: columnConfig.width,
+      columns.reduce(
+        (acc, columnConfig) => {
+          acc.push({
+            ...buildBaseColumnDef(columnConfig),
+            cell: createCell(columnConfig),
+            filterFn: arrIncludesSome,
+            sortingFn: sortingFn,
+          });
+          return acc;
         },
-        sortingFn: sortingFn,
-      })),
+        [
+          /* Initialize column definitions with the "select" column */
+          {
+            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
+            cell: createRowSelectionCell(),
+            header: createHeaderSelectionCell(),
+          },
+        ] as ColumnDef<T>[]
+      ),
     [columns]
   );
   const initialState = getInitialState(columns, defaultSort);
@@ -79,6 +99,7 @@ export const TableCreator = <T extends object>({
       <Table<T>
         columns={columnDefs}
         count={pageCount}
+        getRowId={getRowId}
         initialState={initialState}
         items={items}
         listView={listView}

package/src/components/common/Alert/components/AlertText/alertText.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+
+export const AlertText = styled.div`
+  ul {
+    padding-left: 24px;
+    margin: 8px 0;
+
+    li {
+      margin: 4px 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  *:last-child {
+    margin-bottom: 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

@@ -261,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;
 }
 

package/src/providers/exploreState/entities.ts

@@ -1,4 +1,5 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import {
   CategoryValueKey,
   SelectCategory,
@@ -15,7 +16,9 @@ import {
 
 export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
-  columnsVisibility: Record<string, boolean>;
+  columnsVisibility: VisibilityState;
+  enableRowSelection: boolean;
+  rowSelection: RowSelectionState;
   sorting: ColumnSort[];
 }
 
@@ -44,6 +47,9 @@ 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/utils.ts

@@ -1,5 +1,7 @@
+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,
@@ -138,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.
@@ -149,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),
       },
     };

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,7 @@ import {
   PaginationResponse,
   RelatedListItems,
 } from "../../exploreState";
+import { ListItem } from "../entities";
 
 /**
  * Apply saved filter payload.
@@ -21,6 +26,19 @@ export interface ApplySavedFilterPayload {
   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.
  */
@@ -38,11 +56,6 @@ export interface ProcessRelatedResponsePayload {
   relatedListItems: RelatedListItems;
 }
 
-/**
- * Paginate table payload.
- */
-export type PaginateTablePayload = PaginationDirectionType;
-
 /**
  * Reset explore response payload.
  */
@@ -56,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.
@@ -67,6 +87,11 @@ export interface UpdateFilterPayload {
   selectedValue: CategoryValueKey;
 }
 
+/**
+ * Update row selection payload.
+ */
+export type UpdateRowSelectionPayload = RowSelectionState;
+
 /**
  * Update sorting payload.
  */

package/src/providers/exploreState/utils.ts

@@ -4,13 +4,15 @@ import {
   CategoryValueKey,
   SelectedFilter,
 } from "../../common/entities";
-import { ExploreState, PaginationState } from "../exploreState";
+import { ACCESSOR_KEYS } from "../../components/TableCreator/common/constants";
+import { ExploreState, ListItems, PaginationState } from "../exploreState";
 import {
   CategoryGroupConfigKey,
   EntityPageState,
   EntityPageStateMapper,
   EntityState,
   EntityStateSavedFilter,
+  ListItem,
 } from "./entities";
 import { DEFAULT_ENTITY_STATE } from "./initializer/constants";
 
@@ -119,6 +121,28 @@ export function getFilterCount(filterState: SelectedFilter[]): number {
   return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
 }
 
+/**
+ * Returns list items with updated list items patched.
+ * @param listItems - List items.
+ * @param updatedListItems - List items to patch.
+ * @param listItemKey - List item key identifier to map list items.
+ * @returns list items with updated list items patched.
+ */
+export function patchEntityListItems(
+  listItems: ListItems,
+  updatedListItems: ListItems,
+  listItemKey: keyof ListItem
+): ListItems {
+  if (!listItems || !updatedListItems) return listItems;
+  const listItemById = new Map(
+    listItems.map((listItem) => [listItem[listItemKey], listItem])
+  );
+  updatedListItems.forEach((listItem) => {
+    listItemById.set(listItem[listItemKey], listItem);
+  });
+  return [...listItemById.values()];
+}
+
 /**
  * Resets pagination.
  * @param paginationState - Pagination state.
@@ -131,6 +155,30 @@ export function resetPage(paginationState: PaginationState): PaginationState {
   return nextPaginationState;
 }
 
+/**
+ * Resets row selection for the current entity and entities that share the same category group config key.
+ * @param state - Explore state.
+ * @returns entity page state mapper with row selection reset.
+ */
+export function resetRowSelection(state: ExploreState): EntityPageStateMapper {
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  );
+  return Object.entries(state.entityPageState).reduce(
+    (acc, [entityPath, entityPageState]) => {
+      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+        return {
+          ...acc,
+          [entityPath]: { ...entityPageState, rowSelection: {} },
+        };
+      }
+      return { ...acc, [entityPath]: entityPageState };
+    },
+    {} as EntityPageStateMapper
+  );
+}
+
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
@@ -217,3 +265,35 @@ export function updateEntityStateByCategoryGroupConfigKey(
     });
   }
 }
+
+/**
+ *  Updates the entity page state for each entity with row selection enabled,
+ *  by updating the visibility of the "select" column based on user access and resetting row selection state.
+ * @param state - Explore state.
+ * @param canEdit - User has edit access.
+ * @returns new entity page state mapper with updated column visibility and row selection state.
+ */
+export function updateSelectColumnVisibility(
+  state: ExploreState,
+  canEdit: boolean
+): EntityPageStateMapper {
+  return Object.entries(state.entityPageState).reduce(
+    (acc, [entityPath, entityPageState]) => {
+      if (entityPageState.enableRowSelection) {
+        return {
+          ...acc,
+          [entityPath]: {
+            ...entityPageState,
+            columnsVisibility: {
+              ...entityPageState.columnsVisibility,
+              [ACCESSOR_KEYS.SELECT]: canEdit,
+            },
+            rowSelection: {},
+          },
+        };
+      }
+      return { ...acc, [entityPath]: entityPageState };
+    },
+    {} as EntityPageStateMapper
+  );
+}