@axinom/mosaic-ui 0.61.0 → 0.62.0-rc.0

package/src/components/Explorer/helpers/useSubtitle.spec.tsx

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { ItemSelectEventArgs, ListSelectMode } from '../../List/List.model';
+import { ResultCounts } from './useDataProvider';
+import { useSubtitle } from './useSubtitle';
+
+describe('useSubtitle', () => {
+  it('should return "Showing 1 Element" when there is 1 total and 1 filtered result', () => {
+    const mode = ListSelectMode.Single;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SINGLE_ITEMS',
+      items: [],
+    };
+    const results: ResultCounts = { total: 1, filtered: 1 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe('Showing 1 Element');
+  });
+
+  it('should return "Showing 0 of 1 Element" when there is 1 total and 0 filtered result', () => {
+    const mode = ListSelectMode.Single;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SINGLE_ITEMS',
+      items: [],
+    };
+    const results: ResultCounts = { total: 1, filtered: 0 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe('Showing 0 of 1 Element');
+  });
+
+  it('should return "Showing all of X Elements" when filtered results equal total results', () => {
+    const mode = ListSelectMode.Single;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SINGLE_ITEMS',
+      items: [],
+    };
+    const results: ResultCounts = { total: 5, filtered: 5 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe('Showing all of 5 Elements');
+  });
+
+  it('should return "Showing X Elements" when filtered results are undefined', () => {
+    const mode = ListSelectMode.Single;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SINGLE_ITEMS',
+      items: [],
+    };
+    const results: ResultCounts = { total: 5, filtered: undefined };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe('Showing 5 Elements');
+  });
+
+  it('should return "Showing X of Y Elements" when filtered results are less than total results', () => {
+    const mode = ListSelectMode.Single;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SINGLE_ITEMS',
+      items: [],
+    };
+    const results: ResultCounts = { total: 10, filtered: 5 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe('Showing 5 of 10 Elements');
+  });
+
+  it('should append selected items count when mode is Multi and selection mode is SINGLE_ITEMS', () => {
+    const mode = ListSelectMode.Multi;
+    const itemSelection: ItemSelectEventArgs<{ id: number }> = {
+      mode: 'SINGLE_ITEMS',
+      items: [{ id: 1 }, { id: 2 }],
+    };
+    const results: ResultCounts = { total: 10, filtered: 5 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe(
+      'Showing 5 of 10 Elements, Selected: 2',
+    );
+  });
+
+  it('should append filtered results count as selected items when mode is Multi and selection mode is SELECT_ALL', () => {
+    const mode = ListSelectMode.Multi;
+    const itemSelection: ItemSelectEventArgs<never> = {
+      mode: 'SELECT_ALL',
+      items: [],
+    };
+    const results: ResultCounts = { total: 10, filtered: 5 };
+
+    const { result } = renderHook(() =>
+      useSubtitle(mode, itemSelection, results),
+    );
+
+    expect(result.current.resultsTitle).toBe(
+      'Showing 5 of 10 Elements, Selected: 5',
+    );
+  });
+});

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

@@ -0,0 +1,52 @@
+import { Data } from '../../../types';
+import { ItemSelectEventArgs, ListSelectMode } from '../../List/List.model';
+import { ResultCounts } from './useDataProvider';
+
+/**
+ * Sets PageHeader subtitle
+ * @param mode current ListSelectMode
+ * @param itemSelection current item selection
+ * @param results total results
+ */
+export function useSubtitle<T extends Data>(
+  mode: ListSelectMode,
+  itemSelection: ItemSelectEventArgs<T>,
+  results?: ResultCounts,
+): {
+  readonly resultsTitle: string;
+} {
+  let resultsTitle = ''; // default to an empty string while results is being fetched
+
+  if (results !== undefined) {
+    switch (true) {
+      case results.total === 1 && results.filtered === 1:
+        resultsTitle = `Showing 1 Element`;
+        break;
+      case results.total === 1 && results.filtered === 0:
+        resultsTitle = `Showing 0 of 1 Element`;
+        break;
+      case results.filtered === results.total:
+        resultsTitle = `Showing all of ${results.total} Elements`;
+        break;
+      case results.filtered === undefined:
+        resultsTitle = `Showing ${results.total} Elements`;
+        break;
+      default:
+        resultsTitle = `Showing ${results.filtered} of ${results.total} Elements`;
+    }
+
+    // Append Selected items if list selection is in Multi mode
+    if (mode === ListSelectMode.Multi) {
+      if (itemSelection.mode === 'SINGLE_ITEMS') {
+        resultsTitle = `${resultsTitle}, Selected: ${
+          itemSelection.items?.length ?? 0
+        }`;
+      } else {
+        // Show filtered results as selected results if 'SELECT_ALL' is active
+        resultsTitle = `${resultsTitle}, Selected: ${results.filtered}`;
+      }
+    }
+  }
+
+  return { resultsTitle } as const;
+}

package/src/components/Explorer/index.ts

@@ -1,3 +1,13 @@
+export {
+  BulkEditConfig,
+  BulkEditContext,
+  BulkEditContextType,
+  BulkEditFieldConfig,
+  BulkEditFieldConfigMap,
+  BulkEditFormFieldsConfigConverter,
+  defaultComponentMap,
+  generateBulkEditMutation,
+} from './BulkEdit';
 export { Explorer, ExplorerProps } from './Explorer';
 export {
   ExplorerBulkAction,

package/src/components/FieldSelection/FieldSelection.scss

@@ -0,0 +1,18 @@
+@import '../../styles/common.scss';
+
+.header {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  gap: 10px;
+  align-items: center;
+
+  div:has(> input) {
+    padding: 2px;
+    max-width: none !important;
+    width: 100% !important;
+  }
+}
+
+.content {
+  padding: 10px;
+}

package/src/components/FieldSelection/FieldSelection.spec.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { FieldSelection } from './FieldSelection';
+
+configure({ testIdAttribute: 'data-test-id' });
+
+const MockField: React.FC<{ name: string; label: string }> = ({
+  name,
+  label,
+}) => <div data-test-id={`field-${name}`}>{label}</div>;
+
+describe('FieldSelection', () => {
+  it('should render without crashing', () => {
+    render(
+      <FieldSelection>
+        <MockField name="field1" label="Field 1" />
+        <MockField name="field2" label="Field 2" />
+      </FieldSelection>,
+    );
+
+    expect(screen.getByPlaceholderText('Select Field')).toBeInTheDocument();
+  });
+
+  it('should add a field to the selected fields when the add button is clicked', () => {
+    render(
+      <FieldSelection>
+        <MockField name="field1" label="Field 1" />
+        <MockField name="field2" label="Field 2" />
+      </FieldSelection>,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('Select Field'), {
+      target: { value: 'field1' },
+    });
+    fireEvent.click(screen.getByText('Field 1'));
+    fireEvent.click(screen.getByTestId('add-field-button'));
+
+    expect(screen.getByTestId('field-field1')).toBeInTheDocument();
+  });
+
+  it('should remove a field from the selected fields when the remove button is clicked', () => {
+    render(
+      <FieldSelection>
+        <MockField name="field1" label="Field 1" />
+        <MockField name="field2" label="Field 2" />
+      </FieldSelection>,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('Select Field'), {
+      target: { value: 'field1' },
+    });
+    fireEvent.click(screen.getByText('Field 1'));
+    fireEvent.click(screen.getByTestId('add-field-button'));
+
+    expect(screen.getByTestId('field-field1')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('remove-field-button'));
+
+    expect(screen.queryByTestId('field-field1')).not.toBeInTheDocument();
+  });
+});

package/src/components/FieldSelection/FieldSelection.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Field, Formik } from 'formik';
+import React from 'react';
+import { noop } from '../../helpers/utils';
+import { CustomTagsField, SingleLineTextField } from '../FormElements';
+import { FieldSelection } from './FieldSelection';
+
+const meta: Meta<typeof FieldSelection> = {
+  title: 'Other Components/FieldSelection',
+  component: FieldSelection,
+};
+export default meta;
+
+export const Default: StoryObj<typeof FieldSelection> = {
+  render: () => (
+    <Formik initialValues={{}} onSubmit={noop}>
+      <>
+        <FieldSelection>
+          <Field label="Title" name={'title'} as={SingleLineTextField} />
+          <Field label="Tags ( Add )" name={'tagsAdd'} as={CustomTagsField} />
+          <Field
+            label="Tags ( Remove )"
+            name={'tagsRemove'}
+            as={CustomTagsField}
+          />
+        </FieldSelection>
+      </>
+    </Formik>
+  ),
+};

package/src/components/FieldSelection/FieldSelection.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useEffect } from 'react';
+import { Accordion, AccordionItem } from '../Accordion';
+import { Button, ButtonContext } from '../Buttons';
+import { Select } from '../FormElements';
+import { SelectOption } from '../FormElements/Select/Select';
+import { IconName } from '../Icons';
+import classes from './FieldSelection.scss';
+
+interface FieldSelectionProps {
+  className?: string;
+}
+
+interface FieldDefinition {
+  index: number;
+  value: string;
+  label: string;
+  child: JSX.Element;
+}
+
+export const FieldSelection: React.FC<FieldSelectionProps> = ({
+  className,
+  children,
+}) => {
+  useEffect(() => {
+    const fields: FieldDefinition[] = [];
+    React.Children.forEach(children, (child, index) => {
+      if (
+        React.isValidElement<{ label: string; name: string }>(child) &&
+        child.props.name
+      ) {
+        fields.push({
+          index,
+          value: child.props.name,
+          label: child.props.label,
+          child: React.cloneElement<{ label: string }>(child, {
+            label: 'Value',
+          }),
+        });
+      }
+    });
+
+    setAvailableFields(fields);
+  }, [children]);
+
+  const [availableFields, setAvailableFields] = React.useState<
+    FieldDefinition[]
+  >([]);
+
+  const [selectedFields, setSelectedFields] = React.useState<FieldDefinition[]>(
+    [],
+  );
+
+  return (
+    <Accordion
+      className={className}
+      expandedByDefault={true}
+      header={
+        <FieldSelectionHeader
+          fields={availableFields}
+          onAddField={(value) => {
+            const newField = availableFields.find(
+              (field) => field.value === value,
+            );
+
+            if (newField) {
+              setAvailableFields((currentFields) =>
+                currentFields.filter((field) => field.value !== value),
+              );
+              setSelectedFields((currentFields) => [
+                ...currentFields,
+                newField,
+              ]);
+            }
+          }}
+        />
+      }
+    >
+      {selectedFields.map((field, i) => (
+        <AccordionItem
+          key={i}
+          header={
+            <FieldSelectionItemHeader
+              label={field.label as string}
+              onRemoveField={() => {
+                setSelectedFields((currentFields) =>
+                  currentFields.filter((f) => f.value !== field.value),
+                );
+                setAvailableFields((currentFields) =>
+                  [...currentFields, field].sort((a, b) => a.index - b.index),
+                );
+              }}
+            />
+          }
+        >
+          <div className={classes.content}>{field.child}</div>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+const FieldSelectionHeader: React.FC<{
+  fields: SelectOption[];
+  onAddField: (value: string) => void;
+}> = ({ fields, onAddField }) => {
+  const [value, setValue] = React.useState<string>();
+
+  const handleButtonClicked = useCallback(() => {
+    if (value) {
+      onAddField(value);
+      setValue(undefined);
+    }
+  }, [onAddField, value]);
+
+  return (
+    <div className={classes.header}>
+      <Select
+        label="Field"
+        name="field"
+        placeholder="Select Field"
+        options={fields}
+        inlineMode={true}
+        onChange={(e) => setValue(e.currentTarget.value)}
+        value={value}
+      />
+      <Button
+        icon={IconName.Plus}
+        buttonContext={value ? ButtonContext.Active : ButtonContext.Icon}
+        onButtonClicked={handleButtonClicked}
+        dataTestId="add-field-button"
+      />
+    </div>
+  );
+};
+
+const FieldSelectionItemHeader: React.FC<{
+  label: string;
+  onRemoveField: () => void;
+}> = ({ label, onRemoveField }) => {
+  return (
+    <div className={classes.header}>
+      {label}
+      <Button
+        icon={IconName.X}
+        buttonContext={ButtonContext.Icon}
+        onButtonClicked={(e) => {
+          e.stopPropagation();
+          onRemoveField();
+        }}
+        dataTestId="remove-field-button"
+      />
+    </div>
+  );
+};

package/src/components/FieldSelection/index.ts

@@ -0,0 +1 @@
+export { FieldSelection } from './FieldSelection';

package/src/components/FormStation/FormStation.tsx

@@ -3,6 +3,7 @@ import { Formik, FormikValues } from 'formik';
 import React, { PropsWithChildren, useContext } from 'react';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { Data } from '../../types/data';
+import { BulkEditContext } from '../Explorer/BulkEdit/BulkEditContext';
 import { QuickEditContext } from '../Explorer/QuickEdit/QuickEditContext';
 import { StationMessage } from '../models';
 import {
@@ -94,6 +95,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
   const quickEditContext = useContext(QuickEditContext);
+  const bulkEditContext = useContext(BulkEditContext);
 
   const {
     onSubmit,
@@ -136,10 +138,12 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
           />
-          <SaveOnNavigate
-            isSubmitting={isFormSubmitting}
-            onNavigationCancelled={setValidationError}
-          />
+          {!bulkEditContext && (
+            <SaveOnNavigate
+              isSubmitting={isFormSubmitting}
+              onNavigationCancelled={setValidationError}
+            />
+          )}
           {quickEditContext && (
             <SaveOnDemand
               isSubmitting={isFormSubmitting}

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

@@ -1,7 +1,8 @@
 import { FormikValues, useFormikContext } from 'formik';
 import React, { useContext, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
-import { QuickEditContext } from '../../Explorer';
+import { BulkEditContext } from '../../Explorer/BulkEdit/BulkEditContext';
+import { QuickEditContext } from '../../Explorer/QuickEdit/QuickEditContext';
 import { IconName } from '../../Icons';
 import {
   PageHeader,
@@ -31,8 +32,9 @@ export const FormStationHeader: React.FC<
   setTabTitle,
   showSaveHeaderAction,
 }) => {
-  const { dirty, resetForm } = useFormikContext<FormikValues>();
+  const { dirty, submitForm, resetForm } = useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
+  const bulkEditContext = useContext(BulkEditContext);
 
   const history = useHistory();
 
@@ -58,9 +60,12 @@ export const FormStationHeader: React.FC<
           icon: IconName.Save,
           kind: 'action',
           actionType: PageHeaderActionType.Context,
-          onClick: () => {
+          onClick: async () => {
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
+            } else if (bulkEditContext?.isBulkEditMode) {
+              await submitForm();
+              history.replace(history.location.pathname);
             } else {
               history.replace(history.location.pathname);
             }
@@ -78,6 +83,18 @@ export const FormStationHeader: React.FC<
       });
     }
 
+    if (bulkEditContext?.isBulkEditMode) {
+      actionItems.push({
+        label: 'Cancel',
+        icon: IconName.X,
+        kind: 'action',
+        onClick: () => {
+          resetForm();
+          bulkEditContext.cancel();
+        },
+      });
+    }
+
     if (cancelNavigationUrl) {
       actionItems.push({
         label: 'Cancel',
@@ -93,12 +110,14 @@ export const FormStationHeader: React.FC<
 
     return actionItems;
   }, [
+    bulkEditContext,
     cancelNavigationUrl,
     dirty,
     history,
     quickEditContext,
     resetForm,
     showSaveHeaderAction,
+    submitForm,
   ]);
 
   return (

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

@@ -9,6 +9,7 @@ export enum IconName {
   BackwardTen,
   Block,
   Bulk,
+  BulkEdit,
   Calendar,
   Checkmark,
   ChevronDown,

package/src/components/Icons/Icons.tsx

@@ -129,6 +129,22 @@ const BulkIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const BulkEditIcon: 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="M32.7,18.5l4.4,4.4-10.5,10.5-4.4-4.4,10.5-10.5ZM32.2,12.9v-7.7H10M8.5,16.5h12.9M8.5,21h12.9M8.5,25.5h7M27.2,18.5v-8.6H2.9v24.7h14.4M22.3,29l-1.6,5.8,6-1.4"
+    />
+  </svg>
+);
+
 const CalendarIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -915,6 +931,7 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.BackwardTen]: <BackwardTen className={className} />,
     [IconName.Block]: <BlockIcon className={className} />,
     [IconName.Bulk]: <BulkIcon className={className} />,
+    [IconName.BulkEdit]: <BulkEditIcon className={className} />,
     [IconName.Calendar]: <CalendarIcon className={className} />,
     [IconName.Checkmark]: <CheckmarkIcon className={className} />,
     [IconName.ChevronDown]: <ChevronDownIcon className={className} />,

package/src/components/List/List.tsx

@@ -279,6 +279,17 @@ const ListRenderer = <T extends Data>(
     },
   }));
 
+  useEffect(() => {
+    if (selectionMode !== ListSelectMode.Multi) {
+      setListItems((prevState) =>
+        prevState.map((i) => ({
+          selected: false,
+          data: i.data,
+        })),
+      );
+    }
+  }, [selectionMode]);
+
   return (
     <div
       className={clsx(classes.wrapper, 'list-wrapper', className)}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './Buttons';
 export * from './DynamicDataList';
 export * from './EmptyStation';
 export * from './Explorer';
+export * from './FieldSelection';
 export * from './Filters';
 export * from './FormElements';
 export * from './FormStation';