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

package/src/components/Explorer/Explorer.tsx

@@ -8,14 +8,11 @@ import {
   useState,
 } from 'react';
 import { noop } from '../../helpers/utils';
-import { showNotification } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { isContextAction } from '../Actions/Action/Action';
 import { ActionData } from '../Actions/Actions.models';
-import { Filters } from '../Filters/Filters';
 import { FilterType, FilterValues } from '../Filters/Filters.model';
-import { IconName } from '../Icons/Icons.models';
 import {
   Column,
   ItemSelectEventArgs,
@@ -24,25 +21,24 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
-import {
-  PageHeader,
-  PageHeaderActionItemProps,
-  PageHeaderActionProps,
-} from '../PageHeader';
-import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
-import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
+import { PageHeader, PageHeaderActionProps } from '../PageHeader';
 import { getState, storeState } from '../Utils/State/GlobalState';
 import { ErrorType } from '../models';
+import { ConditionalSplit } from './ConditionalSplit/ConditionalSplit';
 import {
   ExplorerBulkAction,
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
   ExplorerStateOptions,
   ItemSelection,
+  QuickEditRegistration,
 } from './Explorer.model';
 import classes from './Explorer.scss';
-import { ResultCounts, useDataProvider } from './useDataProvider';
-import { StationMessage, useStationMessage } from './useStationMessage';
+import { useQuickEdit } from './QuickEdit/useQuickEdit';
+import { useActions } from './helpers/useActions';
+import { ResultCounts, useDataProvider } from './helpers/useDataProvider';
+import { useFilters } from './helpers/useFilters';
+import { StationMessage, useStationMessage } from './helpers/useStationMessage';
 
 export interface ExplorerProps<T extends Data> {
   /** Title shown in page header */
@@ -136,6 +132,9 @@ export interface ExplorerProps<T extends Data> {
   /** Update the tab title using the 'title' field. (default: true) */
   setTabTitle?: boolean;
 
+  /** Quick Edit Registrations */
+  quickEditRegistrations?: QuickEditRegistration<T>[];
+
   /**
    * When set, this function is used to generate the link that the user should be navigated to for each item.
    *
@@ -211,6 +210,8 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     defaultSortOrder,
     setTabTitle = true,
 
+    quickEditRegistrations,
+
     onItemClicked,
     onBulkActionsToggled = noop,
     generateItemLink,
@@ -227,30 +228,12 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     ...persistExplorerStates,
   };
 
-  const [activeFilters, setActiveFilters] = useState<FilterValues<T>>(
-    getState<FilterValues<T>>(stationKey, 'filters') ??
-      defaultFilterValues ??
-      {},
-  );
-
   const [sortOrder, setSortOrder] = useState<SortData<T>>(
     getState<SortData<T>>(stationKey, 'sort') ?? defaultSortOrder,
   );
 
   const listRef = React.useRef<ListElement>(null);
 
-  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]);
-
   useEffect(() => {
     if (globalStateOptions.sort && sortOrder !== defaultSortOrder) {
       storeState(stationKey, 'sort', sortOrder);
@@ -259,6 +242,25 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     }
   }, [defaultSortOrder, globalStateOptions.sort, sortOrder, stationKey]);
 
+  const onFilterChangedHandler = (filters: FilterValues<T>): void => {
+    onFiltersChange(filters);
+    listRef.current?.resetSelection();
+  };
+
+  const {
+    activeFilters,
+    Filters,
+    filtersVisible,
+    toggleFiltersVisible,
+    collapseFilters,
+  } = useFilters<T>({
+    stationKey,
+    globalStateOptions,
+    filterOptions,
+    defaultFilterValues,
+    onFiltersChange: onFilterChangedHandler,
+  });
+
   const {
     data,
     isLoading,
@@ -277,9 +279,24 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     keyProperty,
   });
 
+  const {
+    isQuickEditMode,
+    quickEditAction,
+    QuickEditContextProvider,
+    quickEditStation,
+    changeSelectedItem,
+  } = useQuickEdit({
+    listRef,
+    registrations: quickEditRegistrations,
+    hasData: data.length > 0,
+    collapseFilters,
+    generateItemLink,
+  });
+
   const { mode, setIsBulkOpen } = useListSelectionMode(
     selectionMode,
     openBulkActionsOnStart,
+    isQuickEditMode,
   );
 
   // TODO: Put into hook?------------------
@@ -323,23 +340,23 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
 
   // Emits selected row data and current ListSelectMode state
   const onItemClickedHandler = useCallback(
-    (item: T): void => {
-      if (onItemClicked !== undefined) {
+    async (item: T) => {
+      if (isQuickEditMode) {
+        await changeSelectedItem(item);
+      } else if (onItemClicked !== undefined) {
         onItemClicked(item, mode);
       }
     },
-    [mode, onItemClicked],
+    [isQuickEditMode, onItemClicked, changeSelectedItem, mode],
   );
 
   const { resultsTitle } = useSubtitle<T>(mode, itemSelection, resultCount);
 
   const errAction = 'An error occurred when trying to execute the operation.';
-  const errBulk =
-    'An error occurred when trying to execute the bulk operation.';
 
-  const inlineMenuActionsHandler = (data: T): ActionData[] => {
-    return (inlineMenuActions?.(data) ?? []).map((action) => {
-      return isContextAction(action)
+  const inlineMenuActionsHandler = (data: T): ActionData[] =>
+    (inlineMenuActions?.(data) ?? []).map((action) =>
+      isContextAction(action)
         ? {
             ...action,
             onActionSelected: async () => {
@@ -353,157 +370,95 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
               }
             },
           }
-        : action;
-    });
-  };
+        : action,
+    );
 
-  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));
-                }
-              },
-            }),
-        kind: 'action',
-      });
-    });
-
-    return headerActions;
-  };
-
-  const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
-    return (bulkActions ?? []).map((action) => {
-      return {
-        ...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, errBulk));
-          }
-        },
-      };
-    });
-  };
+  const { actions: pageHeaderActions } = useActions<T>({
+    actions,
+    bulkActions,
+    quickEditAction,
+    openBulkActionsOnStart,
+    filtersVisible,
+    hasFilters: filterOptions !== undefined,
+    resultCount,
+    activeFilterCount: Object.keys(activeFilters).length,
+    itemSelection,
+    getBulkActionSelection,
+    onReloadData,
+    setStationMessage,
+    onBulkActionsToggled,
+    setIsBulkOpen,
+    toggleFiltersVisible,
+  });
 
   return (
-    <div
-      className={clsx(
-        classes.container,
-        {
-          [classes.hasStationError]: stationMessage,
-          [classes.modalMode]: modalMode,
-        },
-        'explorer-container',
-        className,
-      )}
-    >
-      <PageHeader
-        title={title}
-        subtitle={resultsTitle}
-        actions={pageHeaderActionsHandler()}
-        setTabTitle={setTabTitle}
-      />
-      {StationMessage}
-      <Filters<T>
-        options={filterOptions}
-        defaultValues={activeFilters}
-        onFiltersChange={(args) => {
-          onFiltersChange(args);
-          setActiveFilters(args);
-          listRef.current?.resetSelection();
-        }}
-      />
-      <div>
-        <List<T>
-          ref={listRef}
-          columns={columns}
-          data={data}
-          isLoading={isLoading}
-          isError={Boolean(stationMessage?.type === 'error')}
-          handleRetry={false}
-          minimumWidth={minimumWidth}
-          columnGap={columnGap}
-          rowGap={rowGap}
-          headerRowHeight={headerRowHeight}
-          listRowHeight={listRowHeight}
-          listRowActionSize={listRowActionSize}
-          headerRowActionSize={headerRowActionSize}
-          horizontalTextAlign={horizontalTextAlign}
-          verticalTextAlign={verticalTextAlign}
-          textWrap={textWrap}
-          keyProperty={keyProperty}
-          showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
-          selectionMode={mode}
-          enableSelectAll={enableSelectAll}
-          enableSelectAllDeselect={enableSelectAll && !hasMoreData}
-          loadingTriggerOffset={loadingTriggerOffset}
-          defaultSortOrder={sortOrder}
-          generateItemLink={generateItemLink}
-          onItemClicked={onItemClickedHandler}
-          onItemSelected={itemSelectedHandler}
-          onRequestMoreData={onRequestMoreData}
-          onSortChanged={(sortData: SortData<T>) => {
-            onSortChanged(sortData);
-            setSortOrder(sortData);
-          }}
-          inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
+    <ConditionalSplit shouldSplit={isQuickEditMode} minSecondarySize="500px">
+      <div
+        className={clsx(
+          classes.container,
+          {
+            [classes.hasStationError]: stationMessage,
+            [classes.modalMode]: modalMode,
+          },
+          'explorer-container',
+          className,
+        )}
+      >
+        <PageHeader
+          title={title}
+          subtitle={resultsTitle}
+          actions={pageHeaderActions}
+          setTabTitle={setTabTitle}
         />
+        {StationMessage}
+        {Filters}
+        <div
+          className={clsx({
+            [classes.filtersHidden]: !filtersVisible,
+          })}
+        >
+          <List<T>
+            ref={listRef}
+            columns={columns}
+            data={data}
+            isLoading={isLoading}
+            isError={Boolean(stationMessage?.type === 'error')}
+            handleRetry={false}
+            minimumWidth={minimumWidth}
+            columnGap={columnGap}
+            rowGap={rowGap}
+            headerRowHeight={headerRowHeight}
+            listRowHeight={listRowHeight}
+            listRowActionSize={listRowActionSize}
+            headerRowActionSize={headerRowActionSize}
+            horizontalTextAlign={horizontalTextAlign}
+            verticalTextAlign={verticalTextAlign}
+            textWrap={textWrap}
+            keyProperty={keyProperty}
+            showActionButton={
+              Boolean(generateItemLink) || Boolean(onItemClicked)
+            } // or hard code to `true`?
+            selectionMode={mode}
+            enableSelectAll={enableSelectAll}
+            enableSelectAllDeselect={enableSelectAll && !hasMoreData}
+            loadingTriggerOffset={loadingTriggerOffset}
+            defaultSortOrder={sortOrder}
+            generateItemLink={!isQuickEditMode ? generateItemLink : undefined}
+            onItemClicked={onItemClickedHandler}
+            onItemSelected={itemSelectedHandler}
+            onRequestMoreData={onRequestMoreData}
+            onSortChanged={(sortData: SortData<T>) => {
+              onSortChanged(sortData);
+              setSortOrder(sortData);
+            }}
+            inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
+          />
+        </div>
       </div>
-    </div>
+      {isQuickEditMode && (
+        <QuickEditContextProvider>{quickEditStation}</QuickEditContextProvider>
+      )}
+    </ConditionalSplit>
   );
 });
 
@@ -515,6 +470,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
 const useListSelectionMode = (
   selectionMode: ListSelectMode,
   openBulkActionsOnStart?: boolean,
+  isQuickEditMode?: boolean,
 ): {
   readonly mode: ListSelectMode;
   readonly setIsBulkOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -523,8 +479,16 @@ const useListSelectionMode = (
     openBulkActionsOnStart ?? false,
   );
 
+  let mode = selectionMode;
+
+  if (isQuickEditMode) {
+    mode = ListSelectMode.Single;
+  } else if (isBulkOpen) {
+    mode = ListSelectMode.Multi;
+  }
+
   // If bulk actions is open, set ListSelectMode to Multi
-  const mode = isBulkOpen ? ListSelectMode.Multi : selectionMode;
+  // const mode = isBulkOpen ? ListSelectMode.Multi : selectionMode;
 
   return { mode, setIsBulkOpen } as const;
 };

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

@@ -1,6 +1,8 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { actWithReturn } from '../../../helpers/testing';
+import { noop } from '../../../helpers/utils';
+import { initializeUi } from '../../../initialize';
 import { IconName } from '../../Icons';
 import { Column, ListSelectMode } from '../../List';
 import {
@@ -50,6 +52,28 @@ const getDataProvider = (): readonly [
 };
 
 describe('NavigationExplorer', () => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
+  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 [provider] = getDataProvider();
     const wrapper = shallow(
@@ -161,6 +185,7 @@ describe('NavigationExplorer', () => {
     const pageHeader = wrapper.find(PageHeader);
 
     expect(pageHeader.prop('actions')).toMatchObject([
+      { kind: 'spacer' },
       {
         label: 'New',
         icon: IconName.Plus,
@@ -193,6 +218,7 @@ describe('NavigationExplorer', () => {
     const pageHeader = wrapper.find(PageHeader);
 
     expect(pageHeader.prop('actions')).toMatchObject([
+      { kind: 'spacer' },
       { label: 'test' },
       {
         label: 'New',

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

@@ -12,11 +12,11 @@ import { Data } from '../../../types/data';
 import { FilterType, FilterTypes } from '../../Filters/Filters.model';
 import { IconName } from '../../Icons';
 import { ExplorerBulkAction, ExplorerDataProvider } from '../Explorer.model';
+import { NavigationExplorer } from '../NavigationExplorer/NavigationExplorer';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
-} from '../InMemoryDataProvider';
-import { NavigationExplorer } from '../NavigationExplorer/NavigationExplorer';
+} from '../helpers/InMemoryDataProvider';
 
 interface NavExplorerStoryData {
   id: number;

package/src/components/Explorer/QuickEdit/QuickEditContext.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { LocationDescriptor } from 'history';
+import React from 'react';
+
+export interface QuickEditContextType<T> {
+  selectedItem?: T;
+  detailsLink?: LocationDescriptor<unknown>;
+  isQuickEditMode?: boolean;
+  registerSaveCallback?: (callback: () => Promise<void>) => void;
+  refresh: () => Promise<void>;
+}
+
+// TODO: Find an elegant way to type this context
+export const QuickEditContext = React.createContext<QuickEditContextType<any>>(
+  undefined as any,
+);