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

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

@@ -1,12 +1,10 @@
 import type { LocationDescriptor } from 'history';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Data } from '../../../types';
+import type { ActionBarData } from '../../ActionBar';
 import { IconName } from '../../Icons';
 import type { ListElement } from '../../List';
-import {
-  type PageHeaderActionItemProps,
-  PageHeaderActionType,
-} from '../../PageHeader';
+import type { PageHeaderJsActionProps } from '../../PageHeader/PageHeaderAction';
 import type { QuickEditConfig, QuickEditRegistration } from '../Explorer.model';
 import { QuickEditContext } from './QuickEditContext';
 
@@ -18,17 +16,27 @@ export interface useQuickEditProps<T extends Data> {
   quickEditConfig?: QuickEditConfig;
   collapseFilters: () => void;
   generateItemLink?: (data: T) => LocationDescriptor<unknown>;
+  /**
+   * Called before quick edit opens, so that the consumer can put away whatever
+   * else is on display - only one set of actions can be shown at a time.
+   */
+  onBeforeOpen?: () => void;
 }
 
 export interface useQuickEditReturnType<T extends Data> {
   readonly isQuickEditMode: boolean;
-  readonly quickEditAction?: PageHeaderActionItemProps;
+  /** Toggle of quick edit, to be rendered on the page header. */
+  readonly quickEditToggleAction?: PageHeaderJsActionProps;
+  /** The registrations to choose from, to be rendered on the action bar of the List. */
+  readonly quickEditActionBar?: ActionBarData;
   readonly QuickEditContextProvider: React.FC;
   readonly quickEditStation: JSX.Element | undefined;
   readonly changeSelectedItem: (
     item: T,
     detailsLink?: LocationDescriptor<unknown>,
   ) => Promise<void>;
+  /** Closes quick edit, saving whatever is pending. Does nothing if it is not open. */
+  readonly closeQuickEdit: () => Promise<void>;
 }
 
 export const useQuickEdit = <T extends Data>({
@@ -39,6 +47,7 @@ export const useQuickEdit = <T extends Data>({
   quickEditConfig,
   collapseFilters,
   generateItemLink,
+  onBeforeOpen,
 }: useQuickEditProps<T>): useQuickEditReturnType<T> => {
   const [isQuickEditMode, setIsQuickEditMode] = useState<boolean>(false);
   const [currentRegistration, setCurrentRegistration] =
@@ -103,45 +112,98 @@ export const useQuickEdit = <T extends Data>({
     [detailsLink, isQuickEditMode, registerSaveCallback, selectedItem],
   );
 
-  const quickEditAction: PageHeaderActionItemProps | undefined = useMemo(
+  const closeQuickEdit = useCallback(async (): Promise<void> => {
+    if (!isQuickEditMode) {
+      return;
+    }
+
+    if (selectedItem) {
+      await saveCallbackRef.current?.();
+      setSelectedItem(defaultItem);
+      updateDetailsLink(defaultItem, registrations?.[0]);
+      setDetailsLink(undefined);
+      listRef.current?.resetSelection();
+    }
+
+    setCurrentRegistration(undefined);
+    setIsQuickEditMode(false);
+  }, [
+    defaultItem,
+    isQuickEditMode,
+    listRef,
+    registrations,
+    selectedItem,
+    updateDetailsLink,
+  ]);
+
+  const openQuickEdit = useCallback((): void => {
+    onBeforeOpen?.();
+
+    if (defaultItem) {
+      setSelectedItem(defaultItem);
+      updateDetailsLink(defaultItem, registrations?.[0]);
+    }
+
+    setIsQuickEditMode(true);
+    setCurrentRegistration(registrations?.[0]);
+    collapseFilters();
+  }, [
+    collapseFilters,
+    defaultItem,
+    onBeforeOpen,
+    registrations,
+    updateDetailsLink,
+  ]);
+
+  // Marks the item quick edit opens on in the list. The list drops its
+  // selection when it switches to single selection, so this runs as an effect,
+  // after the list has made the switch.
+  useEffect(() => {
+    if (isQuickEditMode) {
+      listRef.current?.selectIndex(0);
+    }
+  }, [isQuickEditMode, listRef]);
+
+  const hasRegistrations =
+    registrations !== undefined && registrations.length > 0;
+
+  const quickEditToggleAction: PageHeaderJsActionProps | undefined = useMemo(
     () =>
-      registrations !== undefined && registrations.length > 0
+      hasRegistrations
         ? {
             label: quickEditConfig?.label ?? 'Quick View',
-            kind: 'group',
             icon: quickEditConfig?.icon ?? IconName.QuickEdit,
             disabled: !hasData && !isQuickEditMode,
-            openActionsGroupOnStart: isQuickEditMode,
-            onActionsGroupToggled: async (isOpen) => {
-              if (!isOpen && selectedItem) {
-                await saveCallbackRef.current?.();
-                setCurrentRegistration(undefined);
-                setSelectedItem(defaultItem);
-                updateDetailsLink(defaultItem, registrations[0]);
-                setDetailsLink(undefined);
-                setIsQuickEditMode(false);
-                listRef.current?.resetSelection();
+            toggled: isQuickEditMode,
+            onClick: async () => {
+              if (isQuickEditMode) {
+                await closeQuickEdit();
               } else {
-                if (defaultItem) {
-                  setSelectedItem(defaultItem);
-                  updateDetailsLink(defaultItem, registrations[0]);
-                }
-                setIsQuickEditMode(isOpen);
-                setCurrentRegistration(isOpen ? registrations[0] : undefined);
-                if (isOpen) {
-                  collapseFilters();
-                  listRef.current?.selectIndex(0);
-                }
+                openQuickEdit();
               }
             },
-            actions: registrations.map((registration) => ({
+          }
+        : undefined,
+    [
+      closeQuickEdit,
+      hasData,
+      hasRegistrations,
+      isQuickEditMode,
+      openQuickEdit,
+      quickEditConfig?.icon,
+      quickEditConfig?.label,
+    ],
+  );
+
+  const quickEditActionBar: ActionBarData | undefined = useMemo(
+    () =>
+      hasRegistrations && isQuickEditMode
+        ? {
+            actions: (registrations ?? []).map((registration) => ({
               label: registration.label,
               icon: registration.icon ?? IconName.QuickEditStation,
-              actionType:
-                isQuickEditMode &&
-                currentRegistration?.component === registration.component
-                  ? PageHeaderActionType.Hightlight
-                  : PageHeaderActionType.Context,
+              toggled:
+                currentRegistration?.component === registration.component,
               onClick: async () => {
                 await saveCallbackRef.current?.();
                 setSelectedItem({ ...selectedItem });
@@ -152,14 +214,9 @@ export const useQuickEdit = <T extends Data>({
           }
         : undefined,
     [
-      collapseFilters,
       currentRegistration?.component,
-      defaultItem,
-      hasData,
+      hasRegistrations,
       isQuickEditMode,
-      listRef,
-      quickEditConfig?.icon,
-      quickEditConfig?.label,
       registrations,
       selectedItem,
       updateDetailsLink,
@@ -168,9 +225,11 @@ export const useQuickEdit = <T extends Data>({
 
   return {
     isQuickEditMode,
-    quickEditAction,
+    quickEditToggleAction,
+    quickEditActionBar,
     QuickEditContextProvider,
     quickEditStation: currentRegistration?.component,
     changeSelectedItem,
+    closeQuickEdit,
   };
 };

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
@@ -48,6 +48,17 @@ const getDataProvider = (): readonly [
   ] as const;
 };
 
+/** Finds the label element of the action with the given text. */
+const findActionLabel = (
+  container: HTMLElement,
+  label: string,
+): Element | undefined =>
+  Array.from(
+    container.querySelectorAll(
+      '[data-test-id="action"] [data-test-id="label"]',
+    ),
+  ).find((el) => el.textContent === label);
+
 describe('SelectionExplorer', () => {
   it('renders the component without crashing', () => {
     const [provider] = getDataProvider();
@@ -71,19 +82,46 @@ describe('SelectionExplorer', () => {
         dataProvider={provider}
         stationKey="mock-key"
         allowBulkSelect={true}
+        openBulkActionsOnStart={true}
       />,
     );
 
     await waitFor(() => {
-      const applySelectionButton = Array.from(
-        container.querySelectorAll(
-          '[data-test-id="action"] [data-test-id="label"]',
-        ),
-      ).find((el) => el.textContent === 'Apply Selection');
+      const applySelectionButton = findActionLabel(
+        container,
+        'Apply Selection',
+      );
       expect(applySelectionButton).toBeInTheDocument();
     });
   });
 
+  it(`shows the 'Apply Selection' bulk action once bulk actions are opened`, async () => {
+    const [provider] = getDataProvider();
+
+    const { container } = render(
+      <SelectionExplorer
+        columns={mockListColumns}
+        dataProvider={provider}
+        stationKey="mock-key"
+        allowBulkSelect={true}
+      />,
+    );
+
+    expect(findActionLabel(container, 'Apply Selection')).toBeUndefined();
+
+    await act(async () => {
+      fireEvent.click(
+        findActionLabel(container, 'Bulk Actions')?.closest(
+          'button',
+        ) as HTMLButtonElement,
+      );
+    });
+
+    await waitFor(() => {
+      expect(findActionLabel(container, 'Apply Selection')).toBeInTheDocument();
+    });
+  });
+
   it(`creates no bulk action if 'allowBulkSelect' is false`, async () => {
     const [provider] = getDataProvider();
     const spy = vi.fn();
@@ -94,17 +132,12 @@ describe('SelectionExplorer', () => {
         dataProvider={provider}
         stationKey="mock-key"
         allowBulkSelect={false}
+        openBulkActionsOnStart={true}
         onSelection={spy}
       />,
     );
 
-    const applySelectionButton = Array.from(
-      container.querySelectorAll(
-        '[data-test-id="action"] [data-test-id="label"]',
-      ),
-    ).find((el) => el.textContent === 'Apply Selection');
-
-    expect(applySelectionButton).toBeUndefined();
+    expect(findActionLabel(container, 'Apply Selection')).toBeUndefined();
   });
 
   it.todo('Does not call "showNotification" when "Apply Selection" is clicked');

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

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { showNotification } from '../../../initialize';
 import type { Data } from '../../../types';
 import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import type { ActionBarAction, ActionBarData } from '../../ActionBar';
 import { IconName } from '../../Icons';
 import type { ItemSelectEventArgs } from '../../List';
 import type { PageHeaderActionItemProps } from '../../PageHeader';
@@ -9,6 +10,7 @@ import {
   type PageHeaderJsActionProps,
   isPageHeaderNavigationAction,
 } from '../../PageHeader/PageHeaderAction';
+import { toActionBarAction } from '../../PageHeader/helpers';
 import type { ErrorType } from '../../models';
 import type {
   ExplorerAction,
@@ -21,11 +23,16 @@ import type { StationMessage } from './useStationMessage';
 interface UseActionsProps<T extends Data> {
   actions?: ExplorerAction[];
   bulkActions?: ExplorerBulkAction<T>[];
-  quickEditAction?: PageHeaderActionItemProps;
   bulkEditAction?: ExplorerBulkAction<T>;
-  openBulkActionsOnStart: boolean | undefined;
+  /** Toggle of quick edit, rendered next to the toggle of the bulk actions */
+  quickEditToggleAction?: PageHeaderJsActionProps;
+  /** Actions of quick edit, shown on the action bar while quick edit is open */
+  quickEditActionBar?: ActionBarData;
+  /** Text the action bar shows next to the actions, e.g. the result counts */
+  actionBarLabel?: string;
+  /** Whether the bulk actions are currently on display */
+  isBulkOpen: boolean;
   resultCount: ResultCounts;
-  activeFilterCount: number;
   itemSelection: ItemSelectEventArgs<T>;
   getBulkActionSelection: () => ItemSelection<T>;
   onReloadData: () => void;
@@ -35,10 +42,14 @@ interface UseActionsProps<T extends Data> {
   onBulkActionsToggled: (expanded: boolean) => void;
   setIsBulkOpen: (value: React.SetStateAction<boolean>) => void;
   closeBulkEdit: () => void;
+  closeQuickEdit: () => Promise<void>;
 }
 
 interface UseActionsReturnType {
+  /** Actions of the page header, which includes the toggles of the action sets */
   readonly actions: PageHeaderActionItemProps[];
+  /** Content of the action bar of the List, for the context that is active */
+  readonly actionBar: ActionBarData;
 }
 
 export const useActions = <T extends Data>({
@@ -48,56 +59,60 @@ export const useActions = <T extends Data>({
   actions,
   itemSelection,
   onBulkActionsToggled,
-  openBulkActionsOnStart,
+  isBulkOpen,
   resultCount,
   setIsBulkOpen,
-  quickEditAction,
+  quickEditToggleAction,
+  quickEditActionBar,
+  actionBarLabel,
   bulkActions,
   closeBulkEdit,
+  closeQuickEdit,
   bulkEditAction,
 }: UseActionsProps<T>): UseActionsReturnType => {
-  const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
-    () => [
-      ...(bulkEditAction ? [bulkEditAction] : []),
-      ...(bulkActions ?? []).map((action) => ({
-        ...action,
-        onClick: async () => {
-          if (action.showStartedNotification !== false) {
-            showNotification({
-              title: `Bulk Action '${action.label}' Started`,
-            });
-          }
-
-          try {
-            const result = await action.onClick(getBulkActionSelection());
-            if (result) {
-              const message = errMsg(result);
+  const bulkActionItems: ActionBarAction[] = useMemo(
+    () =>
+      [
+        ...(bulkEditAction ? [bulkEditAction] : []),
+        ...(bulkActions ?? []).map((action) => ({
+          ...action,
+          onClick: async () => {
+            if (action.showStartedNotification !== false) {
               showNotification({
-                title:
-                  typeof message.title === 'string'
-                    ? message.title
-                    : 'An error occurred',
-                body: message.body,
-                options: {
-                  type: 'error',
-                },
+                title: `Bulk Action '${action.label}' Started`,
               });
-            } else {
-              if (action.reloadData) {
-                onReloadData();
+            }
+
+            try {
+              const result = await action.onClick(getBulkActionSelection());
+              if (result) {
+                const message = errMsg(result);
+                showNotification({
+                  title:
+                    typeof message.title === 'string'
+                      ? message.title
+                      : 'An error occurred',
+                  body: message.body,
+                  options: {
+                    type: 'error',
+                  },
+                });
+              } else {
+                if (action.reloadData) {
+                  onReloadData();
+                }
               }
+            } catch (error) {
+              setStationMessage(
+                errMsg(
+                  error,
+                  'An error occurred when trying to execute the bulk operation.',
+                ),
+              );
             }
-          } catch (error) {
-            setStationMessage(
-              errMsg(
-                error,
-                'An error occurred when trying to execute the bulk operation.',
-              ),
-            );
-          }
-        },
-      })),
-    ],
+          },
+        })),
+      ].map(toActionBarAction),
     [
       bulkActions,
       bulkEditAction,
@@ -107,40 +122,80 @@ export const useActions = <T extends Data>({
     ],
   );
 
+  const toggleBulkActions = useCallback(async (): Promise<void> => {
+    const isOpening = !isBulkOpen;
+
+    if (isOpening) {
+      // Only one set of actions can be on display, so quick edit gives way.
+      await closeQuickEdit();
+    } else {
+      closeBulkEdit();
+    }
+
+    setIsBulkOpen(isOpening);
+
+    try {
+      await onBulkActionsToggled(isOpening);
+    } catch {
+      // The consumer is expected to surface a problem of its own handler.
+    }
+  }, [
+    closeBulkEdit,
+    closeQuickEdit,
+    isBulkOpen,
+    onBulkActionsToggled,
+    setIsBulkOpen,
+  ]);
+
+  const actionBar: ActionBarData = useMemo(() => {
+    // The bar reports the results at all times, only the actions on it change
+    // with the context that is active.
+    if (isBulkOpen && bulkActionItems.length > 0) {
+      // Bulk actions apply to the selection, so they are unavailable while
+      // there is nothing to apply them to.
+      const noSelection =
+        itemSelection.items?.length === 0 || resultCount?.filtered === 0;
+
+      return {
+        label: actionBarLabel,
+        actions: bulkActionItems.map((action) => ({
+          ...action,
+          disabled: action.disabled || noSelection,
+        })),
+      };
+    }
+
+    return {
+      label: actionBarLabel,
+      actions: quickEditActionBar?.actions ?? [],
+    };
+  }, [
+    actionBarLabel,
+    bulkActionItems,
+    isBulkOpen,
+    itemSelection,
+    quickEditActionBar,
+    resultCount,
+  ]);
+
   const pageHeaderActions: PageHeaderActionItemProps[] = useMemo(() => {
     const headerActions: PageHeaderActionItemProps[] = [];
 
     if (bulkActionItems.length > 0) {
-      headerActions.push({ kind: 'spacer' });
-
       headerActions.push({
+        kind: 'action',
         label: 'Bulk Actions',
         icon: IconName.Bulk,
-        kind: 'group',
-        actions: bulkActionItems,
-        openActionsGroupOnStart: openBulkActionsOnStart,
-        onActionsGroupToggled: async (isOpen) => {
-          setIsBulkOpen(isOpen);
-          onBulkActionsToggled(isOpen);
-
-          if (!isOpen) {
-            closeBulkEdit();
-          }
-        },
-        groupActionsDisabled:
-          itemSelection.items?.length === 0 || resultCount?.filtered === 0,
+        toggled: isBulkOpen,
+        onClick: toggleBulkActions,
       });
     }
 
-    if (quickEditAction) {
-      headerActions.push({ kind: 'spacer' });
-
-      headerActions.push(quickEditAction);
+    if (quickEditToggleAction) {
+      headerActions.push({ ...quickEditToggleAction, kind: 'action' });
     }
 
     if (actions && actions.length > 0) {
-      headerActions.push({ kind: 'spacer' });
-
       actions?.forEach((action) => {
         headerActions.push({
           ...(isPageHeaderNavigationAction(action)
@@ -173,20 +228,17 @@ export const useActions = <T extends Data>({
     return headerActions;
   }, [
     actions,
-    bulkActionItems,
-    closeBulkEdit,
-    itemSelection.items?.length,
-    onBulkActionsToggled,
+    bulkActionItems.length,
+    isBulkOpen,
     onReloadData,
-    openBulkActionsOnStart,
-    quickEditAction,
-    resultCount?.filtered,
-    setIsBulkOpen,
+    quickEditToggleAction,
     setStationMessage,
+    toggleBulkActions,
   ]);
 
   return {
     actions: pageHeaderActions,
+    actionBar,
   };
 };