@axinom/mosaic-ui 0.42.0 → 0.43.0-rc.1

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,124 @@
+import { FormikHelpers } from 'formik';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { SaveIndicatorType, setSaveIndicator } 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;
+          }
+        }
+      } 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/src/components/List/ListRow/Renderers/ExternalLinkRenderer/ExternalLinkRenderer.tsx

@@ -55,10 +55,10 @@ export const createExternalLinkRenderer = <T extends Data>(
         rel="noopener noreferrer"
         onClick={handleClick}
       >
+        <p title={value}>{value}</p>
         {showNewTabIcon && (
           <Icons icon={IconName.External} className={classes.externalIcon} />
         )}
-        <p title={value}>{value}</p>
       </a>
     );
   };

package/src/components/Tabs/Tab/CustomTab.scss

@@ -0,0 +1,42 @@
+@import '../../../styles/common.scss';
+
+.tab {
+  @include boxSizing;
+
+  display: grid;
+  height: 49px;
+  min-width: 180px;
+  background-color: $blue;
+  color: white;
+  font-size: 16px;
+  border: 1px solid $blue;
+  border-bottom: none;
+
+  padding: 0 15px;
+
+  cursor: pointer;
+
+  &.selected {
+    background: white;
+    color: $dark-gray;
+    border: 1px solid $light-gray;
+    border-bottom: none;
+  }
+
+  &.disabled {
+    background-color: $dark-gray;
+    cursor: default;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.content {
+  display: grid;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/Tabs/Tab/CustomTab.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react';
+import { ReactTabsFunctionComponent, Tab, TabProps } from 'react-tabs';
+import classes from './CustomTab.scss';
+
+export const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
+  children,
+  ...otherProps
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current && ref.current.parentElement && otherProps.selected) {
+      ref.current.parentElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, [otherProps.selected]);
+
+  return (
+    <Tab
+      {...otherProps}
+      className={classes.tab}
+      selectedClassName={classes.selected}
+      data-test-id="tab"
+    >
+      <div className={classes.content} ref={ref}>
+        {children}
+      </div>
+    </Tab>
+  );
+};
+
+CustomTab.tabsRole = 'Tab';

package/src/components/Tabs/Tab/index.ts

@@ -0,0 +1 @@
+export { CustomTab as Tab } from './CustomTab';

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/common.scss';
+
+.tablist {
+  border: none;
+  margin: 0;
+  padding: 0;
+}

package/src/components/Tabs/TabList/CustomTabList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReactTabsFunctionComponent, TabList, TabListProps } from 'react-tabs';
+import classes from './CustomTabList.scss';
+import { ScrollContainer } from './ScrollContainer';
+
+export const CustomTabList: ReactTabsFunctionComponent<TabListProps> = ({
+  children,
+  ...otherProps
+}) => (
+  <TabList {...otherProps} className={classes.tablist}>
+    <ScrollContainer>{children}</ScrollContainer>
+  </TabList>
+);
+
+CustomTabList.tabsRole = 'TabList';

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.scss

@@ -0,0 +1,34 @@
+@import '../../../../styles/common.scss';
+
+.tablistWrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: grid;
+  width: 100%;
+  white-space: nowrap;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(max-content, auto);
+  gap: 2px;
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.tablistWrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.container {
+  display: grid;
+  // grid-template-columns: 50px auto 50px;
+
+  &.scroll {
+    grid-template-columns: 50px auto 50px;
+    gap: 2px;
+  }
+}
+
+.hide {
+  display: none;
+}

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React from 'react';
+import { Button } from '../../../Buttons';
+import { IconName } from '../../../Icons';
+import classes from './ScrollContainer.scss';
+import { useScroll } from './useScroll';
+
+export const ScrollContainer: React.FC = ({ children }) => {
+  const {
+    scrollRef,
+    showScroll,
+    scrollLeft,
+    scrollRight,
+    enableScrollLeft,
+    enableScrollRight,
+  } = useScroll<HTMLDivElement>();
+
+  return (
+    <div className={clsx(classes.container, { [classes.scroll]: showScroll })}>
+      <Button
+        icon={IconName.ChevronLeft}
+        onButtonClicked={scrollLeft}
+        className={clsx({ [classes.hide]: !showScroll })}
+        disabled={!enableScrollLeft}
+      />
+
+      <div className={classes.tablistWrapper} ref={scrollRef}>
+        {children}
+      </div>
+
+      <Button
+        icon={IconName.ChevronRight}
+        onButtonClicked={scrollRight}
+        className={clsx({ [classes.hide]: !showScroll })}
+        disabled={!enableScrollRight}
+      />
+    </div>
+  );
+};

package/src/components/Tabs/TabList/ScrollContainer/index.ts

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

package/src/components/Tabs/TabList/ScrollContainer/useScroll.ts

@@ -0,0 +1,114 @@
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+export const useScroll = <T extends HTMLElement>(): {
+  scrollLeft: () => void;
+  scrollRight: () => void;
+  scrollRef: React.RefObject<T>;
+  showScroll: boolean;
+  enableScrollLeft: boolean;
+  enableScrollRight: boolean;
+} => {
+  const scrollRef = useRef<T>(null);
+
+  const scrollLeft = useCallback(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({
+        left: -220,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
+
+  const scrollRight = useCallback(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({
+        left: 220,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
+
+  const [showScroll, setShowScroll] = React.useState<boolean>(false);
+  const [enableScrollLeft, setEnableScrollLeft] =
+    React.useState<boolean>(false);
+  const [enableScrollRight, setEnableScrollRight] =
+    React.useState<boolean>(false);
+
+  const updateScroll = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollWidth, clientWidth } = scrollRef.current;
+
+      if (showScroll) {
+        // take into account the width of the scroll buttons
+        setShowScroll(scrollWidth > clientWidth + 100);
+      } else {
+        setShowScroll(scrollWidth > clientWidth);
+      }
+    }
+  }, [showScroll]);
+
+  const updateScrollButtons = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+
+      setEnableScrollLeft(scrollLeft > 0);
+      setEnableScrollRight(scrollLeft + clientWidth < scrollWidth);
+    }
+  }, []);
+
+  // Omitting the dependency array here since this effect needs to run at every render
+  // to handle the case where the components are dynamically added/removed
+  useEffect(updateScroll);
+  useEffect(updateScrollButtons);
+
+  useLayoutEffect(() => {
+    // debounce is needed to avoid re-rendering everything on every resize event
+    const debouncedUpdateScroll = debounce(updateScroll, 50);
+
+    // add window resize event listener on mount
+    window.addEventListener('resize', debouncedUpdateScroll);
+
+    debouncedUpdateScroll();
+
+    const scrollContainer = scrollRef.current;
+    const debouncedUpdateScrollButtons = debounce(updateScrollButtons, 50);
+
+    scrollContainer?.addEventListener('scroll', debouncedUpdateScrollButtons);
+
+    updateScrollButtons();
+
+    const transformScroll = (event: WheelEvent): void => {
+      if (event.deltaY !== 0 && scrollContainer) {
+        scrollContainer.scrollLeft += event.deltaY;
+      }
+    };
+
+    scrollContainer?.addEventListener('wheel', transformScroll, {
+      passive: false, // added for scrolling on Safari
+    });
+
+    // clear all event listeners on unmount
+    return () => {
+      debouncedUpdateScroll.cancel();
+      window.removeEventListener('resize', debouncedUpdateScroll);
+
+      debouncedUpdateScrollButtons.cancel();
+      scrollContainer?.removeEventListener(
+        'scroll',
+        debouncedUpdateScrollButtons,
+      );
+
+      scrollContainer?.removeEventListener('wheel', transformScroll);
+    };
+  }, [showScroll, updateScroll, updateScrollButtons]);
+
+  return {
+    scrollLeft,
+    scrollRight,
+    scrollRef,
+    showScroll,
+    enableScrollLeft,
+    enableScrollRight,
+  };
+};

package/src/components/Tabs/TabList/index.ts

@@ -0,0 +1 @@
+export { CustomTabList as TabList } from './CustomTabList';

package/src/components/Tabs/TabPanel/CustomTabPanel.scss

@@ -0,0 +1,10 @@
+@import '../../../styles/common.scss';
+
+.tabpanel {
+  border-bottom: 1px solid $light-gray;
+  display: none;
+
+  &.selected {
+    display: block;
+  }
+}

package/src/components/Tabs/TabPanel/CustomTabPanel.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  ReactTabsFunctionComponent,
+  TabPanel,
+  TabPanelProps,
+} from 'react-tabs';
+import classes from './CustomTabPanel.scss';
+
+export const CustomTabPanel: ReactTabsFunctionComponent<TabPanelProps> = ({
+  children,
+  className,
+  selectedClassName,
+  ...otherProps
+}) => (
+  <TabPanel
+    {...otherProps}
+    className={clsx(className, classes.tabpanel)}
+    selectedClassName={clsx(selectedClassName, classes.selected)}
+    data-test-id="tab"
+  >
+    {children}
+  </TabPanel>
+);
+
+CustomTabPanel.tabsRole = 'TabPanel';

package/src/components/Tabs/TabPanel/index.ts

@@ -0,0 +1 @@
+export { CustomTabPanel as TabPanel } from './CustomTabPanel';