@axinom/mosaic-ui 0.75.0-rc.5 → 0.77.0

package/src/components/Explorer/Explorer.tsx

@@ -315,12 +315,26 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     onForcedReload: resetSelection,
   });
 
+  // Only one set of actions can be on display at a time, so opening quick edit
+  // puts the bulk actions away.
+  const closeBulkActions = useCallback((): void => {
+    if (!isBulkOpen) {
+      return;
+    }
+
+    setIsBulkOpen(false);
+    closeBulkEdit();
+    onBulkActionsToggled(false);
+  }, [closeBulkEdit, isBulkOpen, onBulkActionsToggled]);
+
   const {
     isQuickEditMode,
-    quickEditAction,
+    quickEditToggleAction,
+    quickEditActionBar,
     QuickEditContextProvider,
     quickEditStation,
     changeSelectedItem,
+    closeQuickEdit,
   } = useQuickEdit({
     listRef,
     registrations: quickEditRegistrations,
@@ -329,6 +343,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     quickEditConfig,
     collapseFilters,
     generateItemLink,
+    onBeforeOpen: closeBulkActions,
   });
 
   const listSelectionMode = getListSelectionMode(
@@ -381,14 +396,15 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     [inlineMenuActions, setStationMessage],
   );
 
-  const { actions: pageHeaderActions } = useActions<T>({
+  const { actions: pageHeaderActions, actionBar } = useActions<T>({
     actions,
     bulkActions,
-    quickEditAction,
+    quickEditToggleAction,
+    quickEditActionBar,
+    actionBarLabel: resultsTitle,
     bulkEditAction,
-    openBulkActionsOnStart,
+    isBulkOpen,
     resultCount,
-    activeFilterCount: Object.keys(activeFilters).length,
     itemSelection,
     getBulkActionSelection,
     onReloadData,
@@ -396,14 +412,9 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     onBulkActionsToggled,
     setIsBulkOpen,
     closeBulkEdit,
+    closeQuickEdit,
   });
 
-  useEffect(() => {
-    if (listSelectionMode !== ListSelectMode.Multi) {
-      resetSelection();
-    }
-  }, [listSelectionMode, resetSelection]);
-
   return (
     <ConditionalSplit
       shouldSplit={isQuickEditMode || isBulkEditMode}
@@ -422,7 +433,6 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       >
         <PageHeader
           title={title}
-          subtitle={resultsTitle}
           actions={pageHeaderActions}
           setTabTitle={setTabTitle}
         />
@@ -453,11 +463,14 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             listSelectionMode !== ListSelectMode.None
           } // or hard code to `true`?
           selectionMode={listSelectionMode}
+          actionBar={actionBar}
           enableSelectAll={enableSelectAll}
           enableSelectAllDeselect={enableSelectAll && !hasMoreData}
           loadingTriggerOffset={loadingTriggerOffset}
           defaultSortOrder={sortOrder}
-          generateItemLink={!isQuickEditMode ? generateItemLink : undefined}
+          // Kept set while quick edit is open: the List suppresses the
+          // navigation itself, and dropping the link would remount every row.
+          generateItemLink={generateItemLink}
           onItemClicked={onItemClickedHandler}
           onItemSelected={itemSelectedHandler}
           onRequestMoreData={onRequestMoreData}

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

@@ -1,6 +1,7 @@
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useMemo } from 'react';
+import { Field } from 'formik';
+import React, { useContext, useMemo } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { action } from 'storybook/actions';
 import {
@@ -8,14 +9,19 @@ import {
   generateItemArray,
   randomDate,
 } from '../../../helpers/storybook';
+import { initializeUi } from '../../../initialize';
 import type { Data } from '../../../types/data';
 import { type FilterType, FilterTypes } from '../../Filters/Filters.model';
+import { ReadOnlyField, SingleLineTextField } from '../../FormElements';
+import { FormStation } from '../../FormStation';
 import { IconName } from '../../Icons';
+import { type BulkEditConfig, generateBulkEditMutation } from '../BulkEdit';
 import type {
   ExplorerBulkAction,
   ExplorerDataProvider,
 } from '../Explorer.model';
 import { NavigationExplorer } from '../NavigationExplorer/NavigationExplorer';
+import { QuickEditContext } from '../QuickEdit/QuickEditContext';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
@@ -44,6 +50,9 @@ const groups = createGroups({
     'inlineMenuActions',
     'keyProperty',
     'calculateNavigateUrl',
+    'quickEditRegistrations',
+    'quickEditConfig',
+    'bulkEditRegistration',
   ],
   Behavior: [
     'selectionMode',
@@ -135,8 +144,84 @@ const slowFunc = (): Promise<unknown> => {
   return new Promise((resolve) => setTimeout(resolve, 1000));
 };
 
+// Reports the notifications the stations raise, e.g. when a bulk action starts,
+// on the actions panel.
+initializeUi({
+  showNotification: (args) => {
+    action('showNotification')(args);
+    return faker.random.numeric();
+  },
+  addIndicator: (args) => {
+    action('addIndicator')(args);
+    return Math.random();
+  },
+  removeIndicator: (args) => {
+    action('removeIndicator')(args);
+  },
+  on: (event, callback) => {
+    action('on')(event, callback);
+  },
+  setTitle: (args) => {
+    action('setTitle')(args);
+  },
+  setSaveIndicator: (args) => {
+    action('setSaveIndicator')(args);
+  },
+});
+
+/** A quick edit station, editing a single property of the selected item. */
+const QuickEditForm: React.FC<{
+  property: keyof NavExplorerStoryData;
+  label: string;
+}> = ({ property, label }) => {
+  const { selectedItem } = useContext(QuickEditContext);
+
+  return (
+    <FormStation<NavExplorerStoryData>
+      initialData={{ loading: false, data: selectedItem }}
+      titleProperty={'title'}
+      saveData={(values) => {
+        action('quickEditSaveData')(values);
+      }}
+    >
+      <>
+        <Field name="id" label="Id" as={ReadOnlyField} />
+        <Field name={property} label={label} as={SingleLineTextField} />
+      </>
+    </FormStation>
+  );
+};
+
+const bulkEditConfig: BulkEditConfig = {
+  mutation: 'bulkEditItems',
+  fields: {
+    title: {
+      type: 'String',
+      label: 'Title',
+      originalFieldName: 'title',
+      action: 'set',
+    },
+    desc: {
+      type: 'String',
+      label: 'Description',
+      originalFieldName: 'desc',
+      action: 'set',
+      clearable: true,
+      clearValue: '',
+    },
+  },
+};
+
 export const NavExplorer: StoryObj<NavExplorerStoryType> = {
   name: 'Navigation Explorer',
+  parameters: {
+    docs: {
+      description: {
+        story: `A Navigation Explorer that offers bulk actions, including bulk edit, and quick edit.
+        Bulk actions apply to the selected items, while quick edit opens a station for the item that is clicked.`,
+      },
+    },
+  },
   decorators: [
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
     (Story) => (
@@ -152,6 +237,7 @@ export const NavExplorer: StoryObj<NavExplorerStoryType> = {
         propertyName: 'id',
         label: 'Id',
         size: '50px',
+        horizontalColumnAlign: 'center',
       },
       {
         propertyName: 'title',
@@ -165,7 +251,44 @@ export const NavExplorer: StoryObj<NavExplorerStoryType> = {
     stationKey: 'StoryBookExplorer_NavigationExplorer',
     filterOptions: [freeTextFilter, optionFilter],
     bulkActions: generateBulkActions(4),
+    inlineMenuActions: (rowData) => [
+      {
+        label: 'Open Details',
+        path: `/details/${rowData.id}`,
+        icon: IconName.NavigateRight,
+      },
+      {
+        label: 'Duplicate',
+        onActionSelected: action('onDuplicateSelected'),
+        icon: IconName.Copy,
+      },
+      {
+        label: 'Delete',
+        onActionSelected: action('onDeleteSelected'),
+        icon: IconName.Delete,
+        confirmationMode: 'Simple',
+      },
+    ],
     calculateNavigateUrl: (rowData) => `/details/${rowData.id}`,
+    quickEditRegistrations: [
+      {
+        label: 'Title',
+        component: <QuickEditForm property="title" label="Title" />,
+      },
+      {
+        label: 'Description',
+        component: <QuickEditForm property="desc" label="Description" />,
+      },
+    ],
+    bulkEditRegistration: {
+      config: bulkEditConfig,
+      saveData: async (data, items) => {
+        action('bulkEditSaveData')(
+          generateBulkEditMutation(bulkEditConfig, data),
+          items,
+        );
+      },
+    },
   },
   render: (args) =>
     React.createElement(() => {

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

@@ -89,7 +89,7 @@ describe('useQuickEdit', () => {
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(ref.current.quickEditAction).toBeDefined();
+    expect(ref.current.quickEditToggleAction).toBeDefined();
   });
 
   it('should not return the quickEdit action if registrations are not defined', () => {
@@ -100,22 +100,89 @@ describe('useQuickEdit', () => {
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(ref.current.quickEditAction).toBeUndefined();
+    expect(ref.current.quickEditToggleAction).toBeUndefined();
   });
 
-  it('should generate actions for each registration', () => {
+  it('should not generate an action bar while quick edit is closed', () => {
     const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(ref.current.quickEditAction?.kind).toBe('group');
+    expect(ref.current.quickEditActionBar).toBeUndefined();
+  });
+
+  it('should generate an action bar action for each registration once opened', async () => {
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
+    render(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      await ref.current.quickEditToggleAction?.onClick?.();
+    });
+
+    expect(ref.current.quickEditActionBar?.actions).toHaveLength(
+      mockRegistrations.length,
+    );
+  });
+
+  it('should mark the current registration as the toggled action', async () => {
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
+    render(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      await ref.current.quickEditToggleAction?.onClick?.();
+    });
+
     expect(
-      ref.current.quickEditAction?.kind === 'group' &&
-        ref.current.quickEditAction.actions,
-    ).toHaveLength(mockRegistrations.length);
+      ref.current.quickEditActionBar?.actions.map((action) => action.toggled),
+    ).toEqual([true, false, false, false]);
   });
 
-  it('should set isQuickEditMode to true and collapse filters when quickEditAction is opened', async () => {
+  it('should toggle the page header action while quick edit is open', async () => {
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
+    render(<TestWrapper quickEditValuesRef={ref} />);
+
+    expect(ref.current.quickEditToggleAction?.toggled).toBe(false);
+
+    await act(async () => {
+      await ref.current.quickEditToggleAction?.onClick?.();
+    });
+
+    expect(ref.current.quickEditToggleAction?.toggled).toBe(true);
+  });
+
+  it('should put away what is on display before quick edit is opened', async () => {
+    const onBeforeOpenSpy = vi.fn();
+    const { TestWrapper, ref } = getTestWrapper({
+      ...defaultProps,
+      onBeforeOpen: onBeforeOpenSpy,
+    });
+
+    render(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      await ref.current.quickEditToggleAction?.onClick?.();
+    });
+
+    expect(onBeforeOpenSpy).toHaveBeenCalled();
+  });
+
+  it('should do nothing when closing quick edit that is not open', async () => {
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
+    render(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      await ref.current.closeQuickEdit();
+    });
+
+    expect(ref.current.isQuickEditMode).toBe(false);
+    expect(ref.current.quickEditStation).toBeUndefined();
+  });
+
+  it('should set isQuickEditMode to true and collapse filters when quick edit is opened', async () => {
     const collapseFiltersSpy = vi.fn();
     const { TestWrapper, ref } = getTestWrapper({
       ...defaultProps,
@@ -125,22 +192,20 @@ describe('useQuickEdit', () => {
     render(<TestWrapper quickEditValuesRef={ref} />);
 
     await act(async () => {
-      ref.current.quickEditAction?.kind === 'group' &&
-        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+      await ref.current.quickEditToggleAction?.onClick?.();
     });
 
     expect(ref.current.isQuickEditMode).toBe(true);
     expect(collapseFiltersSpy).toHaveBeenCalled();
   });
 
-  it('should set the first registration as the current registration when quickEditAction is clicked', async () => {
+  it('should set the first registration as the current registration when quick edit is opened', async () => {
     const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
     await act(async () => {
-      ref.current.quickEditAction?.kind === 'group' &&
-        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+      await ref.current.quickEditToggleAction?.onClick?.();
     });
 
     expect(ref.current.quickEditStation).toBe(mockRegistrations[0].component);
@@ -152,19 +217,17 @@ describe('useQuickEdit', () => {
     render(<TestWrapper quickEditValuesRef={ref} />);
 
     await act(async () => {
-      ref.current.quickEditAction?.kind === 'group' &&
-        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+      await ref.current.quickEditToggleAction?.onClick?.();
     });
 
     await act(async () => {
-      ref.current.quickEditAction?.kind === 'group' &&
-        ref.current.quickEditAction.actions[1].onClick?.();
+      await ref.current.quickEditActionBar?.actions[1].onClick?.();
     });
 
     expect(ref.current.quickEditStation).toBe(mockRegistrations[1].component);
   });
 
-  it('should disable the quickEditAction when there is no data', () => {
+  it('should disable the quick edit toggle when there is no data', () => {
     const { TestWrapper, ref } = getTestWrapper({
       ...defaultProps,
       hasData: false,
@@ -172,10 +235,7 @@ describe('useQuickEdit', () => {
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(
-      ref.current.quickEditAction?.kind === 'group' &&
-        ref.current.quickEditAction.disabled,
-    ).toBe(true);
+    expect(ref.current.quickEditToggleAction?.disabled).toBe(true);
   });
 
   it('should use "Quick View" as the default label when no quickEditConfig is provided', () => {
@@ -183,10 +243,7 @@ describe('useQuickEdit', () => {
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(
-      ref.current.quickEditAction?.kind === 'group' &&
-        ref.current.quickEditAction.label,
-    ).toBe('Quick View');
+    expect(ref.current.quickEditToggleAction?.label).toBe('Quick View');
   });
 
   it('should use the label from quickEditConfig when provided', () => {
@@ -198,10 +255,7 @@ describe('useQuickEdit', () => {
 
     render(<TestWrapper quickEditValuesRef={ref} />);
 
-    expect(
-      ref.current.quickEditAction?.kind === 'group' &&
-        ref.current.quickEditAction.label,
-    ).toBe('Custom Label');
+    expect(ref.current.quickEditToggleAction?.label).toBe('Custom Label');
   });
 
   describe('List Actions', () => {
@@ -211,8 +265,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
       });
 
       expect(mockListRef.current.selectIndex).toHaveBeenCalledWith(0);
@@ -224,13 +277,11 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
       });
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(false));
+        await ref.current.quickEditToggleAction?.onClick?.();
       });
 
       expect(mockListRef.current.resetSelection).toHaveBeenCalled();
@@ -244,8 +295,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
       });
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
@@ -266,8 +316,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
         ref.current.changeSelectedItem({ id: 1 });
       });
 
@@ -289,8 +338,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
         ref.current.changeSelectedItem({ id: 1 });
       });
 
@@ -317,8 +365,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
         ref.current.changeSelectedItem({ id: 1 });
       });
 
@@ -348,8 +395,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
 
         ref.current.changeSelectedItem({ id: 1 });
       });
@@ -376,8 +422,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
 
         ref.current.changeSelectedItem({ id: 1 });
       });
@@ -402,8 +447,7 @@ describe('useQuickEdit', () => {
       render(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
-        ref.current.quickEditAction?.kind === 'group' &&
-          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+        await ref.current.quickEditToggleAction?.onClick?.();
 
         ref.current.changeSelectedItem({ id: 1 });
       });