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

package/src/components/Explorer/helpers/useActions.ts

@@ -0,0 +1,203 @@
+import { useMemo } from 'react';
+import { showNotification } from '../../../initialize';
+import { Data } from '../../../types';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { IconName } from '../../Icons';
+import { ItemSelectEventArgs } from '../../List';
+import { PageHeaderActionItemProps } from '../../PageHeader';
+import {
+  PageHeaderActionProps,
+  PageHeaderActionType,
+  PageHeaderJsActionProps,
+  isPageHeaderNavigationAction,
+} from '../../PageHeader/PageHeaderAction';
+import { ErrorType } from '../../models';
+import { ExplorerBulkAction, ItemSelection } from '../Explorer.model';
+import { ResultCounts } from './useDataProvider';
+import { StationMessage } from './useStationMessage';
+
+interface UseActionsProps<T extends Data> {
+  actions?: PageHeaderActionProps[];
+  bulkActions?: ExplorerBulkAction<T>[];
+  quickEditAction?: PageHeaderActionItemProps;
+  openBulkActionsOnStart: boolean | undefined;
+  filtersVisible: boolean;
+  hasFilters: boolean;
+  resultCount: ResultCounts;
+  activeFilterCount: number;
+  itemSelection: ItemSelectEventArgs<T>;
+  getBulkActionSelection: () => ItemSelection<T>;
+  onReloadData: () => void;
+  setStationMessage: (
+    value: React.SetStateAction<StationMessage | undefined>,
+  ) => void;
+  onBulkActionsToggled: (expanded: boolean) => void;
+  setIsBulkOpen: (value: React.SetStateAction<boolean>) => void;
+  toggleFiltersVisible: () => void;
+}
+
+interface UseActionsReturnType {
+  readonly actions: PageHeaderActionItemProps[];
+}
+
+export const useActions = <T extends Data>({
+  getBulkActionSelection,
+  onReloadData,
+  setStationMessage,
+  actions,
+  itemSelection,
+  onBulkActionsToggled,
+  openBulkActionsOnStart,
+  resultCount,
+  setIsBulkOpen,
+  hasFilters,
+  filtersVisible,
+  activeFilterCount,
+  toggleFiltersVisible,
+  quickEditAction,
+  bulkActions,
+}: UseActionsProps<T>): UseActionsReturnType => {
+  const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
+    () =>
+      (bulkActions ?? []).map((action) => ({
+        ...action,
+        onClick: async () => {
+          if (action.showStartedNotification !== false) {
+            showNotification({
+              title: `Bulk Action '${action.label}' Started`,
+            });
+          }
+
+          try {
+            const result = await action.onClick(getBulkActionSelection());
+            if (result) {
+              const message = errMsg(result);
+              showNotification({
+                title:
+                  typeof message.title === 'string'
+                    ? message.title
+                    : 'An error occurred',
+                body: message.body,
+                options: {
+                  type: 'error',
+                },
+              });
+            } else {
+              if (action.reloadData) {
+                onReloadData();
+              }
+            }
+          } catch (error) {
+            setStationMessage(
+              errMsg(
+                error,
+                'An error occurred when trying to execute the bulk operation.',
+              ),
+            );
+          }
+        },
+      })),
+    [bulkActions, getBulkActionSelection, onReloadData, setStationMessage],
+  );
+
+  const pageHeaderActions: PageHeaderActionItemProps[] = useMemo(() => {
+    const headerActions: PageHeaderActionItemProps[] = [];
+
+    if (hasFilters) {
+      headerActions.push({
+        label:
+          activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters',
+        icon: IconName.Filters,
+        kind: 'action',
+        actionType: filtersVisible
+          ? PageHeaderActionType.Active
+          : PageHeaderActionType.Context,
+        onClick: async () => {
+          toggleFiltersVisible();
+        },
+      });
+
+      headerActions.push({ kind: 'spacer' });
+    }
+
+    if (bulkActions && bulkActions.length > 0) {
+      headerActions.push({
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkActionItems,
+        openActionsGroupOnStart: openBulkActionsOnStart,
+        onActionsGroupToggled: async (isOpen) => {
+          setIsBulkOpen(isOpen);
+          onBulkActionsToggled(isOpen);
+        },
+        groupActionsDisabled:
+          itemSelection.items?.length === 0 || resultCount?.filtered === 0,
+      });
+      headerActions.push({ kind: 'spacer' });
+    }
+
+    if (quickEditAction) {
+      headerActions.push(quickEditAction);
+    }
+
+    if (actions && actions.length > 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,
+                        'An error occurred when trying to execute the operation.',
+                      ),
+                    );
+                  }
+                },
+              }),
+          kind: 'action',
+        });
+      });
+    }
+
+    return headerActions;
+  }, [
+    actions,
+    activeFilterCount,
+    bulkActionItems,
+    bulkActions,
+    filtersVisible,
+    hasFilters,
+    itemSelection.items?.length,
+    onBulkActionsToggled,
+    openBulkActionsOnStart,
+    quickEditAction,
+    resultCount?.filtered,
+    setIsBulkOpen,
+    setStationMessage,
+    toggleFiltersVisible,
+  ]);
+
+  return {
+    actions: pageHeaderActions,
+  };
+};
+
+const errMsg = (err: unknown | ErrorType, msg?: string): StationMessage => {
+  return {
+    ...ErrorTypeToStationError(err as ErrorType, msg),
+    canClose: true,
+    type: 'error',
+  };
+};

package/src/components/Explorer/{useDataProvider.tsx → helpers/useDataProvider.tsx}

@@ -7,19 +7,20 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useUpdatingRef } from '../../hooks/useUpdatingRef/useUpdatingRef';
-import { Data } from '../../types/data';
-import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
-import { FilterValues } from '../Filters/Filters.model';
-import { SortData } from '../List/List.model';
-import { ErrorType } from '../models';
+import { useUpdatingRef } from '../../../hooks/useUpdatingRef/useUpdatingRef';
+import { Data } from '../../../types/data';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { FilterValues } from '../../Filters/Filters.model';
+import { SortData } from '../../List/List.model';
+import { ErrorType } from '../../models';
 import {
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
-} from './Explorer.model';
+} from '../Explorer.model';
 import { StationMessage } from './useStationMessage';
 
 interface DataProviderReturnType<T> {
+  readonly data: T[];
   readonly isLoading: boolean;
   readonly resultCount: ResultCounts;
   readonly hasMoreData: boolean;
@@ -27,7 +28,6 @@ interface DataProviderReturnType<T> {
   readonly onSortChanged: (sort: SortData<T>) => void;
   readonly onFiltersChange: (filters: FilterValues<T>) => void;
   readonly onRequestMoreData: () => void;
-  readonly data: T[];
 }
 
 export interface ResultCounts {
@@ -38,12 +38,12 @@ export interface ResultCounts {
 interface DataProviderArgumentType<T extends Data> {
   dataProvider: ExplorerDataProvider<T>;
   explorerRef: React.ForwardedRef<ExplorerDataProviderConnection<T>>;
-  setStationMessage: React.Dispatch<
-    React.SetStateAction<StationMessage | undefined>
-  >;
   defaultSortOrder?: SortData<T>;
   filters?: FilterValues<T>;
   keyProperty?: keyof T;
+  setStationMessage: React.Dispatch<
+    React.SetStateAction<StationMessage | undefined>
+  >;
 }
 
 export function useDataProvider<T extends Data>({

package/src/components/Explorer/helpers/useFilters.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { useExpand } from '../../../hooks';
+import { Data } from '../../../types';
+import { FilterType, FilterValues } from '../../Filters';
+import { Filters } from '../../Filters/Filters';
+import { getState, storeState } from '../../Utils/State/GlobalState';
+import { ExplorerStateOptions } from '../Explorer.model';
+
+interface UseFiltersProps<T extends Data> {
+  stationKey: string;
+  globalStateOptions: ExplorerStateOptions;
+  filterOptions?: FilterType<T>[];
+  defaultFilterValues?: FilterValues<T>;
+  onFiltersChange: (filters: FilterValues<T>) => void;
+}
+
+interface UseFiltersReturnType<T extends Data> {
+  readonly Filters: JSX.Element;
+  readonly activeFilters: FilterValues<T>;
+  readonly filtersVisible: boolean;
+  readonly toggleFiltersVisible: () => void;
+  readonly collapseFilters: () => void;
+}
+
+export const useFilters = <T extends Data>({
+  stationKey,
+  globalStateOptions,
+  filterOptions,
+  defaultFilterValues,
+  onFiltersChange,
+}: UseFiltersProps<T>): UseFiltersReturnType<T> => {
+  const { isExpanded, toggleExpanded, collapse } = useExpand(true);
+  const [activeFilters, setActiveFilters] = useState<FilterValues<T>>(
+    getState<FilterValues<T>>(stationKey, 'filters') ??
+      defaultFilterValues ??
+      {},
+  );
+
+  useEffect(() => {
+    if (
+      globalStateOptions.filters &&
+      activeFilters !== defaultFilterValues &&
+      Object.keys(activeFilters).length > 0
+    ) {
+      storeState(stationKey, 'filters', activeFilters);
+    } else {
+      storeState(stationKey, 'filters', undefined);
+    }
+  }, [
+    activeFilters,
+    defaultFilterValues,
+    globalStateOptions.filters,
+    stationKey,
+  ]);
+
+  const FilterComponent = (
+    <>
+      {isExpanded && (
+        <Filters<T>
+          options={filterOptions}
+          defaultValues={activeFilters}
+          onFiltersChange={(args) => {
+            onFiltersChange(args);
+            setActiveFilters(args);
+          }}
+        />
+      )}
+    </>
+  );
+  return {
+    Filters: FilterComponent,
+    activeFilters,
+    filtersVisible: isExpanded,
+    toggleFiltersVisible: toggleExpanded,
+    collapseFilters: collapse,
+  };
+};

package/src/components/Explorer/{useStationMessage.tsx → helpers/useStationMessage.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { MessageBar, MessageBarProps } from '../MessageBar/MessageBar';
+import { MessageBar, MessageBarProps } from '../../MessageBar/MessageBar';
 
 export interface StationMessage {
   type: MessageBarProps['type'];
@@ -9,13 +9,15 @@ export interface StationMessage {
   onRetry?: MessageBarProps['onRetry'];
 }
 
-export const useStationMessage = (): {
-  stationMessage: StationMessage | undefined;
-  setStationMessage: React.Dispatch<
+interface UseStationMessageReturnType {
+  readonly StationMessage: JSX.Element;
+  readonly stationMessage: StationMessage | undefined;
+  readonly setStationMessage: React.Dispatch<
     React.SetStateAction<StationMessage | undefined>
   >;
-  StationMessage: JSX.Element;
-} => {
+}
+
+export const useStationMessage = (): UseStationMessageReturnType => {
   const [stationMessage, setStationMessage] = useState<StationMessage>();
 
   const StationMessage = (

package/src/components/Explorer/index.ts

@@ -6,17 +6,21 @@ export {
   ItemSelection,
   PageIdentifier,
 } from './Explorer.model';
-export {
-  createInMemoryDataProvider,
-  findAnywhereInString,
-  findAnywhereInStringCaseInsensitive,
-  findExact,
-} from './InMemoryDataProvider';
 export {
   NavigationExplorer,
   NavigationExplorerProps,
 } from './NavigationExplorer/NavigationExplorer';
+export {
+  QuickEditContext,
+  QuickEditContextType,
+} from './QuickEdit/QuickEditContext';
 export {
   SelectionExplorer,
   SelectionExplorerProps,
 } from './SelectionExplorer/SelectionExplorer';
+export {
+  createInMemoryDataProvider,
+  findAnywhereInString,
+  findAnywhereInStringCaseInsensitive,
+  findExact,
+} from './helpers/InMemoryDataProvider';

package/src/components/FormStation/Create/Create.tsx

@@ -76,6 +76,7 @@ export const Create = <TValues extends Data, TSubmitResponse = unknown>(
         },
       ]}
       alwaysSubmitBeforeAction={true}
+      showSaveHeaderAction={false}
     ></FormStation>
   );
 };

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
-import { SaveIndicatorType, setSaveIndicator } from '../../initialize';
+import { initializeUi } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -31,7 +31,7 @@ const defaultProps = {
 };
 
 // Temporarily disable console.log() from FormStation until proper error handling
-jest.spyOn(console, 'log').mockImplementation(() => null);
+// jest.spyOn(console, 'log').mockImplementation(() => null);
 jest.spyOn(console, 'error').mockImplementation(() => null);
 
 const MakeDirty: React.FC = () => {
@@ -45,8 +45,28 @@ const MakeDirty: React.FC = () => {
 };
 
 describe('Details', () => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
   beforeEach(() => {
     jest.clearAllMocks();
+
+    initializeUi({
+      showNotification: () => {
+        // not implemented
+        return -1;
+      },
+      addIndicator: () => {
+        return -1;
+      },
+      removeIndicator: noop,
+      on: () => noop,
+      setTitle: noop,
+      setSaveIndicator: noop,
+    });
   });
 
   it('renders the component without crashing', () => {
@@ -260,7 +280,7 @@ describe('Details', () => {
       expect(header.prop('title')).toBe('default');
     });
 
-    describe('Reset and cancel operations', () => {
+    describe('Reset Save and Cancel operations', () => {
       const ChangeValue: React.FC = () => {
         const context = useFormikContext();
         useEffect(() => {
@@ -298,13 +318,49 @@ describe('Details', () => {
         });
 
         const headerActions = wrapper.find(PageHeaderAction);
-        expect(headerActions).toHaveLength(1);
+        expect(headerActions).toHaveLength(2);
 
         headerActions.at(0).simulate('click');
 
         expect(value).toBe('initial');
       });
 
+      it('allows saving of a dirty form', async () => {
+        let path: string;
+
+        const wrapper = mount(
+          <MemoryRouter>
+            <FormStation
+              {...defaultProps}
+              initialData={{ loading: false, data: { something: 'initial' } }}
+            >
+              <ChangeValue />
+            </FormStation>
+            <Route
+              path="*"
+              render={({ location }) => {
+                path = location.pathname;
+                return null;
+              }}
+            />
+          </MemoryRouter>,
+        );
+        await act(async () => {
+          wrapper.update();
+        });
+
+        const headerActions = wrapper.find(PageHeaderAction);
+        expect(headerActions).toHaveLength(2);
+
+        headerActions.at(1).simulate('click');
+
+        await act(async () => {
+          wrapper.update();
+        });
+
+        expect(path!).toBe('/');
+      });
+
       it('allows cancellation if wanted', async () => {
         let path: string;
 
@@ -336,9 +392,9 @@ describe('Details', () => {
         });
 
         const headerActions = wrapper.find(PageHeaderAction);
-        expect(headerActions).toHaveLength(2);
+        expect(headerActions).toHaveLength(3);
 
-        headerActions.at(1).simulate('click');
+        headerActions.at(2).simulate('click');
 
         await act(async () => {
           wrapper.update();
@@ -652,72 +708,5 @@ describe('Details', () => {
       isDisabled = action.prop('action').isDisabled;
       expect(isDisabled).toBe(false);
     });
-
-    it('sets the global busy state when submitting', async () => {
-      jest.useFakeTimers();
-      const spy = jest.fn();
-      const sampleActions = mockActions(spy);
-      const onSubmit = (): Promise<{ id: number }> =>
-        new Promise((resolve) =>
-          setTimeout(() => {
-            resolve({ id: 3 });
-          }, 1000),
-        );
-
-      const wrapper = mount(
-        <MemoryRouter>
-          <FormStation
-            {...defaultProps}
-            actions={sampleActions}
-            saveData={onSubmit}
-            initialData={{ loading: false, data: {} }}
-          >
-            <MakeDirty />
-          </FormStation>
-        </MemoryRouter>,
-      );
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(
-        1,
-        SaveIndicatorType.Inactive,
-      ); // 1. inactive
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(
-        3,
-        SaveIndicatorType.Dirty,
-      ); // 3. dirty
-
-      // submit form
-      const actionSelected = wrapper
-        .find(Action)
-        .prop('action').onActionSelected;
-
-      await act(async () => {
-        actionSelected && actionSelected();
-      });
-
-      // place form into 'submitting' state
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-      });
-
-      wrapper.update();
-
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(
-        4,
-        SaveIndicatorType.Saving,
-      );
-
-      // complete form submission
-      await act(async () => {
-        jest.runAllTimers();
-      });
-      wrapper.update();
-
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(
-        5,
-        SaveIndicatorType.Inactive,
-      );
-
-      console.warn((setSaveIndicator as jest.Mock).mock.calls);
-    });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import { Formik, FormikValues } from 'formik';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { Data } from '../../types/data';
+import { QuickEditContext } from '../Explorer/QuickEdit/QuickEditContext';
 import { StationMessage } from '../models';
 import {
   FormActionData,
@@ -14,6 +15,7 @@ import classes from './FormStation.scss';
 import { FormStationAction } from './FormStationActions';
 import { FormStationContentWrapper } from './FormStationContentWrapper';
 import { FormStationHeader } from './FormStationHeader';
+import { SaveOnDemand } from './SaveOnDemand/SaveOnDemand';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 import { useDataProvider } from './helpers/useDataProvider';
 import { useValidationError } from './helpers/useValidationError';
@@ -30,10 +32,12 @@ export interface FormStationProps<
   subtitle?: string;
   /** If set to true, the actions panel is shown, even if no actions are defined. */
   alwaysShowActionsPanel?: boolean;
-  // /** An array of the actions that should be executable on the page */
+  /** An array of the actions that should be executable on the page */
   actions?: FormActionData<TValues, TSubmitResponse>[];
   /** The width of the Actions container (as CSS width) */
   actionsWidth?: string;
+  /** If set to true, the save header action is shown. (default: true) */
+  showSaveHeaderAction?: boolean;
   /**
    * An object containing the initial data of the form.
    */
@@ -85,9 +89,12 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   stationMessage,
   className = '',
   setTabTitle = true,
+  showSaveHeaderAction = true,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
+  const quickEditContext = useContext(QuickEditContext);
+
   const {
     onSubmit,
     stationError,
@@ -127,33 +134,42 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             cancelNavigationUrl={cancelNavigationUrl}
             className={classes.header}
             setTabTitle={setTabTitle}
+            showSaveHeaderAction={showSaveHeaderAction}
           />
           <SaveOnNavigate
             isSubmitting={isFormSubmitting}
             onNavigationCancelled={setValidationError}
           />
+          {quickEditContext && (
+            <SaveOnDemand
+              isSubmitting={isFormSubmitting}
+              onFormInvalid={setValidationError}
+              registerSaveCallback={quickEditContext.registerSaveCallback}
+            />
+          )}
           <FormStationContentWrapper
             stationMessage={stationMessage}
             edgeToEdgeContent={edgeToEdgeContent}
-            infoPanel={infoPanel}
+            infoPanel={!quickEditContext ? infoPanel : undefined}
             initialData={initialData}
             stationError={stationError}
             setStationError={setStationError}
           >
             {children}
           </FormStationContentWrapper>
-          {(alwaysShowActionsPanel || (actions?.length ?? 0) > 0) && (
-            <FormStationAction<TValues, TSubmitResponse>
-              actions={actions}
-              width={actionsWidth}
-              validationSchema={validationSchema}
-              setStationError={setStationError}
-              setValidationError={setValidationError}
-              submitResponse={lastSubmittedResponse}
-              alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
-              className={classes.actionsPanel}
-            />
-          )}
+          {(alwaysShowActionsPanel || (actions?.length ?? 0) > 0) &&
+            !quickEditContext && (
+              <FormStationAction<TValues, TSubmitResponse>
+                actions={actions}
+                width={actionsWidth}
+                validationSchema={validationSchema}
+                setStationError={setStationError}
+                setValidationError={setValidationError}
+                submitResponse={lastSubmittedResponse}
+                alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
+                className={classes.actionsPanel}
+              />
+            )}
         </>
       </Formik>
     </div>