@axinom/mosaic-ui 0.49.0-rc.5 → 0.49.0-rc.6

package/dist/{components/DynamicDataList/helpers/generateId.d.ts → utils/GenerateId.d.ts}

@@ -3,4 +3,4 @@
  * @returns UUID
  */
 export declare const uuid: () => string;
-//# sourceMappingURL=generateId.d.ts.map
+//# sourceMappingURL=GenerateId.d.ts.map

package/dist/utils/GenerateId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.d.ts","sourceRoot":"","sources":["../../src/utils/GenerateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,QAAO,MAKvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0-rc.5",
+  "version": "0.49.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.22-rc.5",
+    "@axinom/mosaic-core": "^0.4.22-rc.6",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f50c5ef83f997ed19fef76fb4786e4aa63679f5"
+  "gitHead": "00356987b703a8eab052ca7efa3ec609338e5cf7"
 }

package/src/components/DynamicDataList/DynamicDataList.spec.tsx

@@ -9,7 +9,8 @@ import { DynamicListRow } from './DynamicListRow/DynamicListRow';
 import { useDataHandler } from './helpers/useDataHandler';
 
 jest.mock('./helpers/useDataHandler');
-jest.mock('./helpers/generateId', () => ({
+
+jest.mock('../../utils/GenerateId', () => ({
   uuid: jest.fn().mockReturnValue('test-uuid'),
 }));
 

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -10,6 +10,7 @@ import {
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../helpers/utils';
 import { Data } from '../../types/data';
+import { uuid } from '../../utils/GenerateId';
 import { ActionData } from '../Actions';
 import { ObjectSchemaDefinition } from '../FormStation';
 import { DynamicListColumn } from './DynamicDataList.model';
@@ -21,7 +22,6 @@ import {
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
 import { DynamicListRow } from './DynamicListRow/DynamicListRow';
-import { uuid } from './helpers/generateId';
 import { useColumnDefs } from './helpers/useColumnDefs';
 import { useDataHandler } from './helpers/useDataHandler';
 import { useRowAnimation } from './helpers/useRowAnimation';

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

@@ -24,7 +24,7 @@ import { MessageBar } from '../MessageBar';
 import { StationError } from '../models';
 import { PageHeaderAction } from '../PageHeader';
 import { PageHeader } from '../PageHeader/PageHeader';
-import { PageHeaderBulkActions } from '../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import * as GS from '../Utils/State/GlobalState';
 import { Explorer, ExplorerProps } from './Explorer';
 import {
@@ -34,6 +34,10 @@ import {
 } from './Explorer.model';
 import { StationMessage } from './useStationMessage';
 
+jest.mock('../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface ExplorerTestData {
   id: number;
   title: string;
@@ -152,7 +156,6 @@ describe('Explorer', () => {
             columns={[{ propertyName: 'id' }]}
             dataProvider={provider}
             stationKey="mock-key"
-            openBulkActionsOnStart={true}
             bulkActions={[{ label: 'Something', onClick: jest.fn() }]}
           />,
         );
@@ -166,8 +169,9 @@ describe('Explorer', () => {
         await wrapper.update();
       });
 
-      wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('enables bulk actions if filtered results are returned', async () => {
@@ -203,7 +207,10 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(false);
+
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(false);
     });
 
     it('disables bulk actions if no filtered results are returned', async () => {
@@ -239,7 +246,9 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('Reloads data when a bulk action with reloadData is triggered', async () => {
@@ -267,10 +276,10 @@ describe('Explorer', () => {
       // Initial Data Loading
       expect(spy).toHaveBeenCalledTimes(1);
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
 
         await wrapper.update();
       });
@@ -301,9 +310,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -336,9 +345,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -401,7 +410,7 @@ describe('Explorer', () => {
     expectComponentReceivesValue(header, 'title');
     // expectComponentReceivesValue(header, 'actions');
     // expectComponentReceivesValue(header, 'bulkActions');
-    expectComponentReceivesValue(header, 'openBulkActionsOnStart');
+    // expectComponentReceivesValue(header, 'openBulkActionsOnStart');
 
     const filters = wrapper.find(Filters);
     expectComponentReceivesValue(filters, 'filters');
@@ -2025,9 +2034,10 @@ describe('Explorer', () => {
     });
 
     await act(async () => {
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(true);
-
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(false);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(true);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(
+        false,
+      );
     });
 
     expect(spy).toHaveBeenCalledTimes(2);

package/src/components/Explorer/Explorer.tsx

@@ -7,7 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { ActionData } from '..';
+import { ActionData, IconName } from '..';
 import { noop } from '../../helpers/utils';
 import { showNotification } from '../../initialize';
 import { Data } from '../../types/data';
@@ -23,7 +23,11 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
-import { PageHeader, PageHeaderActionProps } from '../PageHeader';
+import {
+  PageHeader,
+  PageHeaderActionItemProps,
+  PageHeaderActionProps,
+} from '../PageHeader';
 import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
 import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { getState, storeState } from '../Utils/State/GlobalState';
@@ -348,24 +352,48 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     });
   };
 
-  const pageHeaderActionsHandler = (): PageHeaderActionProps[] => {
-    return (actions ?? []).map((action) => {
-      return isPageHeaderNavigationAction(action)
-        ? action
-        : {
-            ...action,
-            onClick: async () => {
-              try {
-                const result = await action.onClick();
-                if (result) {
-                  setStationMessage(errMsg(result));
+  const pageHeaderActionsHandler = (): PageHeaderActionItemProps[] => {
+    const headerActions: PageHeaderActionItemProps[] = [];
+
+    if (bulkActions && bulkActions.length > 0) {
+      headerActions.push({
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkActionsHandler(),
+        openActionsGroupOnStart: openBulkActionsOnStart,
+        onActionsGroupToggled: (isOpen) => {
+          setIsBulkOpen(isOpen);
+          onBulkActionsToggled(isOpen);
+        },
+        groupActionsDisabled:
+          itemSelection.items?.length === 0 || resultCount?.filtered === 0,
+      });
+      headerActions.push({ kind: 'spacer' });
+    }
+
+    actions?.forEach((action) => {
+      headerActions.push({
+        ...(isPageHeaderNavigationAction(action)
+          ? action
+          : {
+              ...action,
+              onClick: async () => {
+                try {
+                  const result = await action.onClick();
+                  if (result) {
+                    setStationMessage(errMsg(result));
+                  }
+                } catch (error) {
+                  setStationMessage(errMsg(error, errAction));
                 }
-              } catch (error) {
-                setStationMessage(errMsg(error, errAction));
-              }
-            },
-          };
+              },
+            }),
+        kind: 'action',
+      });
     });
+
+    return headerActions;
   };
 
   const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
@@ -421,16 +449,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       <PageHeader
         title={title}
         subtitle={resultsTitle}
-        actions={actions && pageHeaderActionsHandler()}
-        bulkActions={bulkActions && bulkActionsHandler()}
-        openBulkActionsOnStart={openBulkActionsOnStart}
-        bulkActionsDisabled={
-          itemSelection.items?.length === 0 || resultCount?.filtered === 0
-        }
-        onBulkActionsToggled={(isOpen) => {
-          setIsBulkOpen(isOpen);
-          onBulkActionsToggled(isOpen);
-        }}
+        actions={pageHeaderActionsHandler()}
         setTabTitle={setTabTitle}
       />
       {StationMessage}

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

@@ -117,7 +117,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const action = wrapper.find(PageHeaderAction);
+    const action = wrapper.find(PageHeaderAction).last();
     expect(action.props().label).toBe('test');
   });
 
@@ -219,7 +219,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const createAction = wrapper.find(PageHeaderAction);
+    const createAction = wrapper.find(PageHeaderAction).last();
 
     createAction.simulate('click');
 

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

@@ -3,14 +3,16 @@ import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
-import * as app from '../../../initialize';
 import { Column } from '../../List';
-import { PageHeader } from '../../PageHeader';
-import { PageHeaderBulkActions } from '../../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
 import { SelectionExplorer } from './SelectionExplorer';
 
+jest.mock('../../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface SelectExplorerTestData {
   id: string;
   desc: string;
@@ -78,7 +80,7 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(true);
   });
@@ -101,38 +103,12 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(false);
   });
 
-  it('Does not call "showNotification" when "Apply Selection" is clicked', async () => {
-    const [provider] = getDataProvider();
-    const showNotificationSpy: jest.SpyInstance = jest.spyOn(
-      app,
-      'showNotification',
-    );
-
-    const wrapper = await actWithReturn(async () => {
-      const wrapper = mount(
-        <SelectionExplorer
-          columns={mockListColumns}
-          dataProvider={provider}
-          stationKey="mock-key"
-          allowBulkSelect={true}
-        />,
-      );
-      return wrapper;
-    });
-
-    const header = wrapper.find(PageHeader);
-    await act(async () => {
-      header.prop('bulkActions')?.[0].onClick?.();
-      await wrapper.update();
-    });
-
-    expect(showNotificationSpy).toHaveBeenCalledTimes(0);
-  });
+  it.todo('Does not call "showNotification" when "Apply Selection" is clicked');
 
   it('sends onSelection callback when the selection of a single item is triggered', async () => {
     const [provider] = getDataProvider();

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -1,10 +1,11 @@
 import { FormikValues, useFormikContext } from 'formik';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
 import { IconName } from '../../Icons';
 import {
   PageHeader,
+  PageHeaderActionItemProps,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
@@ -49,41 +50,44 @@ export const FormStationHeader: React.FC<
 
   const title = useTitle(titleProperty, defaultTitle);
 
+  const actions: PageHeaderActionItemProps[] = useMemo(() => {
+    const actionItems: PageHeaderActionItemProps[] = [];
+
+    if (dirty) {
+      actionItems.push({
+        label: 'Undo Changes',
+        icon: IconName.Undo,
+        kind: 'action',
+        actionType: PageHeaderActionType.Context,
+        onClick: () => {
+          resetForm();
+        },
+      });
+    }
+
+    if (cancelNavigationUrl) {
+      actionItems.push({
+        label: 'Cancel',
+        icon: IconName.X,
+        kind: 'action',
+        onClick: () => {
+          resetForm();
+          // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
+          Promise.resolve().then(() => history.push(cancelNavigationUrl));
+        },
+      });
+    }
+
+    return actionItems;
+  }, [cancelNavigationUrl, dirty, history, resetForm]);
+
   return (
     <PageHeader
       title={title}
       subtitle={subtitle}
       className={className}
       setTabTitle={setTabTitle}
-      actions={[
-        ...(dirty === true // add undo action if form as been altered
-          ? [
-              {
-                label: 'Undo Changes',
-                icon: IconName.Undo,
-                actionType: PageHeaderActionType.Context,
-                onClick: () => {
-                  resetForm();
-                },
-              },
-            ]
-          : []),
-        ...(cancelNavigationUrl // add cancel action if applicable
-          ? [
-              {
-                label: 'Cancel',
-                icon: IconName.X,
-                onClick: () => {
-                  resetForm();
-                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
-                  Promise.resolve().then(() =>
-                    history.push(cancelNavigationUrl),
-                  );
-                },
-              },
-            ]
-          : []),
-      ]}
+      actions={actions}
     />
   );
 };

package/src/components/PageHeader/PageHeader.model.ts

@@ -1,4 +1,5 @@
 import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+import { PageHeaderActionsGroupProps } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 export interface PageHeaderProps {
   /** Title shown in page header */
@@ -6,20 +7,17 @@ export interface PageHeaderProps {
   /** Subtitle shown in page header */
   subtitle?: string;
   /** Array of actions to be rendered. (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Array of Bulk Actions to be rendered. If populated, Bulk Actions will become available. (default: []) */
-  bulkActions?: PageHeaderActionProps[];
-  /** Whether or bulk actions are shown by default. (default: false) */
-  openBulkActionsOnStart?: boolean;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /**
-   * Callback to emit when Bulk Actions is toggled
-   * The expanded state is supplied as an argument
-   */
-  onBulkActionsToggled?: (expanded: boolean) => void;
+  actions?: PageHeaderActionItemProps[];
   /** CSS Class name for additional styles */
   className?: string;
   /** Update the tab title using the 'title' field. (default: true) */
   setTabTitle?: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PageHeaderSpacerProps {}
+
+export type PageHeaderActionItemProps =
+  | (PageHeaderSpacerProps & { kind: 'spacer' })
+  | (PageHeaderActionProps & { kind: 'action' })
+  | (PageHeaderActionsGroupProps & { kind: 'group' });

package/src/components/PageHeader/PageHeader.scss

@@ -5,7 +5,7 @@
 
   height: $page-header-height;
   display: grid;
-  grid-template-columns: minmax(min-content, 1fr) max-content max-content;
+  grid-template-columns: minmax(30%, 1fr) auto;
   grid-template-rows: 1fr;
 
   @media only screen and (min-width: $XL-min-size) {
@@ -52,9 +52,13 @@
 
   .actions {
     display: grid;
-    grid-template-rows: 1fr;
     grid-auto-flow: column;
+    grid-auto-columns: minmax(0, min-content);
     grid-gap: 1px;
-    justify-items: end;
+  }
+
+  .spacer {
+    display: grid;
+    width: 8px;
   }
 }

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -1,10 +1,11 @@
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../helpers/utils';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
+import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
-import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 jest.mock('../../hooks/useTabTitle/useTabTitle');
 
@@ -40,96 +41,37 @@ describe('PageHeader', () => {
   });
 
   it(`renders actions`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
+    const wrapper = shallow(
+      <PageHeader actions={[{ ...defaultbulkActions[0], kind: 'action' }]} />,
+    );
 
     const action = wrapper.find(PageHeaderAction);
     expect(action.exists()).toBe(true);
   });
 
-  it(`adds a 10px left margin to the actions container as a spacer when actions are present`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBe('10px');
-  });
-
-  it(`does not add a 10px left margin to the actions container when no actions are present`, () => {
-    const wrapper = shallow(<PageHeader />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBeUndefined();
-  });
-
-  it(`does not render 'PageHeaderBulkActions' if bulkActions prop is empty`, () => {
-    const wrapper = mount(<PageHeader />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(false);
-  });
-
-  it(`renders 'PageHeaderBulkActions' if bulkActions prop is populated`, () => {
-    const wrapper = mount(<PageHeader bulkActions={defaultbulkActions} />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(true);
-  });
-
-  it('raises onBulkActionsToggled', () => {
-    const spy = jest.fn();
-
-    const wrapper = mount(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    bulkActionsToggle.simulate('click');
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-
-  it(`bulk actions should not be disabled by default`, () => {
-    const spy = jest.fn();
-
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(false);
+  it(`renders actions groups`, () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        label: 'Bulk Actions',
+        kind: 'group',
+        actions: defaultbulkActions,
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
+
+    const action = wrapper.find(PageHeaderActionsGroup);
+    expect(action.exists()).toBe(true);
   });
 
-  it(`disables bulk actions if 'bulkActionsDisabled' prop is set to true`, () => {
-    const spy = jest.fn();
+  it('renders spacers', () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        kind: 'spacer',
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
 
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-        bulkActionsDisabled={true}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(true);
+    const spacer = wrapper.find('.spacer');
+    expect(spacer.exists()).toBe(true);
   });
-
-  it.todo('calculates the available space needed for bulk actions');
-
-  it.todo('should not calcuate if there are no bulk actions');
 });