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

package/src/components/ActionBar/helpers.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getVisibleActionCount, isActionBarNavigationAction } from './helpers';
+
+describe('getVisibleActionCount', () => {
+  it('keeps every action when they all fit', () => {
+    expect(getVisibleActionCount([100, 100, 100], 300, 50)).toBe(3);
+    expect(getVisibleActionCount([100, 100, 100], 500, 50)).toBe(3);
+  });
+
+  it('reserves room for the overflow menu once an action does not fit', () => {
+    // 299 available, 50 of it goes to the menu, which leaves room for two
+    // actions (200) but not for the third (300).
+    expect(getVisibleActionCount([100, 100, 100], 299, 50)).toBe(2);
+  });
+
+  it('moves every action into the overflow menu when not even one fits', () => {
+    expect(getVisibleActionCount([100, 100], 120, 50)).toBe(0);
+  });
+
+  it('handles an empty set of actions', () => {
+    expect(getVisibleActionCount([], 300, 50)).toBe(0);
+  });
+
+  it('keeps a single action that fits exactly', () => {
+    expect(getVisibleActionCount([100], 100, 50)).toBe(1);
+  });
+});
+
+describe('isActionBarNavigationAction', () => {
+  it('is true for an action with a path', () => {
+    expect(isActionBarNavigationAction({ label: 'Open', path: '/open' })).toBe(
+      true,
+    );
+  });
+
+  it('is false for an action with a handler', () => {
+    expect(
+      isActionBarNavigationAction({ label: 'Run', onClick: vi.fn() }),
+    ).toBe(false);
+  });
+});

package/src/components/ActionBar/helpers.ts

@@ -0,0 +1,54 @@
+import type {
+  ActionBarAction,
+  ActionBarNavigationAction,
+} from './ActionBar.model';
+
+/**
+ * Determines how many actions of the action bar can be rendered next to each
+ * other, given the space that is available to them.
+ *
+ * Whenever not every action fits, room for the overflow menu is taken off the
+ * budget first, so that the menu holding the remaining actions is always
+ * reachable. A return value of 0 means that every action has to move into the
+ * overflow menu.
+ *
+ * @param actionWidths the width of each action, in the order they are rendered
+ * @param availableWidth the width the actions may occupy
+ * @param overflowMenuWidth the width of the overflow menu trigger
+ */
+export const getVisibleActionCount = (
+  actionWidths: number[],
+  availableWidth: number,
+  overflowMenuWidth: number,
+): number => {
+  const totalWidth = actionWidths.reduce((total, width) => total + width, 0);
+
+  if (totalWidth <= availableWidth) {
+    return actionWidths.length;
+  }
+
+  const budget = availableWidth - overflowMenuWidth;
+
+  let usedWidth = 0;
+  let count = 0;
+
+  for (const width of actionWidths) {
+    if (usedWidth + width > budget) {
+      break;
+    }
+
+    usedWidth += width;
+    count++;
+  }
+
+  return count;
+};
+
+/**
+ * Determines whether an action of the action bar navigates rather than runs a
+ * handler.
+ * @param action the action to check
+ */
+export const isActionBarNavigationAction = (
+  action: ActionBarAction,
+): action is ActionBarNavigationAction => 'path' in action && !!action.path;

package/src/components/ActionBar/index.ts

@@ -0,0 +1,2 @@
+export { ActionBar, type ActionBarProps } from './ActionBar';
+export type { ActionBarAction, ActionBarData } from './ActionBar.model';

package/src/components/Actions/Action/Action.spec.tsx

@@ -6,11 +6,11 @@ import {
   waitFor,
 } from '@testing-library/react';
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { MemoryRouter, Route, BrowserRouter as Router } from 'react-router-dom';
 import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
 import type { ConfirmationConfig } from '../../ConfirmDialog';
-import { IconName } from '../../Icons';
+import { IconName, Icons } from '../../Icons';
 import {
   Action,
   type ActionProps,
@@ -99,6 +99,68 @@ describe('Action', () => {
       expect(actionContainer?.classList.contains('isDisabled')).toBe(true);
     });
 
+    it('keeps a disabled link from navigating', () => {
+      const { getByTestId, queryByTestId } = render(
+        <MemoryRouter initialEntries={['/']}>
+          <Action
+            action={{ label: 'Export', path: '/export', isDisabled: true }}
+          />
+          <Route path="/export">
+            <span data-test-id="export-page" />
+          </Route>
+        </MemoryRouter>,
+      );
+
+      const link = getByTestId('action');
+
+      // Out of reach of the keyboard, and inert if it is activated anyway.
+      expect(link).toHaveAttribute('aria-disabled', 'true');
+      expect(link).toHaveAttribute('tabindex', '-1');
+
+      fireEvent.click(link);
+
+      expect(queryByTestId('export-page')).toBeNull();
+    });
+
+    it('navigates with a link that is not disabled', () => {
+      const { getByTestId } = render(
+        <MemoryRouter initialEntries={['/']}>
+          <Action action={{ label: 'Export', path: '/export' }} />
+          <Route path="/export">
+            <span data-test-id="export-page" />
+          </Route>
+        </MemoryRouter>,
+      );
+
+      const link = getByTestId('action');
+
+      expect(link).not.toHaveAttribute('aria-disabled');
+      expect(link).not.toHaveAttribute('tabindex');
+
+      fireEvent.click(link);
+
+      expect(getByTestId('export-page')).toBeInTheDocument();
+    });
+
+    it(`uses the icon with the enum value 0 rather than the default icon`, () => {
+      const { container } = render(
+        <Router>
+          <Action
+            action={{
+              ...defaultNavigationProps.action,
+              icon: IconName.Archive,
+            }}
+          />
+        </Router>,
+      );
+      const { container: archive } = render(<Icons icon={IconName.Archive} />);
+
+      expect(IconName.Archive).toBe(0);
+      expect(container.querySelector('svg')?.innerHTML).toBe(
+        archive.querySelector('svg')?.innerHTML,
+      );
+    });
+
     it(`changes the icon if one provided by props`, () => {
       const iconName = IconName.External;
       const props = {

package/src/components/Actions/Action/Action.tsx

@@ -204,9 +204,14 @@ const NavigationAction: React.FC<{ action: NavigationActionData }> = ({
       )}
       data-test-id="action"
       target={openInNewTab ? '_blank' : undefined}
+      // The styles keep the pointer off a disabled link. This keeps it out of
+      // reach of the keyboard, and from navigating if it is activated anyway.
+      aria-disabled={isDisabled || undefined}
+      tabIndex={isDisabled ? -1 : undefined}
+      onClick={isDisabled ? (event) => event.preventDefault() : undefined}
     >
       <span data-test-id="label">{label}</span>
-      <Icons icon={icon ? icon : defaultIcon} className={classes.icon} />
+      <Icons icon={icon ?? defaultIcon} className={classes.icon} />
     </Link>
   );
 };

package/src/components/ConfirmDialog/index.ts

@@ -1,2 +1,3 @@
 export { ConfirmDialog, useConfirmationDelay } from './ConfirmDialog';
 export * from './ConfirmDialog.models';
+export { useConfirmableAction } from './useConfirmableAction';

package/src/components/ConfirmDialog/useConfirmableAction.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { ConfirmDialog, useConfirmationDelay } from './ConfirmDialog';
+import type {
+  ConfirmationConfig,
+  ConfirmationMode,
+} from './ConfirmDialog.models';
+
+interface UseConfirmableActionProps {
+  /** How the action confirms before it runs. (default: 'None') */
+  confirmationMode?: ConfirmationMode;
+  /** Optional text overrides for the confirmation. */
+  confirmationConfig?: ConfirmationConfig;
+  /** Called once the action is confirmed, or immediately when no confirmation is required. */
+  onConfirmed: () => void;
+  /** Move the 'Advanced' dialog along the trigger element. (default: 0) */
+  offsetSkidding?: number;
+}
+
+interface UseConfirmableActionResult<T extends HTMLElement> {
+  /** Whether a confirmation is currently pending. */
+  isConfirming: boolean;
+  /**
+   * Whether the trigger should render `simpleConfirmation` in place of its
+   * label. Only ever true in 'Simple' mode.
+   */
+  isSimpleConfirmation: boolean;
+  /** Click handler for the trigger element. */
+  onTriggerClicked: () => void;
+  /** Props that have to be spread on the trigger element. */
+  triggerProps: {
+    ref: React.LegacyRef<T>;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onMouseOver: () => void;
+  };
+  /** 'Click again to confirm' message, to be rendered instead of the label. */
+  simpleConfirmation: JSX.Element | null;
+  /** The confirmation dialog of the 'Advanced' mode, anchored to the trigger. */
+  advancedConfirmation: JSX.Element | null;
+}
+
+/**
+ * Covers the concern of confirming an action before it is executed, shared by
+ * the components that render actions.
+ *
+ * In 'Simple' mode the first click arms the confirmation and the trigger swaps
+ * its label for `simpleConfirmation`, the second click executes the action. In
+ * 'Advanced' mode the click opens `advancedConfirmation`, which executes the
+ * action once confirmed.
+ *
+ * @example
+ * const { onTriggerClicked, triggerProps, isSimpleConfirmation, simpleConfirmation, advancedConfirmation } =
+ *   useConfirmableAction<HTMLButtonElement>({ confirmationMode, confirmationConfig, onConfirmed: onClick });
+ *
+ * <button {...triggerProps} onClick={onTriggerClicked}>
+ *   {isSimpleConfirmation ? simpleConfirmation : label}
+ * </button>
+ * {advancedConfirmation}
+ */
+export const useConfirmableAction = <T extends HTMLElement>({
+  confirmationMode = 'None',
+  confirmationConfig = {},
+  onConfirmed,
+  offsetSkidding,
+}: UseConfirmableActionProps): UseConfirmableActionResult<T> => {
+  const [confirmation, setConfirmation] = useState<boolean>(false);
+  // Popper needs the element in state, not in a ref, to know when it changes.
+  const [referenceElement, setReferenceElement] = useState<HTMLElement>();
+  const { isMouseOver, setIsMouseOver } = useConfirmationDelay({
+    confirmationMode,
+    confirmation,
+    setConfirmation,
+  });
+
+  const { title, body, cancelButtonText, confirmButtonText, onConfirmOpen } =
+    confirmationConfig;
+
+  const onTriggerClicked = (): void => {
+    switch (confirmationMode) {
+      case 'Simple':
+        !confirmation
+          ? setConfirmation(true)
+          : (onConfirmed(), setConfirmation(false));
+        break;
+      case 'Advanced':
+        setConfirmation(true);
+        break;
+      default:
+        onConfirmed();
+        setConfirmation(false);
+        break;
+    }
+  };
+
+  const isSimpleConfirmation = confirmation && confirmationMode === 'Simple';
+
+  return {
+    isConfirming: confirmation,
+    isSimpleConfirmation,
+    onTriggerClicked,
+    triggerProps: {
+      ref: setReferenceElement as React.LegacyRef<T>,
+      onMouseEnter: () => setIsMouseOver(true),
+      onMouseLeave: () => setIsMouseOver(false),
+      onMouseOver: () => {
+        // Needed in cases where the mouse enters the component after another
+        // confirmation dialog was dismissed
+        if (!isMouseOver) {
+          setIsMouseOver(true);
+        }
+      },
+    },
+    simpleConfirmation: isSimpleConfirmation ? (
+      <SimpleConfirmation
+        onConfirmOpen={onConfirmOpen}
+        data={{ mode: 'Simple' }}
+      />
+    ) : null,
+    advancedConfirmation:
+      confirmation && confirmationMode === 'Advanced' ? (
+        <ConfirmDialog
+          referenceElement={referenceElement}
+          title={title}
+          cancelButtonText={cancelButtonText}
+          confirmButtonText={confirmButtonText}
+          offsetSkidding={offsetSkidding}
+          onCancel={() => setConfirmation(false)}
+          onConfirm={() => {
+            onConfirmed();
+            setConfirmation(false);
+          }}
+          onConfirmOpen={(isOpen) =>
+            onConfirmOpen?.(isOpen, { mode: 'Advanced' })
+          }
+        >
+          {body}
+        </ConfirmDialog>
+      ) : null,
+  };
+};
+
+/**
+ * Message shown in place of the label of an action that is awaiting its second
+ * click, which also reports the confirmation state while it is mounted.
+ */
+const SimpleConfirmation: React.FC<{
+  onConfirmOpen: ConfirmationConfig['onConfirmOpen'];
+  data: { mode: ConfirmationMode };
+}> = ({ onConfirmOpen, data }) => {
+  useEffect(() => {
+    onConfirmOpen && onConfirmOpen(true, data);
+    return () => {
+      onConfirmOpen && onConfirmOpen(false, data);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <span data-test-id="confirm">Click again to confirm</span>;
+};

package/src/components/EmptyStation/EmptyStation.stories.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { action } from 'storybook/actions';
 import { createGroups } from '../../helpers/storybook';
 import { IconName } from '../Icons/Icons.models';
+import { PageHeaderActionType } from '../PageHeader';
 import { EmptyStation } from './EmptyStation';
 
 const groups = createGroups({
@@ -90,3 +91,99 @@ export const Default: StoryObj<typeof EmptyStation> = {
     subtitle: 'My Asset Type',
   },
 };
+
+export const GroupedActions: StoryObj<typeof EmptyStation> = {
+  name: 'Grouped Header Actions',
+  parameters: {
+    docs: {
+      description: {
+        story: `Header actions can be grouped. A group renders a single action that opens an action bar with its child actions below the header, pushing the station content down.
+        Only one group can be open at a time. Standard actions and groups are separated by a spacer, and actions that do not fit move into the overflow menu of the bar.`,
+      },
+    },
+  },
+  argTypes: {
+    actions: { ...groups.actions, control: false },
+  },
+  args: {
+    title: 'Title',
+    subtitle: 'My Asset Type',
+    actions: [
+      {
+        label: 'Undo',
+        icon: IconName.Undo,
+        kind: 'action',
+        onClick: action('Action.onClick'),
+      },
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: [
+          {
+            label: 'Bulk Edit',
+            icon: IconName.BulkEdit,
+            actionType: PageHeaderActionType.Context,
+            tag: 'BETA',
+            onClick: action('BulkAction.onClick'),
+          },
+          {
+            label: 'Bulk Delete',
+            icon: IconName.Delete,
+            actionType: PageHeaderActionType.Context,
+            confirmationMode: 'Advanced',
+            onClick: action('BulkAction.onClick'),
+          },
+          {
+            label: 'Bulk Unpublish',
+            icon: IconName.Unpublish,
+            actionType: PageHeaderActionType.Context,
+            confirmationMode: 'Simple',
+            onClick: action('BulkAction.onClick'),
+          },
+          {
+            label: 'Disabled Bulk Action',
+            icon: IconName.ChevronRight,
+            disabled: true,
+            onClick: action('BulkAction.onClick'),
+          },
+        ],
+        onActionsGroupToggled: async (expanded: boolean): Promise<void> => {
+          action('BulkActions.onActionsGroupToggled')(expanded);
+        },
+      },
+      {
+        label: 'Export',
+        icon: IconName.File,
+        kind: 'group',
+        actions: [
+          {
+            label: 'Export as CSV',
+            icon: IconName.ChevronRight,
+            onClick: action('ExportAction.onClick'),
+          },
+          {
+            label: 'Export as JSON',
+            icon: IconName.ChevronRight,
+            onClick: action('ExportAction.onClick'),
+          },
+        ],
+        onActionsGroupToggled: async (expanded: boolean): Promise<void> => {
+          action('Export.onActionsGroupToggled')(expanded);
+        },
+      },
+    ],
+  },
+  render: (args) => (
+    <EmptyStation {...args}>
+      <div>
+        <h1 style={{ textAlign: 'center' }}>Your station content goes here</h1>
+        {Array.from({ length: 3 }, (_, i) => i + 1).map((i) => (
+          <p key={i}>
+            {faker.lorem.paragraph(faker.datatype.number({ min: 10, max: 50 }))}
+          </p>
+        ))}
+      </div>
+    </EmptyStation>
+  ),
+};

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -77,6 +77,8 @@ export const useBulkEdit = <T extends Data>({
         ? {
             label: bulkEditRegistration.label ?? 'Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
+            // Stays highlighted while the panel it has opened is on display.
+            toggled: isBulkEditMode,
             onClick: () => {
               setIsBulkEditMode((prev) => !prev);
               if (!isBulkEditMode) {

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

@@ -179,21 +179,22 @@ describe('Explorer', () => {
             columns={[{ propertyName: 'id' }]}
             dataProvider={provider}
             stationKey="mock-key"
+            openBulkActionsOnStart={true}
             bulkActions={[{ label: 'Something', onClick: vi.fn() }]}
           />,
         );
       });
 
-      // When no items are selected, bulk action buttons should be disabled
+      // When no items are selected, the actions on the bar should be disabled
       await waitFor(() => {
         const bulkActionButtons = container.querySelectorAll(
-          '.page-header-group-action-container .actions button',
+          '[data-test-id="action-bar"] button[data-test-id="action"]',
         );
         expect(bulkActionButtons.length).toBeGreaterThan(0);
       });
 
       const bulkActionButtons = container.querySelectorAll(
-        '.page-header-group-action-container .actions button',
+        '[data-test-id="action-bar"] button[data-test-id="action"]',
       );
       bulkActionButtons.forEach((button) => {
         expect((button as HTMLButtonElement).disabled).toBe(true);
@@ -1777,7 +1778,7 @@ describe('Explorer', () => {
     });
   });
 
-  it('sets the subtitle', async () => {
+  it('reports the result counts on the action bar', async () => {
     const [provider, spy] = getDataProvider();
     const data = [{ id: 1 }, { id: 2 }, { id: 3 }];
 
@@ -1801,15 +1802,17 @@ describe('Explorer', () => {
     );
 
     await waitFor(() => {
-      expect(container.textContent).toContain('Showing 4 of 5 Elements');
+      expect(
+        container.querySelector('[data-test-id="action-bar-label"]'),
+      ).toHaveTextContent('Total 5, Filtered 4');
     });
   });
 
-  it(`appends 'Selected' count when bulk actions is open`, async () => {
+  it('reports the selection on the action bar once items are selected', async () => {
     const [provider, spy] = getDataProvider();
     const data = [{ id: 1 }, { id: 2 }, { id: 3 }];
 
-    spy.mockReturnValueOnce(
+    spy.mockReturnValue(
       Promise.resolve({
         totalCount: 5,
         filteredCount: 4,
@@ -1829,9 +1832,26 @@ describe('Explorer', () => {
       ),
     );
 
+    // Opening the bulk actions alone changes nothing, the counts stay
     await waitFor(() => {
-      expect(container.textContent).toContain('Selected');
+      expect(
+        container.querySelector('[data-test-id="action-bar-label"]'),
+      ).toHaveTextContent('Total 5, Filtered 4');
     });
+
+    const firstCheckbox = container
+      .querySelectorAll('[data-test-id="list-entry"]')[0]
+      .querySelector(
+        '[data-test-id="list-entry-checkbox"]',
+      ) as HTMLButtonElement;
+
+    await act(async () => {
+      fireEvent.click(firstCheckbox);
+    });
+
+    expect(
+      container.querySelector('[data-test-id="action-bar-label"]'),
+    ).toHaveTextContent('Selected 1');
   });
 
   describe('global states', () => {
@@ -2041,5 +2061,74 @@ describe('Explorer', () => {
     // Note: Testing callback would require finding and clicking the bulk actions toggle button
   });
 
+  describe('Quick edit', () => {
+    const renderQuickEdit = async (onItemClicked = vi.fn()) => {
+      const [provider, spy] = getDataProvider();
+      const data = [
+        { id: 1, title: 'One', desc: '' },
+        { id: 2, title: 'Two', desc: '' },
+        { id: 3, title: 'Three', desc: '' },
+      ];
+
+      spy.mockReturnValue(
+        Promise.resolve({
+          totalCount: data.length,
+          filteredCount: data.length,
+          data,
+        }),
+      );
+
+      const { container } = await actWithReturn(async () => {
+        return render(
+          <Explorer
+            columns={mockListColumns}
+            dataProvider={provider}
+            stationKey="mock-key"
+            onItemClicked={onItemClicked}
+            quickEditRegistrations={[{ label: 'Details', component: <div /> }]}
+          />,
+        );
+      });
+
+      const rows = () =>
+        container.querySelectorAll('[data-test-id="list-entry"]');
+
+      await waitFor(() => expect(rows()).toHaveLength(data.length));
+
+      const quickViewToggle = container.querySelector(
+        '[data-test-id="page-header-actions"] [data-test-id="action"][title="Quick View"]',
+      ) as HTMLElement;
+
+      await act(async () => {
+        fireEvent.click(quickViewToggle);
+      });
+
+      return { rows };
+    };
+
+    it('marks the item it opens on as selected in the list', async () => {
+      const onItemClicked = vi.fn();
+      const { rows } = await renderQuickEdit(onItemClicked);
+
+      expect(rows()[0]).toHaveClass('selected');
+      expect(rows()[1]).not.toHaveClass('selected');
+      // Marking the item is no click on it.
+      expect(onItemClicked).not.toHaveBeenCalled();
+    });
+
+    it('moves the selection to the item that is clicked', async () => {
+      const { rows } = await renderQuickEdit();
+
+      await act(async () => {
+        fireEvent.click(
+          rows()[2].querySelector('[data-test-id="list-entry-select-button"]')!,
+        );
+      });
+
+      expect(rows()[2]).toHaveClass('selected');
+      expect(rows()[0]).not.toHaveClass('selected');
+    });
+  });
+
   it.todo(`item selection should default to 'SINGLE_ITEMS'`);
 });