@scality/core-ui 0.115.0

package/src/lib/components/toast/useMutationsHandler.test.tsx

@@ -0,0 +1,238 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useToast } from './ToastProvider';
+import { useMutationsHandler } from './useMutationsHandler';
+
+jest.mock('./ToastProvider', () => ({
+  useToast: jest.fn(),
+}));
+
+const mockUseToast = useToast as jest.MockedFunction<typeof useToast>;
+
+const mutationResultMock = {
+  context: undefined,
+  data: ['mockData'],
+  failureCount: 0,
+  error: null,
+  mutate: jest.fn(),
+  mutateAsync: jest.fn(),
+  reset: jest.fn(),
+  variables: undefined,
+};
+
+describe('useMutationsHandler', () => {
+  const mainMutation = {
+    mutation: {
+      isError: false,
+      isIdle: false,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: true,
+      status: 'success',
+      ...mutationResultMock,
+    },
+    name: 'mutation1',
+  };
+
+  const dependantMutations = [
+    {
+      mutation: {
+        isLoading: false,
+        isSuccess: true,
+        isError: false,
+        isIdle: false,
+        status: 'success',
+        ...mutationResultMock,
+      },
+      name: 'mutation2',
+    },
+    {
+      mutation: {
+        isLoading: false,
+        isSuccess: false,
+        isError: false,
+        isIdle: true,
+        status: 'idle',
+        ...mutationResultMock,
+      },
+      name: 'mutation3',
+    },
+  ] as const;
+
+  const messageDescriptionBuilder = jest.fn(() => 'message');
+
+  it('should call onMainMutationSuccess when a primary mutation succeeds', async () => {
+    const showToast = jest.fn();
+    const onMainMutationSuccess = jest.fn();
+
+    mockUseToast.mockImplementation(() => ({
+      showToast,
+    }));
+
+    const { waitFor } = renderHook(() =>
+      useMutationsHandler({
+        mainMutation,
+        dependantMutations,
+        messageDescriptionBuilder,
+        onMainMutationSuccess,
+      }),
+    );
+
+    await act(async () => {
+      await waitFor(() => {
+        expect(onMainMutationSuccess).toHaveBeenCalled();
+      });
+    });
+  });
+
+  it('should show a success toast when all mutations succeed', async () => {
+    const showToast = jest.fn();
+
+    mockUseToast.mockImplementation(() => ({
+      showToast,
+    }));
+
+    const { waitFor } = renderHook(() =>
+      useMutationsHandler({
+        mainMutation,
+        dependantMutations,
+        messageDescriptionBuilder,
+      }),
+    );
+
+    await act(async () => {
+      await waitFor(() => {
+        expect(showToast).toHaveBeenCalledWith({
+          open: true,
+          status: 'success',
+          message: 'message',
+        });
+      });
+    });
+  });
+
+  it('should show an error toast when at least one mutation fails', async () => {
+    const showToast = jest.fn();
+
+    mockUseToast.mockImplementation(() => ({
+      showToast,
+    }));
+
+    const mutationsWithError = [
+      {
+        mutation: {
+          isLoading: false,
+          isSuccess: false,
+          isIdle: false,
+          isError: true,
+          stauts: 'error',
+          ...mutationResultMock,
+        },
+        name: 'mutation4',
+      },
+    ] as const;
+
+    const { waitFor } = renderHook(() =>
+      useMutationsHandler({
+        mainMutation,
+        dependantMutations: mutationsWithError,
+        messageDescriptionBuilder,
+      }),
+    );
+
+    await act(async () => {
+      await waitFor(() => {
+        expect(showToast).toHaveBeenCalledWith({
+          open: true,
+          status: 'error',
+          message: 'message',
+        });
+      });
+    });
+  });
+
+  it('should call onAllSuccess when all mutations succeeds', async () => {
+    const showToast = jest.fn();
+    const otherMutations = [
+      {
+        mutation: {
+          isLoading: false,
+          isSuccess: true,
+          isError: false,
+          isIdle: false,
+          status: 'success',
+          ...mutationResultMock,
+        },
+        name: 'mutation2',
+      },
+    ] as const;
+    const onAllMutationsSuccess = jest.fn();
+
+    mockUseToast.mockImplementation(() => ({
+      showToast,
+    }));
+
+    const { waitFor } = renderHook(() =>
+      useMutationsHandler({
+        mainMutation,
+        dependantMutations: otherMutations,
+        messageDescriptionBuilder,
+        onAllMutationsSuccess,
+      }),
+    );
+
+    await act(async () => {
+      await waitFor(() => {
+        expect(onAllMutationsSuccess).toHaveBeenCalled();
+      });
+    });
+  });
+
+  it('should not call onAllSuccess when all mutations failed', async () => {
+    const showToast = jest.fn();
+    const firstMutation = {
+      mutation: {
+        isError: true,
+        isIdle: false,
+        isLoading: false,
+        isPaused: false,
+        isSuccess: false,
+        status: 'error',
+        ...mutationResultMock,
+      },
+      name: 'mutation1',
+    };
+    const otherMutations = [
+      {
+        mutation: {
+          isLoading: false,
+          isSuccess: false,
+          isError: true,
+          isIdle: false,
+          status: 'error',
+          ...mutationResultMock,
+        },
+        name: 'mutation2',
+      },
+    ] as const;
+    const onAllMutationsSuccess = jest.fn();
+
+    mockUseToast.mockImplementation(() => ({
+      showToast,
+    }));
+
+    const { waitFor } = renderHook(() =>
+      useMutationsHandler({
+        mainMutation: firstMutation,
+        dependantMutations: otherMutations,
+        messageDescriptionBuilder,
+        onAllMutationsSuccess,
+      }),
+    );
+
+    await act(async () => {
+      await waitFor(() => {
+        expect(onAllMutationsSuccess).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/lib/components/toast/useMutationsHandler.ts

@@ -0,0 +1,172 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { UseMutationOptions, UseMutationResult } from 'react-query';
+import { ToastContextState, useToast } from './ToastProvider';
+
+export type MutationConfig<T> = {
+  mutation: T;
+  name: string;
+};
+
+declare type GetResults<T> = T extends MutationConfig<
+  MinimalMutationResult<infer TData, infer TError>
+>
+  ? MutationConfig<MinimalMutationResult<TData, TError>>
+  : T extends MinimalMutationResult<infer TData, infer TError>
+  ? MutationConfig<MinimalMutationResult<TData, TError>>
+  : MutationConfig<MinimalMutationResult<unknown, unknown>>;
+
+declare type GetDescriptionBuilder<T> = T extends MutationConfig<
+  MinimalMutationResult<infer TData, infer TError>
+>
+  ? DescriptionBuilder<TData, TError>
+  : T extends MutationConfig<UseMutationOptions<infer TData, infer TError>>
+  ? DescriptionBuilder<TData, TError>
+  : T extends MinimalMutationResult<infer TData, infer TError>
+  ? DescriptionBuilder<TData, TError>
+  : never;
+
+/**
+ * MutationResults reducer recursively maps type param to results
+ */
+declare type MutationsResults<T extends unknown[]> = T extends []
+  ? []
+  : T extends [infer Head, ...infer Tail]
+  ? [GetResults<Head>, ...MutationsResults<Tail>]
+  : T extends [infer Head]
+  ? [GetResults<Head>]
+  : unknown[] extends T
+  ? T
+  : never;
+
+enum DescriptionBuilderStatus {
+  Success = 'success',
+  Error = 'error',
+}
+
+type DescriptionBuilder<Data = unknown, Error = unknown> = {
+  error?: Error;
+  data?: Data;
+  status: DescriptionBuilderStatus;
+  name: string;
+};
+
+declare type DescriptionBuilders<T extends any[]> = T extends []
+  ? []
+  : T extends [infer Head, ...infer Tail]
+  ? [GetDescriptionBuilder<Head>, ...DescriptionBuilders<Tail>]
+  : T extends [infer Head]
+  ? [GetDescriptionBuilder<Head>]
+  : T extends UseMutationOptions<
+      infer TMutationFnData,
+      infer TError,
+      infer TData
+    >[]
+  ? DescriptionBuilder<
+      unknown extends TData ? TMutationFnData : TData,
+      TError
+    >[]
+  : DescriptionBuilder[];
+
+type Props<MainMutationType, T extends any[]> = {
+  mainMutation: MutationConfig<MainMutationType>;
+  dependantMutations?:
+    | readonly [...MutationsResults<T>]
+    | MutationConfig<MinimalMutationResult<unknown, unknown>>[];
+  messageDescriptionBuilder: (
+    mutations: T extends []
+      ? [GetDescriptionBuilder<MainMutationType>]
+      : [GetDescriptionBuilder<MainMutationType>, ...DescriptionBuilders<T>],
+  ) => ReactNode;
+  toastProps?: Pick<
+    ToastContextState,
+    'style' | 'autoDismiss' | 'position' | 'duration' | 'withProgressBar'
+  >;
+} & (
+  | { onMainMutationSuccess?: () => void; onAllMutationsSuccess?: never }
+  | { onAllMutationsSuccess?: () => void; onMainMutationSuccess?: never }
+);
+
+type MinimalMutationResult<TData, TError> = Pick<
+  UseMutationResult<TData, TError, unknown, unknown>,
+  'isError' | 'isIdle' | 'isSuccess' | 'isLoading' | 'error' | 'data'
+>;
+
+export const useMutationsHandler = <
+  MainMutationType extends MinimalMutationResult<unknown, unknown>,
+  T extends any[] | [],
+>({
+  mainMutation,
+  dependantMutations,
+  messageDescriptionBuilder,
+  toastProps,
+  ...rest
+}: Props<MainMutationType, T>) => {
+  const { showToast } = useToast();
+  const mutations = [
+    mainMutation,
+    ...(dependantMutations ? dependantMutations : []),
+  ] as MutationConfig<MinimalMutationResult<unknown, unknown>>[];
+
+  const handleMutationsCompletion = useCallback(async () => {
+    const results = await Promise.all(mutations.map((m) => m.mutation));
+
+    const loadingMutations = mutations.filter(
+      (_, index) => results[index].isLoading,
+    );
+    const successMutations = mutations.filter(
+      (_, index) => results[index].isSuccess,
+    );
+    const errorMutations = mutations.filter(
+      (_, index) => results[index].isError,
+    );
+
+    const mainMutationDesc: GetDescriptionBuilder<MainMutationType> = {
+      data: mainMutation.mutation?.data,
+      status: DescriptionBuilderStatus.Success,
+      name: mainMutation.name,
+    } as GetDescriptionBuilder<MainMutationType>;
+    const descriptionBuilders = [
+      mainMutationDesc,
+      ...((dependantMutations?.map(({ mutation, name }) => ({
+        data: mutation.data,
+        error: mutation.isError && mutation.error,
+        status: mutation.isSuccess
+          ? DescriptionBuilderStatus.Success
+          : DescriptionBuilderStatus.Error,
+        name,
+      })) as DescriptionBuilders<T>) || ([] as DescriptionBuilders<T>)),
+    ] as T extends []
+      ? [GetDescriptionBuilder<MainMutationType>]
+      : [GetDescriptionBuilder<MainMutationType>, ...DescriptionBuilders<T>];
+
+    if (loadingMutations.length === 0) {
+      if (errorMutations.length > 0) {
+        if (mainMutation.mutation?.isSuccess) {
+          'onMainMutationSuccess' in rest && rest?.onMainMutationSuccess?.();
+        }
+        showToast({
+          open: true,
+          status: 'error',
+          message: messageDescriptionBuilder(descriptionBuilders),
+          ...toastProps,
+        });
+        return;
+      } else if (successMutations.length > 0) {
+        'onMainMutationSuccess' in rest && rest?.onMainMutationSuccess?.();
+        if (successMutations.length === mutations.length) {
+          'onAllMutationsSuccess' in rest && rest?.onAllMutationsSuccess?.();
+        }
+        showToast({
+          open: true,
+          status: 'success',
+          message: messageDescriptionBuilder(descriptionBuilders),
+          ...(toastProps ? toastProps : {}),
+        });
+      }
+    }
+  }, [JSON.stringify(mutations)]);
+
+  useEffect(() => {
+    handleMutationsCompletion();
+  }, [handleMutationsCompletion]);
+};

package/src/lib/components/toast/useToastParameters.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface ToastParameters {
+  duration?: number | null;
+  open?: boolean;
+  onClose?: () => void;
+}
+
+export function useToastParameters(params: ToastParameters) {
+  const { duration = null, open, onClose } = params;
+
+  const timerAutoHide = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    function handleKeyDown(nativeEvent: KeyboardEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+          onClose?.();
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  const setAutoHideTimer = useCallback(
+    (autoHideDurationParam: number | null) => {
+      if (!onClose || autoHideDurationParam == null) {
+        return;
+      }
+
+      clearTimeout(timerAutoHide.current);
+      timerAutoHide.current = setTimeout(() => {
+        onClose?.();
+      }, autoHideDurationParam);
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (open) {
+      setAutoHideTimer(duration);
+    }
+
+    return () => {
+      clearTimeout(timerAutoHide.current);
+    };
+  }, [open, duration, setAutoHideTimer]);
+
+  return { params };
+}

package/src/lib/components/toggle/Toggle.component.tsx

@@ -0,0 +1,128 @@
+import { ChangeEvent, InputHTMLAttributes, useRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { spacing } from '../../style/theme';
+import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
+import { Stack } from '../../spacing';
+import { Text } from '../text/Text.component';
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  toggle: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  disabled?: boolean;
+};
+const ToggleContainer = styled.span<{ disabled?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+`;
+const Switch = styled.label<{ disabled?: boolean }>`
+  position: relative;
+  width: ${spacing.sp24};
+  height: ${spacing.sp14};
+  align-self: center;
+  ${(props) => {
+    return css`
+      ${props.disabled
+        ? `
+          cursor: not-allowed;
+        `
+        : `
+          cursor: pointer;
+        `}
+    `;
+  }}
+`;
+const Slider = styled.div<{ toggle?: boolean }>`
+  width: 100%;
+  height: 1rem;
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  border: ${spacing.sp1} solid
+    ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
+  border-radius: ${spacing.sp8};
+  transition: 0.4s;
+  -moz-transform: rotate(0.02deg);
+  &:before {
+    border-radius: 100%;
+    position: absolute;
+    content: '';
+    height: ${spacing.sp10};
+    width: ${spacing.sp10};
+    left: 3px;
+    top: 3.5px;
+    background-color: ${(props) =>
+      props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
+    transition: 0.4s;
+    -moz-transform: rotate(0.02deg);
+  }
+`;
+const ToggleInput = styled.input`
+  &:checked + ${Slider} {
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+  &:checked + ${Slider}:before {
+    transform: translateX(${spacing.sp10});
+  }
+  display: none;
+`;
+const StyledSwitchLabel = styled.label<{ toggle?: boolean }>`
+  color: ${(props) =>
+    props.theme[props.toggle ? 'textPrimary' : 'textPrimary']};
+`;
+
+function ToggleSwitch({ toggle, label, onChange, disabled, ...rest }: Props) {
+  const { isContextAvailable } = useFieldContext();
+  const checkboxRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <StyledSwitchLabel
+      toggle={toggle}
+      className="text"
+      id={`${rest['id']}-label`}
+      htmlFor={rest['id']}
+    >
+      <ToggleContainer className="sc-toggle" disabled={disabled}>
+        <Stack gap={'r8'} style={{ alignItems: 'baseline' }}>
+          <Switch
+            htmlFor={rest['id']}
+            role="checkbox"
+            aria-checked={toggle}
+            tabIndex={disabled ? -1 : 0}
+            aria-disabled={disabled}
+            disabled={disabled}
+            onKeyDown={(e) => {
+              if (e.code === 'Space' || e.code === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+
+                checkboxRef.current && checkboxRef.current.click();
+              }
+            }}
+            aria-labelledby={
+              label
+                ? `${rest['id']}-label`
+                : isContextAvailable
+                ? `${LABEL_PREFIX}${rest['id']}`
+                : undefined
+            }
+          >
+            <ToggleInput
+              type="checkbox"
+              checked={toggle}
+              onChange={onChange}
+              disabled={disabled}
+              ref={checkboxRef}
+              {...rest}
+            />
+            <Slider className="sc-slider" toggle={toggle} />
+          </Switch>
+          {label && <Text>{label}</Text>}
+        </Stack>
+      </ToggleContainer>
+    </StyledSwitchLabel>
+  );
+}
+
+export const Toggle = ToggleSwitch;