@axinom/mosaic-ui 0.33.0-rc.0 → 0.33.0-rc.19

package/src/components/FormElements/formStoryHelper.tsx

@@ -1,7 +1,18 @@
 import { faker } from '@faker-js/faker';
 import React, { useState } from 'react';
-import { CustomTags, ReadOnlyField, Select, SingleLineText, Tags } from '.';
+import {
+  Checkbox,
+  CustomTags,
+  Divider,
+  FileUploadControl,
+  Radio,
+  ReadOnlyField,
+  Select,
+  SingleLineText,
+  Tags,
+} from '.';
 import { generateItemArray } from '../../helpers/storybook';
+import { TextButton } from '../Buttons';
 import { DynamicListColumn } from '../DynamicDataList/DynamicDataList.model';
 import {
   createInputRenderer,
@@ -10,6 +21,8 @@ import {
 import { formatDateTime } from '../Utils';
 import { BooleanViewField } from './BooleanView/BooleanViewField';
 import { DynamicDataListControl } from './DynamicDataListControl/DynamicDataListControl';
+import { FileUpload } from './FileUploadControl/FileUploadControl';
+import { TextArea } from './TextArea/TextArea';
 
 interface DynamicListStoryData {
   position: number;
@@ -67,13 +80,13 @@ const dataListColumns: DynamicListColumn<DynamicListStoryData>[] = [
 ];
 
 export const SampleForm: React.FC = () => useCreateForm().form;
-
 export const useCreateForm = (): {
   form: JSX.Element;
   title: string;
 } => {
   const [id] = useState(faker.datatype.uuid());
   const [title, setTitle] = useState(`The ${generateTitle()}`);
+  const [title2, setTitle2] = useState(`The ${generateTitle()}`);
   const [genres, setGenres] = useState<string[]>(['Crime', 'Drama']);
   const [ratings, setRatings] = useState<
     string | number | string[] | undefined
@@ -94,104 +107,157 @@ export const useCreateForm = (): {
       country: faker.address.country(),
     })),
   );
+  const [radio, setRadio] = useState(1);
+  const [check, setCheck] = useState<boolean>();
+  const [file, setFile] = useState<FileUpload>();
+
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   return {
     form: (
-      <form
-        style={{
-          display: 'grid',
-          gridAutoRows: 'max-content',
-          gridTemplateColumns: '1fr',
-          rowGap: '20px',
-        }}
-      >
-        <ReadOnlyField label="Id" value={id} />
-        <SingleLineText
-          name="title"
-          label="Title"
-          value={title}
-          onChange={(e) => setTitle(e.currentTarget.value)}
-        />
-        <ReadOnlyField label="Publish State" value="PUBLISHED" />
-        <BooleanViewField
-          label="Status"
-          value={status}
-          trueLabel="Enabled"
-          falseLabel="Disabled"
-        />
-        <Tags
-          name="genres"
-          label="Genre(s)"
-          value={genres}
-          tagsOptions={genresOptions}
-          onChange={(e) =>
-            setGenres(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Select
-          name="ratings"
-          label="Rating"
-          value={ratings}
-          options={selectOptions}
-          onChange={(e) => setRatings(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="shortDescription"
-          label="Short Description"
-          value={shortDescription}
-          placeholder="Enter a short description..."
-          onChange={(e) => setShortDescription(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="longDescription"
-          label="Long Description"
-          value={longDescription}
-          placeholder="Enter a description..."
-          onChange={(e) => setLongDescription(e.currentTarget.value)}
-        />
-        <CustomTags
-          name="cast"
-          value={cast}
-          label="Cast"
-          onChange={(e) =>
-            setCast(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <CustomTags
-          name="directors"
-          value={directors}
-          label="Director(s)"
-          onChange={(e) =>
-            setDirectors(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Tags
-          name="locales"
-          value={locales}
-          label="Locale(s)"
-          tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
-          onChange={(e) =>
-            setLocales(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <DynamicDataListControl
-          name={'dataList'}
-          label={'Subtitles'}
-          columns={dataListColumns}
-          value={dataList}
-          positionPropertyName={'position'}
-          allowReordering={true}
-          allowRowDragging={true}
-          allowNewData={true}
-          onChange={(e) => setDataList(e as DynamicListStoryData[])}
-        />
-        <ReadOnlyField
-          label="Created At"
-          value={createdTime.toISOString()}
-          transform={formatDateTime}
-        />
-        <ReadOnlyField label="Writer(s)" value={writers} />
-      </form>
+      <>
+        <div style={{ marginBottom: 10 }}>
+          <TextButton
+            onButtonClicked={() => setDisabled(!disabled)}
+            text="Toggle Disabled"
+          />
+        </div>
+        <Divider />
+        <form
+          style={{
+            display: 'grid',
+            gridAutoRows: 'max-content',
+            gridTemplateColumns: '1fr',
+            rowGap: '20px',
+          }}
+        >
+          <ReadOnlyField label="Id" value={id} />
+          <SingleLineText
+            name="title"
+            label="Title"
+            value={title}
+            disabled={disabled}
+            onChange={(e) => setTitle(e.currentTarget.value)}
+          />
+          <ReadOnlyField label="Publish State" value="PUBLISHED" />
+          <BooleanViewField
+            label="Status"
+            value={status}
+            trueLabel="Enabled"
+            falseLabel="Disabled"
+          />
+          <Tags
+            name="genres"
+            label="Genre(s)"
+            value={genres}
+            tagsOptions={genresOptions}
+            onChange={(e) =>
+              setGenres(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Select
+            name="ratings"
+            label="Rating"
+            value={ratings}
+            options={selectOptions}
+            onChange={(e) => setRatings(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <SingleLineText
+            name="shortDescription"
+            label="Short Description"
+            value={shortDescription}
+            placeholder="Enter a short description..."
+            onChange={(e) => setShortDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <TextArea
+            name="longDescription"
+            label="Long Description"
+            value={longDescription}
+            placeholder="Enter a description..."
+            onChange={(e) => setLongDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <CustomTags
+            name="cast"
+            value={cast}
+            label="Cast"
+            onChange={(e) =>
+              setCast(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <CustomTags
+            name="directors"
+            value={directors}
+            label="Director(s)"
+            onChange={(e) =>
+              setDirectors(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Tags
+            name="locales"
+            value={locales}
+            label="Locale(s)"
+            tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
+            onChange={(e) =>
+              setLocales(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <DynamicDataListControl
+            name={'dataList'}
+            label={'Subtitles'}
+            columns={dataListColumns}
+            value={dataList}
+            positionPropertyName={'position'}
+            allowReordering={true}
+            allowRowDragging={true}
+            allowNewData={true}
+            onChange={(e) => setDataList(e as DynamicListStoryData[])}
+            disabled={disabled}
+          />
+
+          <Radio
+            value={radio}
+            onChange={(e) => setRadio(Number(e.currentTarget.value))}
+            options={[
+              { value: 1, label: 'A' },
+              { value: 2, label: 'B' },
+              { value: 3, label: 'C' },
+            ]}
+            name={'radio'}
+            label={'Category'}
+            disabled={disabled}
+          />
+
+          <Checkbox
+            value={check}
+            onChange={setCheck}
+            name={'check'}
+            label={'Is Premium?'}
+            disabled={disabled}
+          />
+
+          <FileUploadControl
+            name={'file'}
+            value={file}
+            onFileSelected={(file) => setFile(file)}
+            placeholder={'Select a file'}
+            label={'File'}
+            disabled={disabled}
+          />
+          <ReadOnlyField
+            label="Created At"
+            value={createdTime.toISOString()}
+            transform={formatDateTime}
+          />
+          <ReadOnlyField label="Writer(s)" value={writers} />
+        </form>
+      </>
     ),
     title,
   };

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 { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -675,6 +675,11 @@ describe('Details', () => {
           </FormStation>
         </MemoryRouter>,
       );
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        1,
+        IndicatorType.Inactive,
+      ); // 1. inactive 2. dirty
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(2, IndicatorType.Dirty); // 1. inactive 2. dirty
 
       // submit form
       const actionSelected = wrapper
@@ -692,7 +697,7 @@ describe('Details', () => {
 
       wrapper.update();
 
-      expect(showSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(3, IndicatorType.Saving);
 
       // complete form submission
       await act(async () => {
@@ -700,7 +705,12 @@ describe('Details', () => {
       });
       wrapper.update();
 
-      expect(hideSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        4,
+        IndicatorType.Inactive,
+      );
+
+      console.warn((setSaveIndicator as jest.Mock).mock.calls);
     });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
@@ -28,10 +28,12 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../PageHeader';
-import { ErrorType, StationError, StationMessage } from '../models';
+import { ErrorType, StationMessage } from '../models';
 import { FormActionData, InitialFormData } from './FormStation.models';
 import classes from './FormStation.scss';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
+import { StationErrorStateType } from './StationErrorStateType';
+import { useValidationError } from './useValidationError';
 
 export type ObjectSchemaDefinition<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -103,7 +105,8 @@ interface FormActionProps<T, Y> extends Omit<ActionsProps, 'actions'> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   validationSchema?: OptionalObjectSchema<ObjectSchemaDefinition<any>>;
   actions?: FormActionData<T, Y>[];
-  setStationError: (error: StationError) => void;
+  setStationError: (error: StationErrorStateType) => void;
+  setValidationError: () => void;
   submitResponse?: React.MutableRefObject<Y | undefined>;
   alwaysSubmitBeforeAction?: boolean;
   className?: string;
@@ -131,8 +134,12 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
-  const [stationError, setStationError] = useState<StationError>();
-  const [isLoadingError, setIsLoadingError] = useState(false);
+  const [stationError, setStationError] = useState<StationErrorStateType>();
+
+  const { setValidationError, validationWatcher } = useValidationError(
+    stationError,
+    setStationError,
+  );
 
   const submitResponse = useRef<TSubmitResponse>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -148,7 +155,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 
       try {
         setIsFormSubmitting(true);
-        showSaveIndicator();
+        setSaveIndicator(IndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -164,13 +171,14 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
           ),
         );
 
+        setSaveIndicator(IndicatorType.Dirty);
+
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
         throw error;
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
-        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],
@@ -182,19 +190,20 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       (initialData.data === null && !initialData.loading) ||
       initialData.entityNotFound
     ) {
-      const stationError = ErrorTypeToStationError(
-        initialData.error,
-        'An error occurred when trying to load data.',
-        'Entity not found',
-      );
+      const stationError = {
+        ...ErrorTypeToStationError(
+          initialData.error,
+          'An error occurred when trying to load data.',
+          'Entity not found',
+        ),
+        type: 'loading',
+      };
 
       setStationError(stationError);
-      setIsLoadingError(true);
     } else {
-      if (isLoadingError === true) {
+      if (stationError?.type === 'loading') {
         // Only clear the error if it is a loading error, which now seems to be cleared.
         setStationError(undefined);
-        setIsLoadingError(false);
       }
     }
   }, [
@@ -202,7 +211,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     initialData.error,
     initialData.entityNotFound,
     initialData.data,
-    isLoadingError,
+    stationError?.type,
   ]);
 
   const getContent = (): JSX.Element | undefined => {
@@ -223,7 +232,10 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     // Loading successful
     return (
       <>
-        <SaveOnNavigate isSubmitting={isFormSubmitting} />
+        <SaveOnNavigate
+          isSubmitting={isFormSubmitting}
+          onNavigationCancelled={setValidationError}
+        />
         <div className={classes.main}>
           <div
             className={clsx(classes.formWrapper, {
@@ -272,6 +284,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
         enableReinitialize={true}
       >
         <>
+          {validationWatcher}
           <FormStationHeader
             titleProperty={titleProperty as string}
             defaultTitle={defaultTitle}
@@ -296,6 +309,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
               width={actionsWidth}
               validationSchema={validationSchema}
               setStationError={setStationError}
+              setValidationError={setValidationError}
               submitResponse={submitResponse}
               alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
               className={classes.actionsPanel}
@@ -317,6 +331,7 @@ const FormStationAction = <T, Y>(
     actions,
     validationSchema,
     setStationError,
+    setValidationError,
     submitResponse,
     alwaysSubmitBeforeAction,
     className = '',
@@ -352,8 +367,7 @@ const FormStationAction = <T, Y>(
                     !isValid ||
                     (await validationSchema?.isValid(values)) === false
                   ) {
-                    // eslint-disable-next-line no-console
-                    console.log('form invalid, action not performed');
+                    setValidationError();
                     // Making sure that the fields will actually show the validation messages (they won't if the from was not touched yet - e.g. on a create station)
                     validateForm();
                     return;
@@ -405,6 +419,7 @@ const FormStationAction = <T, Y>(
     isValid,
     resetForm,
     setStationError,
+    setValidationError,
     submitForm,
     submitResponse,
     validateForm,
@@ -431,6 +446,15 @@ const FormStationHeader: React.FC<
 > = ({ titleProperty, defaultTitle, subtitle, cancelNavigationUrl }) => {
   const { dirty, resetForm, values } = useFormikContext<FormikValues>();
 
+  useEffect(() => {
+    // Set the save indicator to dirty depending on the form state
+    if (dirty) {
+      setSaveIndicator(IndicatorType.Dirty);
+    } else {
+      setSaveIndicator(IndicatorType.Inactive);
+    }
+  }, [dirty]);
+
   const history = useHistory();
 
   const title =

package/src/components/FormStation/SaveOnNavigate/SaveOnNavigate.tsx

@@ -1,11 +1,14 @@
 import { useFormikContext } from 'formik';
 import React, { useState } from 'react';
+import { noop } from '../../../helpers/utils';
 import { NavigationAPI, useReactRouterPause } from '../../../hooks';
 import { handleNavigationAttempt } from './handleNavigationAttempt';
 
 interface SaveOnNavigateProps {
   /** If set to true, will prevent form submission when navigating away. (default: false) */
   isSubmitting?: boolean;
+  /** Callback that will be called when a navigation attempt was cancelled */
+  onNavigationCancelled?: () => void;
 }
 
 /**
@@ -13,6 +16,7 @@ interface SaveOnNavigateProps {
  */
 export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
   isSubmitting = false,
+  onNavigationCancelled = noop,
 }) => {
   const { dirty, isValid, submitForm } = useFormikContext();
   const [canSubmit, setCanSubmit] = useState<boolean>(true);
@@ -28,6 +32,7 @@ export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
           isSubmitting,
           canSubmit,
           setCanSubmit,
+          onNavigationCancelled,
         ),
     },
     dirty,