@axinom/mosaic-ui 0.51.0-rc.9 → 0.52.0-rc.0

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

@@ -1,7 +1,7 @@
 import { FormikValues, useFormikContext } from 'formik';
-import React, { useEffect, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
-import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
+import { QuickEditContext } from '../../Explorer';
 import { IconName } from '../../Icons';
 import {
   PageHeader,
@@ -20,6 +20,7 @@ export const FormStationHeader: React.FC<
     defaultTitle?: string;
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
+    showSaveHeaderAction?: boolean;
   }
 > = ({
   titleProperty,
@@ -28,23 +29,10 @@ export const FormStationHeader: React.FC<
   cancelNavigationUrl,
   className,
   setTabTitle,
+  showSaveHeaderAction,
 }) => {
   const { dirty, resetForm } = useFormikContext<FormikValues>();
-
-  useEffect(() => {
-    // Set the save indicator to dirty depending on the form state
-    if (dirty) {
-      setSaveIndicator(SaveIndicatorType.Dirty);
-    } else {
-      setSaveIndicator(SaveIndicatorType.Inactive);
-    }
-    return () => {
-      // The form is not always considered "not dirty" after the save
-      // so this code will make sure that the indicator is set to inactive
-      // when the station is left.
-      setSaveIndicator(SaveIndicatorType.Inactive);
-    };
-  }, [dirty]);
+  const quickEditContext = useContext(QuickEditContext);
 
   const history = useHistory();
 
@@ -63,6 +51,31 @@ export const FormStationHeader: React.FC<
           resetForm();
         },
       });
+
+      if (showSaveHeaderAction) {
+        actionItems.push({
+          label: 'Save',
+          icon: IconName.Save,
+          kind: 'action',
+          actionType: PageHeaderActionType.Context,
+          onClick: () => {
+            if (quickEditContext?.isQuickEditMode) {
+              quickEditContext.refresh();
+            } else {
+              history.replace(history.location.pathname);
+            }
+          },
+        });
+      }
+    }
+
+    if (quickEditContext?.detailsLink !== undefined) {
+      actionItems.push({
+        label: 'Open',
+        icon: IconName.ChevronRight,
+        kind: 'action',
+        path: quickEditContext.detailsLink,
+      });
     }
 
     if (cancelNavigationUrl) {
@@ -79,7 +92,14 @@ export const FormStationHeader: React.FC<
     }
 
     return actionItems;
-  }, [cancelNavigationUrl, dirty, history, resetForm]);
+  }, [
+    cancelNavigationUrl,
+    dirty,
+    history,
+    quickEditContext,
+    resetForm,
+    showSaveHeaderAction,
+  ]);
 
   return (
     <PageHeader

package/src/components/FormStation/SaveOnDemand/SaveOnDemand.tsx

@@ -0,0 +1,55 @@
+import { useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+
+interface SaveOnDemandProps {
+  /** If set to true, will prevent form submission when navigating away. (default: false) */
+  isSubmitting?: boolean;
+  /** Callback that will be called when the form is invalid */
+  onFormInvalid?: () => void;
+
+  registerSaveCallback?: (callback: () => Promise<void>) => void;
+}
+
+export const SaveOnDemand: React.FC<SaveOnDemandProps> = ({
+  onFormInvalid,
+  isSubmitting,
+  registerSaveCallback,
+}) => {
+  const { submitForm, dirty, isValid } = useFormikContext();
+  const [canSubmit, setCanSubmit] = useState<boolean>(true);
+
+  useEffect(() => {
+    const saveCallback = async (): Promise<void> => {
+      if (!dirty) {
+        return;
+      }
+
+      if (!isValid) {
+        onFormInvalid?.();
+        throw new Error('Form is not valid');
+      }
+
+      try {
+        if (!isSubmitting && canSubmit) {
+          setCanSubmit(false);
+          await submitForm();
+        }
+      } catch (error) {
+        setCanSubmit(true);
+        throw error;
+      }
+    };
+
+    registerSaveCallback?.(saveCallback);
+  }, [
+    canSubmit,
+    dirty,
+    isSubmitting,
+    isValid,
+    onFormInvalid,
+    registerSaveCallback,
+    submitForm,
+  ]);
+
+  return null;
+};

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -7,11 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import {
-  SaveIndicatorType,
-  setSaveIndicator,
-  showNotification,
-} from '../../../initialize';
+import { showNotification } from '../../../initialize';
 import { Data } from '../../../types';
 import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
 import { ErrorType } from '../../models';
@@ -88,7 +84,6 @@ export const useDataProvider: FormStationDataProvider = <
 
       try {
         setIsFormSubmitting(true);
-        setSaveIndicator(SaveIndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -112,8 +107,6 @@ export const useDataProvider: FormStationDataProvider = <
           ),
         );
 
-        setSaveIndicator(SaveIndicatorType.Dirty);
-
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
         throw error;

package/src/components/Icons/Icons.models.ts

@@ -22,6 +22,7 @@ export enum IconName {
   Error,
   External,
   File,
+  Filters,
   ForwardOne,
   ForwardTen,
   Info,
@@ -34,9 +35,12 @@ export enum IconName {
   Play,
   Plus,
   Publish,
+  QuickEdit,
+  QuickEditStation,
   RemoveFilter,
   Retry,
   Replace,
+  Save,
   Snapshot,
   Stop,
   Success,

package/src/components/Icons/Icons.tsx

@@ -331,6 +331,22 @@ const FileIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const FiltersIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M5.7,4.7h28.6l-11.3,12v13.6l-6.5,5.1v-18.4L5.7,4.7Z"
+    />
+  </svg>
+);
+
 const ForwardOne: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -528,6 +544,40 @@ const PublishIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const QuickEditIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M11.8,29.7l-8.8,2.6,2.6-8.8,15.8-15.8,6.2,6.2-15.8,15.8h0ZM27.5,19.7h10.5M22.7,24.3h8.4M18,29h6.2M5.6,23.5l6.2,6.2"
+    />
+  </svg>
+);
+
+const QuickEditStationIcon: React.FC<{ className?: string }> = ({
+  className,
+}) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M7.5,4.5h25v31H7.5V4.5ZM17.82,13.14h8.87M12.98,13.14h3.07M12.98,17.71h3.07M12.98,22.29h3.07M12.98,26.86h3.07M17.82,17.71h8.87M17.82,26.86h8.87M17.82,22.29h4.84"
+    />
+  </svg>
+);
+
 const RemoveFilterIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -581,6 +631,30 @@ const RetryIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const SaveIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M15.8,30.1c0,0-6.2,0.1-7.6-0.1c-3.3-0.4-5.8-3.3-5.6-6.7c-0.2-6,6.9-6.6,6.9-6.6
+s-0.7-6.4,5-7.5c3.2-0.8,6.5,0.8,7.8,3.8c1.5-0.6,3.2-0.6,4.7,0.2c1.3,0.8,2.2,2.1,2.4,3.6c0,0,8-0.5,8.1,6.6c0,7.1-6.7,6.7-6.7,6.7
+h-6.5"
+    />
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M20.1,33V19.4 M15.7,23.8l4.3-4.3l4.3,4.3"
+    />
+  </svg>
+);
+
 const SnapshotIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -768,6 +842,7 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.Error]: <ErrorIcon className={className} />,
     [IconName.External]: <ExternalIcon className={className} />,
     [IconName.File]: <FileIcon className={className} />,
+    [IconName.Filters]: <FiltersIcon className={className} />,
     [IconName.ForwardOne]: <ForwardOne className={className} />,
     [IconName.ForwardTen]: <ForwardTen className={className} />,
     [IconName.Info]: <InfoIcon className={className} />,
@@ -780,9 +855,12 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.Play]: <PlayIcon className={className} />,
     [IconName.Plus]: <PlusIcon className={className} />,
     [IconName.Publish]: <PublishIcon className={className} />,
+    [IconName.QuickEdit]: <QuickEditIcon className={className} />,
+    [IconName.QuickEditStation]: <QuickEditStationIcon className={className} />,
     [IconName.RemoveFilter]: <RemoveFilterIcon className={className} />,
     [IconName.Replace]: <ReplaceIcon className={className} />,
     [IconName.Retry]: <RetryIcon className={className} />,
+    [IconName.Save]: <SaveIcon className={className} />,
     [IconName.Snapshot]: <SnapshotIcon className={className} />,
     [IconName.Stop]: <StopIcon className={className} />,
     [IconName.Success]: <SuccessIcon className={className} />,

package/src/components/InlineMenu/InlineMenu.spec.tsx

@@ -1,10 +1,28 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { noop } from '../../helpers/utils';
+import { initializeUi } from '../../initialize';
 import { Button } from '../Buttons';
 import { InlineMenu } from './InlineMenu';
 
 describe('InlineMenu', () => {
+  beforeEach(() => {
+    initializeUi({
+      showNotification: () => {
+        // not implemented
+        return -1;
+      },
+      addIndicator: () => {
+        return -1;
+      },
+      removeIndicator: noop,
+      on: noop,
+      setTitle: noop,
+      setSaveIndicator: noop,
+    });
+  });
+
   it('renders the component without crashing', () => {
     const wrapper = shallow(<InlineMenu />);
 

package/src/components/List/List.model.ts

@@ -112,4 +112,9 @@ export interface ListElement {
    * Resets the selection of the list.
    */
   resetSelection: () => void;
+
+  /**
+   * Selects an index in the list.
+   */
+  selectIndex: (index: number) => void;
 }

package/src/components/List/List.tsx

@@ -97,7 +97,7 @@ export interface ListProps<T extends Data> {
    *
    * This is not being used, if generateItemLink is set!
    */
-  onItemClicked?: (data: T) => void;
+  onItemClicked?: (data: T) => void | Promise<void>;
   /** Raised when item selection has changed */
   onItemSelected?: (itemSelectEvent: ItemSelectEventArgs<T>) => void;
   /** Raised when list has scrolled down to the item indicated by loadingTriggerOffset */
@@ -235,6 +235,23 @@ const ListRenderer = <T extends Data>(
     }
   };
 
+  const itemClickedHandler = async (data: T, index: number): Promise<void> => {
+    try {
+      await onItemClicked(data);
+
+      if (selectionMode === ListSelectMode.Single) {
+        setListItems((prevState) =>
+          prevState.map((item, i) => ({
+            selected: i === index,
+            data: item.data,
+          })),
+        );
+      }
+    } catch (error) {
+      return;
+    }
+  };
+
   const { sort, sortChangedHandler } = useSort(defaultSortOrder, onSortChanged);
 
   useImperativeHandle(ref, () => ({
@@ -253,6 +270,13 @@ const ListRenderer = <T extends Data>(
         items: [],
       });
     },
+    selectIndex: (index: number) => {
+      if (selectionMode === ListSelectMode.Single) {
+        itemClickedHandler(listItems[index].data, index);
+      } else {
+        itemSelectedHandler(true, index);
+      }
+    },
   }));
 
   return (
@@ -312,12 +336,12 @@ const ListRenderer = <T extends Data>(
           showCheckMark={selectionMode === ListSelectMode.Single}
           showItemCheckbox={selectionMode === ListSelectMode.Multi}
           onItemClicked={
-            generateItemLink ? generateItemLink(item.data) : onItemClicked
+            generateItemLink
+              ? generateItemLink(item.data)
+              : (data) => itemClickedHandler(data, index)
           }
           onTriggered={onTriggeredHandler}
-          onItemSelected={(checked) => {
-            itemSelectedHandler(checked, index);
-          }}
+          onItemSelected={(checked) => itemSelectedHandler(checked, index)}
           inlineMenuActions={inlineMenuActions}
         />
       ))}

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -338,16 +338,6 @@ describe('ListRow', () => {
       expect(row.hasClass('selected')).toBe(false);
     });
 
-    it(`does not have the 'selected' class if showItemCheckbox prop is false`, () => {
-      const wrapper = mount(
-        <ListRow {...mockProps} itemSelected={true} showItemCheckbox={false} />,
-      );
-
-      const row = wrapper.find('.columnsRoot');
-
-      expect(row.hasClass('selected')).toBe(false);
-    });
-
     it(`only has the 'selected' class if both itemSelect and showItemCheckbox props are true`, () => {
       const wrapper = mount(
         <ListRow {...mockProps} itemSelected={true} showItemCheckbox={true} />,

package/src/components/List/ListRow/ListRow.tsx

@@ -278,7 +278,7 @@ export const ListRow = <T extends Data>({
   const Row = (
     <div
       className={clsx(classes.columnsRoot, {
-        [classes.selected]: itemSelected && showItemCheckbox,
+        [classes.selected]: itemSelected,
         [classes.disabled]: isRowDisabled,
       })}
       style={customRootStyles}

package/src/components/PageHeader/PageHeader.scss

@@ -9,7 +9,7 @@
   grid-template-rows: 1fr;
 
   @media only screen and (min-width: $XL-min-size) {
-    grid-template-columns: minmax(480px, 1fr) max-content max-content;
+    grid-template-columns: minmax(25%, 1fr) max-content max-content;
   }
 
   color: var(--page-header-color, $page-header-color);
@@ -53,7 +53,6 @@
   .actions {
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: minmax(0, min-content);
     grid-gap: 1px;
   }
 

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

@@ -148,14 +148,18 @@ export const All: StoryObj<typeof PageHeader> = {
         icon: IconName.Bulk,
         kind: 'group',
         actions: bulkHeaderActions,
-        onActionsGroupToggled: action('onBulkActions1Toggled'),
+        onActionsGroupToggled: async (): Promise<void> => {
+          action('onBulkActions1Toggled');
+        },
       },
       {
         label: 'Bulk Actions 2',
         icon: IconName.Bulk,
         kind: 'group',
         actions: [bulkHeaderActions[0]],
-        onActionsGroupToggled: action('onBulkActions2Toggled'),
+        onActionsGroupToggled: async (): Promise<void> => {
+          action('onBulkActions2Toggled');
+        },
       },
     ],
   },

package/src/components/PageHeader/PageHeader.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
-import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
 import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
 import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 import { PageHeaderActionsGroupContextProvider } from './PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider';
+import { useElementWidthObserver } from './helpers/useElementWidthObserver';
 
 /**
  * Primary header for stations. Accepts a title, subtitle, actions, and actions groups.
@@ -29,29 +29,23 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   setTabTitle = true,
 }) => {
   useTabTitle(title, setTabTitle);
-  const { width } = useWindowSize();
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const { width, ref } = useElementWidthObserver<HTMLDivElement>();
 
-  const [availableActionSpace, setAvailableActionSpace] =
-    React.useState<number>(0);
+  const [availableActionSpace, setAvailableActionSpace] = useState<number>(0);
 
-  React.useEffect(() => {
-    if (containerRef.current) {
-      // Use up to 75% of the container width for actions
-      const maxActionsWidth = containerRef.current.clientWidth * 0.75;
+  useEffect(() => {
+    // Use up to 75% of the container width for actions
+    const maxActionsWidth = width * 0.75;
 
-      // Each action is 120px wide
-      setAvailableActionSpace(
-        Math.floor(maxActionsWidth / 120 - actions.length),
-      );
-    }
+    // Each action is 120px wide
+    setAvailableActionSpace(Math.floor(maxActionsWidth / 120 - actions.length));
   }, [width, actions.length]);
 
   return (
     <div
       className={clsx(classes.container, 'page-header-container', className)}
       data-test-id="page-header"
-      ref={containerRef}
+      ref={ref}
     >
       <div className={clsx(classes.titles)}>
         <div className={clsx(classes.title)} data-test-id="page-header-title">

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

@@ -5,6 +5,7 @@ import { ConfirmAction, DefaultHandler, LinkAction } from '../../models';
 export enum PageHeaderActionType {
   Active,
   Context,
+  Hightlight,
 }
 
 export type PageHeaderActionProps =

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -88,6 +88,13 @@
     }
   }
 
+  &.highlight {
+    background-color: var(
+      --page-header-action-context-hover-background-color,
+      $page-header-action-context-hover-background-color
+    );
+  }
+
   &.active {
     color: var(
       --page-header-action-context-background-color,

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

@@ -119,6 +119,7 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
           {
             [classes.context]: actionType === PageHeaderActionType.Context,
             [classes.active]: actionType === PageHeaderActionType.Active,
+            [classes.highlight]: actionType === PageHeaderActionType.Hightlight,
             [classes.hasConfirm]: confirmation,
           },
           'page-header-action-container',

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

@@ -1,5 +1,6 @@
 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 {
@@ -45,16 +46,18 @@ describe('PageHeaderActionsGroup', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, () => {
+  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, async () => {
     const wrapper = mount(<PageHeaderActionsGroup {...defaultProps} />);
     let groupActionsToggle = wrapper.find(PageHeaderAction).first();
-    // let action = wrapper.find(PageHeaderAction);
 
     expect(groupActionsToggle.prop('actionType')).toBe(
       PageHeaderActionType.Context,
     );
 
-    groupActionsToggle.simulate('click');
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
 
     groupActionsToggle = wrapper.find(PageHeaderAction).first();
 
@@ -63,19 +66,23 @@ describe('PageHeaderActionsGroup', () => {
     );
   });
 
-  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, () => {
+  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, async () => {
     const wrapper = mount(
       <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
     );
     const groupActionsToggle = wrapper.find(PageHeaderAction).first();
     let actions = wrapper.find(PageHeaderAction);
 
-    groupActionsToggle.simulate('click');
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
+
     actions = wrapper.find(PageHeaderAction);
     expect(actions).toHaveLength(5);
   });
 
-  it(`raises onActionsGroupToggled`, () => {
+  it(`raises onActionsGroupToggled`, async () => {
     const groupActionSpy = jest.fn();
     const wrapper = mount(
       <PageHeaderActionsGroup
@@ -84,7 +91,12 @@ describe('PageHeaderActionsGroup', () => {
       />,
     );
     const groupActionsToggle = wrapper.find(PageHeaderAction).first();
-    groupActionsToggle.simulate('click');
+
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
+
     expect(groupActionSpy).toHaveBeenCalledTimes(1);
     expect(groupActionSpy).toHaveBeenCalledWith(true);
   });