@centreon/ui 26.5.8 → 26.5.10

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

@@ -183,7 +183,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 +275,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;

package/src/api/useMutationQuery/useOptimisticMutation.ts

@@ -5,8 +5,8 @@ import { Method } from '.';
 
 interface GetOptimisticMutationListingProps<T, TMeta> {
   method: Method;
-  payload: T;
-  _meta: TMeta;
+  payload: T | undefined;
+  _meta: TMeta | undefined;
 }
 
 export interface OptimisticListing {
@@ -39,7 +39,7 @@ export const useOptimisticMutation = <T, TMeta>({
       ? optimisticListing?.queryKey
       : [optimisticListing?.queryKey];
 
-    return listingQueryKey;
+    return listingQueryKey as Array<string>;
   };
 
   const getPreviousListing = (): unknown => {
@@ -62,9 +62,12 @@ export const useOptimisticMutation = <T, TMeta>({
     const listingQueryKey = getListingQueryKey();
 
     const updatedPayload =
-      payload && 'id' in payload
+      payload && 'id' in (payload as Record<string, unknown>)
         ? payload
-        : { ...payload, id: (optimisticListing?.total ?? 0) + 1 };
+        : {
+            ...(payload as Record<string, unknown>),
+            id: (optimisticListing?.total ?? 0) + 1
+          };
 
     const hasOnlyOnePage =
       (optimisticListing?.total || 0) <= (optimisticListing?.limit || 0);
@@ -74,19 +77,22 @@ export const useOptimisticMutation = <T, TMeta>({
       queryClient.getQueriesData({
         queryKey: listingQueryKey
       })
-    )?.[1];
+    )?.[1] as { result: Array<Record<string, unknown>> } | undefined;
 
     if (equals(Method.POST, method) && !isFormDataPayload && hasOnlyOnePage) {
-      const newItems = append(updatedPayload, items.result);
+      const newItems = append(
+        updatedPayload as Record<string, unknown>,
+        items?.result ?? []
+      );
 
       return { ...items, result: newItems };
     }
 
     if (equals(Method.DELETE, method) && hasOnlyOnePage) {
-      const itemIndex = items.result.findIndex(({ id }) =>
-        equals(id, _meta.id)
+      const itemIndex = items?.result.findIndex(({ id }) =>
+        equals(id, (_meta as Record<string, unknown>)?.id)
       );
-      const newItems = remove(itemIndex, 1, items.result);
+      const newItems = remove(itemIndex ?? 0, 1, items?.result ?? []);
 
       return { ...items, result: newItems };
     }
@@ -97,24 +103,36 @@ export const useOptimisticMutation = <T, TMeta>({
         (equals(Method.POST, method) && isFormDataPayload)) &&
       hasOnlyOnePage
     ) {
-      const itemIndex = items.result.findIndex(({ id }) =>
-        equals(id, _meta.id)
+      const itemIndex = items?.result.findIndex(({ id }) =>
+        equals(id, (_meta as Record<string, unknown>)?.id)
+      );
+      const item = items?.result.find(({ id }) =>
+        equals(id, (_meta as Record<string, unknown>)?.id)
       );
-      const item = items.result.find(({ id }) => equals(id, _meta.id));
       const updatedItem = equals(Method.PUT, method)
         ? updatedPayload
         : {
             ...item,
             ...(isFormDataPayload
-              ? Object.fromEntries(updatedPayload.entries())
+              ? (
+                  Object as unknown as {
+                    fromEntries: (
+                      entries: IterableIterator<[string, FormDataEntryValue]>
+                    ) => Record<string, unknown>;
+                  }
+                ).fromEntries((updatedPayload as unknown as FormData).entries())
               : updatedPayload)
           };
-      const newItems = update(itemIndex, updatedItem, items.result);
+      const newItems = update(
+        itemIndex ?? 0,
+        updatedItem as Record<string, unknown>,
+        items?.result ?? []
+      );
 
       return { ...items, result: newItems };
     }
 
-    return items;
+    return items as object;
   };
   return { getListingQueryKey, getOptimisticMutationItems, getPreviousListing };
 };