@databiosphere/findable-ui 2.2.0 → 3.1.0

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

package/src/providers/exploreState.tsx

@@ -20,6 +20,7 @@ import { useURLFilterParams } from "../hooks/useURLFilterParams";
 import {
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
+  ListItem,
 } from "./exploreState/entities";
 import {
   DEFAULT_PAGINATION_STATE,
@@ -29,12 +30,15 @@ import { initReducerArguments } from "./exploreState/initializer/utils";
 import {
   ApplySavedFilterPayload,
   PaginateTablePayload,
+  PatchExploreResponsePayload,
   ProcessExploreResponsePayload,
   ProcessRelatedResponsePayload,
   ResetExploreResponsePayload,
   ToggleEntityViewPayload,
   UpdateColumnVisibilityPayload,
+  UpdateEntityViewAccessPayload,
   UpdateFilterPayload,
+  UpdateRowSelectionPayload,
   UpdateSortingPayload,
 } from "./exploreState/payloads/entities";
 import {
@@ -44,10 +48,13 @@ import {
   getEntityState,
   getEntityStateSavedSorting,
   getFilterCount,
+  patchEntityListItems,
   resetPage,
+  resetRowSelection,
   updateEntityPageState,
   updateEntityPageStateSorting,
   updateEntityStateByCategoryGroupConfigKey,
+  updateSelectColumnVisibility,
 } from "./exploreState/utils";
 
 export type CatalogState = string | undefined;
@@ -102,8 +109,7 @@ export type FeatureFlagState = string | undefined;
 /**
  * List items.
  */
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO revisit when adding react query or similar
-export type ListItems = any[] | undefined;
+export type ListItems = ListItem[] | undefined;
 
 /**
  * Pagination index.
@@ -225,6 +231,7 @@ export enum ExploreActionKind {
   ApplySavedFilter = "APPLY_SAVED_FILTER",
   ClearFilters = "CLEAR_FILTERS",
   PaginateTable = "PAGINATE_TABLE",
+  PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
   ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
   ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
   ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
@@ -232,7 +239,9 @@ export enum ExploreActionKind {
   SelectEntityType = "SELECT_ENTITY_TYPE",
   ToggleEntityView = "TOGGLE_ENTITY_VIEW",
   UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
+  UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
   UpdateFilter = "UPDATE_FILTER",
+  UpdateRowSelection = "UPDATE_ROW_SELECTION",
   UpdateSorting = "UPDATE_SORTING",
 }
 
@@ -243,6 +252,7 @@ export type ExploreAction =
   | ApplySavedFilterAction
   | ClearFiltersAction
   | PaginateTableAction
+  | PatchExploreResponseAction
   | ProcessExploreResponseAction
   | ProcessRelatedResponseAction
   | ResetExploreResponseAction
@@ -250,7 +260,9 @@ export type ExploreAction =
   | SelectEntityTypeAction
   | ToggleEntityViewAction
   | UpdateColumnVisibilityAction
+  | UpdateEntityViewAccessAction
   | UpdateFilterAction
+  | UpdateRowSelectionAction
   | UpdateSortingAction;
 
 /**
@@ -277,6 +289,14 @@ type PaginateTableAction = {
   type: ExploreActionKind.PaginateTable;
 };
 
+/**
+ * Patch explore response action.
+ */
+type PatchExploreResponseAction = {
+  payload: PatchExploreResponsePayload;
+  type: ExploreActionKind.PatchExploreResponse;
+};
+
 /**
  * Process explore response action.
  */
@@ -318,7 +338,7 @@ type SelectEntityTypeAction = {
 };
 
 /**
- * Toggle entity view.
+ * Toggle entity view action.
  */
 type ToggleEntityViewAction = {
   payload: ToggleEntityViewPayload;
@@ -333,6 +353,14 @@ type UpdateColumnVisibilityAction = {
   type: ExploreActionKind.UpdateColumnVisibility;
 };
 
+/**
+ * Update entity view access action.
+ */
+type UpdateEntityViewAccessAction = {
+  payload: UpdateEntityViewAccessPayload;
+  type: ExploreActionKind.UpdateEntityViewAccess;
+};
+
 /**
  * Update filter action.
  */
@@ -341,6 +369,14 @@ type UpdateFilterAction = {
   type: ExploreActionKind.UpdateFilter;
 };
 
+/**
+ * Update row selection action.
+ */
+type UpdateRowSelectionAction = {
+  payload: UpdateRowSelectionPayload;
+  type: ExploreActionKind.UpdateRowSelection;
+};
+
 /**
  * Update sorting action.
  */
@@ -431,6 +467,24 @@ function exploreReducer(
         paginationState: nextPaginationState,
       };
     }
+    /**
+     * Patch explore response
+     */
+    case ExploreActionKind.PatchExploreResponse: {
+      return {
+        ...state,
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { rowSelection: {} }
+        ),
+        listItems: patchEntityListItems(
+          state.listItems,
+          payload.updatedListItems,
+          payload.listItemKey
+        ),
+      };
+    }
     /**
      * Process explore response
      **/
@@ -519,6 +573,28 @@ function exploreReducer(
         listView: payload,
       };
     }
+    /**
+     * Update column visibility
+     **/
+    case ExploreActionKind.UpdateColumnVisibility: {
+      return {
+        ...state,
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { columnsVisibility: payload }
+        ),
+      };
+    }
+    /**
+     * Update entity view access
+     **/
+    case ExploreActionKind.UpdateEntityViewAccess: {
+      return {
+        ...state,
+        entityPageState: updateSelectColumnVisibility(state, payload.canEdit),
+      };
+    }
     /**
      * Update filter
      **/
@@ -536,36 +612,37 @@ function exploreReducer(
       });
       return {
         ...state,
+        entityPageState: resetRowSelection(state),
         filterCount: getFilterCount(filterState),
         filterState,
         paginationState: resetPage(state.paginationState),
       };
     }
     /**
-     * Update sorting
-     **/
-    case ExploreActionKind.UpdateSorting: {
+     * Update row selection
+     */
+    case ExploreActionKind.UpdateRowSelection: {
       return {
         ...state,
         entityPageState: updateEntityPageState(
           state.tabValue,
           state.entityPageState,
-          { sorting: payload }
+          { rowSelection: payload }
         ),
-        paginationState: resetPage(state.paginationState),
       };
     }
     /**
-     * Update column visibility
+     * Update sorting
      **/
-    case ExploreActionKind.UpdateColumnVisibility: {
+    case ExploreActionKind.UpdateSorting: {
       return {
         ...state,
         entityPageState: updateEntityPageState(
           state.tabValue,
           state.entityPageState,
-          { columnsVisibility: payload }
+          { sorting: payload }
         ),
+        paginationState: resetPage(state.paginationState),
       };
     }
 

package/src/theme/common/components.ts

@@ -1324,6 +1324,10 @@ export const MuiTableCell = (theme: Theme): Components["MuiTableCell"] => {
         ...theme.typography[TEXT_BODY_SMALL_500],
         padding: "20px",
       },
+      paddingCheckbox: {
+        paddingRight: 0,
+        width: "unset",
+      },
       root: {
         padding: "18px 20px",
       },

package/src/views/ExploreView/exploreView.tsx

@@ -44,7 +44,9 @@ import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 
-export type ExploreViewProps = AzulEntitiesStaticResponse;
+export interface ExploreViewProps extends AzulEntitiesStaticResponse {
+  className?: string;
+}
 
 /**
  * Returns tabs to be used as a prop for the Tabs component.
@@ -199,6 +201,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         </Sidebar>
       )}
       <IndexView
+        className={props.className}
         List={renderList(exploreState, entityConfig, entityListType)}
         ListHero={renderComponent(listHero)}
         SideBarButton={
@@ -289,7 +292,7 @@ function renderList(
     relatedListItems,
     tabValue,
   } = exploreState;
-  const { list, listView } = entityConfig;
+  const { getId: getRowId, list, listView } = entityConfig;
   const { columns: columnsConfig, defaultSort } = list;
 
   if (!exploreState || !tabValue) {
@@ -306,6 +309,7 @@ function renderList(
     <TableCreator
       columns={columnsConfig}
       defaultSort={defaultSort}
+      getRowId={getRowId}
       items={
         isRelatedView && relatedListItems ? relatedListItems : listItems ?? []
       }

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

@@ -11,6 +11,7 @@ import { PaletteColorOptions } from "@mui/material/styles/createPalette";
 import { TypographyStyleOptions } from "@mui/material/styles/createTypography";
 import type {} from "@mui/material/SvgIcon";
 import type {} from "@mui/material/Tabs";
+import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import { RowData } from "@tanstack/react-table";
 import { DataLayer } from "../src/common/analytics/entities";
@@ -200,6 +201,15 @@ declare module "@mui/material/styles" {
   }
 }
 
+/**
+ * Toolbar prop options.
+ */
+declare module "@mui/material/Toolbar" {
+  interface ToolbarPropsVariantOverrides {
+    table: true;
+  }
+}
+
 /**
  * Typography variant overrides.
  */

package/src/components/Table/components/EntityViewToggle/entityViewToggle.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import {
-  ENTITY_VIEW,
-  ExploreActionKind,
-} from "../../../../providers/exploreState";
-import { ToggleButtonGroup } from "../../../common/ToggleButtonGroup/toggleButtonGroup";
-
-export const EntityViewToggle = (): JSX.Element => {
-  const { exploreDispatch } = useExploreState();
-  const toggleButtons = [
-    {
-      label: "Exact Match",
-      onToggle: () => onChange(ENTITY_VIEW.EXACT),
-      value: ENTITY_VIEW.EXACT,
-    },
-    {
-      label: "Related Match",
-      onToggle: () => onChange(ENTITY_VIEW.RELATED),
-      value: ENTITY_VIEW.RELATED,
-    },
-  ];
-
-  /**
-   * Callback fired when toggle button value changes.
-   * @param entityView - Entity list view.
-   */
-  const onChange = (entityView: ENTITY_VIEW): void => {
-    exploreDispatch({
-      payload: entityView,
-      type: ExploreActionKind.ToggleEntityView,
-    });
-  };
-
-  return <ToggleButtonGroup toggleButtons={toggleButtons} />;
-};