@centreon/ui 26.5.9 → 26.5.11

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 };
 };

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

@@ -22,7 +22,7 @@ const request = jest.fn();
 
 const renderUseRequest = (
   requestParams: RequestParams<Result>
-): RenderHookResult<unknown, RequestResult<Result>> =>
+): RenderHookResult<RequestResult<Result>, unknown> =>
   renderHook(() => useRequest(requestParams));
 
 describe(useRequest, () => {

package/src/api/useRequest/index.ts

@@ -64,7 +64,7 @@ const useRequest = <TResult>({
       .catch((error) => {
         setSending(false);
         if (axios.isCancel(error)) {
-          warnLog(error);
+          warnLog(error as unknown as string);
 
           throw error;
         }

package/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import { type ReactElement, type ReactNode, useMemo } from 'react';
 
 import type { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import type { DataTestAttributes } from '../../@types/data-attributes';
-import { button } from './Button.module.css';
+import styles from './Button.module.css';
 
 const muiVariantMap: Record<
   Required<ButtonProps>['variant'],
@@ -58,7 +58,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={`${button} ${className}`}
+      className={`${styles.button} ${className}`}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/CrudPage/Actions/Filters.tsx

@@ -19,7 +19,7 @@ const Filters: React.FC<Props> = ({ label, filters }: Props): JSX.Element => {
       title={label}
       tooltipClassName={classes.tooltipFilters}
     >
-      {isValidElement(filters) ? filters : <div />}
+      {isValidElement(filters) ? () => filters : () => <div />}
     </PopoverMenu>
   );
 };

package/src/components/CrudPage/Actions/useSearch.tsx

@@ -9,7 +9,7 @@ interface UseSearchState {
 }
 
 export const useSearch = (): UseSearchState => {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const [search, setSearch] = useAtom(searchAtom);
 

package/src/components/CrudPage/Columns/Actions.tsx

@@ -17,7 +17,7 @@ import {
 interface Props<TData> {
   row: TData & {
     internalListingParentId?: number;
-    internalListingParentRow: TData;
+    internalListingParentRow: TData & { id: number };
   };
 }
 
@@ -64,7 +64,7 @@ const Actions = <TData extends { id: number; name: string }>({
         <IconButton
           data-testid={
             row.internalListingParentRow
-              ? `edit-${row.internalListingParentRow.id}-${row.id}`
+              ? `edit-${(row.internalListingParentRow as TData & { id: number }).id}-${row.id}`
               : `edit-${row.id}`
           }
           icon={<EditOutlined color="primary" fontSize="small" />}

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -36,7 +36,7 @@ export const CrudPageRoot = <
   deleteItem,
   form
 }: CrudPageRootProps<TData, TFilters, TItem, TItemForm>): JSX.Element => {
-  const previousCanDeleteSubItemRef = useRef<boolean | undefined>();
+  const previousCanDeleteSubItemRef = useRef<boolean | undefined>(undefined);
   const previousFormLabelButtonsRef = useRef<unknown | null>(null);
   const { isDataEmpty, hasItems, isLoading, items, total } = useGetItems<
     TData,

package/src/components/CrudPage/DeleteModal.tsx

@@ -1,7 +1,7 @@
 import { Box, CircularProgress, Typography } from '@mui/material';
 
 import { useAtom } from 'jotai';
-import { useCallback, useRef } from 'react';
+import { type ReactElement, useCallback, useRef } from 'react';
 
 import { Button } from '../Button';
 import { Modal } from '../Modal';
@@ -35,7 +35,9 @@ const DeleteModal = <TData extends { id: number; name: string }>({
   }, [setItemToDelete]);
 
   const confirm = useCallback(() => {
-    deleteItem(itemToDeleteRef.current).then(close);
+    if (itemToDeleteRef.current) {
+      deleteItem(itemToDeleteRef.current).then(close);
+    }
   }, [close, deleteItem]);
 
   if (isOpen) {
@@ -46,14 +48,20 @@ const DeleteModal = <TData extends { id: number; name: string }>({
     <Modal onClose={close} open={isOpen} size={modalSize}>
       <Modal.Header>
         {isAFunction(labels.title)
-          ? labels.title(itemToDeleteRef.current as TData)
-          : labels.title}
+          ? (labels.title as (item: ItemToDelete) => string | ReactElement)(
+              itemToDeleteRef.current as TData
+            )
+          : (labels.title as string | ReactElement)}
       </Modal.Header>
       <Modal.Body>
         <Typography>
           {isAFunction(labels.description)
-            ? labels.description(itemToDeleteRef.current as TData)
-            : labels.description}
+            ? (
+                labels.description as (
+                  item: ItemToDelete
+                ) => string | ReactElement
+              )(itemToDeleteRef.current as TData)
+            : (labels.description as string | ReactElement)}
         </Typography>
       </Modal.Body>
       <Box

package/src/components/CrudPage/Form/AddModal.tsx

@@ -1,18 +1,26 @@
 import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNotNil } from 'ramda';
+import { isNotNil } from 'ramda';
 import { useCallback, useMemo } from 'react';
 
 import { Modal } from '../../Modal';
 import { askBeforeCloseFormModalAtom, openFormModalAtom } from '../atoms';
 import Buttons from './Buttons';
 
-const AddModal = ({ title, Form, modalSize = 'medium' }): JSX.Element => {
+const AddModal = ({
+  title,
+  Form,
+  modalSize = 'medium'
+}: {
+  title: string;
+  Form: (props: { Buttons: () => JSX.Element }) => JSX.Element;
+  modalSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+}): JSX.Element => {
   const setAskBeforeCloseFormModal = useSetAtom(askBeforeCloseFormModalAtom);
 
   const openFormModal = useAtomValue(openFormModalAtom);
 
   const isModalOpen = useMemo(
-    () => isNotNil(openFormModal) && equals('add', openFormModal),
+    () => isNotNil(openFormModal) && openFormModal === 'add',
     [openFormModal]
   );
 
@@ -22,7 +30,11 @@ const AddModal = ({ title, Form, modalSize = 'medium' }): JSX.Element => {
   );
 
   return (
-    <Modal onClose={openAskBeforeClose} open={isModalOpen} size={modalSize}>
+    <Modal
+      onClose={openAskBeforeClose}
+      open={isModalOpen}
+      size={modalSize as 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen'}
+    >
       <Modal.Header>{title}</Modal.Header>
       <Modal.Body>
         <Form Buttons={Buttons} />

package/src/components/CrudPage/Form/UpdateModal.tsx

@@ -1,5 +1,5 @@
 import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNotNil } from 'ramda';
+import { isNotNil } from 'ramda';
 import { useCallback, useMemo } from 'react';
 
 import { Modal } from '../..';
@@ -33,7 +33,7 @@ const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
   });
 
   const isModalOpen = useMemo(
-    () => isNotNil(openFormModal) && !equals('add', openFormModal),
+    () => isNotNil(openFormModal) && openFormModal !== 'add',
     [openFormModal]
   );
 

package/src/components/CrudPage/Listing.tsx

@@ -47,6 +47,7 @@ const Listing = <TData extends { id: number; name: string }>({
       actions={<Actions filters={filters} labels={labels} />}
       columns={listingColumns}
       currentPage={page}
+      isActionBarVisible
       limit={limit}
       loading={isLoading}
       onLimitChange={setLimit}
@@ -54,7 +55,7 @@ const Listing = <TData extends { id: number; name: string }>({
       onSort={changeSort}
       rows={rows}
       sortField={sortField}
-      sortOrder={sortOrder}
+      sortOrder={sortOrder as 'asc' | 'desc' | undefined}
       subItems={subItems}
       totalRows={total}
     />

package/src/components/CrudPage/hooks/useDeleteItem.ts

@@ -40,7 +40,11 @@ export const useDeleteItem = ({
     onSuccess: (_data, { _meta }) => {
       queryClient.invalidateQueries({ queryKey: [listingQueryKey] });
       showSuccessMessage(
-        isAFunction(successMessage) ? successMessage(_meta) : successMessage
+        (isAFunction(successMessage)
+          ? (successMessage as (item: ItemToDelete) => string | ReactElement)(
+              _meta as ItemToDelete
+            )
+          : successMessage) as string
       );
     }
   });

package/src/components/CrudPage/hooks/useGetItem.ts

@@ -1,4 +1,4 @@
-import { equals, isNotNil } from 'ramda';
+import { isNotNil } from 'ramda';
 
 import { useFetchQuery } from '../../..';
 import type { GetItem } from '../models';
@@ -22,10 +22,10 @@ export const useGetItem = <
 }): UseGetItem<TItemForm> => {
   const { data, isLoading } = useFetchQuery<TItem>({
     decoder,
-    getEndpoint: () => baseEndpoint(id),
+    getEndpoint: () => baseEndpoint(id as number),
     getQueryKey: () => [itemQueryKey, id],
     queryOptions: {
-      enabled: isNotNil(id) && !equals('add', id),
+      enabled: isNotNil(id) && id !== 'add',
       suspense: false
     }
   });

package/src/components/DataTable/DataListing.tsx

@@ -3,4 +3,4 @@ import type { RowId } from '../../Listing/models';
 
 export const DataListing = <TRow extends { id: RowId }>(
   props: ListingProps<TRow>
-): JSX.Element => <Listing<TRow> {...props} />;
+): JSX.Element => <Listing {...(props as ListingProps<TRow>)} />;

package/src/components/ExpandableContainer/ExpandableContainer.tsx

@@ -42,6 +42,7 @@ const ExpandableContainer = ({ children }: Props) => {
       {children(reducedChildrenData)}
       {isExpanded && (
         <Modal
+          // @ts-expect-error - MUI Dialog classes prop passed through spread but not in ModalProps
           classes={{
             paper: classes.papper
           }}

package/src/components/Form/AccessRights/Actions/Actions.tsx

@@ -32,7 +32,7 @@ const Actions = ({
   });
 
   const onCancel = (): void => {
-    cancel({ dirty, values: formattedValues });
+    cancel?.({ dirty, values: formattedValues });
   };
 
   return (

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -30,10 +30,7 @@ export const useActions = ({ submit, clear }: Props): UseActionsState => {
   const save = (): void => {
     submit(
       values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
-    )?.then((isError) => {
-      if (isError) {
-        return;
-      }
+    )?.then(() => {
       clear();
     });
   };

package/src/components/Form/AccessRights/List/StateChip.tsx

@@ -12,7 +12,7 @@ const StateChip = ({ label, state }: Props): JSX.Element => {
   const { classes, cx } = useListStyles();
 
   return (
-    <div className={cx(classes.state)}>
+    <div className={cx((classes as Record<string, string>).state)}>
       <Chip
         className={classes.stateChip}
         data-state={state}

package/src/components/Form/AccessRights/Stats/Stats.tsx

@@ -11,7 +11,7 @@ interface Props {
   labels: Labels['list'];
 }
 
-const Stats = ({ labels }: Props): JSX.Element => {
+const Stats = ({ labels }: Props): JSX.Element | null => {
   const { t } = useTranslation();
   const { hasStats, addedItems, updatedItems, removedItems } =
     useAtomValue(statsDerivedAtom);

package/src/components/Form/AccessRights/common/RoleSelectField.tsx

@@ -1,5 +1,3 @@
-import type { SelectChangeEvent } from '@mui/material';
-
 import SelectField, { type SelectEntry } from '../../../../InputField/Select';
 import { useRoleSelectField } from './RoleSelectField.styles';
 
@@ -21,18 +19,18 @@ const RoleSelectField = ({
   disabled
 }: Props): JSX.Element => {
   const { classes } = useRoleSelectField();
-  const change = (event: SelectChangeEvent): void => {
-    onChange(event.target.value as string);
-  };
 
   return (
     <div className={classes.roleContainer}>
       <SelectField
         dataTestId={testId}
         disabled={disabled}
+        formControlProps={{}}
         fullWidth
         label={label}
-        onChange={change}
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
         options={roles}
         selectedOptionId={value}
         size="small"

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

@@ -1,7 +1,7 @@
 import { equals } from 'ramda';
 import { type ReactElement, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { number, object, string } from 'yup';
+import { number, object, type Schema, string } from 'yup';
 
 import { Form, type FormProps } from '../../../Form';
 import { InputType } from '../../../Form/Inputs/models';
@@ -109,7 +109,7 @@ const DashboardForm = ({
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))
           .required(t(labelRequired) as string)
-      })
+      }) as unknown as Schema<DashboardResource>
     }),
     [resource, labels, onSubmit, showRefreshIntervalFields, t]
   );

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -1,25 +1,29 @@
 import { alpha } from '@mui/system';
 
+import type { CSSObject } from 'tss-react';
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   header: {
-    alignItems: 'flex-start',
-    borderBottom: `1px solid ${theme.palette.primary.main}`,
-    display: 'flex',
-    flexDirection: 'row',
-    h1: {
-      ...theme.typography.h5,
+    '& h1': {
+      fontFamily: theme.typography.h5.fontFamily,
+      fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium,
+      letterSpacing: theme.typography.h5.letterSpacing,
+      lineHeight: theme.typography.h5.lineHeight,
       margin: theme.spacing(0, 0, 1.5, 0)
-    },
-    justifyContent: 'space-between',
+    } as CSSObject,
 
-    nav: {
+    '& nav': {
       display: 'flex',
       gap: theme.spacing(1),
       justifyContent: 'flex-end'
-    },
+    } as CSSObject,
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.primary.main}`,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
 
     padding: theme.spacing(0, 0, 1.5, 0)
   },
@@ -39,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
       backgroundColor: theme.palette.header.page.action.background.default,
 
       color: theme.palette.header.page.action.color.default
-    },
+    } as CSSObject,
     display: 'flex',
 
     gap: theme.spacing(2)
@@ -84,28 +88,30 @@ const useStyles = makeStyles()((theme) => ({
   pageHeaderTitle: {
     '& > *': {
       display: 'grid'
-    },
+    } as CSSObject,
     '& > span': {
       alignItems: 'center',
       display: 'flex',
       flexDirection: 'row',
       gap: theme.spacing(2)
-    },
-    alignSelf: 'flex-start',
-    display: 'flex',
-    flexDirection: 'column',
-    h1: {
-      ...theme.typography.h5,
+    } as CSSObject,
+    '& h1': {
+      fontFamily: theme.typography.h5.fontFamily,
+      fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightBold,
+      letterSpacing: theme.typography.h5.letterSpacing,
       lineHeight: '1',
       margin: theme.spacing(0)
-    }
+    } as CSSObject,
+    alignSelf: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column'
   },
   pageHeaderTitleActions: {
     '& > button': {
       opacity: 0.2,
       padding: 0
-    },
+    } as CSSObject,
     alignItems: 'bottom',
     display: 'flex',
     gap: theme.spacing(1),

package/src/components/Menu/useMenu.tsx

@@ -37,9 +37,9 @@ const MenuProvider = ({
     [
       [isMenuOpenAtom, initialIsOpen ?? false],
       [anchorElAtom, null],
-      [onOpenAtom, onOpen],
-      [onCloseAtom, onClose]
-    ],
+      [onOpenAtom, onOpen ?? null],
+      [onCloseAtom, onClose ?? null]
+    ] as unknown as Parameters<typeof useHydrateAtoms>[0],
     { store: menuStore }
   );
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -42,29 +42,34 @@ export const ConfirmationModal = <TAtom,>({
   disabled,
   size
 }: ConfirmationModalProps<TAtom>): JSX.Element => {
-  const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
+  const [atomData, setAtomData] = useAtom(atom);
+
+  const typedAtomData = atomData as Awaited<TAtom> | null;
 
   const closeModal = (): void => {
-    onClose?.(atomData);
+    onClose?.(typedAtomData);
     setAtomData(null);
   };
 
   const formattedLabels = useMemo(() => {
     return {
-      cancel: getLabel({ atomData, label: labels.cancel }),
-      confirm: getLabel({ atomData, label: labels.confirm }),
-      description: getLabel({ atomData, label: labels.description }),
-      title: getLabel({ atomData, label: labels.title })
+      cancel: getLabel({ atomData: typedAtomData, label: labels.cancel }),
+      confirm: getLabel({ atomData: typedAtomData, label: labels.confirm }),
+      description: getLabel({
+        atomData: typedAtomData,
+        label: labels.description
+      }),
+      title: getLabel({ atomData: typedAtomData, label: labels.title })
     };
-  }, [labels, atomData]);
+  }, [labels, typedAtomData]);
 
   const confirm = (): void => {
-    onConfirm?.(atomData);
+    onConfirm?.(typedAtomData);
     setAtomData(null);
   };
 
   const cancel = (): void => {
-    onCancel?.(atomData);
+    onCancel?.(typedAtomData);
     setAtomData(null);
   };
 

package/src/components/Modal/Modal.tsx

@@ -54,9 +54,11 @@ const Modal = ({
       onClose={onClose}
       open={open}
       TransitionComponent={isFullscreen ? Slide : undefined}
-      TransitionProps={{
-        direction: 'up'
-      }}
+      TransitionProps={
+        {
+          direction: 'up'
+        } as Record<string, unknown>
+      }
       {...attr}
     >
       {hasCloseButton && (

package/src/components/Modal/ModalActions.tsx

@@ -28,7 +28,7 @@ const ModalActions = ({
   disabled,
   isFixed
 }: ModalActionsProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes } = useStyles({});
 
   return (
     <div className={classes.modalActions} data-fixed={isFixed}>

package/src/components/Modal/ModalBody.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 
-import { modalBody } from './modal.module.css';
+import styles from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
@@ -8,7 +8,7 @@ export type ModalHeaderProps = {
 
 const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
   return (
-    <div className={modalBody} data-testid="modal-body">
+    <div className={styles.modalBody} data-testid="modal-body">
       {children}
     </div>
   );