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

package/src/components/FormStation/SaveOnNavigate/handleNavigationAttempt.spec.ts

@@ -20,6 +20,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -30,6 +31,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -38,6 +40,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`blocks navigation when 'isValid' is 'false' by calling 'navigation.cancel()'`, async () => {
@@ -48,6 +51,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -58,6 +62,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -66,6 +71,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).toHaveBeenCalledTimes(1);
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).toHaveBeenCalled();
   });
 
   it(`pauses further navigation when 'dirty' is 'true' and 'isValid' is 'true' by calling 'navigation.pause()'`, async () => {
@@ -76,6 +82,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = true;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -86,6 +93,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -94,6 +102,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`while 'isSubmitting' is 'true' navigation should continue to be paused by not calling 'navigation.resume()'`, async () => {
@@ -104,6 +113,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = true;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -114,6 +124,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -122,6 +133,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`while 'canSubmit' is 'false' navigation should continue to be paused by not calling 'navigation.resume()'`, async () => {
@@ -132,6 +144,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = false;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -142,6 +155,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -150,6 +164,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`navigation can resume after the submitForm promise was successfully resolved by calling 'navigation.resume()'`, async () => {
@@ -160,6 +175,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -170,6 +186,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -179,6 +196,7 @@ describe('handleNavigationAttempt', () => {
     expect(submitForm).toHaveBeenCalledTimes(1);
     expect(setCanSubmit).toHaveBeenCalledTimes(1);
     expect(setCanSubmit).toHaveBeenCalledWith(false);
+    expect(onNavigationCancelled).not.toHaveBeenCalledWith(false);
   });
 
   it(`navigation is cancelled when the 'submitForm' promise was rejected by calling 'navigation.cancel()'`, async () => {
@@ -191,6 +209,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -201,6 +220,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -211,5 +231,6 @@ describe('handleNavigationAttempt', () => {
     expect(setCanSubmit).toHaveBeenCalledTimes(2);
     expect(setCanSubmit).toHaveBeenNthCalledWith(1, false);
     expect(setCanSubmit).toHaveBeenNthCalledWith(2, true);
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 });

package/src/components/FormStation/SaveOnNavigate/handleNavigationAttempt.ts

@@ -10,6 +10,7 @@ export const handleNavigationAttempt = async (
   isSubmitting: boolean,
   canSubmit: boolean,
   setCanSubmit: React.Dispatch<React.SetStateAction<boolean>>,
+  onNavigationCancelled: () => void,
 ): Promise<void> => {
   if (!dirty) {
     // Form values didn't change, just navigate away
@@ -20,6 +21,7 @@ export const handleNavigationAttempt = async (
     // Form is invalid, cancel navigation
     // TODO: Add a message here (probably connected to "Error handling")
     navigation.cancel();
+    onNavigationCancelled();
     return;
   }
   // Form values have changed and form is valid, attempt save

package/src/components/FormStation/StationErrorStateType.tsx

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

package/src/components/FormStation/useValidationError.tsx

@@ -0,0 +1,59 @@
+import { useFormikContext } from 'formik';
+import React, { useCallback, useEffect, useState } from 'react';
+import { StationErrorStateType } from './StationErrorStateType';
+
+/**
+ * Component that watches for changes in the form validation state
+ * and calls the callback with the current state.
+ */
+const ValidationWatcher: React.FC<{
+  callback: (isValid: boolean) => void;
+}> = ({ callback: isValid }) => {
+  const formik = useFormikContext();
+  useEffect(() => {
+    isValid(formik.isValid);
+  }, [formik.isValid, isValid]);
+  return null;
+};
+/**
+ * Cares for showing (and removing) validation errors.
+ * @param stationError the currently showing error
+ * @param setStationError the setter for the currently showing error
+ * @returns
+ * `setValidationError` - call this method to set the validation error.
+ * `validationWatcher` - place this JSX somewhere inside the <Formik /> component children.
+ */
+export function useValidationError(
+  stationError: StationErrorStateType | undefined,
+  setStationError: React.Dispatch<
+    React.SetStateAction<StationErrorStateType | undefined>
+  >,
+): {
+  setValidationError: () => void;
+  validationWatcher: JSX.Element;
+} {
+  // Track validation state of the from using the validationWatcher
+  const [isValid, setIsValid] = useState<boolean>(true);
+
+  useEffect(() => {
+    // if the form became valid, remove the validation error
+    if (isValid && stationError && stationError.type === 'validation') {
+      setStationError(undefined);
+    }
+  }, [isValid, setStationError, stationError]);
+
+  const setValidationError = useCallback((): void => {
+    // set the validation error
+    setStationError({
+      title: 'Please fix the errors in the form to proceed.',
+      type: 'validation',
+    });
+  }, [setStationError]);
+
+  return {
+    setValidationError,
+    validationWatcher: (
+      <ValidationWatcher callback={(valid) => setIsValid(valid)} />
+    ),
+  };
+}

package/src/components/InfoPanel/InfoImage/InfoImage.scss

@@ -9,10 +9,15 @@
 
   place-items: center;
 
+  .image,
   .inlineMenu {
-    position: absolute;
-    bottom: 0;
-    right: 0;
+    grid-row: 1;
+    grid-column: 1;
+    align-self: end;
+  }
+
+  .inlineMenu {
+    justify-self: end;
   }
 
   img {

package/src/components/InfoPanel/InfoImage/InfoImage.tsx

@@ -36,6 +36,7 @@ export const InfoImage: React.FC<InfoImageProps> = ({
       data-test-id="info-image"
     >
       <ImageLoader
+        imageClassName={classes.image}
         imgSrc={imgSrc}
         height={420}
         width={419} /*1px border*/

package/src/components/List/List.tsx

@@ -320,7 +320,9 @@ export const List = <T extends Data>({
         horizontalTextAlign={horizontalTextAlign}
         verticalTextAlign={verticalTextAlign}
         showItemCheckbox={
-          enableSelectAll && selectionMode === ListSelectMode.Multi
+          enableSelectAll &&
+          selectionMode === ListSelectMode.Multi &&
+          listItems.length > 0
         }
         isCheckboxDisabled={listItems.length === 0}
         onCheckboxToggled={headerCheckboxHandler}

package/src/components/List/ListCheckBox/ListCheckBox.scss

@@ -9,8 +9,13 @@
 
   .disabled {
     background-color: var(
-      --page-header-action-context-background-color,
-      $page-header-action-context-background-color
-    ) !important;
+      --actions-disabled-bg-color,
+      $actions-disabled-bg-color
+    );
+
+    // background-color: var(
+    //   --page-header-action-context-background-color,
+    //   $page-header-action-context-background-color
+    // ) !important;
   }
 }

package/src/components/List/ListRow/ListRow.scss

@@ -30,10 +30,6 @@
     }
   }
 
-  &.disabled {
-    cursor: not-allowed;
-  }
-
   .cell {
     white-space: nowrap;
     text-overflow: ellipsis;

package/src/components/Loaders/ImageLoader/ImageLoader.scss

@@ -1,29 +1,35 @@
 @import '../../../styles/common.scss';
 
 .container {
-  @include boxSizing;
-
-  width: 50px;
-  height: 50px;
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  place-items: center;
-}
+  grid: 1fr / 1fr;
 
-.fallback {
-  background-color: var(--fallback-image-bg-color, $fallback-image-bg-color);
-}
+  .loader {
+    @include boxSizing;
 
-.fallBackImage {
-  height: 50px;
-  width: 50px;
-  align-self: center;
-}
+    width: 50px;
+    height: 50px;
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+  }
+
+  .imageContainer {
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+
+    .fallback {
+      background-color: var(
+        --fallback-image-bg-color,
+        $fallback-image-bg-color
+      );
+    }
 
-.imageContainer {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: fit-content;
+    .fallBackImage {
+      height: 50px;
+      width: 50px;
+      align-self: center;
+    }
+  }
 }

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -99,7 +99,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(imgDisplay).toBe('none');
@@ -116,7 +116,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(images.at(0).prop('style')?.display).toBe('none'); // hidden failed image
@@ -198,12 +198,10 @@ describe('ImageLoader', () => {
   it(`loader dimensions defaults to '50px' by '50px'`, () => {
     const wrapper = shallow(<ImageLoader imgSrc="" />);
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe('50px');
-    expect(container.width).toBe('50px');
+    expect(loader.height).toBe('50px');
+    expect(loader.width).toBe('50px');
   });
 
   it('sets the height and width of the loader', () => {
@@ -213,11 +211,9 @@ describe('ImageLoader', () => {
       <ImageLoader imgSrc="" height={mockHeight} width={mockWidth} />,
     );
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe(`${mockHeight}px`);
-    expect(container.width).toBe(`${mockWidth}px`);
+    expect(loader.height).toBe(`${mockHeight}px`);
+    expect(loader.width).toBe(`${mockWidth}px`);
   });
 });

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -40,6 +40,9 @@ export interface ImageLoaderProps {
   onImageClick?: (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
   ) => void;
+
+  /** CSS Class name for additional img element styles */
+  imageClassName?: string;
 }
 
 /**
@@ -65,6 +68,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   onError = noop,
   onImageClick = noop,
   children,
+  imageClassName = '',
 }) => {
   const actualViewBox = viewBox || `0 0 ${width} ${height}`;
 
@@ -106,9 +110,9 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   }, [imgSrc, onError]);
 
   return (
-    <>
+    <div className={classes.container}>
       {isLoading && (
-        <div className={classes.container} style={customStyles}>
+        <div className={classes.loader} style={customStyles}>
           <ContentLoader
             speed={speed}
             backgroundColor={backgroundColor}
@@ -135,6 +139,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
             onError={onErrorHandler}
             onClick={onImageClick}
             data-test-id="image-loader-img"
+            className={imageClassName}
           />
           {fallBack &&
             (!fallbackSrc ? (
@@ -153,6 +158,6 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
           {!isLoading && !fallBack && children}
         </div>
       )}
-    </>
+    </div>
   );
 };

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -5,14 +5,6 @@ import { ConfirmAction, DefaultHandler, LinkAction } from '../../models';
 export enum PageHeaderActionType {
   Active,
   Context,
-  /**
-   * @deprecated This value is no longer necessary for navigation type actions in the
-   * `PageHeaderAction` component, and will be removed in the future.
-   * To create a navigation link, use the `path` property instead of the `onClick` handler,
-   * which will automatically generate an anchor element.
-   * @note This deprecation only affects the `Navigation` enum value in the PageHeaderActionType
-   */
-  Navigation,
 }
 
 export type PageHeaderActionProps =
@@ -27,8 +19,6 @@ export interface PageHeaderJsActionProps
   /**
    * Whether the action is an 'Active' or 'Context' type.
    * Changes the background color to the corresponding action type. (default: 'Context')
-   * Type `Navigation` is deprecated and will be removed in the future
-   * define instead of `onClick` handler `path` property to render element with anchor tag
    */
   actionType?: PageHeaderActionType;
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -145,7 +145,6 @@
       --actions-disabled-bg-color,
       $actions-disabled-bg-color
     );
-    cursor: not-allowed;
 
     .pageHeaderActionsIcons {
       polygon,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.stories.tsx

@@ -25,6 +25,11 @@ const meta: Meta<typeof PageHeaderAction> = {
       },
       options: iconOptions,
     },
+    path: {
+      control: {
+        type: 'text',
+      },
+    },
   },
   decorators: [
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

package/src/components/index.ts

@@ -19,8 +19,8 @@ export * from './List';
 export * from './Loaders';
 export * from './MessageBar';
 export * from './Modal';
-export * from './models';
 export * from './NavigationAwareStation';
 export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Utils';
+export * from './models';

package/src/index.ts

@@ -4,5 +4,6 @@ export * from './helpers';
 export * from './hooks';
 export * from './initialize';
 export * from './types';
+export * from './utils/ErrorMapper';
 export { ErrorTypeToStationError } from './utils/ErrorTypeToStationError';
 export * from './validators';

package/src/initialize.ts

@@ -5,6 +5,12 @@ import {
   ShowNotification,
 } from './types/ui-config';
 
+export enum IndicatorType {
+  Saving = 'saving',
+  Inactive = 'inactive',
+  Dirty = 'dirty',
+}
+
 export let showNotification: ShowNotification | (() => void) =
   polyfill('showNotification');
 
@@ -15,9 +21,8 @@ export let removeIndicator: RemoveIndicator | (() => void) =
 
 export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 
-export let showSaveIndicator: () => void = polyfill('showSaveIndicator');
-
-export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
+export let setSaveIndicator: (type: IndicatorType) => void =
+  polyfill('showSaveIndicator');
 
 /**
  * Passes the PiralApi methods to the UI library.
@@ -25,12 +30,11 @@ export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
  */
 export function initializeUi(app: UiConfig): void {
   ({
-    showNotification,
-    addIndicator,
-    removeIndicator,
-    on,
-    showSaveIndicator,
-    hideSaveIndicator,
+    showNotification = polyfill('showNotification'),
+    addIndicator = polyfill('addIndicator'),
+    removeIndicator = polyfill('removeIndicator'),
+    on = polyfill('on'),
+    setSaveIndicator = polyfill('setSaveIndicator'),
   } = app);
 }
 
@@ -39,15 +43,14 @@ export interface UiConfig {
   addIndicator: AddIndicator;
   removeIndicator: RemoveIndicator;
   on: CustomEventEmitter['on'];
-  showSaveIndicator: () => void;
-  hideSaveIndicator: () => void;
+  setSaveIndicator: (type: IndicatorType) => void;
 }
 
 function polyfill(methodName: string): () => void {
   return () => {
     // eslint-disable-next-line no-console
     console.warn(
-      `Could not find ${methodName} method. Is the UI initialized in the pilet? To initialize UI library call 'initializeUi(app)' in your pilet.`,
+      `Could not find '${methodName}' method. Is the UI initialized in the pilet? To initialize UI library call 'initializeUi(app)' in your pilet.`,
     );
   };
 }

package/src/styles/variables.scss

@@ -41,6 +41,7 @@ $accordion-item-background-color: white;
 $accordion-item-text-color: $dark-gray;
 $accordion-item-hover-color: rgba($blue, 0.15);
 $accordion-item-border: 1px solid $light-gray;
+$accordion-item-arrow-color: $blue;
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;
@@ -65,7 +66,7 @@ $filter-background-color: white;
 $filter-background-selected-color: rgba($blue, 0.15);
 $filter-light-font-color: $dark-gray;
 $filter-option-background-color: #d7e9f1;
-$filter-arrow-button-color: $blue;
+$filter-context-button-color: $blue;
 $filter-title-color: $blue;
 $filter-font-size: 16px;
 $filter-width: 360px;
@@ -184,7 +185,7 @@ $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
 $form-error-color: $red;
 $select-arrow-color: $blue;
-$select-disabled-arrow-color: $light-gray;
+$select-disabled-arrow-color: $gray;
 $label-font-size: 16px;
 $file-upload-progress: $blue;
 $file-upload-progress-background: $light-gray-2;
@@ -198,6 +199,16 @@ $form-element-min-height: 50px;
 $read-only-text-background-color: $light-gray-2;
 $select-background-color: white;
 $form-indicator-color: $green;
+$radio-hover-stroke-color: $blue;
+$radio-checked-fill-color: $blue;
+
+/* Date Time Picker*/
+$calendar-tile-active: $blue;
+$calendar-tile-active-hover: rgba($blue, 0.2);
+$calendar-button-stroke-color: $blue;
+$calendar-title-color: $dark-blue;
+$calendar-container-border-color: $blue;
+$calendar-container-bg-color: $blue;
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;
@@ -271,3 +282,22 @@ $infotooltip-font-size: 16px;
 /* Video Player */
 $video-player-controls-background: $light-gray-2;
 $video-player-controls-text-color: $dark-gray;
+
+/* Buttons */
+$navigation-button-background-color: $light-blue;
+$navigation-button-background-color-hover: rgba($light-blue, 0.9);
+$navigation-button-stroke-color: white;
+$navigation-button-background-active-color: white;
+$navigation-button-stroke-active-color: $light-blue;
+$navigation-button-background-disabled-color: $gray;
+$active-button-background-color: $blue;
+$active-button-hover-background-color: rgba($blue, 0.9);
+$active-button-stroke-background-color: white;
+$active-button-active-background-color: white;
+$active-button-active-stroke-color: $blue;
+$context-button-border-color: $blue;
+$context-button-stroke-color: $blue;
+$context-button-hover-border-color: $blue;
+$context-button-active-color: $blue;
+$icon-button-stroke-color: $blue;
+$icon-button-hover-color: $blue;