@axinom/mosaic-ui 0.61.0 → 0.62.0-rc.2

package/src/components/Explorer/Explorer.model.ts

@@ -5,6 +5,7 @@ import { IconName } from '../Icons';
 import { SortData } from '../List';
 import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { ErrorType } from '../models';
+import { BulkEditConfig } from './BulkEdit';
 
 /**
  * Item selection can have two modes:
@@ -123,3 +124,16 @@ export interface QuickEditRegistration<T> {
    */
   generateDetailsLink?: ((item: T) => LocationDescriptor<unknown>) | false;
 }
+
+export interface BulkEditRegistration<T extends Data> {
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Component to render. This will override the component that is generated. */
+  component?: JSX.Element;
+  /** Bulk Edit Configuration */
+  config?: BulkEditConfig;
+  /** Function which will be called when save button is clicked */
+  saveData: (data: T, items: ItemSelection<T>) => Promise<void>;
+}

package/src/components/Explorer/Explorer.stories.tsx

@@ -21,6 +21,7 @@ import {
 } from '../FormStation';
 import { IconName } from '../Icons';
 import { ListSelectMode } from '../List';
+import { generateBulkEditMutation } from './BulkEdit/GenerateMutation';
 import { Explorer } from './Explorer';
 import { QuickEditContext } from './QuickEdit/QuickEditContext';
 import {
@@ -471,6 +472,7 @@ const QuickEditComponent2: React.FC = () => {
 export const QuickEdit: StoryObj<ExplorerStoryType> = {
   args: {
     ...Default.args,
+    generateItemLink: (item) => `/details/${item.id}`,
     stationKey: 'StoryBookExplorer_QuickEdit',
     quickEditRegistrations: [
       {
@@ -484,3 +486,83 @@ export const QuickEdit: StoryObj<ExplorerStoryType> = {
     ],
   },
 };
+
+const BulkEditImagesAsyncFormFieldsConfig = {
+  mutation: 'bulkEditImagesAsync',
+  keys: {
+    add: 'relatedEntitiesToAdd',
+    remove: 'relatedEntitiesToRemove',
+    set: 'set',
+    filter: 'filter',
+  },
+  fields: {
+    imagesTagsAdd: {
+      type: [
+        {
+          name: 'String!',
+        },
+      ],
+      label: 'Images Tags ( Add )',
+      originalFieldName: 'imagesTags',
+      action: 'relatedEntitiesToAdd',
+    },
+    imagesTagsRemove: {
+      type: [
+        {
+          name: 'String!',
+        },
+      ],
+      label: 'Images Tags ( Remove )',
+      originalFieldName: 'imagesTags',
+      action: 'relatedEntitiesToRemove',
+    },
+    altText: {
+      type: 'String',
+      label: 'Alt Text',
+      originalFieldName: 'altText',
+      action: 'set',
+    },
+    focalX: {
+      type: 'BigFloat',
+      label: 'Focal X',
+      originalFieldName: 'focalX',
+      action: 'set',
+    },
+    focalY: {
+      type: 'BigFloat',
+      label: 'Focal Y',
+      originalFieldName: 'focalY',
+      action: 'set',
+    },
+    isArchived: {
+      type: 'Boolean',
+      label: 'Is Archived',
+      originalFieldName: 'isArchived',
+      action: 'set',
+    },
+    title: {
+      type: 'String',
+      label: 'Title',
+      originalFieldName: 'title',
+      action: 'set',
+    },
+  },
+};
+
+export const BulkEdit: StoryObj<ExplorerStoryType> = {
+  args: {
+    ...Default.args,
+    stationKey: 'StoryBookExplorer_QuickEdit',
+    bulkEditRegistration: {
+      label: 'Bulk Edit',
+      config: BulkEditImagesAsyncFormFieldsConfig,
+      saveData: async (data, items) => {
+        // eslint-disable-next-line no-console
+        console.log(
+          generateBulkEditMutation(BulkEditImagesAsyncFormFieldsConfig, data),
+        );
+        action('Save')(data, items);
+      },
+    },
+  },
+};

package/src/components/Explorer/Explorer.tsx

@@ -24,8 +24,10 @@ import {
 import { PageHeader, PageHeaderActionProps } from '../PageHeader';
 import { getState, storeState } from '../Utils/State/GlobalState';
 import { ErrorType } from '../models';
+import { useBulkEdit } from './BulkEdit/';
 import { ConditionalSplit } from './ConditionalSplit/ConditionalSplit';
 import {
+  BulkEditRegistration,
   ExplorerBulkAction,
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
@@ -36,9 +38,10 @@ import {
 import classes from './Explorer.scss';
 import { useQuickEdit } from './QuickEdit/useQuickEdit';
 import { useActions } from './helpers/useActions';
-import { ResultCounts, useDataProvider } from './helpers/useDataProvider';
+import { useDataProvider } from './helpers/useDataProvider';
 import { useFilters } from './helpers/useFilters';
 import { StationMessage, useStationMessage } from './helpers/useStationMessage';
+import { useSubtitle } from './helpers/useSubtitle';
 
 export interface ExplorerProps<T extends Data> {
   /** Title shown in page header */
@@ -135,6 +138,10 @@ export interface ExplorerProps<T extends Data> {
   /** Quick Edit Registrations */
   quickEditRegistrations?: QuickEditRegistration<T>[];
 
+  /** Bulk Edit Registration
+   * @experimental The feature Bulk Edit and it's underlying implementation is still in beta. */
+  bulkEditRegistration?: BulkEditRegistration<T>;
+
   /**
    * When set, this function is used to generate the link that the user should be navigated to for each item.
    *
@@ -211,6 +218,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     setTabTitle = true,
 
     quickEditRegistrations,
+    bulkEditRegistration,
 
     onItemClicked,
     onBulkActionsToggled = noop,
@@ -292,7 +300,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     generateItemLink,
   });
 
-  const { mode, setIsBulkOpen } = useListSelectionMode(
+  const { mode: listSelectionMode, setIsBulkOpen } = useListSelectionMode(
     selectionMode,
     openBulkActionsOnStart,
     isQuickEditMode,
@@ -342,14 +350,31 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     async (item: T) => {
       if (isQuickEditMode) {
         await changeSelectedItem(item);
-      } else if (onItemClicked !== undefined) {
-        onItemClicked(item, mode);
+      }
+
+      if (onItemClicked !== undefined) {
+        onItemClicked(item, listSelectionMode);
       }
     },
-    [isQuickEditMode, onItemClicked, changeSelectedItem, mode],
+    [isQuickEditMode, onItemClicked, changeSelectedItem, listSelectionMode],
   );
 
-  const { resultsTitle } = useSubtitle<T>(mode, itemSelection, resultCount);
+  const {
+    BulkEditContextProvider,
+    BulkEditComponent,
+    isBulkEditMode,
+    bulkEditAction,
+    closeBulkEdit,
+  } = useBulkEdit({
+    bulkEditRegistration,
+    getBulkActionSelection,
+  });
+
+  const { resultsTitle } = useSubtitle<T>(
+    listSelectionMode,
+    itemSelection,
+    resultCount,
+  );
 
   const errAction = 'An error occurred when trying to execute the operation.';
 
@@ -379,6 +404,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     actions,
     bulkActions,
     quickEditAction,
+    bulkEditAction,
     openBulkActionsOnStart,
     filtersVisible,
     hasFilters: filterOptions !== undefined,
@@ -391,10 +417,21 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     onBulkActionsToggled,
     setIsBulkOpen,
     toggleFiltersVisible,
+    closeBulkEdit,
   });
 
+  useEffect(() => {
+    if (listSelectionMode !== ListSelectMode.Multi) {
+      setItemSelection({ mode: 'SINGLE_ITEMS', items: [] });
+      listRef.current?.resetSelection();
+    }
+  }, [listSelectionMode]);
+
   return (
-    <ConditionalSplit shouldSplit={isQuickEditMode} minSecondarySize="500px">
+    <ConditionalSplit
+      shouldSplit={isQuickEditMode || isBulkEditMode}
+      minSecondarySize="500px"
+    >
       <div
         className={clsx(
           classes.container,
@@ -440,7 +477,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             showActionButton={
               Boolean(generateItemLink) || Boolean(onItemClicked)
             } // or hard code to `true`?
-            selectionMode={mode}
+            selectionMode={listSelectionMode}
             enableSelectAll={enableSelectAll}
             enableSelectAllDeselect={enableSelectAll && !hasMoreData}
             loadingTriggerOffset={loadingTriggerOffset}
@@ -460,6 +497,9 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       {isQuickEditMode && (
         <QuickEditContextProvider>{quickEditStation}</QuickEditContextProvider>
       )}
+      {isBulkEditMode && (
+        <BulkEditContextProvider>{BulkEditComponent}</BulkEditContextProvider>
+      )}
     </ConditionalSplit>
   );
 });
@@ -495,55 +535,6 @@ const useListSelectionMode = (
   return { mode, setIsBulkOpen } as const;
 };
 
-/**
- * Sets PageHeader subtitle
- * @param mode current ListSelectMode
- * @param itemSelection current item selection
- * @param results total results
- */
-function useSubtitle<T extends Data>(
-  mode: ListSelectMode,
-  itemSelection: ItemSelectEventArgs<T>,
-  results?: ResultCounts,
-): {
-  readonly resultsTitle: string;
-} {
-  let resultsTitle = ''; // default to an empty string while results is being fetched
-
-  if (results !== undefined) {
-    switch (true) {
-      case results.total === 1 && results.filtered === 1:
-        resultsTitle = `Showing 1 Element`;
-        break;
-      case results.total === 1 && results.filtered === 0:
-        resultsTitle = `Showing 0 of 1 Element`;
-        break;
-      case results.filtered === results.total:
-        resultsTitle = `Showing all of ${results.total} Elements`;
-        break;
-      case results.filtered === undefined:
-        resultsTitle = `Showing ${results.total} Elements`;
-        break;
-      default:
-        resultsTitle = `Showing ${results.filtered} of ${results.total} Elements`;
-    }
-
-    // Append Selected items if list selection is in Multi mode
-    if (mode === ListSelectMode.Multi) {
-      if (itemSelection.mode === 'SINGLE_ITEMS') {
-        resultsTitle = `${resultsTitle}, Selected: ${
-          itemSelection.items?.length ?? 0
-        }`;
-      } else {
-        // Show filtered results as selected results if 'SELECT_ALL' is active
-        resultsTitle = `${resultsTitle}, Selected: ${results.filtered}`;
-      }
-    }
-  }
-
-  return { resultsTitle } as const;
-}
-
 const errMsg = (err: unknown | ErrorType, msg?: string): StationMessage => {
   return {
     ...ErrorTypeToStationError(err as ErrorType, msg),

package/src/components/Explorer/QuickEdit/useQuickEdit.tsx

@@ -127,7 +127,9 @@ export const useQuickEdit = <T extends Data>({
                 setIsQuickEditMode(isOpen);
                 setCurrentRegistration(isOpen ? registrations[0] : undefined);
                 collapseFilters();
-                listRef.current?.selectIndex(0);
+                if (isOpen) {
+                  listRef.current?.selectIndex(0);
+                }
               }
             },
             actions: registrations.map((registration) => ({

package/src/components/Explorer/helpers/useActions.ts

@@ -20,6 +20,7 @@ interface UseActionsProps<T extends Data> {
   actions?: PageHeaderActionProps[];
   bulkActions?: ExplorerBulkAction<T>[];
   quickEditAction?: PageHeaderActionItemProps;
+  bulkEditAction?: ExplorerBulkAction<T>;
   openBulkActionsOnStart: boolean | undefined;
   filtersVisible: boolean;
   hasFilters: boolean;
@@ -34,6 +35,7 @@ interface UseActionsProps<T extends Data> {
   onBulkActionsToggled: (expanded: boolean) => void;
   setIsBulkOpen: (value: React.SetStateAction<boolean>) => void;
   toggleFiltersVisible: () => void;
+  closeBulkEdit: () => void;
 }
 
 interface UseActionsReturnType {
@@ -56,10 +58,12 @@ export const useActions = <T extends Data>({
   toggleFiltersVisible,
   quickEditAction,
   bulkActions,
+  closeBulkEdit,
+  bulkEditAction,
 }: UseActionsProps<T>): UseActionsReturnType => {
   const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
-    () =>
-      (bulkActions ?? []).map((action) => ({
+    () => [
+      ...(bulkActions ?? []).map((action) => ({
         ...action,
         onClick: async () => {
           if (action.showStartedNotification !== false) {
@@ -97,7 +101,15 @@ export const useActions = <T extends Data>({
           }
         },
       })),
-    [bulkActions, getBulkActionSelection, onReloadData, setStationMessage],
+      ...(bulkEditAction ? [bulkEditAction] : []),
+    ],
+    [
+      bulkActions,
+      bulkEditAction,
+      getBulkActionSelection,
+      onReloadData,
+      setStationMessage,
+    ],
   );
 
   const pageHeaderActions: PageHeaderActionItemProps[] = useMemo(() => {
@@ -120,7 +132,7 @@ export const useActions = <T extends Data>({
       });
     }
 
-    if (bulkActions && bulkActions.length > 0) {
+    if (bulkActionItems.length > 0) {
       headerActions.push({ kind: 'spacer' });
 
       headerActions.push({
@@ -132,6 +144,10 @@ export const useActions = <T extends Data>({
         onActionsGroupToggled: async (isOpen) => {
           setIsBulkOpen(isOpen);
           onBulkActionsToggled(isOpen);
+
+          if (!isOpen) {
+            closeBulkEdit();
+          }
         },
         groupActionsDisabled:
           itemSelection.items?.length === 0 || resultCount?.filtered === 0,
@@ -179,7 +195,7 @@ export const useActions = <T extends Data>({
     actions,
     activeFilterCount,
     bulkActionItems,
-    bulkActions,
+    closeBulkEdit,
     filtersVisible,
     hasFilters,
     itemSelection.items?.length,

package/src/components/Explorer/helpers/useFilters.spec.tsx

@@ -0,0 +1,140 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { Data } from '../../../types';
+import { FilterType, FilterValues } from '../../Filters';
+import { getState, storeState } from '../../Utils/State/GlobalState';
+import { useFilters } from './useFilters';
+
+// jest.mock('../../../hooks', () => ({
+//   useExpand: jest.fn(),
+// }));
+
+jest.mock('../../Utils/State/GlobalState', () => ({
+  getState: jest.fn(),
+  storeState: jest.fn(),
+}));
+
+describe('useFilters', () => {
+  const stationKey = 'testStation';
+  const globalStateOptions = { filters: true };
+  const filterOptions: FilterType<Data>[] = [];
+  const defaultFilterValues = { filter1: 'value1' };
+  const onFiltersChange = jest.fn();
+
+  beforeEach(() => {
+    // (useExpand as jest.Mock).mockReturnValue({
+    //   isExpanded: true,
+    //   toggleExpanded: jest.fn(),
+    //   collapse: jest.fn(),
+    // });
+    (getState as jest.Mock).mockReturnValue(undefined);
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with default filter values', () => {
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    expect(result.current.activeFilters).toEqual(defaultFilterValues);
+  });
+
+  it('should toggle filter visibility', () => {
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    act(() => {
+      result.current.toggleFiltersVisible();
+    });
+
+    expect(result.current.filtersVisible).toBe(false);
+  });
+
+  it('should collapse filters', () => {
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    act(() => {
+      result.current.collapseFilters();
+    });
+
+    expect(result.current.filtersVisible).toBe(false);
+  });
+
+  it('should update filters and call onFiltersChange', () => {
+    const newFilters: FilterValues<any> = { filter1: 'newValue' };
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    act(() => {
+      result.current.Filters.props.children.props.onFiltersChange(newFilters);
+    });
+
+    expect(result.current.activeFilters).toEqual(newFilters);
+    expect(onFiltersChange).toHaveBeenCalledWith(newFilters);
+  });
+
+  it('should store state when filters change', () => {
+    const newFilters: FilterValues<any> = { filter1: 'newValue' };
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    act(() => {
+      result.current.Filters.props.children.props.onFiltersChange(newFilters);
+    });
+
+    expect(storeState).toHaveBeenCalledWith(stationKey, 'filters', newFilters);
+  });
+
+  it('should clear state when filters are empty', () => {
+    const emptyFilters: FilterValues<any> = {};
+    const { result } = renderHook(() =>
+      useFilters({
+        stationKey,
+        globalStateOptions,
+        filterOptions,
+        defaultFilterValues,
+        onFiltersChange,
+      }),
+    );
+
+    act(() => {
+      result.current.Filters.props.children.props.onFiltersChange(emptyFilters);
+    });
+
+    expect(storeState).toHaveBeenCalledWith(stationKey, 'filters', undefined);
+  });
+});

package/src/components/Explorer/helpers/useStationMessage.spec.tsx

@@ -0,0 +1,91 @@
+import { render } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react-hooks';
+import { MessageBar } from '../../MessageBar/MessageBar';
+import { StationMessage, useStationMessage } from './useStationMessage';
+
+jest.mock('../../MessageBar/MessageBar', () => ({
+  MessageBar: jest.fn(() => null),
+}));
+
+describe('useStationMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with undefined station message', () => {
+    const { result } = renderHook(() => useStationMessage());
+
+    expect(result.current.stationMessage).toBeUndefined();
+  });
+
+  it('should set a station message', () => {
+    const { result } = renderHook(() => useStationMessage());
+    const message: StationMessage = {
+      type: 'error',
+      title: 'Error',
+      body: 'An error occurred',
+      canClose: true,
+    };
+
+    act(() => {
+      result.current.setStationMessage(message);
+    });
+
+    expect(result.current.stationMessage).toEqual(message);
+  });
+
+  it('should clear the station message when onClose is called', () => {
+    const { result } = renderHook(() => useStationMessage());
+    const message: StationMessage = {
+      type: 'error',
+      title: 'Error',
+      body: 'An error occurred',
+      canClose: true,
+    };
+
+    act(() => {
+      result.current.setStationMessage(message);
+    });
+
+    act(() => {
+      result.current.StationMessage.props.children.props.onClose();
+    });
+
+    expect(result.current.stationMessage).toBeUndefined();
+  });
+
+  it('should render MessageBar with correct props', () => {
+    const { result } = renderHook(() => useStationMessage());
+    const message: StationMessage = {
+      type: 'error',
+      title: 'Error',
+      body: 'An error occurred',
+      canClose: true,
+    };
+
+    act(() => {
+      result.current.setStationMessage(message);
+    });
+
+    render(result.current.StationMessage);
+
+    expect(MessageBar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: message.type,
+        title: message.title,
+        onClose: expect.any(Function),
+        onRetry: message.onRetry,
+        children: message.body,
+      }),
+      {},
+    );
+  });
+
+  it('should not render MessageBar when stationMessage is undefined', () => {
+    const { result } = renderHook(() => useStationMessage());
+
+    render(result.current.StationMessage);
+
+    expect(MessageBar).not.toHaveBeenCalled();
+  });
+});