@centreon/ui 24.4.1-MON-24518-status-grid.15 → 24.4.1-MON-fix-same-version.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-24518-status-grid.15",
+  "version": "24.4.1-MON-fix-same-version.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -7,7 +7,6 @@ export const useHeatMapStyles = makeStyles()((theme) => ({
   heatMapTile: {
     alignItems: 'center',
     aspectRatio: '1 / 1',
-    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     justifyContent: 'center',
     width: '100%'

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
-import { T, equals, gt, lt } from 'ramda';
+import { equals, gt, lt } from 'ramda';
 
 import { Box } from '@mui/material';
 
@@ -20,8 +20,7 @@ const ResponsiveHeatMap = <TData,>({
   tiles,
   arrowClassName,
   tooltipContent,
-  tileSizeFixed,
-  displayTooltipCondition = T
+  tileSizeFixed
 }: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
 
@@ -74,15 +73,12 @@ const ResponsiveHeatMap = <TData,>({
               tooltip: classes.heatMapTooltip
             }}
             followCursor={false}
-            label={
-              displayTooltipCondition?.(data) &&
-              tooltipContent?.({
-                backgroundColor,
-                data,
-                id,
-                isSmallestSize
-              })
-            }
+            label={tooltipContent?.({
+              backgroundColor,
+              data,
+              id,
+              isSmallestSize
+            })}
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>

package/src/Graph/HeatMap/model.ts

@@ -21,7 +21,6 @@ export interface HeatMapProps<TData> {
     data,
     isSmallestSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
-  displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;
   tiles: Array<Tile<TData>>;
   tooltipContent?: ({

package/src/Graph/LineChart/index.stories.tsx

@@ -352,6 +352,9 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -17,7 +17,6 @@ const renderMultiAutocompleteField = (): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
-        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -45,7 +45,6 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
-        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -32,7 +32,6 @@ import useFetchQuery from '../../../../api/useFetchQuery';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
-  baseEndpoint?: string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -61,7 +60,6 @@ const ConnectedAutocompleteField = (
     displayOptionThumbnail,
     queryKey,
     allowUniqOption,
-    baseEndpoint,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -89,7 +87,6 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
       ListingModel<TData>
     >({
-      baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({

package/src/InputField/Text/index.tsx

@@ -80,7 +80,6 @@ export type Props = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
-  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
@@ -113,7 +112,6 @@ const TextField = forwardRef(
       autoSizeCustomPadding,
       defaultValue,
       required = false,
-      containerClassName,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -144,10 +142,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box
-        className={containerClassName}
-        sx={{ width: autoSize ? 'auto' : '100%' }}
-      >
+      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}

package/src/ThemeProvider/palettes.ts

@@ -143,7 +143,7 @@ declare module '@mui/material/Badge' {
 export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#DFD2B9',
+    acknowledgedBackground: '#F5F1E9',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -153,7 +153,7 @@ export const lightPalette: PaletteOptions = {
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#E5D8F3',
+    inDowntimeBackground: '#F0E9F8',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -283,7 +283,7 @@ export const lightPalette: PaletteOptions = {
 export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#745F35',
+    acknowledgedBackground: '#67532C',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -293,7 +293,7 @@ export const darkPalette: PaletteOptions = {
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#512980',
+    inDowntimeBackground: '#4B2352',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },

package/src/TimePeriods/index.stories.tsx

@@ -88,20 +88,27 @@ const args = {
   ]
 };
 
+const parameters = {
+  chromatic: { diffThreshold: 0.1 }
+};
+
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args
+  args,
+  parameters
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -109,5 +116,6 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  }
+  },
+  parameters
 };

package/src/api/buildListingEndpoint/models.ts

@@ -52,8 +52,7 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni'
-  | '$rg';
+  | '$ni';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals, isNil, startsWith } from 'ramda';
+import { equals } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -22,7 +22,6 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -43,18 +42,10 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET',
-  baseEndpoint = './api/latest'
+  method = 'GET'
 }: CustomFetchProps<T>): Promise<T | ResponseError> => {
   const defaultOptions = { headers, method, signal };
 
-  const formattedEndpoint =
-    !isNil(baseEndpoint) &&
-    !startsWith(baseEndpoint, endpoint) &&
-    !startsWith('./api/internal.php', endpoint)
-      ? `${baseEndpoint}${endpoint}`
-      : endpoint;
-
   const options = isMutation
     ? {
         ...defaultOptions,
@@ -62,7 +53,7 @@ export const customFetch = <T>({
       }
     : defaultOptions;
 
-  return fetch(formattedEndpoint, options)
+  return fetch(endpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {

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;
@@ -58,17 +57,13 @@ 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> =>
       customFetch<T>({
-        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -101,7 +96,6 @@ const useFetchQuery = <T extends object>({
     queryClient.prefetchQuery({
       queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
-          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -143,7 +137,6 @@ const useFetchQuery = <T extends object>({
     return queryClient.fetchQuery({
       queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
-          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -161,10 +154,6 @@ const useFetchQuery = <T extends object>({
     [queryData.data]
   );
 
-  if (!isNil(data)) {
-    dataRef.current = data;
-  }
-
   const errorData = queryData.data as ResponseError | undefined;
 
   useEffect(() => {
@@ -182,7 +171,7 @@ const useFetchQuery = <T extends object>({
 
   return {
     ...omit(['data', 'error'], queryData),
-    data: dataRef.current,
+    data,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,

package/src/api/useMutationQuery/index.ts

@@ -23,7 +23,6 @@ export enum Method {
 }
 
 export type UseMutationQueryProps<T, TMeta> = {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -69,8 +68,7 @@ const useMutationQuery = <T extends object, TMeta>({
   method,
   onMutate,
   onError,
-  onSuccess,
-  baseEndpoint
+  onSuccess
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
@@ -85,7 +83,6 @@ const useMutationQuery = <T extends object, TMeta>({
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
-        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,

package/src/utils/useInfiniteScrollListing.ts

@@ -5,42 +5,33 @@ import { PrimitiveAtom, useAtom } from 'jotai';
 import { JsonDecoder } from 'ts.data.json';
 
 import {
-  QueryParameter,
   buildListingEndpoint,
   useFetchQuery,
   useIntersectionObserver
 } from '@centreon/ui';
 
 import type { Listing } from '../api/models';
-import { Parameters } from '../api/buildListingEndpoint/models';
+
+const limit = 100;
 
 interface UseInfiniteScrollListing<T> {
   elementRef: (node) => void;
   elements: Array<T>;
   isLoading: boolean;
-  total?: number;
 }
 
 interface UseInfiniteScrollListingProps<T> {
-  customQueryParameters?: Array<QueryParameter>;
-  decoder?: JsonDecoder.Decoder<Listing<T>>;
+  decoder: JsonDecoder.Decoder<Listing<T>>;
   endpoint: string;
-  limit?: number;
   pageAtom: PrimitiveAtom<number>;
-  parameters?: Parameters;
   queryKeyName: string;
-  suspense?: boolean;
 }
 
 export const useInfiniteScrollListing = <T>({
   queryKeyName,
   endpoint,
   decoder,
-  pageAtom,
-  suspense = true,
-  parameters,
-  customQueryParameters,
-  limit = 100
+  pageAtom
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -55,15 +46,14 @@ export const useInfiniteScrollListing = <T>({
     getEndpoint: (params) =>
       buildListingEndpoint({
         baseEndpoint: endpoint,
-        customQueryParameters,
-        parameters: { limit, page: params?.page || page, ...parameters }
+        parameters: { limit, page: params?.page || page }
       }),
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      suspense: suspense && equals(page, 1)
+      suspense: equals(page, 1)
     }
   });
 
@@ -108,14 +98,9 @@ export const useInfiniteScrollListing = <T>({
     });
   }, [data]);
 
-  useEffect(() => {
-    return () => setPage(1);
-  }, []);
-
   return {
     elementRef,
     elements: elements.current || [],
-    isLoading,
-    total: data?.meta.total
+    isLoading
   };
 };

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,7 +1,6 @@
 import dayjs from 'dayjs';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
@@ -21,8 +20,6 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
-dayjs.extend(localizedFormat);
-
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;