@centreon/ui 24.4.4 → 24.4.6

package/src/api/useFetchQuery/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import 'ulog';
 import {
@@ -10,14 +10,13 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { has, includes, isNil, not, omit } from 'ramda';
+import { has, includes, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
 
 export interface UseFetchQueryProps<T> {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -26,9 +25,7 @@ export interface UseFetchQueryProps<T> {
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: {
-    suspense?: boolean;
-  } & Omit<
+  queryOptions?: Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
@@ -36,12 +33,11 @@ export interface UseFetchQueryProps<T> {
 
 export type UseFetchQueryState<T> = {
   data?: T;
-  error: Omit<ResponseError, 'isError'> | null;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data' | 'error'>;
+} & Omit<QueryObserverBaseResult, 'data'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -58,17 +54,14 @@ const useFetchQuery = <T extends object>({
   fetchHeaders,
   isPaginated,
   queryOptions,
-  httpCodesBypassErrorSnackbar = [],
-  baseEndpoint
+  httpCodesBypassErrorSnackbar = []
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
-  const dataRef = useRef<T | undefined>(undefined);
-
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>({
-    queryFn: ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>(
+    getQueryKey(),
+    ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
-        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -76,9 +69,10 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    queryKey: getQueryKey(),
-    ...queryOptions
-  });
+    {
+      ...queryOptions
+    }
+  );
 
   const queryClient = useQueryClient();
 
@@ -98,19 +92,18 @@ const useFetchQuery = <T extends object>({
   };
 
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery(
+      queryKey,
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
-          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey
-    });
+        })
+    );
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -140,19 +133,18 @@ const useFetchQuery = <T extends object>({
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery(
+      getQueryKey(),
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
-          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey: getQueryKey()
-    });
+        })
+    );
   };
 
   const data = useMemo(
@@ -161,28 +153,21 @@ const useFetchQuery = <T extends object>({
     [queryData.data]
   );
 
-  if (!isNil(data)) {
-    dataRef.current = data;
-  }
-
   const errorData = queryData.data as ResponseError | undefined;
 
   useEffect(() => {
     return (): void => {
-      queryClient.cancelQueries({ queryKey: getQueryKey() });
+      queryClient.cancelQueries(getQueryKey());
     };
   }, []);
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['data', 'error'], queryData),
-    data: dataRef.current,
+    ...omit(['data'], queryData),
+    data,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,

package/src/api/useMutationQuery/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes, omit } from 'ramda';
+import { includes } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -23,7 +23,6 @@ export enum Method {
 }
 
 export type UseMutationQueryProps<T, TMeta> = {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -31,33 +30,14 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-  onError?: (
-    error: ResponseError,
-    variables: T & { _meta: TMeta },
-    context: unknown
-  ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
-  onSuccess?: (
-    data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
-    context: unknown
-  ) => unknown;
-} & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
->;
+} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
-  UseMutationResult<T | ResponseError>,
-  'isError'
-> & {
+export type UseMutationQueryState<T> = {
   isError: boolean;
   isMutating: boolean;
-};
+} & UseMutationResult<T | ResponseError>;
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -69,8 +49,7 @@ const useMutationQuery = <T extends object, TMeta>({
   method,
   onMutate,
   onError,
-  onSuccess,
-  baseEndpoint
+  onSuccess
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
@@ -78,14 +57,11 @@ const useMutationQuery = <T extends object, TMeta>({
     T | ResponseError,
     ResponseError,
     T & { _meta: TMeta }
-  >({
-    mutationFn: (
-      _payload: T & { _meta: TMeta }
-    ): Promise<T | ResponseError> => {
+  >(
+    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
-        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -99,10 +75,12 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    onError,
-    onMutate,
-    onSuccess
-  });
+    {
+      onError,
+      onMutate,
+      onSuccess
+    }
+  );
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -119,17 +97,14 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['isError'], queryData),
+    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isPending
+    isMutating: queryData.isLoading
   };
 };
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -22,7 +22,7 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete?: {
+  labelsDelete: {
     cancel: string;
     confirm: {
       label: string;
@@ -76,7 +76,7 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              {onDelete && labelsDelete && (
+              {onDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}

package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts

@@ -7,8 +7,6 @@ import {
   RoleResource
 } from '../AccessRights.resource';
 
-faker.seed(42);
-
 export const rolesMock = (): Array<RoleResource> => [
   { role: 'viewer' },
   { role: 'editor' }

package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts

@@ -36,6 +36,6 @@ export const createInitialState = (
           contactAccessRight,
           state: 'unchanged',
           stateHistory: []
-        }) as ContactAccessRightStateResource
+        } as ContactAccessRightStateResource)
     )
     .sort(sortOnAddedStateFirstAndContactName);

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,8 +1,7 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, number, object } from 'yup';
+import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -85,8 +84,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: object({
-        description: string()
+      validationSchema: Yup.object().shape({
+        description: Yup.string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -94,19 +93,17 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        globalRefreshInterval: object({
-          interval: number().when('type', ([type], schema) => {
-            if (equals(type, 'manual')) {
-              schema
-                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
-                .required(t(labelRequired) as string);
-            }
-
-            return schema.nullable();
+        globalRefreshInterval: Yup.object().shape({
+          interval: Yup.number().when('type', {
+            is: 'global',
+            otherwise: Yup.number().nullable(),
+            then: Yup.number()
+              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+              .required(t(labelRequired) as string)
           }),
-          type: string()
+          type: Yup.string()
         }),
-        name: string()
+        name: Yup.string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))

package/src/index.ts

@@ -162,5 +162,4 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );

package/src/screens/dashboard/DashboardsDetail.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+
+import { Meta } from '@storybook/react';
+
+import {
+  Add as AddIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
+
+import {
+  Button,
+  IconButton,
+  Menu,
+  PageHeader,
+  PageLayout
+} from '../../components';
+
+const meta: Meta = {
+  args: {
+    actions: {}
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards detail'
+};
+
+export default meta;
+
+const DefaultView = (args): ReactElement => {
+  const { data } = args;
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Menu>
+              <Menu>
+                <Menu.Button />
+                <Menu.Items>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <Button
+                      icon={<AddIcon />}
+                      iconVariant="start"
+                      variant="ghost"
+                    >
+                      Add item
+                    </Button>
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            </PageHeader.Menu>
+            <PageHeader.Title
+              description={data.dashboard.description}
+              title={data.dashboard.name}
+            />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <IconButton
+            aria-label="edit"
+            data-testid="edit"
+            icon={<SettingsIcon />}
+            size="small"
+            variant="ghost"
+          />
+          <IconButton
+            aria-label="share"
+            data-testid="share"
+            icon={<ShareIcon />}
+            size="small"
+            variant="ghost"
+          />
+        </PageLayout.Actions>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboard: {
+        description:
+          'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
+        id: 1,
+        name: 'Dashboard 1'
+      }
+    }
+  },
+  render: DefaultView
+};
+
+export const AsEditLayoutState = {
+  args: {
+    ...Default.args
+  },
+  render: DefaultView
+};