@centreon/ui 25.1.2 → 25.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.2",
+  "version": "25.1.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/api/useMutationQuery/index.ts

@@ -3,15 +3,20 @@ import { useEffect } from 'react';
 import {
   UseMutationOptions,
   UseMutationResult,
-  useMutation
+  useMutation,
+  useQueryClient
 } from '@tanstack/react-query';
-import { includes, omit } from 'ramda';
+import { equals, includes, omit, type } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
 import { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
 import { errorLog } from '../logger';
+import {
+  OptimisticListing,
+  useOptimisticMutation
+} from './useOptimisticMutation';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -46,6 +51,7 @@ export type UseMutationQueryProps<T, TMeta> = {
     variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
+  optimisticListing?: OptimisticListing;
 } & Omit<
   UseMutationOptions<{ _meta?: TMeta; payload: T }>,
   'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
@@ -79,10 +85,15 @@ const useMutationQuery = <T extends object, TMeta>({
   onError,
   onSuccess,
   onSettled,
-  baseEndpoint
+  baseEndpoint,
+  optimisticListing
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
+  const queryClient = useQueryClient();
+  const { getListingQueryKey, getOptimisticMutationItems, getPreviousListing } =
+    useOptimisticMutation({ optimisticListing });
+
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
@@ -100,7 +111,7 @@ const useMutationQuery = <T extends object, TMeta>({
         defaultFailureMessage,
         endpoint: getEndpoint(_meta as TMeta),
         headers: new Headers({
-          'Content-Type': 'application/x-www-form-urlencoded',
+          'Content-Type': 'application/json',
           ...fetchHeaders
         }),
         isMutation: true,
@@ -108,11 +119,57 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    onError,
-    onMutate,
+    onError: (error, variables, context) => {
+      if (optimisticListing?.enabled) {
+        const listingQueryKey = getListingQueryKey();
+        queryClient.setQueriesData(
+          { queryKey: listingQueryKey },
+          context.previousListing
+        );
+      }
+
+      onError?.(error, variables, context);
+    },
+    onMutate: optimisticListing?.enabled
+      ? ({ payload, _meta }) => {
+          const listingQueryKey = getListingQueryKey();
+          const newListing = getOptimisticMutationItems({
+            method,
+            payload,
+            _meta
+          });
+          const previousListing = getPreviousListing();
+
+          queryClient.setQueriesData({ queryKey: listingQueryKey }, newListing);
+
+          return { previousListing };
+        }
+      : onMutate,
     onSettled,
     onSuccess: (data, variables, context) => {
+      if (optimisticListing?.enabled) {
+        const isQueryKeyArray = equals(
+          type(optimisticListing.queryKey),
+          'Array'
+        );
+        const listingQueryKey = isQueryKeyArray
+          ? optimisticListing?.queryKey
+          : [optimisticListing?.queryKey];
+
+        queryClient.invalidateQueries({
+          queryKey: listingQueryKey
+        });
+      }
+
       if (data?.isError) {
+        if (optimisticListing?.enabled) {
+          const listingQueryKey = getListingQueryKey();
+          queryClient.setQueriesData(
+            { queryKey: listingQueryKey },
+            context.previousListing
+          );
+        }
+
         onError?.(data, variables, context);
 
         return;

package/src/api/useMutationQuery/useMutationQuery.cypress.spec.tsx

@@ -0,0 +1,111 @@
+import useMutationQuery, { Method } from '.';
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import TestQueryProvider from '../TestQueryProvider';
+
+// biome-ignore lint/suspicious/noImplicitAnyLet: <explanation>
+let spyMutation;
+
+const TestComponent = (props) => {
+  const mutation = useMutationQuery({
+    ...props,
+    getEndpoint: () => '/endpoint'
+  });
+
+  spyMutation = mutation;
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        mutation.mutateAsync({ payload: { a: 'a', b: 2, c: ['arr', 'ay'] } })
+      }
+    >
+      Send
+    </button>
+  );
+};
+
+const initialize = ({ mutationProps, isError = false }) => {
+  cy.interceptAPIRequest({
+    alias: 'mutateEndpoint',
+    path: './api/latest/endpoint',
+    statusCode: isError ? 400 : 204,
+    method: mutationProps.method,
+    response: isError
+      ? {
+          message: 'custom error message'
+        }
+      : undefined
+  });
+
+  cy.mount({
+    Component: (
+      <SnackbarProvider>
+        <TestQueryProvider>
+          <TestComponent {...mutationProps} />
+        </TestQueryProvider>
+      </SnackbarProvider>
+    )
+  }).then(() => {
+    cy.spy(spyMutation, 'mutateAsync').as('mutateAsync');
+  });
+};
+
+describe('useMutationQuery', () => {
+  it('sends data to an endpoint', () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      }
+    });
+
+    cy.get('button').click();
+
+    cy.waitForRequest('@mutateEndpoint').then(({ request }) => {
+      expect(request.method).to.equal('POST');
+      expect(request.body).to.deep.equal({ a: 'a', b: 2, c: ['arr', 'ay'] });
+      expect(request.headers.get('content-type')).to.equal('application/json');
+    });
+    cy.get('@mutateAsync').should('be.calledWith', {
+      payload: {
+        a: 'a',
+        b: 2,
+        c: ['arr', 'ay']
+      }
+    });
+  });
+
+  it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      },
+      isError: true
+    });
+
+    cy.get('button').click();
+
+    cy.get('@mutateAsync').should('be.called');
+
+    cy.contains('custom error message').should('be.visible');
+  });
+
+  it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed when posting data to an API', () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST,
+        httpCodesBypassErrorSnackbar: [400]
+      },
+      isError: true
+    });
+
+    cy.get('button').click();
+
+    cy.get('@mutateAsync').should('be.called');
+
+    cy.contains('custom error message').should('not.exist');
+  });
+});

package/src/api/useMutationQuery/useOptimisticMutation.ts

@@ -0,0 +1,114 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { append, equals, last, remove, type, update } from 'ramda';
+import { Method } from '.';
+
+interface GetOptimisticMutationListingProps<T, TMeta> {
+  method: Method;
+  payload: T;
+  _meta: TMeta;
+}
+
+export interface OptimisticListing {
+  enabled: boolean;
+  queryKey: string | Array<string>;
+  total: number;
+  limit: number;
+}
+
+interface UseOptimisticMutationProps {
+  optimisticListing?: OptimisticListing;
+}
+
+interface UseOptimisticMutationState<T, TMeta> {
+  getOptimisticMutationItems: (
+    props: GetOptimisticMutationListingProps<T, TMeta>
+  ) => object;
+  getListingQueryKey: () => Array<string>;
+  getPreviousListing: () => unknown;
+}
+
+export const useOptimisticMutation = <T, TMeta>({
+  optimisticListing
+}: UseOptimisticMutationProps): UseOptimisticMutationState<T, TMeta> => {
+  const queryClient = useQueryClient();
+
+  const getListingQueryKey = (): Array<string> => {
+    const isQueryKeyArray = equals(type(optimisticListing?.queryKey), 'Array');
+    const listingQueryKey = isQueryKeyArray
+      ? optimisticListing?.queryKey
+      : [optimisticListing?.queryKey];
+
+    return listingQueryKey;
+  };
+
+  const getPreviousListing = (): unknown => {
+    const listingQueryKey = getListingQueryKey();
+
+    const items = last(
+      queryClient.getQueriesData({
+        queryKey: listingQueryKey
+      })
+    )?.[1];
+
+    return items;
+  };
+
+  const getOptimisticMutationItems = ({
+    method,
+    payload,
+    _meta
+  }: GetOptimisticMutationListingProps<T, TMeta>): object => {
+    const listingQueryKey = getListingQueryKey();
+
+    const hasOnlyOnePage =
+      (optimisticListing?.total || 0) <= (optimisticListing?.limit || 0);
+    const isFormDataPayload = equals(type(payload), 'FormData');
+
+    const items = last(
+      queryClient.getQueriesData({
+        queryKey: listingQueryKey
+      })
+    )?.[1];
+
+    if (equals(Method.POST, method) && !isFormDataPayload && hasOnlyOnePage) {
+      const newItems = append(payload, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    if (equals(Method.DELETE, method) && hasOnlyOnePage) {
+      const itemIndex = items.result.findIndex(({ id }) =>
+        equals(id, _meta.id)
+      );
+      const newItems = remove(itemIndex, 1, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    if (
+      (equals(Method.PUT, method) ||
+        equals(Method.PATCH, method) ||
+        (equals(Method.POST, method) && isFormDataPayload)) &&
+      hasOnlyOnePage
+    ) {
+      const itemIndex = items.result.findIndex(({ id }) =>
+        equals(id, _meta.id)
+      );
+      const item = items.result.find(({ id }) => equals(id, _meta.id));
+      const updatedItem = equals(Method.PUT, method)
+        ? payload
+        : {
+            ...item,
+            ...(isFormDataPayload
+              ? Object.fromEntries(payload.entries())
+              : payload)
+          };
+      const newItems = update(itemIndex, updatedItem, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    return items;
+  };
+  return { getOptimisticMutationItems, getListingQueryKey, getPreviousListing };
+};

package/src/components/Zoom/Zoom.tsx

@@ -1,42 +1,45 @@
+import { type MutableRefObject } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
+import { TransformMatrix } from '@visx/zoom/lib/types';
 
 import { ParentSize } from '../..';
 
 import ZoomContent from './ZoomContent';
-import type { ChildrenProps, MinimapPosition } from './models';
+import type { MinimapPosition, ZoomChildren } from './models';
 
-export interface ZoomProps {
-  children: (args: ChildrenProps) => JSX.Element;
+export interface ZoomProps extends ZoomChildren {
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
   showMinimap?: boolean;
+  contentRef?: MutableRefObject<SVGGElement | null>;
+  transformMatrix?: TransformMatrix;
 }
 
-const initialTransform = {
-  scaleX: 1,
-  scaleY: 1,
-  skewX: 0,
-  skewY: 0,
-  translateX: 0,
-  translateY: 0
-};
-
 const Zoom = ({
   children,
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
   minimapPosition = 'top-left',
-  id = 0
+  id = 0,
+  contentRef,
+  transformMatrix = {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: 0,
+    translateY: 0
+  }
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
       {({ width, height }) => (
         <VisxZoom<SVGSVGElement>
           height={height}
-          initialTransformMatrix={initialTransform}
+          initialTransformMatrix={transformMatrix}
           scaleXMax={scaleMax}
           scaleXMin={scaleMin}
           scaleYMax={scaleMax}
@@ -51,6 +54,7 @@ const Zoom = ({
               showMinimap={showMinimap}
               width={width}
               zoom={zoom}
+              ref={contentRef}
             >
               {children}
             </ZoomContent>

package/src/components/Zoom/ZoomContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type ForwardedRef, forwardRef, MutableRefObject, useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
 
@@ -8,38 +8,38 @@ import ReplayIcon from '@mui/icons-material/Replay';
 
 import { IconButton } from '../Button';
 
-import Minimap from './Minimap';
-import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import type { ChildrenProps, MinimapPosition, ZoomInterface } from './models';
 import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
+import { ZoomChildren, type Dimension, type MinimapPosition, type ZoomInterface } from './models';
 
-export interface Props extends ZoomInterface {
-  children: (args: ChildrenProps) => JSX.Element;
-  height: number;
+export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
-  width: number;
 }
 
-const ZoomContent = ({
-  zoom,
-  width,
-  height,
-  children,
-  showMinimap,
-  minimapPosition,
-  id
-}: Props): JSX.Element => {
+const ZoomContent = forwardRef(
+  (
+    {
+      zoom,
+      width,
+      height,
+      children,
+      showMinimap,
+      minimapPosition,
+      id
+    }: Props,
+    ref?: ForwardedRef<SVGGElement | null>
+  ) : JSX.Element => {
   const { classes } = useZoomStyles();
-  const contentRef = useRef<SVGGElement | null>(null);
+
+  const fallbackRef = useRef<SVGGElement | null>(null)
+  const contentRef = (ref || fallbackRef) as MutableRefObject<SVGGElement | null>;
   const minimapSvgRef = useRef<SVGSVGElement | null>(null);
   const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
+  const [contentClientRect, setContentClientRect] = useState<Dimension | null>(null);
 
   const resizeObserver = new ResizeObserver(() => {
     const contentBoundingClientRect = (
@@ -105,8 +105,8 @@ const ZoomContent = ({
             contentClientRect,
             height,
             transformMatrix: zoom.transformMatrix,
-            setTransformMatrix: zoom.setTransformMatrix,
-            width
+            width,
+            zoom
           })}
         </g>
       </svg>
@@ -135,8 +135,8 @@ const ZoomContent = ({
                   contentClientRect,
                   height,
                   transformMatrix: zoom.transformMatrix,
-                  setTransformMatrix: zoom.setTransformMatrix,
-                  width
+                  width,
+                  zoom
                 })}
               </g>
             </Minimap>
@@ -165,6 +165,6 @@ const ZoomContent = ({
       </div>
     </div>
   );
-};
+});
 
 export default ZoomContent;

package/src/components/Zoom/models.ts

@@ -1,15 +1,12 @@
-import type { ProvidedZoom } from '@visx/zoom/lib/types';
+import { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
 
 export interface ZoomState {
-  transformMatrix: {
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-  };
-  setTransformMatrix?: ProvidedZoom<SVGSVGElement>['setTransformMatrix'];
+  transformMatrix: TransformMatrix;
+}
+
+export interface Dimension {
+  height: number;
+  width: number;
 }
 
 export type MinimapPosition =
@@ -22,11 +19,12 @@ export interface ZoomInterface {
   zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
 }
 
-export interface ChildrenProps extends ZoomState {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-  height: number;
-  width: number;
+export interface ChildrenProps extends ZoomState, Dimension, ZoomInterface {
+  contentClientRect: Dimension | null;
+}
+
+export interface ZoomChildren {
+  children: (args: ChildrenProps) => JSX.Element;
 }
+
+

package/src/api/useMutationQuery/index.test.ts

@@ -1,118 +0,0 @@
-import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
-import fetchMock from 'jest-fetch-mock';
-
-import TestQueryProvider from '../TestQueryProvider';
-
-import useMutationQuery, {
-  Method,
-  UseMutationQueryProps,
-  UseMutationQueryState
-} from '.';
-
-const mockedShowErrorMessage = jest.fn();
-
-interface User {
-  email: string;
-  name: string;
-}
-
-const user: User = {
-  email: 'john@doe.com',
-  name: 'John Doe'
-};
-
-jest.mock('../../Snackbar/useSnackbar', () => ({
-  __esModule: true,
-  default: jest
-    .fn()
-    .mockImplementation(() => ({ showErrorMessage: mockedShowErrorMessage }))
-}));
-
-const renderMutationQuery = <T extends object>(
-  params: UseMutationQueryProps<T>
-): RenderHookResult<UseMutationQueryState<T>, unknown> =>
-  renderHook(() => useMutationQuery<T>(params), {
-    wrapper: TestQueryProvider
-  }) as RenderHookResult<UseMutationQueryState<T>, unknown>;
-
-describe('useFetchQuery', () => {
-  beforeEach(() => {
-    mockedShowErrorMessage.mockReset();
-    fetchMock.resetMocks();
-  });
-
-  it('posts data to an endpoint', async () => {
-    fetchMock.once(JSON.stringify({}));
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(false);
-    });
-  });
-
-  it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", async () => {
-    fetchMock.once(JSON.stringify({ code: 2, message: 'custom message' }), {
-      status: 400
-    });
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(true);
-    });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
-    });
-  });
-
-  it('shows a default failure message via the Snackbar as fallback when posting data to an API', async () => {
-    fetchMock.once(JSON.stringify({}), {
-      status: 400
-    });
-
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(true);
-    });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).toHaveBeenCalledWith(
-        'Something went wrong'
-      );
-    });
-  });
-
-  it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed when posting data to an API', async () => {
-    fetchMock.once(JSON.stringify({}), {
-      status: 400
-    });
-
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      httpCodesBypassErrorSnackbar: [400],
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).not.toHaveBeenCalled();
-    });
-  });
-});