@centreon/ui 26.5.14 → 26.5.15

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

@@ -29,7 +29,7 @@ const RoleSelectField = ({
         fullWidth
         label={label}
         onChange={(event) => {
-          onChange(event.target.value);
+          onChange(event.target.value as string);
         }}
         options={roles}
         selectedOptionId={value}

package/src/components/Form/AccessRights/storiesData.ts

@@ -81,7 +81,7 @@ export const accessRightsWithStates = [
 
 export const emptyAccessRights = [];
 
-const buildEntities = (from, isGroup): Array<SelectEntry> => {
+const buildEntities = (from: number, isGroup: boolean): Array<SelectEntry> => {
   return Array(10)
     .fill(0)
     .map((_, index) => ({
@@ -92,7 +92,7 @@ const buildEntities = (from, isGroup): Array<SelectEntry> => {
     }));
 };
 
-export const buildResult = (isGroup): Listing<SelectEntry> => ({
+export const buildResult = (isGroup: boolean): Listing<SelectEntry> => ({
   meta: {
     limit: 10,
     page: 1,

package/src/components/ItemComposition/ItemComposition.tsx

@@ -9,7 +9,7 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 export type Props = {
-  IconAdd?;
+  IconAdd?: ReactElement;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;

package/src/components/Menu/Button/MenuButton.tsx

@@ -34,7 +34,7 @@ const MenuButton = ({
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
   const onToggle = useCallback(
-    (e): void => {
+    (e: React.MouseEvent<HTMLButtonElement>): void => {
       setAnchorEl(e.currentTarget);
 
       setIsMenuOpen(!isMenuOpen);

package/src/components/Menu/useMenu.tsx

@@ -54,7 +54,9 @@ type UseMenu = {
   onClose: (() => void) | null;
   onOpen: (() => void) | null;
   setAnchorEl: (event: null | HTMLElement) => void;
-  setIsMenuOpen: (isOpen: boolean | ((currentIsMenuOpen) => boolean)) => void;
+  setIsMenuOpen: (
+    isOpen: boolean | ((currentIsMenuOpen: boolean) => boolean)
+  ) => void;
 };
 
 const useMenu = (): UseMenu => {

package/src/components/Tabs/Tabs.tsx

@@ -36,7 +36,7 @@ export const Tabs = ({
   const [selectedTab, setSelectedTab] = useState(defaultTab);
 
   const changeTab = useCallback(
-    (_, newValue: string): void => {
+    (_: React.SyntheticEvent, newValue: string): void => {
       if (onChange) onChange(newValue);
 
       setSelectedTab(newValue);

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { ReactElement } from 'react';
 
 import type { ActionVariants } from '../../../ActionsList/models';
@@ -11,7 +12,10 @@ interface Labels {
 }
 
 export interface Props {
-  children: ({ toggleTooltip, isOpen }) => ReactElement;
+  children: (params: {
+    isOpen: boolean;
+    toggleTooltip: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  }) => ReactElement;
   confirmVariant?: ActionVariants;
   labels: Labels;
   onConfirm: () => void;

package/src/components/Zoom/useMinimap.ts

@@ -1,6 +1,7 @@
 import type { Point } from '@visx/point';
 import type { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
 import { equals, gt, pick } from 'ramda';
+import type React from 'react';
 import { useCallback, useState } from 'react';
 
 import type { ZoomState } from './models';
@@ -15,11 +16,11 @@ export interface UseMinimapProps {
 }
 
 interface UseMinimapState {
-  dragEnd: (e) => void;
-  dragStart: (e) => void;
-  move: (e) => void;
-  transformTo: (e) => void;
-  zoomInOut: (e) => void;
+  dragEnd: () => void;
+  dragStart: (e: React.MouseEvent<SVGRectElement>) => void;
+  move: (e: React.MouseEvent<SVGRectElement>) => void;
+  transformTo: (e: React.MouseEvent<SVGRectElement>) => void;
+  zoomInOut: (e: React.WheelEvent<SVGRectElement>) => void;
 }
 
 export const useMinimap = ({
@@ -36,7 +37,12 @@ export const useMinimap = ({
   const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
 
   const getMatrixPoint = useCallback(
-    (event, newScale?: number): { x: number; y: number } => {
+    (
+      event:
+        | React.MouseEvent<SVGRectElement>
+        | React.WheelEvent<SVGRectElement>,
+      newScale?: number
+    ): { x: number; y: number } => {
       const hasScale = scale > 1;
       const point = {
         x: event.nativeEvent.offsetX * (1 / minimapScale),
@@ -61,7 +67,7 @@ export const useMinimap = ({
   );
 
   const transformTo = useCallback(
-    (e: MouseEvent): void => {
+    (e: React.MouseEvent<SVGRectElement>): void => {
       if (!equals(e.buttons, 1)) {
         return;
       }
@@ -75,7 +81,7 @@ export const useMinimap = ({
     [zoom.transformMatrix, getMatrixPoint, zoom.setTransformMatrix]
   );
 
-  const dragStart = (e: MouseEvent): void => {
+  const dragStart = (e: React.MouseEvent<SVGRectElement>): void => {
     if (!equals(e.buttons, 1) || isDraggingFromContainer) {
       return;
     }
@@ -89,7 +95,7 @@ export const useMinimap = ({
   };
 
   const move = useCallback(
-    (e): void => {
+    (e: React.MouseEvent<SVGRectElement>): void => {
       if (!startPoint || !startTranslate) {
         return;
       }
@@ -115,7 +121,7 @@ export const useMinimap = ({
   );
 
   const zoomInOut = useCallback(
-    (e): void => {
+    (e: React.WheelEvent<SVGRectElement>): void => {
       const isZoomIn = gt(0, e.deltaY);
 
       const newScaleX = isZoomIn

package/src/components/Zoom/useZoom.ts

@@ -1,18 +1,24 @@
 import type { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
 import { equals } from 'ramda';
+import type React from 'react';
 import { useCallback, useState } from 'react';
 
 import { localPoint } from './localPoint';
 import type { ZoomState } from './models';
 
-const isLeftMouseButtonClicked = (e: MouseEvent): boolean =>
-  equals(e.buttons, 1);
+const isLeftMouseButtonClicked = (
+  e: React.MouseEvent<SVGSVGElement>
+): boolean => equals(e.buttons, 1);
 
 interface UseZoomState {
   dragEnd: () => void;
-  dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+  dragStart: (
+    zoom: ProvidedZoom<SVGSVGElement> & ZoomState
+  ) => (e: React.MouseEvent<SVGSVGElement>) => void;
   isDragging: boolean;
-  move: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+  move: (
+    zoom: ProvidedZoom<SVGSVGElement> & ZoomState
+  ) => (e: React.MouseEvent<SVGSVGElement>) => void;
 }
 
 export const useZoom = (): UseZoomState => {
@@ -21,7 +27,7 @@ export const useZoom = (): UseZoomState => {
 
   const dragStart = useCallback(
     (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
-      (e): void => {
+      (e: React.MouseEvent<SVGSVGElement>): void => {
         if (!isLeftMouseButtonClicked(e)) {
           return;
         }
@@ -34,7 +40,7 @@ export const useZoom = (): UseZoomState => {
 
   const move = useCallback(
     (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
-      (e): void => {
+      (e: React.MouseEvent<SVGSVGElement>): void => {
         if (!startPoint || !startTranslate) {
           return;
         }

package/src/components/Zoom/utils.ts

@@ -15,7 +15,9 @@ export const applyTranformStylesForZoom = ({
     width: contentClientRect?.width || 1
   };
   const isPortrait = contentRect.height > contentRect.width;
-  const sizes = isPortrait ? ['width', 'height'] : ['height', 'width'];
+  const sizes: Array<'width' | 'height'> = isPortrait
+    ? ['width', 'height']
+    : ['height', 'width'];
   const sizeScale = contentRect[sizes[0]] / contentRect[sizes[1]];
 
   const lengthToUse = isPortrait

package/src/queryParameters/index.ts

@@ -7,8 +7,14 @@ interface ToRawQueryParametersProps {
   apiFormat: 'Standard' | 'JSON-LD';
 }
 
-const toRawQueryParameter = ({ name, value }): string => {
-  return `${name}=${encodeURIComponent(value)}`;
+const toRawQueryParameter = ({
+  name,
+  value
+}: {
+  name: string;
+  value: unknown;
+}): string => {
+  return `${name}=${encodeURIComponent(value as string)}`;
 };
 
 const toRawQueryParameters = ({

package/src/utils/resourcesStatusURL.ts

@@ -19,16 +19,30 @@ export interface Resource {
   resources: Array<SelectEntry>;
 }
 
+interface ResourceDetails {
+  id: number | string;
+  parentId?: number | string;
+  uuid?: string;
+}
+
 interface GetResourcesUrlProps {
   allResources: Array<Resource>;
   isForOneResource: boolean;
-  resource?;
+  resource?: ResourceDetails;
   states: Array<string>;
   statuses: Array<string>;
   type: string;
 }
 
-export const getDetailsPanelQueriers = ({ resource, type }): object => {
+interface GetDetailsPanelQueriersProps {
+  resource: ResourceDetails;
+  type: string;
+}
+
+export const getDetailsPanelQueriers = ({
+  resource,
+  type
+}: GetDetailsPanelQueriersProps): object => {
   const { id, parentId, uuid } = resource;
 
   const resourcesDetailsEndpoint = cond([
@@ -158,7 +172,10 @@ export const getResourcesUrl = ({
     return `/monitoring/resources?filter=${encodedFilterParams}&fromTopCounter=true`;
   }
 
-  const detailsPanelQueriers = getDetailsPanelQueriers({ resource, type });
+  const detailsPanelQueriers = getDetailsPanelQueriers({
+    resource: resource as ResourceDetails,
+    type
+  });
 
   const encodedDetailsParams = encodeURIComponent(
     JSON.stringify(detailsPanelQueriers)

package/src/utils/translatedLabel.ts

@@ -1,2 +1,4 @@
-export const labelLicenseWarning = (module, daysUntilExpiration): string =>
-  `The ${module} license will expire in ${daysUntilExpiration} days`;
+export const labelLicenseWarning = (
+  module: string,
+  daysUntilExpiration: number
+): string => `The ${module} license will expire in ${daysUntilExpiration} days`;

package/src/utils/useDebounce.ts

@@ -1,27 +1,28 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-interface Props {
-  functionToDebounce: (...args) => void;
+// biome-ignore lint/suspicious/noExplicitAny: needed for variadic generic
+type AnyFunction = (...args: Array<any>) => void;
+
+interface Props<T extends AnyFunction> {
+  functionToDebounce: T;
   memoProps?: Array<unknown>;
   wait: number;
 }
 
-export const useDebounce = ({
+export const useDebounce = <T extends AnyFunction>({
   functionToDebounce,
   wait,
   memoProps = []
-}: Props): ((...args) => void) => {
-  const timeoutRef = useRef<number | null>(null);
-  const ref = useRef<((...args: Array<unknown>) => void) | undefined>(
-    undefined
-  );
+}: Props<T>): ((...args: Parameters<T>) => void) => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const ref = useRef<T | undefined>(undefined);
 
   useEffect(() => {
     ref.current = functionToDebounce;
   }, [functionToDebounce]);
 
   return useCallback(
-    (...args): void => {
+    (...args: Parameters<T>): void => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

package/src/utils/useInfiniteScrollListing.ts

@@ -14,7 +14,7 @@ import type { Parameters } from '../api/buildListingEndpoint/models';
 import type { Listing } from '../api/models';
 
 interface UseInfiniteScrollListing<T> {
-  elementRef: (node) => void;
+  elementRef: (node: Element | null) => void;
   elements: Array<T>;
   isLoading: boolean;
   total?: number;
@@ -110,7 +110,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage) => ['dashboards', newPage],
+      getPrefetchQueryKey: (newPage: number) => ['dashboards', newPage],
       page
     });
   }, [data, limit, page, prefetchNextPage]);

package/src/utils/useIntersectionObserver.ts

@@ -14,10 +14,10 @@ export const useIntersectionObserver = ({
   loading,
   action,
   intersectionObserverOptions
-}: HookParam): ((node) => void) => {
+}: HookParam): ((node: Element | null) => void) => {
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
-    (node) => {
+    (node: Element | null) => {
       if (observer.current) {
         observer.current.disconnect();
       }

package/src/utils/useLicenseExpirationWarning.test.tsx

@@ -11,7 +11,7 @@ import TestQueryProvider from "../api/TestQueryProvider";
 import { useLicenseExpirationWarning } from ".";
 import { labelLicenseWarning } from "./translatedLabel";
 
-const getMockedResponse = (expirationDate): object => ({
+const getMockedResponse = (expirationDate: dayjs.Dayjs): object => ({
 	result: {
 		module: {
 			entities: [
@@ -83,7 +83,9 @@ const getMockedResponse = (expirationDate): object => ({
 	status: true,
 });
 
-const mockRequest = ({ expirationDate }: { expirationDate }): void => {
+const mockRequest = ({
+	expirationDate,
+}: { expirationDate: dayjs.Dayjs }): void => {
 	resetMocks();
 	mockResponse({
 		data: getMockedResponse(expirationDate),

package/src/utils/useLoadImage.tsx

@@ -1,4 +1,4 @@
-import { useSetAtom } from 'jotai';
+import { type PrimitiveAtom, useSetAtom } from 'jotai';
 import { useLayoutEffect } from 'react';
 
 const loadImage = (imagePath: string): Promise<string> =>
@@ -10,7 +10,12 @@ const loadImage = (imagePath: string): Promise<string> =>
     image.onerror = reject;
   });
 
-export const useLoadImage = ({ imagePath, atom }): void => {
+interface UseLoadImageProps {
+  atom: PrimitiveAtom<string | null>;
+  imagePath: string;
+}
+
+export const useLoadImage = ({ imagePath, atom }: UseLoadImageProps): void => {
   const setImage = useSetAtom(atom);
 
   useLayoutEffect(() => {

package/src/utils/useLocaleDateTimeFormat/index.test.tsx

@@ -9,14 +9,13 @@ import timezonePlugin from "dayjs/plugin/timezone";
 import utcPlugin from "dayjs/plugin/utc";
 import { Provider, useSetAtom } from "jotai";
 
-import { useLocaleDateTimeFormat } from ".";
+import { type LocaleDateTimeFormat, useLocaleDateTimeFormat } from ".";
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
 dayjs.extend(localizedFormatPlugin);
 
-// biome-ignore lint/suspicious/noImplicitAnyLet: need it
-let context;
+let context: LocaleDateTimeFormat;
 
 const TestComponent = (): JSX.Element => {
 	const localeDateTimeFormat = useLocaleDateTimeFormat();

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -9,14 +9,13 @@ import timezonePlugin from "dayjs/plugin/timezone";
 import utcPlugin from "dayjs/plugin/utc";
 import { Provider, useSetAtom } from "jotai";
 
-import { useLocaleDateTimeFormat } from ".";
+import { type LocaleDateTimeFormat, useLocaleDateTimeFormat } from ".";
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
 dayjs.extend(localizedFormatPlugin);
 
-// biome-ignore lint/suspicious/noImplicitAnyLet: need it
-let context;
+let context: LocaleDateTimeFormat;
 
 const TestComponent = (): JSX.Element => {
 	const localeDateTimeFormat = useLocaleDateTimeFormat();

package/test/testRenderer.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import {
   render as rtlRender,
@@ -12,16 +12,20 @@ import { ThemeMode } from '@centreon/ui-context';
 import ThemeProvider from '../src/StoryBookThemeProvider';
 
 interface Props {
-  children: ReactElement;
+  children: ReactNode;
 }
 
 const ThemeProviderWrapper = ({ children }: Props): JSX.Element => {
-  return <ThemeProvider themeMode={ThemeMode.light}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider themeMode={ThemeMode.light}>
+      {children as ReactElement}
+    </ThemeProvider>
+  );
 };
 
 const render = (ui: ReactElement, options?: RenderOptions): RenderResult =>
   rtlRender(ui, {
-    wrapper: ThemeProviderWrapper as (props) => ReactElement | null,
+    wrapper: ThemeProviderWrapper,
     ...options
   });
 
@@ -49,7 +53,7 @@ export const resetMocks = (): void => {
 };
 
 export const getFetchCall = (
-  index,
+  index: number,
   secondIndex = 0
 ): string | Request | undefined | RequestInit => {
   return fetchMock.mock.calls[index][secondIndex];