@centreon/ui 26.5.9 → 26.5.11

package/src/Listing/index.tsx

@@ -21,7 +21,6 @@ import {
   pick,
   prop,
   propEq,
-  reduce,
   reject,
   slice,
   subtract,
@@ -146,7 +145,7 @@ const Listing = <
   TRow extends {
     id: RowId;
     internalListingParentId?: RowId;
-    internalListingParentRow: TRow;
+    internalListingParentRow?: TRow;
   }
 >({
   customListingComponent,
@@ -217,22 +216,21 @@ const Listing = <
   const [lastSelectionIndex, setLastSelectionIndex] = useState<number | null>(
     null
   );
-  const containerRef = useRef<HTMLDivElement>();
-  const actionBarRef = useRef<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const actionBarRef = useRef<HTMLDivElement>(null);
 
   const subItemsPivots = useAtomValue(subItemsPivotsAtom);
 
   const allSubItemIds = useMemo(
     () =>
-      reduce<TRow | number, Array<string | number>>(
+      rows.reduce<Array<string | number>>(
         (acc, row) => [
           ...acc,
           ...(row[subItems?.getRowProperty() || ''] || []).map(
             ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
           )
         ],
-        [],
-        rows
+        []
       ),
     [rows, subItems, getId]
   );
@@ -240,28 +238,24 @@ const Listing = <
   const rowsToDisplay = useMemo(
     () =>
       subItems?.enable
-        ? reduce<TRow, Array<TRow>>(
-            (acc, row): Array<TRow> => {
-              if (
-                row[subItems.getRowProperty()] &&
-                subItemsPivots.includes(row.id)
-              ) {
-                return [
-                  ...acc,
-                  row,
-                  ...row[subItems.getRowProperty()].map((subRow) => ({
-                    ...subRow,
-                    internalListingParentId: row.id,
-                    internalListingParentRow: row
-                  }))
-                ];
-              }
-
-              return [...acc, row];
-            },
-            [],
-            rows
-          )
+        ? rows.reduce<Array<TRow>>((acc, row): Array<TRow> => {
+            if (
+              row[subItems.getRowProperty()] &&
+              subItemsPivots.includes(row.id)
+            ) {
+              return [
+                ...acc,
+                row,
+                ...row[subItems.getRowProperty()].map((subRow) => ({
+                  ...subRow,
+                  internalListingParentId: row.id,
+                  internalListingParentRow: row
+                }))
+              ];
+            }
+
+            return [...acc, row];
+          }, [])
         : rows,
     [rows, subItemsPivots, subItems]
   );
@@ -434,7 +428,7 @@ const Listing = <
     );
   };
 
-  const selectRow = (event: MouseEvent, row): void => {
+  const selectRow = (event: React.MouseEvent, row): void => {
     event.preventDefault();
     event.stopPropagation();
     // This prevents unwanted text selection
@@ -700,7 +694,9 @@ const Listing = <
                         <EmptyResult
                           label={
                             labelNoResultFound
-                              ? t(labelNoResultFound)
+                              ? typeof labelNoResultFound === 'string'
+                                ? t(labelNoResultFound)
+                                : labelNoResultFound
                               : t(defaultLabelNoResultFound)
                           }
                         />
@@ -768,9 +764,8 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
     ),
     memoProps: [
       ...memoProps,
-      pick(
-        ['id', 'label', 'disabled', 'width', 'shortLabel', 'sortField'],
-        columns
+      columns.map(
+        pick(['id', 'label', 'disabled', 'width', 'shortLabel', 'sortField'])
       ),
       columnConfiguration,
       limit,

package/src/Listing/useStyleTable.ts

@@ -34,7 +34,7 @@ export const getTextStyleByViewMode = ({
   pick(
     ['color', 'fontSize', 'lineHeight'],
     theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
-  );
+  ) as CSSObject;
 
 const useStyleTable = ({ listingVariant }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);

package/src/Module/index.tsx

@@ -1,4 +1,4 @@
-import type { ThemeOptions } from '@mui/material';
+import type { PaletteOptions } from '@mui/material';
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
 
 import type { QueryClient } from '@tanstack/react-query';
@@ -14,8 +14,8 @@ export interface ModuleProps {
   seedName: string;
   store: ReturnType<typeof createStore>;
   overrideTheme?: {
-    light: Partial<ThemeOptions>;
-    dark: Partial<ThemeOptions>;
+    light: Partial<PaletteOptions>;
+    dark: Partial<PaletteOptions>;
   };
 }
 

package/src/MultiSelectEntries/index.tsx

@@ -61,7 +61,7 @@ const EntryChip = ({
   const { classes } = useStyles();
 
   return (
-    <Grid item size={gridWidth}>
+    <Grid size={gridWidth}>
       <Chip
         className={classes.chip}
         label={<div className={classes.labelChip}>{label}</div>}

package/src/Pagination/Pagination.tsx

@@ -65,7 +65,7 @@ const Pagination = ({
     }
   });
 
-  const pagesCount = Math.ceil(data?.meta.total / limit);
+  const pagesCount = Math.ceil((data?.meta?.total ?? 0) / limit);
   const arePaginationComponentsDisplayed = !equals(pagesCount, 1);
 
   const hasNoElements = useMemo(

package/src/ParentSize/ParentSize.tsx

@@ -1,5 +1,5 @@
 import { Responsive } from '@visx/visx';
-import type { ReactElement } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 
 type ParentSizeState = {
   height: number;
@@ -10,6 +10,7 @@ type ParentSizeState = {
 
 type Props = {
   children: (args: ParentSizeState) => ReactElement;
+  parentSizeStyles?: CSSProperties;
 };
 
 const ParentSize = ({ children, ...props }: Props): JSX.Element => {

package/src/PopoverMenu/index.tsx

@@ -6,7 +6,6 @@ import {
 } from '@mui/material';
 import type { PopperProps } from '@mui/material/Popper';
 
-import { equals, type } from 'ramda';
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -108,17 +107,12 @@ const PopoverMenu = ({
           <Popper
             anchorEl={anchorEl}
             className={classes.popover}
-            nonce={undefined}
-            onResize={(): undefined => undefined}
-            onResizeCapture={(): undefined => undefined}
             open
             placement={popperPlacement}
             {...popperProps}
           >
             <Paper className={tooltipClassName}>
-              {equals(type(children), 'Function')
-                ? children({ close })
-                : children}
+              {typeof children === 'function' ? children({ close }) : children}
             </Paper>
           </Popper>
         </ClickAwayListener>

package/src/RichTextEditor/ContentEditable.tsx

@@ -145,10 +145,12 @@ const ContentEditable = ({
 
   const isTextEmpty =
     isEmpty(root) &&
+    // @ts-expect-error - suppressing pre-existing type mismatch
     !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
     setFocused(false);
+    // @ts-expect-error - suppressing pre-existing type mismatch
     onBlur?.(event);
   };
 

package/src/RichTextEditor/RichTextEditor.tsx

@@ -216,6 +216,7 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
+                // @ts-expect-error - suppressing pre-existing type mismatch
                 setHtmlString={setHtmlString}
               />
             }

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -97,6 +97,7 @@ const FloatingLinkEditor = ({
 
     if (gt(matched.length, 1)) {
       setEditedUrl(
+        // @ts-expect-error - suppressing pre-existing type mismatch
         replace(matched.join(''), matched[dec(matched.length)], value)
       );
 

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -81,6 +81,7 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
 
   const updateToolbar = useCallback(() => {
     const selection = $getSelection();
+    // @ts-expect-error - suppressing pre-existing type mismatch
     const anchorNode = selection?.anchor.getNode();
     const element = equals(anchorNode?.getKey(), 'root')
       ? anchorNode

package/src/RichTextEditor/plugins/ToolbarPlugin/ListButton.tsx

@@ -79,6 +79,7 @@ const ListButton = ({ disabled }: Props): JSX.Element => {
 
   const updateToolbar = useCallback(() => {
     const selection = $getSelection();
+    // @ts-expect-error - suppressing pre-existing type mismatch
     const anchorNode = selection?.anchor.getNode();
     const element = equals(anchorNode?.getKey(), 'root')
       ? anchorNode
@@ -100,6 +101,7 @@ const ListButton = ({ disabled }: Props): JSX.Element => {
       const type = parentList
         ? parentList.getListType()
         : element.getListType();
+      // @ts-expect-error - suppressing pre-existing type mismatch
       setElementList(type);
     }
   }, [editor]);

package/src/Snackbar/index.tsx

@@ -41,7 +41,9 @@ const Snackbar = forwardRef(
   ): JSX.Element => {
     const { classes } = useStyles();
     const { closeSnackbar } = useSnackbar();
-    const timeoutId = useRef<NodeJS.Timeout | undefined>();
+    const timeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined
+    );
 
     useEffect((): void => {
       timeoutId.current = setTimeout(() => {

package/src/SortableItems/Item.tsx

@@ -1,14 +1,15 @@
-import { type ForwardedRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 interface Props extends Record<string, unknown> {
-  Content: (props) => JSX.Element;
+  Content: (props: Record<string, unknown>) => JSX.Element;
   isInDragOverlay?: boolean;
 }
 
-const Item = forwardRef(
-  ({ Content, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-    return <Content {...props} itemRef={ref} />;
-  }
-);
+const Item = forwardRef<HTMLDivElement, Props>(({ Content, ...props }, ref) => {
+  const ContentComponent = Content as React.ComponentType<
+    Record<string, unknown>
+  >;
+  return <ContentComponent {...props} itemRef={ref} />;
+});
 
 export default Item;

package/src/SortableItems/index.tsx

@@ -44,7 +44,7 @@ interface ContentProps {
 }
 
 export interface RootComponentProps {
-  children: JSX.Element | null;
+  children: React.ReactNode;
   isInDragOverlay?: boolean;
 }
 

package/src/ThemeProvider/index.tsx

@@ -121,7 +121,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          backgroundColor: !ownerState.color && theme.palette.divider,
+          backgroundColor: !ownerState.color
+            ? theme.palette.divider
+            : undefined,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -179,7 +181,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiInputBase: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          ...getInputBaseInputStyle(ownerState),
+          ...(getInputBaseInputStyle(ownerState) as Record<string, unknown>),
           backgroundColor: theme.palette.background.paper
         })
       }
@@ -271,7 +273,7 @@ const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
     return createTheme(
       mergeDeepRight(getTheme(themeMode || ThemeMode.light), {
         palette: overrideThemeByMode || {}
-      })
+      }) as ThemeOptions
     );
   }, [themeMode, overrideTheme]);
 

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
+import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -80,8 +81,8 @@ const PickerDateWithLabel = ({
         changeDate={changeDate}
         date={date}
         disabled={disabled}
-        maxDate={maxDate}
-        minDate={minDate}
+        maxDate={maxDate as (Date & Dayjs) | undefined}
+        minDate={minDate as (Date & Dayjs) | undefined}
         property={property}
       />
     </div>

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -85,7 +85,7 @@ const SelectedTimePeriod = ({
               }
             >
               {
-                cond<number, string>([
+                cond<[number], string>([
                   [lte(theme.breakpoints.values.md), always(largeName)],
                   [T, always(name)]
                 ])(width) as string

package/src/TimePeriods/timePeriodsAtoms.ts

@@ -27,7 +27,7 @@ export const getNewCustomTimePeriod = ({
     .duration(dayjs(end).diff(dayjs(start)))
     .asDays();
 
-  const timelineEventsLimit = cond<number, number>([
+  const timelineEventsLimit = cond<[number], number>([
     [gte(1), always(20)],
     [gte(7), always(100)],
     [T, always(500)]

package/src/TimePeriods/useSortTimePeriods.ts

@@ -12,7 +12,7 @@ const useSortTimePeriods = (
 
     const numberOfDays = dayjs.duration(dayjs(end).diff(dayjs(start))).asDays();
 
-    const timelineEventsLimit = cond<number, number>([
+    const timelineEventsLimit = cond<[number], number>([
       [gte(1), always(20)],
       [gte(7), always(100)],
       [T, always(500)]

package/src/Typography/Subtitle.tsx

@@ -30,7 +30,9 @@ const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
           followCursor={false}
           label={
             containsSeveralSecondaryLabels
-              ? secondaryLabel.map((label) => <p key={label}>{t(label)}</p>)
+              ? (secondaryLabel as Array<string>).map((label) => (
+                  <p key={label}>{t(label)}</p>
+                ))
               : t(secondaryLabel)
           }
           placement="right"

package/src/Typography/story.utils.tsx

@@ -5,6 +5,7 @@ import {
   CardHeader,
   Stack,
   Typography,
+  type TypographyVariant,
   useTheme
 } from '@mui/material';
 
@@ -29,7 +30,7 @@ const TypographyStory = (): JSX.Element => {
   const { classes } = useStyles();
   const { typography } = useTheme();
 
-  const variants = [
+  const variants: Array<TypographyVariant> = [
     'h1',
     'h2',
     'h3',
@@ -77,7 +78,7 @@ const TypographyStory = (): JSX.Element => {
                       {key}
                     </Typography>
                     <Typography color="text.secondary" variant="body2">
-                      {value}
+                      {value as string}
                     </Typography>
                   </Box>
                 ))}

package/src/Wizard/ActionsBar.tsx

@@ -45,7 +45,7 @@ const ActionsBar = ({
       direction="row"
       justifyContent="flex-end"
     >
-      <Grid item>
+      <Grid>
         {!isFirstStep && (
           <Button
             aria-label={labelPrevious}
@@ -56,7 +56,7 @@ const ActionsBar = ({
           </Button>
         )}
       </Grid>
-      <Grid item>
+      <Grid>
         <Button
           aria-label={labelNextFinish}
           color="primary"

package/src/api/QueryProvider.tsx

@@ -8,8 +8,7 @@ export const client = new QueryClient({
     queries: {
       gcTime: defaultCacheTime,
       refetchOnWindowFocus: false,
-      staleTime: defaultCacheTime,
-      suspense: true
+      staleTime: defaultCacheTime
     }
   }
 });

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -110,14 +110,16 @@ const getConditionsSearchQueryParameterValue = (
             ];
           }
 
-          return toPairs(values || {}).map(([operator, operatorValue]) => ({
+          return (toPairs as (obj: object) => Array<[string, unknown]>)(
+            values || {}
+          ).map(([operator, operatorValue]) => ({
             [listField]: {
               [operator]: operatorValue
             }
           }));
         })
       )
-    };
+    } as { $or: Array<Record<string, unknown>> };
   };
 
   return {

package/src/api/useGraphQuery/index.ts

@@ -35,6 +35,7 @@ interface UseMetricsQueryProps {
     timePeriodType: number;
   };
   isEnabled?: boolean;
+  enforceIsEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -101,7 +102,8 @@ const useGraphQuery = ({
   refreshCount,
   bypassQueryParams = false,
   prefix,
-  isEnabled = true
+  isEnabled = true,
+  enforceIsEnabled
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -159,9 +161,10 @@ const useGraphQuery = ({
     ],
     queryOptions: {
       enabled:
-        areResourcesFullfilled(resources) &&
-        !isEmpty(definedMetrics) &&
-        isEnabled,
+        enforceIsEnabled ??
+        (areResourcesFullfilled(resources) &&
+          !isEmpty(definedMetrics) &&
+          isEnabled),
       refetchInterval: refreshInterval,
       suspense: false
     },
@@ -183,7 +186,9 @@ const useGraphQuery = ({
       : data.current.metrics.filter(({ metric_id }) => {
           return pipe(
             pluck('excludedMetrics'),
-            flatten,
+            flatten as unknown as (
+              list: Array<unknown>
+            ) => ReadonlyArray<number>,
             includes(metric_id),
             not
           )(metrics);
@@ -273,7 +278,7 @@ const useGraphQuery = ({
           base: data.current.base,
           title: ''
         },
-        metrics: getFormattedMetrics(),
+        metrics: getFormattedMetrics() ?? [],
         times: data.current.times
       }
     : undefined;

package/src/api/useMutationQuery/index.ts

@@ -129,7 +129,7 @@ const useMutationQuery = <T extends object, TMeta>({
         const listingQueryKey = getListingQueryKey();
         queryClient.setQueriesData(
           { queryKey: listingQueryKey },
-          context.previousListing
+          (context as { previousListing: unknown })?.previousListing
         );
       }
 
@@ -150,7 +150,11 @@ const useMutationQuery = <T extends object, TMeta>({
           return { previousListing };
         }
       : onMutate,
-    onSettled,
+    onSettled: onSettled as UseMutationOptions<
+      T | ResponseError,
+      ResponseError,
+      Variables<TMeta, T>
+    >['onSettled'],
     onSuccess: (data, variables, context) => {
       if (optimisticListing?.enabled) {
         const isQueryKeyArray = equals(
@@ -162,20 +166,20 @@ const useMutationQuery = <T extends object, TMeta>({
           : [optimisticListing?.queryKey];
 
         queryClient.invalidateQueries({
-          queryKey: listingQueryKey
+          queryKey: listingQueryKey as Array<string>
         });
       }
 
-      if (data?.isError) {
+      if ((data as ResponseError)?.isError) {
         if (optimisticListing?.enabled) {
           const listingQueryKey = getListingQueryKey();
           queryClient.setQueriesData(
             { queryKey: listingQueryKey },
-            context.previousListing
+            (context as { previousListing: unknown })?.previousListing
           );
         }
 
-        onError?.(data, variables, context);
+        onError?.(data as ResponseError, variables, context);
 
         return;
       }
@@ -209,7 +213,7 @@ const useMutationQuery = <T extends object, TMeta>({
     ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
     isMutating: queryData.isPending
-  };
+  } as unknown as UseMutationQueryState<T, TMeta>;
 };
 
 export default useMutationQuery;