@axinom/mosaic-ui 0.32.0-rc.1 → 0.32.0-rc.11

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,48 +1,22 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
-import { ErrorType } from '../../models';
+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> = ({
+export const PageHeaderAction: React.FC<PageHeaderActionProps> = (props) =>
+  isPageHeaderNavigationAction(props) ? (
+    <PageHeaderNavigationAction {...props} />
+  ) : (
+    <PageHeaderJSAction {...props} />
+  );
+
+/**
+ * Page header action with JS handler and optional confirmation mode
+ */
+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,65 @@ export const PageHeaderAction: React.FC<PageHeaderActionProps> = ({
     </>
   );
 };
+
+/**
+ * Page header action rendered as anchor tag
+ */
+const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
+  className,
+  disabled,
+  icon,
+  imgAlt,
+  label,
+  openInNewTab = false,
+  path,
+}) => {
+  const headerIcon = icon ? icon : openInNewTab ? IconName.External : undefined;
+
+  return (
+    <Link
+      className={clsx(
+        classes.container,
+        'page-header-action-container',
+        { [classes.disabled]: disabled },
+        className,
+      )}
+      data-test-id="action"
+      to={path}
+      target={openInNewTab ? '_blank' : undefined}
+    >
+      <div className={classes.icon}>
+        {typeof headerIcon === 'string' ? (
+          <img src={headerIcon} alt={imgAlt} />
+        ) : (
+          <Icons icon={headerIcon} 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,

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

@@ -4,12 +4,15 @@ import { noop } from '../../../helpers/utils';
 import { useExpand } from '../../../hooks/useExpand/useExpand';
 import { ConfirmationMode } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
-import { PageHeaderProps } from '../PageHeader';
+import { PageHeaderProps } from '../PageHeader.model';
 import {
   PageHeaderAction,
+  isPageHeaderJsAction,
+} from '../PageHeaderAction/PageHeaderAction';
+import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction';
+} from '../PageHeaderAction/PageHeaderAction.model';
 import classes from './PageHeaderBulkActions.scss';
 
 export interface PageHeaderBulkActionsProps
@@ -107,23 +110,27 @@ export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
         }}
       />
       {isExpanded &&
-        actions.slice(0, availableActionSpace).map((action, idx) => (
-          <PageHeaderAction
-            key={idx}
-            {...action}
-            disabled={bulkActionsDisabled}
-            confirmationConfig={{
-              ...action.confirmationConfig,
-              onConfirmOpen: (isOpen, args) => {
-                onConfirmToggled(
-                  isOpen,
-                  args as { id: string; mode: ConfirmationMode },
-                );
-                action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-              },
-            }}
-          />
-        ))}
+        actions.slice(0, availableActionSpace).map((action, idx) =>
+          isPageHeaderJsAction(action) ? (
+            <PageHeaderAction
+              key={idx}
+              {...action}
+              disabled={bulkActionsDisabled}
+              confirmationConfig={{
+                ...action.confirmationConfig,
+                onConfirmOpen: (isOpen, args) => {
+                  onConfirmToggled(
+                    isOpen,
+                    args as { id: string; mode: ConfirmationMode },
+                  );
+                  action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
+                },
+              }}
+            />
+          ) : (
+            <PageHeaderAction key={idx} {...action} />
+          ),
+        )}
       {isExpanded && actions.length > availableActionSpace && (
         <div
           className={clsx(classes.hasMore)}
@@ -142,30 +149,36 @@ export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
           />
           {isMoreExpanded && (
             <div className={clsx(classes.dropDownList)}>
-              {actions.slice(availableActionSpace).map((action, idx) => (
-                <PageHeaderAction
-                  key={idx}
-                  {...action}
-                  icon={action.icon}
-                  disabled={bulkActionsDisabled}
-                  onClick={() => {
-                    action.onClick();
-                    moreCollapse();
-                    setIsMouseOverMore(false);
-                  }}
-                  className={clsx(classes.dropDown)}
-                  confirmationConfig={{
-                    ...action.confirmationConfig,
-                    onConfirmOpen: (isOpen, args) => {
-                      onConfirmToggled(
-                        isOpen,
-                        args as { id: string; mode: ConfirmationMode },
-                      );
-                      action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-                    },
-                  }}
-                />
-              ))}
+              {actions.slice(availableActionSpace).map((action, idx) =>
+                isPageHeaderJsAction(action) ? (
+                  <PageHeaderAction
+                    key={idx}
+                    {...action}
+                    disabled={bulkActionsDisabled}
+                    onClick={() => {
+                      action.onClick();
+                      moreCollapse();
+                      setIsMouseOverMore(false);
+                    }}
+                    className={clsx(classes.dropDown)}
+                    confirmationConfig={{
+                      ...action.confirmationConfig,
+                      onConfirmOpen: (isOpen, args) => {
+                        onConfirmToggled(
+                          isOpen,
+                          args as { id: string; mode: ConfirmationMode },
+                        );
+                        action.confirmationConfig?.onConfirmOpen?.(
+                          isOpen,
+                          args,
+                        );
+                      },
+                    }}
+                  />
+                ) : (
+                  <PageHeaderAction key={idx} {...action} />
+                ),
+              )}
             </div>
           )}
         </div>

package/src/components/PageHeader/index.ts

@@ -1,6 +1,7 @@
-export { PageHeader, PageHeaderProps } from './PageHeader';
+export { PageHeader } from './PageHeader';
+export { PageHeaderProps } from './PageHeader.model';
 export {
   PageHeaderAction,
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction/PageHeaderAction';
+} from './PageHeaderAction';

package/src/components/models.ts

@@ -1,4 +1,6 @@
+import { LocationDescriptor } from 'history';
 import React from 'react';
+import { ConfirmationConfig, ConfirmationMode } from './ConfirmDialog';
 import { MessageBarProps } from './MessageBar';
 
 export type StationError = Pick<MessageBarProps, 'title'> & {
@@ -16,8 +18,36 @@ export type StationMessage = MessageBarProps & {
    */
   body?: string | React.ReactNode;
 };
+
 /**
  * Possible error options the engine will handle
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type ErrorType = StationError | string | Object | Error;
+
+/** Properties to generate a link */
+export interface LinkAction {
+  /** Where to navigate to when the action is clicked. */
+  path: LocationDescriptor<unknown>;
+  /** If set to true, the link will open in a new tab. */
+  openInNewTab?: boolean;
+}
+
+/**
+ * Properties for Action click confirmation
+ */
+export 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;
+}
+
+/**
+ * Default Action click event handler
+ */
+export type DefaultHandler = () =>
+  | Promise<ErrorType | undefined | void>
+  | ErrorType
+  | undefined
+  | void;