@centreon/ui 26.5.14 → 26.7.0

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -10,8 +10,10 @@ import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
 import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
 
 export interface SelectActionListingHeaderCellProps {
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSelectRowsWithCondition: (
+    condition: (row: Record<string, unknown>) => boolean
+  ) => void;
   predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
   selectedRowCount: number;
@@ -46,9 +48,9 @@ const SelectActionListingHeaderCell = ({
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
-          {({ close }): JSX.Element => (
+          {(props): JSX.Element => (
             <PredefinedSelectionList
-              close={close}
+              close={props?.close ?? ((): void => undefined)}
               onSelectRowsWithCondition={onSelectRowsWithCondition}
               predefinedRowsSelection={predefinedRowsSelection}
             />

package/src/Listing/Header/ListingHeader.tsx

@@ -34,13 +34,13 @@ type Props = Pick<
 } & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
-  attributes;
+  attributes: Record<string, unknown>;
   id: string;
   isDragging: boolean;
   isInDragOverlay?: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
-  style;
+  style: React.CSSProperties;
 }
 
 const ListingHeader = ({

package/src/Listing/Header/_internals/PredefinedSelectionList.tsx

@@ -4,7 +4,9 @@ import type { PredefinedRowSelection } from '../../models';
 
 interface Props {
   close: () => void;
-  onSelectRowsWithCondition: (condition) => void;
+  onSelectRowsWithCondition: (
+    condition: (row: Record<string, unknown>) => boolean
+  ) => void;
   predefinedRowsSelection: Array<PredefinedRowSelection>;
 }
 

package/src/Listing/Row/Row.tsx

@@ -10,17 +10,17 @@ import type { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
 type Props = {
   checkable: boolean;
-  children;
+  children: React.ReactNode;
   columnConfiguration?: ColumnConfiguration;
   columnIds: Array<string>;
-  disableRowCondition: (row) => boolean;
+  disableRowCondition: (row: Record<string, unknown>) => boolean;
   isHovered?: boolean;
   isSelected?: boolean;
   isShiftKeyDown: boolean;
   lastSelectionIndex: number | null;
   limit: number;
   listingVariant?: ListingVariant;
-  row;
+  row: Record<string, unknown>;
   rowColorConditions: Array<RowColorCondition>;
   shiftKeyDownRowPivot: number | null;
   subItemsPivots: Array<number | string>;

package/src/Listing/index.tsx

@@ -97,8 +97,8 @@ export interface Props<TRow> {
   currentPage?: number;
   customListingComponent?: JSX.Element;
   customPaginationClassName?: string;
-  disableRowCheckCondition?: (row) => boolean;
-  disableRowCondition?: (row) => boolean;
+  disableRowCheckCondition?: (row: TRow) => boolean;
+  disableRowCondition?: (row: TRow) => boolean;
   displayCustomListing?: boolean;
   getHighlightRowCondition?: (row: TRow) => boolean;
   getId?: (row: TRow) => RowId;
@@ -109,8 +109,8 @@ export interface Props<TRow> {
   listingVariant?: ListingVariant;
   loading?: boolean;
   moveTablePagination?: boolean;
-  onLimitChange?: (limit) => void;
-  onPaginate?: (page) => void;
+  onLimitChange?: (limit: string | number) => void;
+  onPaginate?: (page: number) => void;
   onResetColumns?: () => void;
   onRowClick?: (row: TRow) => void;
   onSelectColumns?: (selectedColumnIds: Array<string>) => void;
@@ -126,14 +126,14 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
-    getRowProperty: (row?) => string;
+    getRowProperty: (row?: TRow) => string;
     labelCollapse: string;
     labelExpand: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
-  isActionBarVisible: boolean;
+  isActionBarVisible?: boolean;
   labelNoResultFound?: string | JSX.Element;
 }
 
@@ -226,8 +226,13 @@ const Listing = <
       rows.reduce<Array<string | number>>(
         (acc, row) => [
           ...acc,
-          ...(row[subItems?.getRowProperty() || ''] || []).map(
-            ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
+          ...(
+            ((row as Record<string, unknown>)[
+              subItems?.getRowProperty() || ''
+            ] as Array<{ id: string | number }> | undefined) || []
+          ).map(
+            ({ id }: { id: string | number }) =>
+              `${subItemPrefixKey}_${getId(row)}_${id}`
           )
         ],
         []
@@ -239,18 +244,21 @@ const Listing = <
     () =>
       subItems?.enable
         ? rows.reduce<Array<TRow>>((acc, row): Array<TRow> => {
+            const rowAsRecord = row as Record<string, unknown>;
             if (
-              row[subItems.getRowProperty()] &&
+              rowAsRecord[subItems.getRowProperty()] &&
               subItemsPivots.includes(row.id)
             ) {
               return [
                 ...acc,
                 row,
-                ...row[subItems.getRowProperty()].map((subRow) => ({
-                  ...subRow,
-                  internalListingParentId: row.id,
-                  internalListingParentRow: row
-                }))
+                ...(rowAsRecord[subItems.getRowProperty()] as Array<TRow>).map(
+                  (subRow: TRow) => ({
+                    ...subRow,
+                    internalListingParentId: row.id,
+                    internalListingParentRow: row
+                  })
+                )
               ];
             }
 
@@ -282,13 +290,13 @@ const Listing = <
   const haveSameId = (row: TRow, rowToCompare: TRow): boolean =>
     equals(getId(row), getId(rowToCompare));
 
-  const selectedRowsInclude = (row): boolean => {
+  const selectedRowsInclude = (row: TRow): boolean => {
     return !!selectedRows.find((includedRow) =>
       equals(getId(includedRow), getId(row))
     );
   };
 
-  const selectAllRows = (event): void => {
+  const selectAllRows = (event: React.ChangeEvent<HTMLInputElement>): void => {
     if (
       event.target.checked &&
       event.target.getAttribute('data-indeterminate') === 'false'
@@ -303,13 +311,15 @@ const Listing = <
     setLastSelectionIndex(null);
   };
 
-  const onSelectRowsWithCondition = (condition: (row) => boolean): void => {
+  const onSelectRowsWithCondition = (
+    condition: (row: TRow) => boolean
+  ): void => {
     onSelectRows(reject(disableRowCheckCondition, filter(condition, rows)));
     setLastSelectionIndex(null);
   };
 
   interface GetSelectedRowsWithShiftKeyProps {
-    compareFunction;
+    compareFunction: (a: number, b: number) => boolean;
     comparisonSliceEndIndex: number;
     comparisonSliceStartIndex: number;
     newSelection: Array<TRow>;
@@ -329,7 +339,10 @@ const Listing = <
       return differenceWith(haveSameId, selectedRows, newSelection);
     }
     if (
-      compareFunction(lastSelectionIndex, last(selectedRowsIndex) as number)
+      compareFunction(
+        lastSelectionIndex as number,
+        last(selectedRowsIndex) as number
+      )
     ) {
       const normalizedNewSelection = slice(
         comparisonSliceStartIndex,
@@ -428,7 +441,7 @@ const Listing = <
     );
   };
 
-  const selectRow = (event: React.MouseEvent, row): void => {
+  const selectRow = (event: React.MouseEvent, row: TRow): void => {
     event.preventDefault();
     event.stopPropagation();
     // This prevents unwanted text selection
@@ -462,7 +475,7 @@ const Listing = <
     onSelectRows([...selectedRows, row]);
   };
 
-  const hoverRow = (row): void => {
+  const hoverRow = (row: TRow): void => {
     if (equals(hoveredRowId, getRowId(row))) {
       return;
     }
@@ -473,11 +486,11 @@ const Listing = <
     setHoveredRowId(null);
   };
 
-  const isSelected = (row): boolean => {
+  const isSelected = (row: TRow): boolean => {
     return selectedRowsInclude(row);
   };
 
-  const changeLimit = (updatedLimit: string): void => {
+  const changeLimit = (updatedLimit: string | number): void => {
     onLimitChange?.(Number(updatedLimit));
   };
 
@@ -497,6 +510,13 @@ const Listing = <
 
   const areColumnsEditable = not(isNil(onSelectColumns));
 
+  const disableRowConditionForCell = disableRowCondition as (
+    row: Record<string, unknown>
+  ) => boolean;
+  const getHighlightRowConditionForCell = getHighlightRowCondition as
+    | ((row: Record<string, unknown>) => boolean)
+    | undefined;
+
   return (
     <div className="h-full w-full overflow-hidden">
       {loading && rows.length > 0 && (
@@ -604,7 +624,7 @@ const Listing = <
                           }
                           columnConfiguration={columnConfiguration}
                           columnIds={columns.map(prop('id'))}
-                          disableRowCondition={disableRowCondition}
+                          disableRowCondition={disableRowConditionForCell}
                           isHovered={isRowHovered}
                           isSelected={isRowSelected}
                           isShiftKeyDown={isShiftKeyDown}
@@ -633,7 +653,7 @@ const Listing = <
                               <Cell
                                 align="left"
                                 className="justify-start"
-                                disableRowCondition={disableRowCondition}
+                                disableRowCondition={disableRowConditionForCell}
                                 isRowHovered={isRowHovered}
                                 onClick={(event): void => selectRow(event, row)}
                                 row={row}
@@ -656,7 +676,7 @@ const Listing = <
                             ) : (
                               <Cell
                                 align="left"
-                                disableRowCondition={disableRowCondition}
+                                disableRowCondition={disableRowConditionForCell}
                                 isRowHovered={isRowHovered}
                                 row={row}
                                 rowColorConditions={rowColorConditions}
@@ -666,9 +686,9 @@ const Listing = <
                           {visibleColumns.map((column) => (
                             <DataCell
                               column={column}
-                              disableRowCondition={disableRowCondition}
+                              disableRowCondition={disableRowConditionForCell}
                               getHighlightRowCondition={
-                                getHighlightRowCondition
+                                getHighlightRowConditionForCell
                               }
                               isRowHovered={isRowHovered}
                               isRowSelected={isRowSelected}

package/src/Listing/models.ts

@@ -3,6 +3,8 @@ interface EllipsisTypography {
   formattedString: string;
 }
 
+export type RowRecord = Record<string, unknown>;
+
 export interface ComponentColumnProps {
   isHovered: boolean;
   isSelected: boolean;
@@ -10,7 +12,7 @@ export interface ComponentColumnProps {
     className,
     formattedString
   }: EllipsisTypography) => JSX.Element;
-  row;
+  row: RowRecord;
 }
 
 export interface Column {
@@ -21,11 +23,11 @@ export interface Column {
   disablePadding?: boolean;
   disabled?: boolean;
   displaySubItemsCaret?: boolean;
-  getColSpan?: (isSelected) => number | undefined;
-  getFormattedString?: (row) => string | null;
-  getHiddenCondition?: (isSelected) => boolean;
-  getRenderComponentCondition?: (row) => boolean;
-  getRenderComponentOnRowUpdateCondition?: (row) => boolean;
+  getColSpan?: (isSelected: boolean) => number | undefined;
+  getFormattedString?: (row: RowRecord) => string | null;
+  getHiddenCondition?: (isSelected: boolean) => boolean;
+  getRenderComponentCondition?: (row: RowRecord) => boolean;
+  getRenderComponentOnRowUpdateCondition?: (row: RowRecord) => boolean;
   hasHoverableComponent?: boolean;
   id: string;
   isTruncated?: boolean;
@@ -45,7 +47,7 @@ export enum ColumnType {
 
 export interface RowColorCondition {
   color: string;
-  condition: (row) => boolean;
+  condition: (row: RowRecord) => boolean;
   name: string;
 }
 
@@ -60,7 +62,7 @@ export type SortOrder = 'asc' | 'desc';
 
 export interface PredefinedRowSelection {
   label: string;
-  rowCondition: (row) => boolean;
+  rowCondition: (row: RowRecord) => boolean;
 }
 
 export interface TableStyleAtom {
@@ -80,7 +82,7 @@ export interface TableStyleAtom {
 export interface ListingSubItems {
   canCheckSubItems: boolean;
   enable: boolean;
-  getRowProperty: (row?) => string;
+  getRowProperty: (row?: RowRecord) => string;
   labelCollapse: string;
   labelExpand: string;
 }

package/src/MultiSelectEntries/index.tsx

@@ -71,7 +71,7 @@ const EntryChip = ({
   );
 };
 
-const EmptyEntry = ({ label }): JSX.Element => {
+const EmptyEntry = ({ label }: { label: string }): JSX.Element => {
   const { classes } = useStyles();
 
   return (
@@ -81,7 +81,7 @@ const EmptyEntry = ({ label }): JSX.Element => {
   );
 };
 
-const Caption = ({ children }): JSX.Element => {
+const Caption = ({ children }: { children: React.ReactNode }): JSX.Element => {
   const { classes } = useStyles();
 
   return (
@@ -98,7 +98,7 @@ interface Value {
 
 interface Props {
   emptyLabel: string;
-  error?;
+  error?: React.ReactNode;
   gridWidth?: 'auto' | number;
   highlight?: boolean;
   label: string;

package/src/Pagination/Pagination.tsx

@@ -22,7 +22,9 @@ interface Props {
   api: {
     baseEndpoint: string;
     queryKey: Array<string>;
-    searchConditions?;
+    searchConditions?: Array<
+      import('../api/buildListingEndpoint/models').ConditionsSearchParameter
+    >;
   };
   labelHasNoElements?: string;
   onItemClick?: ({ id }: { id: number }) => void;

package/src/Panel/index.tsx

@@ -94,7 +94,7 @@ export interface Props {
   minWidth?: number;
   onClose?: () => void;
   onResize?: (newWidth: number) => void;
-  onTabSelect?: (event, id: number) => void;
+  onTabSelect?: (event: React.SyntheticEvent, id: number) => void;
   selectedTab: ReactElement;
   selectedTabId?: number;
   tabs?: Array<JSX.Element>;
@@ -154,7 +154,7 @@ const Panel = forwardRef(
     };
 
     const moveMouse = useCallback(
-      (e) => {
+      (e: MouseEvent) => {
         e.preventDefault();
 
         const maxWidth = getMaxWidth();

package/src/PopoverMenu/index.tsx

@@ -28,7 +28,7 @@ interface PopoverData {
 
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element | JSX.Element;
+  children: ((props?: { close?: () => void }) => JSX.Element) | JSX.Element;
   className?: string;
   tooltipClassName?: string;
   dataTestId?: string;
@@ -59,7 +59,7 @@ const PopoverMenu = ({
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
   const isOpen = Boolean(anchorEl);
 
-  const close = (reason?): void => {
+  const close = (reason?: { type?: string }): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
     if (isClosedByInputClick) {
       return;
@@ -69,7 +69,7 @@ const PopoverMenu = ({
     setAnchorEl(undefined);
   };
 
-  const toggle = (event): void => {
+  const toggle = (event: React.MouseEvent<HTMLButtonElement>): void => {
     if (isOpen) {
       close();
 

package/src/RichTextEditor/ContentEditable.tsx

@@ -3,6 +3,7 @@
 import { Typography } from '@mui/material';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import type { LexicalEditor } from 'lexical';
 import { isEmpty, isNil } from 'ramda';
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +60,7 @@ interface Props {
   error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
-  initialize?: (editor) => void;
+  initialize?: (editor: LexicalEditor) => void;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;

package/src/RichTextEditor/RichTextEditor.tsx

@@ -31,7 +31,7 @@ export interface RichTextEditorProps {
   error?: string;
   getEditorState?: (editorState: EditorState, editor: LexicalEditor) => void;
   initialEditorState?: string;
-  initialize?: (editor) => void;
+  initialize?: (editor: LexicalEditor) => void;
   inputClassname?: string;
   minInputHeight?: number;
   namespace?: string;

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -63,8 +63,8 @@ const FloatingLinkEditor = ({
   const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
 
   const acceptOrCancelNewLinkValue = useCallback(
-    (event): void => {
-      const { value } = event.target;
+    (event: React.KeyboardEvent<HTMLInputElement>): void => {
+      const { value } = event.target as HTMLInputElement;
 
       event.preventDefault();
 
@@ -90,22 +90,24 @@ const FloatingLinkEditor = ({
     setEditMode(true);
   }, [linkUrl, setEditMode]);
 
-  const changeValue = useCallback((event): void => {
-    const { value } = event.target;
+  const changeValue = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const { value } = event.target;
 
-    const matched = value.match(/https?:\/\//g);
+      const matched = value.match(/https?:\/\//g);
 
-    if (gt(matched.length, 1)) {
-      setEditedUrl(
-        // @ts-expect-error - suppressing pre-existing type mismatch
-        replace(matched.join(''), matched[dec(matched.length)], value)
-      );
+      if (matched && gt(matched.length, 1)) {
+        setEditedUrl(
+          replace(matched.join(''), matched[dec(matched.length)], value)
+        );
 
-      return;
-    }
+        return;
+      }
 
-    setEditedUrl(value);
-  }, []);
+      setEditedUrl(value);
+    },
+    []
+  );
 
   useEffect(() => {
     const isPositioned =

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

@@ -38,7 +38,7 @@ const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
 
 const blockTypeOptions = blockTypes.map((blockType) => ({
   id: blockType,
-  name: blockTypeToBlockName[blockType]
+  name: blockTypeToBlockName[blockType as keyof typeof blockTypeToBlockName]
 }));
 
 const BlockButtons = ({ disabled }: Props): JSX.Element => {
@@ -68,8 +68,8 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
     }
   };
 
-  const changeBlockType = (newBlockType): void => {
-    const formatFunction = cond<Array<string>, (value?) => void>([
+  const changeBlockType = (newBlockType: string): void => {
+    const formatFunction = cond<Array<string>, (value?: unknown) => void>([
       [equals('h3'), always(() => formatHeading('h3'))],
       [equals('h5'), always(() => formatHeading('h5'))],
       [equals('h6'), always(() => formatHeading('h6'))],

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

@@ -64,7 +64,7 @@ const ListButton = ({ disabled }: Props): JSX.Element => {
     }
   };
 
-  const formatList = (type): void => {
+  const formatList = (type: string): void => {
     if (equals(type, elementList)) {
       setElementList(null);
     }

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

@@ -29,7 +29,7 @@ const MacrosButton = ({ disabled }: Props): JSX.Element => {
 
   const insertMacrosCommand: LexicalCommand<string> = createCommand();
 
-  const onClick = (macro): void => {
+  const onClick = (macro: string): void => {
     editor.dispatchCommand(insertMacrosCommand, macro);
   };
 

package/src/Snackbar/SnackbarProvider.tsx

@@ -21,7 +21,7 @@ const SnackbarProvider = ({
       TransitionComponent={
         Transition as JSXElementConstructor<
           TransitionProps & {
-            children;
+            children: ReactElement;
           }
         >
       }

package/src/Snackbar/index.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface SnackbarProps {
   id: string | number;
-  message: string;
+  message: string | JSX.Element;
   severity: Severity;
 }
 
@@ -57,7 +57,9 @@ const Snackbar = forwardRef(
       }
       closeSnackbar(id);
     };
-    const sanitizedMessage = sanitizedHTML({ initialContent: message });
+    const sanitizedMessage = sanitizedHTML({
+      initialContent: message as string
+    });
 
     const formatedMessage =
       typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;

package/src/Snackbar/useSnackbar.tsx

@@ -1,6 +1,10 @@
 import { Typography } from '@mui/material';
 
-import { useSnackbar as useNotistackSnackbar } from 'notistack';
+import {
+  type SnackbarKey,
+  type SnackbarMessage,
+  useSnackbar as useNotistackSnackbar
+} from 'notistack';
 
 import { sanitizedHTML } from '../utils';
 import Snackbar from '.';
@@ -34,9 +38,15 @@ const useSnackbar = (): UseSnackbar => {
   const notistackHookProps = useNotistackSnackbar();
 
   const snackbarContent =
-    (severity) =>
-    (key: string | number, message): JSX.Element => {
-      return <Snackbar id={key} message={message} severity={severity} />;
+    (severity: Severity) =>
+    (key: SnackbarKey, message?: SnackbarMessage): JSX.Element => {
+      return (
+        <Snackbar
+          id={key}
+          message={message as string | JSX.Element}
+          severity={severity}
+        />
+      );
     };
 
   const showMessage = ({ message, severity }: ShowMessageProps): void => {

package/src/SortableItems/index.tsx

@@ -35,12 +35,12 @@ import Item from './Item';
 import SortableItem from './SortableItem';
 
 interface ContentProps {
-  attributes;
-  index;
+  attributes: Record<string, unknown>;
+  index: number;
   isDragging: boolean;
   itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
-  style;
+  style: React.CSSProperties;
 }
 
 export interface RootComponentProps {
@@ -162,7 +162,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     onDragOver?.(event);
   };
 
-  const getItemById = (id): T | undefined =>
+  const getItemById = (id: string | null): T | undefined =>
     find(propEq(id, propertyToFilterItemsOn), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -17,7 +17,7 @@ import useStyles from './CompactCustomTimePeriod.styles';
 interface Props {
   disabled?: boolean;
   isCondensed?: boolean;
-  onClick: (event) => void;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const CompactCustomTimePeriod = ({

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -10,7 +10,7 @@ interface RangeDate {
 
 export interface AcceptDateProps {
   date: Date;
-  property: CustomTimePeriodProperty;
+  property: CustomTimePeriodProperty | string;
 }
 
 export interface PickersData {