@axinom/mosaic-ui 0.43.0-rc.0 → 0.43.0-rc.10

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import { Form } from 'formik';
+import React from 'react';
+import { Data } from '../../../types';
+import { MessageBar } from '../../MessageBar';
+import { FormGrid } from '../FormGrid';
+import { FormStationProps } from '../FormStation';
+import { StationErrorStateType } from '../FormStation.models';
+import classes from './FormStationContentWrapper.scss';
+
+interface FormStationContentWrapperProps
+  extends Pick<
+    FormStationProps<Data>,
+    'stationMessage' | 'edgeToEdgeContent' | 'infoPanel' | 'initialData'
+  > {
+  stationError?: StationErrorStateType;
+  setStationError: React.Dispatch<
+    React.SetStateAction<StationErrorStateType | undefined>
+  >;
+}
+
+export const FormStationContentWrapper: React.FC<
+  FormStationContentWrapperProps
+> = ({
+  stationMessage,
+  edgeToEdgeContent,
+  infoPanel,
+  initialData,
+  stationError,
+  setStationError,
+  children,
+}) => (
+  <>
+    {stationError && (
+      <div className={classes.errorMessage}>
+        <MessageBar
+          type="error"
+          title={String(stationError.title)}
+          onClose={() => setStationError(undefined)}
+        >
+          {stationError?.body}
+        </MessageBar>
+      </div>
+    )}
+    {initialData.loading ? (
+      // TODO: Loading skeleton of the page
+      <></>
+    ) : initialData.error ||
+      initialData.data === null ||
+      initialData.entityNotFound ? (
+      // Error on loading - we can't show the form
+      <div className={classes.loadingError}></div>
+    ) : (
+      <div className={classes.children}>
+        <div className={classes.main}>
+          <div
+            className={clsx(classes.formWrapper, {
+              [classes.hasMessage]: stationMessage,
+            })}
+          >
+            {stationMessage && <MessageBar {...stationMessage} />}
+            <Form>
+              <FormGrid edgeToEdgeContent={edgeToEdgeContent}>
+                {children}
+                {/* Adding a invisible text input here to prevent the browser from submitting on "Enter" when there is only a single text input field in the form
+                  See: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 */}
+                <input type="text" style={{ display: 'none' }} />
+              </FormGrid>
+            </Form>
+          </div>
+          {infoPanel}
+        </div>
+      </div>
+    )}
+  </>
+);

package/src/components/FormStation/FormStationContentWrapper/index.ts

@@ -0,0 +1 @@
+export * from './FormStationContentWrapper';

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

@@ -0,0 +1,88 @@
+import { FormikValues, useFormikContext } from 'formik';
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
+import { IconName } from '../../Icons';
+import {
+  PageHeader,
+  PageHeaderActionType,
+  PageHeaderProps,
+} from '../../PageHeader';
+
+/**
+ * Handles showRefresh and cancel buttons based on form states
+ */
+export const FormStationHeader: React.FC<
+  Omit<PageHeaderProps, 'title'> & {
+    titleProperty?: string;
+    defaultTitle?: string;
+    cancelNavigationUrl?: string;
+  }
+> = ({
+  titleProperty,
+  defaultTitle,
+  subtitle,
+  cancelNavigationUrl,
+  className,
+}) => {
+  const { dirty, resetForm, values } = useFormikContext<FormikValues>();
+
+  useEffect(() => {
+    // Set the save indicator to dirty depending on the form state
+    if (dirty) {
+      setSaveIndicator(SaveIndicatorType.Dirty);
+    } else {
+      setSaveIndicator(SaveIndicatorType.Inactive);
+    }
+    return () => {
+      // The form is not always considered "not dirty" after the save
+      // so this code will make sure that the indicator is set to inactive
+      // when the station is left.
+      setSaveIndicator(SaveIndicatorType.Inactive);
+    };
+  }, [dirty]);
+
+  const history = useHistory();
+
+  const title =
+    titleProperty && values[titleProperty] !== ''
+      ? values[titleProperty]
+      : defaultTitle ?? '';
+
+  return (
+    <PageHeader
+      title={title}
+      subtitle={subtitle}
+      className={className}
+      actions={[
+        ...(dirty === true // add undo action if form as been altered
+          ? [
+              {
+                label: 'Undo Changes',
+                icon: IconName.Undo,
+                actionType: PageHeaderActionType.Context,
+                onClick: () => {
+                  resetForm();
+                },
+              },
+            ]
+          : []),
+        ...(cancelNavigationUrl // add cancel action if applicable
+          ? [
+              {
+                label: 'Cancel',
+                icon: IconName.X,
+                onClick: () => {
+                  resetForm();
+                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
+                  Promise.resolve().then(() =>
+                    history.push(cancelNavigationUrl),
+                  );
+                },
+              },
+            ]
+          : []),
+      ]}
+    />
+  );
+};

package/src/components/FormStation/FormStationHeader/index.ts

@@ -0,0 +1 @@
+export * from './FormStationHeader';

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

@@ -0,0 +1,136 @@
+import { FormikHelpers } from 'formik';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  SaveIndicatorType,
+  setSaveIndicator,
+  showNotification,
+} from '../../../initialize';
+import { Data } from '../../../types';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { ErrorType } from '../../models';
+import {
+  InitialFormData,
+  SaveDataFunction,
+  StationErrorStateType,
+} from '../FormStation.models';
+
+export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+) => {
+  onSubmit: (
+    values: TValues,
+    formikHelpers: FormikHelpers<TValues>,
+  ) => Promise<void>;
+  stationError?: StationErrorStateType;
+  setStationError: Dispatch<SetStateAction<StationErrorStateType | undefined>>;
+  isFormSubmitting: boolean;
+  lastSubmittedResponse: React.MutableRefObject<TSubmitResponse | undefined>;
+  initialValues: TValues | null | undefined;
+};
+
+export const useDataProvider: FormStationDataProvider = <
+  TValues extends Data,
+  TSubmitResponse,
+>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+) => {
+  const [stationError, setStationError] = useState<StationErrorStateType>();
+  const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
+  const lastSubmittedResponse = useRef<TSubmitResponse>();
+
+  useEffect(() => {
+    if (
+      initialData.error ||
+      (initialData.data === null && !initialData.loading) ||
+      initialData.entityNotFound
+    ) {
+      const stationError = {
+        ...ErrorTypeToStationError(
+          initialData.error,
+          'An error occurred when trying to load data.',
+          'Entity not found',
+        ),
+        type: 'loading',
+      };
+
+      setStationError(stationError);
+    } else {
+      if (stationError?.type === 'loading') {
+        // Only clear the error if it is a loading error, which now seems to be cleared.
+        setStationError(undefined);
+      }
+    }
+  }, [
+    initialData.loading,
+    initialData.error,
+    initialData.entityNotFound,
+    initialData.data,
+    stationError?.type,
+  ]);
+
+  const onSubmit = useCallback(
+    async (
+      values: TValues,
+      formikHelpers: FormikHelpers<TValues>,
+    ): Promise<void> => {
+      if (isFormSubmitting) {
+        return;
+      }
+
+      try {
+        setIsFormSubmitting(true);
+        setSaveIndicator(SaveIndicatorType.Saving);
+        setStationError(undefined);
+        if (!initialData.loading && saveData) {
+          const response = await saveData(values, initialData, formikHelpers);
+          if (response) {
+            lastSubmittedResponse.current = response;
+          }
+
+          showNotification({
+            title: 'Your changes were saved successfully.',
+            options: {
+              type: 'success',
+              autoClose: 1500,
+            },
+          });
+        }
+      } catch (error) {
+        setStationError(
+          ErrorTypeToStationError(
+            error as ErrorType,
+            'An error occurred when trying to save data.',
+          ),
+        );
+
+        setSaveIndicator(SaveIndicatorType.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);
+      }
+    },
+    [isFormSubmitting, initialData, saveData, setStationError],
+  );
+
+  return {
+    onSubmit,
+    stationError,
+    setStationError,
+    isFormSubmitting,
+    lastSubmittedResponse,
+    initialValues: initialData.data,
+  };
+};

package/src/components/FormStation/{useValidationError.tsx → helpers/useValidationError.tsx}

@@ -1,6 +1,6 @@
 import { useFormikContext } from 'formik';
 import React, { useCallback, useEffect, useState } from 'react';
-import { StationErrorStateType } from './StationErrorStateType';
+import { StationErrorStateType } from '../FormStation.models';
 
 /**
  * Component that watches for changes in the form validation state
@@ -15,6 +15,7 @@ const ValidationWatcher: React.FC<{
   }, [formik.isValid, isValid]);
   return null;
 };
+
 /**
  * Cares for showing (and removing) validation errors.
  * @param stationError the currently showing error

package/src/components/FormStation/index.ts

@@ -1,8 +1,5 @@
 export { Create, CreateProps } from './Create/Create';
 export { Details, DetailsProps } from './Details/Details';
-export {
-  FormStation,
-  FormStationProps,
-  ObjectSchemaDefinition,
-} from './FormStation';
+export { FormGrid } from './FormGrid';
+export { FormStation, FormStationProps } from './FormStation';
 export * from './FormStation.models';

package/dist/common/assertError.d.ts

@@ -1,13 +0,0 @@
-import { ErrorType } from '../components/models';
-/**
- * Type assertion function that throws an error if provided parameter is not an instance of an Error, and asserts value to an Error type if no error is thrown.
- * This is a copy of assertError() in @axinom/service-common to avoid dependencies.
- */
-export declare const assertError: (error: unknown) => asserts error is Error;
-/**
- * Asserts if the passed error is of ErrorType.
- *
- * @param error error object of type unknown
- */
-export declare const assertErrorType: (error: unknown) => asserts error is ErrorType;
-//# sourceMappingURL=assertError.d.ts.map

package/dist/common/assertError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"assertError.d.ts","sourceRoot":"","sources":["../../src/common/assertError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAM9D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,SAalE,CAAC"}

package/dist/components/FormStation/StationErrorStateType.d.ts

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-export interface StationErrorStateType extends StationError {
-    type?: string;
-}
-//# sourceMappingURL=StationErrorStateType.d.ts.map

package/dist/components/FormStation/StationErrorStateType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StationErrorStateType.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/StationErrorStateType.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/FormStation/useValidationError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValidationError.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/useValidationError.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAehE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,qBAAqB,GAAG,SAAS,EAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAC7B,KAAK,CAAC,cAAc,CAAC,qBAAqB,GAAG,SAAS,CAAC,CACxD,GACA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC,CAyBA"}

package/src/common/assert-error.spec.ts

@@ -1,61 +0,0 @@
-/* eslint-disable jest/no-conditional-expect */
-import 'jest-extended';
-import { StationError } from '../components/models';
-import { assertError, assertErrorType } from './assertError';
-
-describe('assertError', () => {
-  it('StationError type error is thrown -> ErrorType asserted', async () => {
-    try {
-      throw {
-        title: 'test title',
-        body: 'test body',
-      };
-    } catch (error) {
-      assertErrorType(error);
-      expect((error as StationError).title).toBe('test title');
-      expect((error as StationError).body).toBe('test body');
-    }
-  });
-
-  it('Error is thrown -> ErrorType asserted', async () => {
-    try {
-      throw new Error('test error');
-    } catch (error) {
-      assertErrorType(error);
-      expect((error as Error).message).toBe('test error');
-    }
-  });
-
-  it('string is thrown -> ErrorType asserted', async () => {
-    try {
-      throw 'test error';
-    } catch (error) {
-      assertErrorType(error);
-      expect(error as string).toBe('test error');
-    }
-  });
-
-  it('error-like object is thrown -> ErrorType asserted', async () => {
-    try {
-      throw { message: 'test error' };
-    } catch (error) {
-      assertErrorType(error);
-      expect(Object(error).message).toBe('test error');
-    }
-  });
-
-  it('number is thrown -> ErrorType assertion failed', async () => {
-    try {
-      throw 123;
-    } catch (error) {
-      try {
-        assertErrorType(error);
-      } catch (assertionError) {
-        assertError(assertionError);
-        expect(assertionError.message).toBe(
-          'The caught error is not an instance of ErrorType.',
-        );
-      }
-    }
-  });
-});

package/src/common/assertError.ts

@@ -1,33 +0,0 @@
-import { ErrorType, StationError } from '../components/models';
-
-/**
- * Type assertion function that throws an error if provided parameter is not an instance of an Error, and asserts value to an Error type if no error is thrown.
- * This is a copy of assertError() in @axinom/service-common to avoid dependencies.
- */
-export const assertError: (error: unknown) => asserts error is Error = (
-  error: unknown,
-): asserts error is Error => {
-  if (!(error instanceof Error)) {
-    throw new Error('A caught error is not an instance of an Error class.');
-  }
-};
-
-/**
- * Asserts if the passed error is of ErrorType.
- *
- * @param error error object of type unknown
- */
-export const assertErrorType: (error: unknown) => asserts error is ErrorType = (
-  error: unknown,
-): asserts error is ErrorType => {
-  if (
-    !(
-      error instanceof Error ||
-      typeof error === 'string' ||
-      (error as StationError).title !== undefined ||
-      error instanceof Object
-    )
-  ) {
-    throw new Error('The caught error is not an instance of ErrorType.');
-  }
-};

package/src/components/FormStation/StationErrorStateType.tsx

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-
-export interface StationErrorStateType extends StationError {
-  type?: string;
-}