@databiosphere/findable-ui 2.1.0 → 3.0.0

package/src/providers/exploreState/utils.ts

@@ -1,14 +1,54 @@
-import { SelectedFilter } from "../../common/entities";
-import { CategoryConfig } from "../../config/entities";
-import { ExploreState, PaginationState } from "../exploreState";
+import { ColumnSort } from "@tanstack/react-table";
+import {
+  CategoryKey,
+  CategoryValueKey,
+  SelectedFilter,
+} from "../../common/entities";
+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";
 
+/**
+ * Returns the entity state saved filter state for the given category key.
+ * @param categoryKey - Category key.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns entity state saved filter state.
+ */
+export function buildEntityStateSavedFilterState(
+  categoryKey: CategoryKey,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): SelectedFilter[] {
+  if (!selected) return [];
+  return [{ categoryKey, value: [selectedValue] }];
+}
+
+/**
+ * Build new set of selected filters on de/select of a "saved filter" filter.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns new selected filters.
+ */
+export function buildNextSavedFilterState(
+  state: ExploreState,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): SelectedFilter[] {
+  if (!selected) return []; // Clears all filters on de-select of saved filter.
+  const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+  return savedFilter?.filters || [];
+}
+
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -23,28 +63,17 @@ export function getEntityCategoryGroupConfigKey(
 }
 
 /**
- * Returns the category configs for the current entity.
+ * Returns the entity state for the current entity.
  * @param state - Explore state.
- * @returns category configs.
- */
-export function getEntityCategoryConfigs(
-  state: ExploreState
-): CategoryConfig[] | undefined {
-  return getEntityState(
-    getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState),
-    state
-  ).categoryConfigs;
-}
-
-/**
- * Returns the entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
- * @param state - Explore state.
  * @returns entity state.
  */
 export function getEntityState(
-  categoryGroupConfigKey: CategoryGroupConfigKey,
-  state: ExploreState
+  state: ExploreState,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  )
 ): EntityState {
   return (
     state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
@@ -52,6 +81,37 @@ export function getEntityState(
   );
 }
 
+/**
+ * Returns the saved filter/sorting for the given category key.
+ * @param state - Explore state.
+ * @param categoryValueKey - Category key.
+ * @returns saved filter/sorting for the category key.
+ */
+export function getEntityStateSavedFilter(
+  state: ExploreState,
+  categoryValueKey: CategoryValueKey
+): EntityStateSavedFilter | undefined {
+  const entityState = getEntityState(state);
+  return entityState.savedFilterByCategoryValueKey?.get(categoryValueKey);
+}
+
+/**
+ * Returns entity state "saved filter" sorting for the given category value key.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns sorting.
+ */
+export function getEntityStateSavedSorting(
+  state: ExploreState,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): ColumnSort[] | undefined {
+  if (!selected) return;
+  const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+  return savedFilter?.sorting;
+}
+
 /**
  * Returns the filter count.
  * @param filterState - Filter state.
@@ -61,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.
@@ -73,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.
@@ -111,6 +217,32 @@ export function updateEntityPageState(
   };
 }
 
+/**
+ * Updates entity page state sorting for all entities with the same category group config key.
+ * @param state - Explore state.
+ * @param sorting - Sorting.
+ * @returns entity page state.
+ */
+export function updateEntityPageStateSorting(
+  state: ExploreState,
+  sorting?: EntityPageState["sorting"]
+): EntityPageStateMapper {
+  if (!sorting) return state.entityPageState;
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  );
+  return Object.entries(state.entityPageState).reduce(
+    (acc, [entityPath, entityPageState]) => {
+      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+        return { ...acc, [entityPath]: { ...entityPageState, sorting } };
+      }
+      return { ...acc, [entityPath]: entityPageState };
+    },
+    {} as EntityPageStateMapper
+  );
+}
+
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.
@@ -125,7 +257,7 @@ export function updateEntityStateByCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
   );
-  const entityState = getEntityState(categoryGroupConfigKey, state);
+  const entityState = getEntityState(state, categoryGroupConfigKey);
   if (entityState) {
     setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, {
       ...entityState,
@@ -133,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

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategory, SelectedFilter } from "../common/entities";
+import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
 import {
@@ -20,6 +20,7 @@ import { useURLFilterParams } from "../hooks/useURLFilterParams";
 import {
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
+  ListItem,
 } from "./exploreState/entities";
 import {
   DEFAULT_PAGINATION_STATE,
@@ -27,23 +28,33 @@ import {
 } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
 import {
+  ApplySavedFilterPayload,
   PaginateTablePayload,
+  PatchExploreResponsePayload,
   ProcessExploreResponsePayload,
   ProcessRelatedResponsePayload,
   ResetExploreResponsePayload,
   ToggleEntityViewPayload,
   UpdateColumnVisibilityPayload,
+  UpdateEntityViewAccessPayload,
   UpdateFilterPayload,
+  UpdateRowSelectionPayload,
   UpdateSortingPayload,
 } from "./exploreState/payloads/entities";
 import {
-  getEntityCategoryConfigs,
+  buildEntityStateSavedFilterState,
+  buildNextSavedFilterState,
   getEntityCategoryGroupConfigKey,
   getEntityState,
+  getEntityStateSavedSorting,
   getFilterCount,
+  patchEntityListItems,
   resetPage,
+  resetRowSelection,
   updateEntityPageState,
+  updateEntityPageStateSorting,
   updateEntityStateByCategoryGroupConfigKey,
+  updateSelectColumnVisibility,
 } from "./exploreState/utils";
 
 export type CatalogState = string | undefined;
@@ -70,7 +81,7 @@ export interface ExploreContext {
 export type ExploreState = {
   catalogState: CatalogState;
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategory[];
+  categoryViews: SelectCategoryView[];
   entityPageState: EntityPageStateMapper;
   entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
   featureFlagState: FeatureFlagState;
@@ -98,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.
@@ -218,8 +228,10 @@ export function ExploreStateProvider({
  * Explore action kind.
  */
 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",
@@ -227,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",
 }
 
@@ -235,8 +249,10 @@ export enum ExploreActionKind {
  * Explore action.
  */
 export type ExploreAction =
+  | ApplySavedFilterAction
   | ClearFiltersAction
   | PaginateTableAction
+  | PatchExploreResponseAction
   | ProcessExploreResponseAction
   | ProcessRelatedResponseAction
   | ResetExploreResponseAction
@@ -244,9 +260,19 @@ export type ExploreAction =
   | SelectEntityTypeAction
   | ToggleEntityViewAction
   | UpdateColumnVisibilityAction
+  | UpdateEntityViewAccessAction
   | UpdateFilterAction
+  | UpdateRowSelectionAction
   | UpdateSortingAction;
 
+/**
+ * Apply saved filter action.
+ */
+type ApplySavedFilterAction = {
+  payload: ApplySavedFilterPayload;
+  type: ExploreActionKind.ApplySavedFilter;
+};
+
 /**
  * Clear filters action.
  */
@@ -263,6 +289,14 @@ type PaginateTableAction = {
   type: ExploreActionKind.PaginateTable;
 };
 
+/**
+ * Patch explore response action.
+ */
+type PatchExploreResponseAction = {
+  payload: PatchExploreResponsePayload;
+  type: ExploreActionKind.PatchExploreResponse;
+};
+
 /**
  * Process explore response action.
  */
@@ -304,7 +338,7 @@ type SelectEntityTypeAction = {
 };
 
 /**
- * Toggle entity view.
+ * Toggle entity view action.
  */
 type ToggleEntityViewAction = {
   payload: ToggleEntityViewPayload;
@@ -319,6 +353,14 @@ type UpdateColumnVisibilityAction = {
   type: ExploreActionKind.UpdateColumnVisibility;
 };
 
+/**
+ * Update entity view access action.
+ */
+type UpdateEntityViewAccessAction = {
+  payload: UpdateEntityViewAccessPayload;
+  type: ExploreActionKind.UpdateEntityViewAccess;
+};
+
 /**
  * Update filter action.
  */
@@ -327,6 +369,14 @@ type UpdateFilterAction = {
   type: ExploreActionKind.UpdateFilter;
 };
 
+/**
+ * Update row selection action.
+ */
+type UpdateRowSelectionAction = {
+  payload: UpdateRowSelectionPayload;
+  type: ExploreActionKind.UpdateRowSelection;
+};
+
 /**
  * Update sorting action.
  */
@@ -351,13 +401,48 @@ function exploreReducer(
   const { config, entityList } = exploreContext;
 
   switch (type) {
+    /**
+     * Apply saved filter
+     **/
+    case ExploreActionKind.ApplySavedFilter: {
+      const filterState = buildNextSavedFilterState(
+        state,
+        payload.selectedValue,
+        payload.selected
+      );
+      const savedFilterState = buildEntityStateSavedFilterState(
+        payload.categoryKey,
+        payload.selectedValue,
+        payload.selected
+      );
+      const savedSorting = getEntityStateSavedSorting(
+        state,
+        payload.selectedValue,
+        payload.selected
+      );
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
+      return {
+        ...state,
+        entityPageState: updateEntityPageStateSorting(state, savedSorting),
+        filterCount: getFilterCount(filterState),
+        filterState,
+        paginationState: resetPage(state.paginationState),
+      };
+    }
     /**
      * Clear all filters
      **/
     case ExploreActionKind.ClearFilters: {
       const filterCount = 0;
       const filterState: SelectedFilter[] = [];
-      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
+      const savedFilterState: SelectedFilter[] = [];
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
       return {
         ...state,
         filterCount,
@@ -382,15 +467,37 @@ 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
      **/
     case ExploreActionKind.ProcessExploreResponse: {
+      const entityState = getEntityState(state);
       const nextCategoryViews = payload.selectCategories
         ? buildCategoryViews(
-            payload.selectCategories,
-            getEntityCategoryConfigs(state),
-            state.filterState
+            [
+              ...payload.selectCategories,
+              ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
+            ],
+            entityState.categoryConfigs,
+            [...state.filterState, ...entityState.savedFilterState]
           )
         : state.categoryViews;
       updateEntityStateByCategoryGroupConfigKey(state, {
@@ -441,8 +548,8 @@ function exploreReducer(
         return state;
       }
       const entityState = getEntityState(
-        getEntityCategoryGroupConfigKey(payload, state.entityPageState),
-        state
+        state,
+        getEntityCategoryGroupConfigKey(payload, state.entityPageState)
       );
       return {
         ...state,
@@ -466,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
      **/
@@ -476,39 +605,44 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
-      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
+      const savedFilterState: SelectedFilter[] = []; // Clear saved filter state.
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
       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",
       },