@axinom/mosaic-ui 0.63.0-rc.4 → 0.63.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.4",
+  "version": "0.63.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "490e0fb462b6c1dd2024b1f30076f647a14216ce"
+  "gitHead": "37f68c4083df80f25b1fd94ec348c5bbf54a639c"
 }

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.spec.tsx

@@ -16,12 +16,22 @@ jest.mock('../../FormElements', () => ({
   )),
 }));
 
+jest.mock('../../FieldSelection', () => ({
+  FieldSelection: jest.fn(({ children }) => (
+    <div data-testid="FieldSelection">{children}</div>
+  )),
+}));
+
 jest.mock('formik', () => ({
   Field: jest.fn(({ name, label, as: Component }) => (
     <div data-testid={`Field-${name}`}>
       <Component name={name} label={label} />
     </div>
   )),
+  useFormikContext: jest.fn(() => ({
+    setFieldValue: jest.fn(),
+    setFieldTouched: jest.fn(),
+  })),
 }));
 
 describe('BulkEditFormFieldsConfigConverter', () => {
@@ -35,9 +45,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -53,9 +61,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-isArchived')).toBeInTheDocument();
     expect(getByTestId('CheckboxField')).toHaveTextContent(
@@ -77,9 +83,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-tags')).toBeInTheDocument();
     expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
@@ -111,9 +115,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -138,14 +140,15 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'No component found for field type: UnsupportedType',
     );
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
 
     consoleWarnSpy.mockRestore();
   });
@@ -153,10 +156,11 @@ describe('BulkEditFormFieldsConfigConverter', () => {
   it('handles empty configuration gracefully', () => {
     const config: BulkEditFieldConfigMap = {};
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
   });
 });

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.tsx

@@ -1,5 +1,7 @@
-import { Field } from 'formik';
-import React from 'react';
+import { Field, useFormikContext } from 'formik';
+import React, { useEffect, useMemo } from 'react';
+import { Data } from '../../../types';
+import { FieldSelection } from '../../FieldSelection';
 import {
   CheckboxField,
   CustomTagsField,
@@ -17,29 +19,101 @@ export const defaultComponentMap = {
 export const BulkEditFormFieldsConfigConverter = (
   config: BulkEditFieldConfigMap,
   componentMap: Record<string, React.ElementType> = defaultComponentMap,
-): JSX.Element[] => {
+): JSX.Element => {
   const keys = Object.keys(config);
 
-  return keys
-    .map((key) => {
-      const fieldConfig = config[key];
+  const FormFields: React.FC = () => {
+    const {
+      setFieldValue,
+      setFieldTouched,
+      setErrors,
+      errors,
+      validateForm,
+      values,
+    } = useFormikContext<Data>();
 
-      // Determine the type of the field
-      const fieldType = Array.isArray(fieldConfig.type)
-        ? 'Array' // Use 'Array' as the key for array types
-        : fieldConfig.type;
+    const onFieldRemoved = (field: string): void => {
+      setFieldValue(field, undefined, false); // Clear the field value when removed
+      setFieldTouched(field, false, false); // Mark the field as not touched
 
-      const Component = componentMap[fieldType as keyof typeof componentMap];
+      if (errors[field]) {
+        // If there was an error for this field, clear it
+        const newErrors = { ...errors };
+        delete newErrors[field];
 
-      if (!Component) {
-        // eslint-disable-next-line no-console
-        console.warn(`No component found for field type: ${fieldType}`);
-        return null; // Filter out null entries later
+        setErrors(newErrors);
+
+        validateForm();
       }
+    };
+
+    // Effect to clear empty fields
+    // This will set fields with empty strings or empty arrays to undefined
+    useEffect(() => {
+      values &&
+        Object.keys(values).forEach((key) => {
+          if (values[key] === '' || values[key].length === 0) {
+            setFieldValue(key, undefined);
+          }
+        });
+    }, [setFieldValue, values]);
+
+    const onFieldAdded = (field: string): void => {
+      setFieldTouched(field, true); // Mark the field as touched when added
+    };
+
+    const fields = useMemo(
+      () =>
+        keys
+          .map((key) => {
+            const fieldConfig = config[key];
+
+            // Determine the type of the field
+            const fieldType = Array.isArray(fieldConfig.type)
+              ? 'Array' // Use 'Array' as the key for array types
+              : fieldConfig.type;
+
+            const Component =
+              componentMap[fieldType as keyof typeof componentMap];
+
+            if (!Component) {
+              // eslint-disable-next-line no-console
+              console.warn(`No component found for field type: ${fieldType}`);
+              return null; // Filter out null entries later
+            }
+
+            return (
+              <Field
+                name={key}
+                key={key}
+                label={fieldConfig.label}
+                validate={(value: unknown) => {
+                  if (fieldType === 'Array') {
+                    // Array can be empty, so no validation needed
+                    return;
+                  }
+                  if (value === null || value === undefined || value === '') {
+                    return 'This field is required';
+                  }
+                }}
+                autoFocus={true}
+                as={Component}
+              />
+            );
+          })
+          .filter((element): element is JSX.Element => element !== null),
+      [],
+    );
+
+    return (
+      <FieldSelection
+        onFieldRemoved={onFieldRemoved}
+        onFieldAdded={onFieldAdded}
+      >
+        {fields}
+      </FieldSelection>
+    );
+  };
 
-      return (
-        <Field name={key} key={key} label={fieldConfig.label} as={Component} />
-      );
-    })
-    .filter((element): element is JSX.Element => element !== null);
+  return <FormFields />;
 };

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import { Data } from '../../../types';
-import { FieldSelection } from '../../FieldSelection';
 import { FormStation } from '../../FormStation';
 import { IconName } from '../../Icons';
 import {
@@ -74,7 +73,7 @@ export const useBulkEdit = <T extends Data>({
     () =>
       bulkEditRegistration
         ? {
-            label: bulkEditRegistration.label,
+            label: bulkEditRegistration.label ?? 'Bulk Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
@@ -93,12 +92,8 @@ export const useBulkEdit = <T extends Data>({
     if (bulkEditRegistration?.component) {
       return bulkEditRegistration.component;
     } else if (bulkEditRegistration?.config) {
-      return (
-        <FieldSelection>
-          {BulkEditFormFieldsConfigConverter(
-            bulkEditRegistration?.config.fields,
-          )}
-        </FieldSelection>
+      return BulkEditFormFieldsConfigConverter(
+        bulkEditRegistration?.config.fields,
       );
     }
     return null;
@@ -116,6 +111,8 @@ export const useBulkEdit = <T extends Data>({
             : undefined
         }
         showSaveHeaderAction={!noItemsSelected}
+        saveHeaderActionConfig={{ label: 'Apply', icon: IconName.Checkmark }}
+        saveNotificationMessage="Your changes are being applied to the selected items."
       >
         {BulkEditContent}
       </FormStation>

package/src/components/Explorer/Explorer.model.ts

@@ -127,7 +127,7 @@ export interface QuickEditRegistration<T> {
 
 export interface BulkEditRegistration<T extends Data> {
   /** The label of the action. */
-  label: string;
+  label?: string;
   /** Optional built in icon. This prop also accepts an img src. */
   icon?: IconName | string;
   /** Component to render. This will override the component that is generated. */

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
@@ -8,6 +9,8 @@ import classes from './FieldSelection.scss';
 
 interface FieldSelectionProps {
   className?: string;
+  onFieldAdded?: (field: string) => void;
+  onFieldRemoved?: (field: string) => void;
 }
 
 interface FieldDefinition {
@@ -19,6 +22,8 @@ interface FieldDefinition {
 
 export const FieldSelection: React.FC<FieldSelectionProps> = ({
   className,
+  onFieldAdded = noop,
+  onFieldRemoved = noop,
   children,
 }) => {
   useEffect(() => {
@@ -70,6 +75,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 ...currentFields,
                 newField,
               ]);
+              onFieldAdded(newField.value);
             }
           }}
         />
@@ -88,6 +94,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 setAvailableFields((currentFields) =>
                   [...currentFields, field].sort((a, b) => a.index - b.index),
                 );
+                onFieldRemoved(field.value);
               }}
             />
           }

package/src/components/FormStation/FormStation.tsx

@@ -5,6 +5,7 @@ import { OptionalObjectSchema } from 'yup/lib/object';
 import { Data } from '../../types/data';
 import { BulkEditContext } from '../Explorer/BulkEdit/BulkEditContext';
 import { QuickEditContext } from '../Explorer/QuickEdit/QuickEditContext';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction';
 import { StationMessage } from '../models';
 import {
   FormActionData,
@@ -39,6 +40,16 @@ export interface FormStationProps<
   actionsWidth?: string;
   /** If set to true, the save header action is shown. (default: true) */
   showSaveHeaderAction?: boolean;
+  /**
+   * Optional configuration for the save header action button.
+   * Allows customizing the label and icon.
+   */
+  saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+  /**
+   * If set, this will override the default notification message shown
+   * after a successful save.
+   */
+  saveNotificationMessage?: string;
   /**
    * An object containing the initial data of the form.
    */
@@ -91,6 +102,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   className = '',
   setTabTitle = true,
   showSaveHeaderAction = true,
+  saveHeaderActionConfig,
+  saveNotificationMessage,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
@@ -103,7 +116,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     setStationError,
     isFormSubmitting,
     lastSubmittedResponse,
-  } = useDataProvider(initialData, saveData);
+  } = useDataProvider(initialData, saveData, saveNotificationMessage);
 
   const { setValidationError, validationWatcher } = useValidationError(
     stationError,
@@ -137,6 +150,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             className={classes.header}
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
+            saveHeaderActionConfig={saveHeaderActionConfig}
+            setValidationError={setValidationError}
           />
           {!bulkEditContext && (
             <SaveOnNavigate

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

@@ -10,6 +10,7 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
+import { PageHeaderJsActionProps } from '../../PageHeader/PageHeaderAction';
 import { useTitle } from '../helpers/useTitle';
 
 /**
@@ -22,6 +23,8 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
     showSaveHeaderAction?: boolean;
+    saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+    setValidationError: () => void;
   }
 > = ({
   titleProperty,
@@ -31,8 +34,14 @@ export const FormStationHeader: React.FC<
   className,
   setTabTitle,
   showSaveHeaderAction,
+  saveHeaderActionConfig = {
+    label: 'Save',
+    icon: IconName.Save,
+  },
+  setValidationError,
 }) => {
-  const { dirty, submitForm, resetForm } = useFormikContext<FormikValues>();
+  const { dirty, submitForm, resetForm, isValid } =
+    useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
   const bulkEditContext = useContext(BulkEditContext);
 
@@ -56,14 +65,18 @@ export const FormStationHeader: React.FC<
 
       if (showSaveHeaderAction) {
         actionItems.push({
-          label: 'Save',
-          icon: IconName.Save,
+          label: saveHeaderActionConfig.label,
+          icon: saveHeaderActionConfig.icon,
           kind: 'action',
           actionType: PageHeaderActionType.Context,
           onClick: async () => {
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
             } else if (bulkEditContext?.isBulkEditMode) {
+              if (!isValid) {
+                setValidationError();
+                return;
+              }
               await submitForm();
               history.replace(history.location.pathname);
             } else {
@@ -114,8 +127,12 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
+    isValid,
     quickEditContext,
     resetForm,
+    saveHeaderActionConfig.icon,
+    saveHeaderActionConfig.label,
+    setValidationError,
     showSaveHeaderAction,
     submitForm,
   ]);

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

@@ -20,6 +20,7 @@ import {
 export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   onSubmit: (
     values: TValues,
@@ -38,6 +39,7 @@ export const useDataProvider: FormStationDataProvider = <
 >(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   const [stationError, setStationError] = useState<StationErrorStateType>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -92,7 +94,9 @@ export const useDataProvider: FormStationDataProvider = <
           }
 
           showNotification({
-            title: 'Your changes were saved successfully.',
+            title:
+              saveNotificationMessage ??
+              'Your changes were saved successfully.',
             options: {
               type: 'success',
               autoClose: 1500,
@@ -115,7 +119,7 @@ export const useDataProvider: FormStationDataProvider = <
         setIsFormSubmitting(false);
       }
     },
-    [isFormSubmitting, initialData, saveData, setStationError],
+    [isFormSubmitting, initialData, saveData, saveNotificationMessage],
   );
 
   return {