@axinom/mosaic-ui 0.32.0-rc.2 → 0.32.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.2",
+  "version": "0.32.0-rc.4",
   "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.5-rc.2",
+    "@axinom/mosaic-core": "^0.4.5-rc.4",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17a96283b7de972962c2087524f8c396b4a283d8"
+  "gitHead": "4a33e94b9a9db8ac149e4a8c92d8f9133a83d31a"
 }

package/src/components/Actions/Actions.models.ts

@@ -1,7 +1,6 @@
 import { Not } from '../../types';
-import { ConfirmationConfig, ConfirmationMode } from '../ConfirmDialog';
 import { IconName } from '../Icons';
-import { ErrorType } from '../models';
+import { ConfirmAction, DefaultHandler, LinkAction } from '../models';
 
 /**
  * @deprecated ActionData interface has been changed and no longer uses `actionType` property
@@ -11,7 +10,7 @@ export enum ActionType {
   Context,
 }
 
-export type ActionData<THandler = DefaultSelectionHandler> =
+export type ActionData<THandler = DefaultHandler> =
   | ContextActionData<THandler>
   | NavigationActionData;
 
@@ -20,7 +19,7 @@ export type ActionData<THandler = DefaultSelectionHandler> =
  * to render an element with JS handler
  * and specified confirmation mode for click event
  */
-export interface ContextActionData<THandler = DefaultSelectionHandler>
+export interface ContextActionData<THandler = DefaultHandler>
   extends ActionBaseData,
     ConfirmAction,
     HandledAction<THandler>,
@@ -36,29 +35,11 @@ export interface NavigationActionData
     Not<ConfirmAction>,
     Not<HandledAction<unknown>> {}
 
-export type DefaultSelectionHandler = () =>
-  | Promise<ErrorType | undefined | void>
-  | ErrorType
-  | undefined
-  | void;
-
-interface LinkAction {
-  /** Path to navigate to when the action is clicked. */
-  path: string;
-}
-
-interface HandledAction<THandler> {
+export interface HandledAction<THandler> {
   /** Callback emitted when a user clicks on the Action. */
   onActionSelected: THandler;
 }
 
-interface ConfirmAction {
-  /** If set to 'Simple', the action will require confirmation. If set to 'Advanced', action will require confirmation via a confirmation pop up. (default: 'None') */
-  confirmationMode?: ConfirmationMode;
-  /** Optional text overrides for the confirmation pop up. */
-  confirmationConfig?: ConfirmationConfig;
-}
-
 interface ActionBaseData {
   /**
    * @deprecated this property is no longer used,

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

@@ -2,7 +2,7 @@ import { Data } from '../../types/data';
 import { FilterValues } from '../Filters';
 import { SortData } from '../List';
 import { ErrorType } from '../models';
-import { PageHeaderActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 
 /**
  * Item selection can have two modes:
@@ -24,7 +24,7 @@ interface SelectAllSelection<T extends Data> {
 }
 
 export interface ExplorerBulkAction<T extends Data>
-  extends Omit<PageHeaderActionProps, 'onClick'> {
+  extends Omit<PageHeaderJsActionProps, 'onClick'> {
   /**
    * Callback to emit when a user clicks on the component
    * @param arg ItemSelection details of the bulk action

package/src/components/Explorer/Explorer.tsx

@@ -24,6 +24,8 @@ import {
 } from '../List';
 import { ErrorType } from '../models';
 import { PageHeader, PageHeaderActionProps } from '../PageHeader';
+import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { getState, storeState } from '../Utils/State/GlobalState';
 import {
   ExplorerBulkAction,
@@ -141,6 +143,7 @@ export interface ExplorerProps<T extends Data> {
    * The expanded state is supplied as an argument
    */
   onBulkActionsToggled?: (expanded: boolean) => void;
+
   /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
 }
@@ -339,23 +342,25 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
 
   const pageHeaderActionsHandler = (): PageHeaderActionProps[] => {
     return (actions ?? []).map((action) => {
-      return {
-        ...action,
-        onClick: async () => {
-          try {
-            const result = await action.onClick();
-            if (result) {
-              setStationMessage(errMsg(result));
-            }
-          } catch (error) {
-            setStationMessage(errMsg(error, errAction));
-          }
-        },
-      };
+      return isPageHeaderNavigationAction(action)
+        ? action
+        : {
+            ...action,
+            onClick: async () => {
+              try {
+                const result = await action.onClick();
+                if (result) {
+                  setStationMessage(errMsg(result));
+                }
+              } catch (error) {
+                setStationMessage(errMsg(error, errAction));
+              }
+            },
+          };
     });
   };
 
-  const bulkActionsHandler = (): PageHeaderActionProps[] => {
+  const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
     return (bulkActions ?? []).map((action) => {
       return {
         ...action,

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

@@ -10,10 +10,19 @@ export interface NavigationExplorerProps<T extends Data>
     ExplorerProps<T>,
     'selectionMode' | 'onBulkActionsToggled' | 'onItemClicked'
   > {
-  /** Raised when the create action button is clicked */
-  onCreateAction?: () => void;
+  /**
+   * - If a `string` is provided, it will be treated as a path to the station to
+   * navigate to, and a link will be generated.
+   * - If a `function` is provided, it will be called when the create action is
+   * clicked, and a button will be generated.
+   */
+  onCreateAction?: (() => void) | string;
 
-  /** Url to navigate to when the row of data is clicked. Navigation will not occur if bulk actions is open. */
+  /**
+   * Function that calculates the URL to navigate to when a row of data is clicked.
+   *  - The function should take the item data as input and return the URL string.
+   *  - Navigation will not occur if bulk actions are open.
+   */
   calculateNavigateUrl?: (item: T) => string;
 }
 
@@ -29,30 +38,41 @@ export interface NavigationExplorerProps<T extends Data>
  *  calculateNavigateUrl={(rowData => `/details/${rowData.id}`)}
  * />
  */
-
 export const NavigationExplorer = React.forwardRef(function NavigationExplorer<
   T extends Data,
 >(
-  props: NavigationExplorerProps<T>,
+  {
+    onCreateAction,
+    calculateNavigateUrl,
+    actions = [],
+    ...rest
+  }: NavigationExplorerProps<T>,
   ref: ForwardedRef<ExplorerDataProviderConnection<T>>,
 ): JSX.Element {
-  const { onCreateAction, calculateNavigateUrl, actions = [], ...rest } = props;
-
   return (
     <Explorer<T>
-      ref={ref}
       {...rest}
+      ref={ref}
       actions={[
-        ...(onCreateAction
+        ...actions,
+        ...(onCreateAction && typeof onCreateAction === 'string'
+          ? [
+              {
+                label: 'New',
+                icon: IconName.Plus,
+                path: onCreateAction,
+              },
+            ]
+          : []),
+        ...(onCreateAction && typeof onCreateAction === 'function'
           ? [
-              ...actions,
               {
                 label: 'New',
                 icon: IconName.Plus,
                 onClick: onCreateAction,
               },
             ]
-          : [...actions]),
+          : []),
       ]}
       selectionMode={ListSelectMode.None}
       generateItemLink={calculateNavigateUrl}

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

@@ -0,0 +1,23 @@
+import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+
+export interface PageHeaderProps {
+  /** Title shown in page header */
+  title?: string;
+  /** 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;
+  /** CSS Class name for additional styles */
+  className?: string;
+}

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -5,7 +5,8 @@ import { PageHeader } from './PageHeader';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction/PageHeaderAction';
+} from './PageHeaderAction';
+import {} from './PageHeaderAction/PageHeaderAction';
 
 const headerActions: PageHeaderActionProps[] = [
   {

package/src/components/PageHeader/PageHeader.tsx

@@ -2,35 +2,11 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { noop } from '../../helpers/utils';
 import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
+import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
-import {
-  PageHeaderAction,
-  PageHeaderActionProps,
-} from './PageHeaderAction/PageHeaderAction';
+import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
 
-export interface PageHeaderProps {
-  /** Title shown in page header */
-  title?: string;
-  /** 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;
-  /** CSS Class name for additional styles */
-  className?: string;
-}
-
 /**
  * Primary header for stations. Accepts a title, subtitle, actions, and bulk actions.
  * @example

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

@@ -0,0 +1,60 @@
+import { Not } from '../../../types';
+import { IconName } from '../../Icons';
+import { ConfirmAction, DefaultHandler, LinkAction } from '../../models';
+
+export enum PageHeaderActionType {
+  Active,
+  Context,
+  /**
+   * @deprecated This value is no longer necessary for navigation type actions in the
+   * `PageHeaderAction` component, and will be removed in the future.
+   * To create a navigation link, use the `path` property instead of the `onClick` handler,
+   * which will automatically generate an anchor element.
+   * @note This deprecation only affects the `Navigation` enum value in the PageHeaderActionType
+   */
+  Navigation,
+}
+
+export type PageHeaderActionProps =
+  | PageHeaderJsActionProps
+  | PageHeaderNavigationActionProps;
+
+export interface PageHeaderJsActionProps
+  extends BaseActionOptions,
+    HandledAction,
+    ConfirmAction,
+    Not<LinkAction> {
+  /**
+   * Whether the action is an 'Active' or 'Context' type.
+   * Changes the background color to the corresponding action type. (default: 'Context')
+   * Type `Navigation` is deprecated and will be removed in the future
+   * define instead of `onClick` handler `path` property to render element with anchor tag
+   */
+  actionType?: PageHeaderActionType;
+}
+
+export interface PageHeaderNavigationActionProps
+  extends BaseActionOptions,
+    LinkAction,
+    Not<ConfirmAction>,
+    Not<HandledAction> {}
+
+interface HandledAction {
+  /**
+   * Callback to emit when a user clicks on the component
+   */
+  onClick: DefaultHandler;
+}
+
+interface BaseActionOptions {
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Optional image alt attribute. */
+  imgAlt?: string;
+  /** Whether the action is disabled. If set to true, disallows interactions. (default: undefined) */
+  disabled?: boolean;
+  /** Optional class */
+  className?: string;
+}

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

@@ -6,10 +6,14 @@ import { TextButton } from '../../Buttons';
 import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
+  isPageHeaderJsAction,
+  isPageHeaderNavigationAction,
   PageHeaderAction,
+} from './PageHeaderAction';
+import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction';
+} from './PageHeaderAction.model';
 
 const defaultProps: PageHeaderActionProps = {
   label: 'action-label',
@@ -25,7 +29,7 @@ describe('PageHeaderAction', () => {
 
   it('renders a label', () => {
     const mockLabel = 'test-label';
-    const wrapper = shallow(
+    const wrapper = mount(
       <PageHeaderAction {...defaultProps} label={mockLabel} />,
     );
 
@@ -486,7 +490,7 @@ describe('PageHeaderAction', () => {
 
   it(`sets background color when actionType is 'Context'`, () => {
     const spy = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <PageHeaderAction
         label={'action-label'}
         actionType={PageHeaderActionType.Context}
@@ -501,7 +505,7 @@ describe('PageHeaderAction', () => {
 
   it(`sets background color when actionType is 'Active'`, () => {
     const spy = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <PageHeaderAction
         label={'action-label'}
         actionType={PageHeaderActionType.Active}
@@ -528,3 +532,41 @@ describe('PageHeaderAction', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 });
+
+describe('isPageHeaderNavigationAction', () => {
+  it('should return true for a valid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'Navigation Action', path: '/home' };
+    expect(isPageHeaderNavigationAction(action)).toBe(true);
+  });
+
+  it('should return false for an invalid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'Navigation Action', onClick: noop };
+    expect(isPageHeaderNavigationAction(action)).toBe(false);
+  });
+
+  it('should return false for a non-PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'JS Action', onClick: noop };
+    expect(isPageHeaderNavigationAction(action)).toBe(false);
+  });
+});
+
+describe('isPageHeaderJsAction', () => {
+  it('should return true for a valid PageHeaderJsActionProps object', () => {
+    const action = { label: 'JS Action', onClick: noop };
+    expect(isPageHeaderJsAction(action)).toBe(true);
+  });
+
+  it('should return false for an invalid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'JS Action', path: '/home' };
+    expect(isPageHeaderJsAction(action)).toBe(false);
+  });
+
+  it('should return false in case `onClick` property is set to `undefined`', () => {
+    const action = {
+      label: 'Navigation Action',
+      path: '/home',
+      onClick: undefined,
+    };
+    expect(isPageHeaderJsAction(action)).toBe(false);
+  });
+});

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.stories.tsx

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
 import { enumToObj } from '../../../helpers/storybook';
 import { IconName } from '../../Icons';
-import { PageHeaderAction, PageHeaderActionType } from './PageHeaderAction';
+import { PageHeaderAction } from './PageHeaderAction';
+import { PageHeaderActionType } from './PageHeaderAction.model';
 
 const iconOptions = enumToObj(IconName);
 const actionTypeOptions = enumToObj(PageHeaderActionType);
@@ -23,6 +26,14 @@ const meta: Meta<typeof PageHeaderAction> = {
       options: iconOptions,
     },
   },
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 export default meta;
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import {
   ConfirmationConfig,
@@ -7,42 +8,15 @@ import {
   ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
-import { IconName, Icons } from '../../Icons';
-import { ErrorType } from '../../models';
+import { Icons } from '../../Icons';
+import {
+  PageHeaderActionProps,
+  PageHeaderActionType,
+  PageHeaderJsActionProps,
+  PageHeaderNavigationActionProps,
+} from './PageHeaderAction.model';
 import classes from './PageHeaderAction.scss';
 
-export enum PageHeaderActionType {
-  Active,
-  Context,
-  Navigation,
-}
-
-export interface PageHeaderActionProps {
-  /** The label of the action. */
-  label: string;
-  /**
-   * Whether the action is an 'Active', 'Context', or 'Navigation' type.
-   * Changes the background color to the corresponding action type. (default: 'Navigation')
-   */
-  actionType?: PageHeaderActionType;
-  /** Optional built in icon. This prop also accepts an img src. */
-  icon?: IconName | string;
-  /** Optional image alt attribute. */
-  imgAlt?: string;
-  /** Whether the action is disabled. If set to true, disallows interactions. (default: undefined) */
-  disabled?: boolean;
-  /** Optional class */
-  className?: string;
-  /** If set to 'Simple', the action will require confirmation. If set to 'Advanced', action will require confirmation via a confirmation pop up. (default: 'None') */
-  confirmationMode?: ConfirmationMode;
-  /** Optional text overrides for the confirmation pop up. */
-  confirmationConfig?: ConfirmationConfig;
-  /**
-   * Callback to emit when a user clicks on the component
-   */
-  onClick: () => Promise<ErrorType | void> | ErrorType | void;
-}
-
 /**
  * Simple Confirm message
  * @example
@@ -65,12 +39,29 @@ const SimpleConfirmDialog: React.FC<{
 
 /**
  * Used to create actions for the PageHeader component.
+ * To generate anchor tag provide `path` property
+ * To generate HTML element with event handler provide `onClick` property
+ * (and optionally `confirmationMode`, `confirmationConfig`)
  * @example
+ * // Action with JS clickHandler
  * <PageHeaderAction label={'Action Label'} onClick={clickHandler} />
+ *
+ * // Action with anchor tag
+ * <PageHeaderAction label={'Action Label'} path={'/action-path'} />
+ */
+export const PageHeaderAction: React.FC<PageHeaderActionProps> = (props) =>
+  isPageHeaderNavigationAction(props) ? (
+    <PageHeaderNavigationAction {...props} />
+  ) : (
+    <PageHeaderJSAction {...props} />
+  );
+
+/**
+ * Page header action with JS handler and optional confirmation mode
  */
-export const PageHeaderAction: React.FC<PageHeaderActionProps> = ({
+const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
   label,
-  actionType = PageHeaderActionType.Navigation,
+  actionType = PageHeaderActionType.Context,
   icon,
   imgAlt,
   confirmationMode = 'None',
@@ -147,15 +138,12 @@ export const PageHeaderAction: React.FC<PageHeaderActionProps> = ({
         data-test-id="action"
       >
         <div className={classes.icon}>
-          {!confirmation && (
-            <>
-              {typeof icon === 'string' ? (
-                <img src={icon} alt={imgAlt} />
-              ) : (
-                <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
-              )}
-            </>
-          )}
+          {!confirmation &&
+            (typeof icon === 'string' ? (
+              <img src={icon} alt={imgAlt} />
+            ) : (
+              <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
+            ))}
         </div>
         <div className={classes.label}>
           {confirmation && confirmationMode === 'Simple' ? (
@@ -190,3 +178,61 @@ export const PageHeaderAction: React.FC<PageHeaderActionProps> = ({
     </>
   );
 };
+
+/**
+ * Page header action rendered as anchor tag
+ */
+const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
+  label,
+  icon,
+  imgAlt,
+  disabled,
+  className,
+  path,
+}) => {
+  return (
+    <Link
+      className={clsx(
+        classes.container,
+        'page-header-action-container',
+        { [classes.disabled]: disabled },
+        className,
+      )}
+      data-test-id="action"
+      to={path}
+    >
+      <div className={classes.icon}>
+        {typeof icon === 'string' ? (
+          <img src={icon} alt={imgAlt} />
+        ) : (
+          <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
+        )}
+      </div>
+      <div className={classes.label}>
+        <span data-test-id="label">{label}</span>
+      </div>
+    </Link>
+  );
+};
+
+/**
+ * Determines whether an action data object is a PageHeaderNavigationActionProps object.
+ * @param {PageHeaderActionProps} action - The action data object to check.
+ * @returns {boolean} - Whether the action data object is a PageHeaderNavigationActionProps object.
+ */
+export function isPageHeaderNavigationAction(
+  action: PageHeaderActionProps,
+): action is PageHeaderNavigationActionProps {
+  return 'path' in action && !!action.path;
+}
+
+/**
+ * Determines whether an action data object is a PageHeaderJsActionProps object.
+ * @param {PageHeaderActionProps} action - The action data object to check.
+ * @returns {boolean} - Whether the action data object is a PageHeaderJsActionProps object.
+ */
+export function isPageHeaderJsAction(
+  action: PageHeaderActionProps,
+): action is PageHeaderJsActionProps {
+  return 'onClick' in action && !!action.onClick;
+}

package/src/components/PageHeader/PageHeaderAction/index.ts

@@ -0,0 +1,2 @@
+export * from './PageHeaderAction';
+export * from './PageHeaderAction.model';

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

@@ -2,11 +2,11 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { noop } from '../../../helpers/utils';
+import { PageHeaderAction } from '../PageHeaderAction/PageHeaderAction';
 import {
-  PageHeaderAction,
   PageHeaderActionProps,
   PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction';
+} from '../PageHeaderAction/PageHeaderAction.model';
 import {
   PageHeaderBulkActions,
   PageHeaderBulkActionsProps,