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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.5",
+  "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": "61dacf2b863f576ca0680aaa3431b5a195686e7e"
+  "gitHead": "37f68c4083df80f25b1fd94ec348c5bbf54a639c"
 }

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

@@ -23,11 +23,28 @@ export const BulkEditFormFieldsConfigConverter = (
   const keys = Object.keys(config);
 
   const FormFields: React.FC = () => {
-    const { setFieldValue, setFieldTouched, values } = useFormikContext<Data>();
+    const {
+      setFieldValue,
+      setFieldTouched,
+      setErrors,
+      errors,
+      validateForm,
+      values,
+    } = useFormikContext<Data>();
 
     const onFieldRemoved = (field: string): void => {
-      setFieldValue(field, undefined); // Clear the field value when removed
-      setFieldTouched(field, false); // Mark the field as not touched
+      setFieldValue(field, undefined, false); // Clear the field value when removed
+      setFieldTouched(field, false, false); // Mark the field as not touched
+
+      if (errors[field]) {
+        // If there was an error for this field, clear it
+        const newErrors = { ...errors };
+        delete newErrors[field];
+
+        setErrors(newErrors);
+
+        validateForm();
+      }
     };
 
     // Effect to clear empty fields
@@ -41,6 +58,10 @@ export const BulkEditFormFieldsConfigConverter = (
         });
     }, [setFieldValue, values]);
 
+    const onFieldAdded = (field: string): void => {
+      setFieldTouched(field, true); // Mark the field as touched when added
+    };
+
     const fields = useMemo(
       () =>
         keys
@@ -66,6 +87,16 @@ export const BulkEditFormFieldsConfigConverter = (
                 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}
               />
             );
@@ -75,9 +106,14 @@ export const BulkEditFormFieldsConfigConverter = (
     );
 
     return (
-      <FieldSelection onFieldRemoved={onFieldRemoved}>{fields}</FieldSelection>
+      <FieldSelection
+        onFieldRemoved={onFieldRemoved}
+        onFieldAdded={onFieldAdded}
+      >
+        {fields}
+      </FieldSelection>
     );
   };
 
-  return <FormFields />; // Return the FormFields component
+  return <FormFields />;
 };

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

@@ -111,7 +111,7 @@ export const useBulkEdit = <T extends Data>({
             : undefined
         }
         showSaveHeaderAction={!noItemsSelected}
-        saveHeaderActionTitle="Apply"
+        saveHeaderActionConfig={{ label: 'Apply', icon: IconName.Checkmark }}
         saveNotificationMessage="Your changes are being applied to the selected items."
       >
         {BulkEditContent}

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,
@@ -40,10 +41,10 @@ export interface FormStationProps<
   /** If set to true, the save header action is shown. (default: true) */
   showSaveHeaderAction?: boolean;
   /**
-   * If set, this will override the default title of the save header action.
-   * This is useful when you want to have a custom title for the save action.
+   * Optional configuration for the save header action button.
+   * Allows customizing the label and icon.
    */
-  saveHeaderActionTitle?: string;
+  saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
   /**
    * If set, this will override the default notification message shown
    * after a successful save.
@@ -101,7 +102,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   className = '',
   setTabTitle = true,
   showSaveHeaderAction = true,
-  saveHeaderActionTitle,
+  saveHeaderActionConfig,
   saveNotificationMessage,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
@@ -149,7 +150,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             className={classes.header}
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
-            saveHeaderActionTitle={saveHeaderActionTitle}
+            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,7 +23,8 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
     showSaveHeaderAction?: boolean;
-    saveHeaderActionTitle?: string;
+    saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+    setValidationError: () => void;
   }
 > = ({
   titleProperty,
@@ -32,9 +34,14 @@ export const FormStationHeader: React.FC<
   className,
   setTabTitle,
   showSaveHeaderAction,
-  saveHeaderActionTitle = 'Save',
+  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);
 
@@ -58,14 +65,18 @@ export const FormStationHeader: React.FC<
 
       if (showSaveHeaderAction) {
         actionItems.push({
-          label: saveHeaderActionTitle,
-          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 {
@@ -116,9 +127,12 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
+    isValid,
     quickEditContext,
     resetForm,
-    saveHeaderActionTitle,
+    saveHeaderActionConfig.icon,
+    saveHeaderActionConfig.label,
+    setValidationError,
     showSaveHeaderAction,
     submitForm,
   ]);