@centreon/ui 26.3.4 → 26.3.6

package/src/utils/index.ts

@@ -1,31 +1,31 @@
-export * from './useLocaleDateTimeFormat';
+export * from '../Graph/Chart/helpers';
+export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
+export * from '../TimePeriods/helpers';
+export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
+export * from './centreonBaseURL';
+export * from './docsURL';
 export * from './getNormalizedId';
+export * from './panelSize';
+export * from './resourcesStatusURL';
+export * from './sanitizedHTML';
 export * from './statuses';
 export * from './typedMemo';
 export * from './useCopyToClipboard';
 export * from './useDebounce';
 export * from './useDeepCallback';
 export * from './useDeepMemo';
+export * from './useFullscreen';
+export * from './useInfiniteScrollListing';
 export * from './useIntersectionObserver';
 export * from './useKeyObserver';
+export * from './useLicenseExpirationWarning';
 export * from './useLoadImage';
+export * from './useLocale';
+export * from './useLocaleDateTimeFormat';
+export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';
 export * from './useMemoComponent';
-export * from './useThemeMode';
-export * from './useViewportIntersection';
-export * from './panelSize';
-export * from './sanitizedHTML';
-export * from './docsURL';
-export * from './useInfiniteScrollListing';
-export * from './useLicenseExpirationWarning';
-export * from './useRefreshInterval';
-export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
+export * from './useRefreshInterval';
 export * from './useResizeObserver';
-export * from './useFullscreen';
-export * from './resourcesStatusURL';
-export * from '../Graph/Chart/helpers';
-export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
-export * from '../TimePeriods/helpers';
-export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
-export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';
-export * from './useLocale';
+export * from './useThemeMode';
+export * from './useViewportIntersection';

package/src/utils/resourcesStatusURL.ts

@@ -1,5 +1,4 @@
 import {
-  T,
   always,
   cond,
   equals,
@@ -8,11 +7,11 @@ import {
   identity,
   includes,
   map,
-  pipe
+  pipe,
+  T
 } from 'ramda';
 
-import { SelectEntry } from '..';
-
+import type { SelectEntry } from '..';
 import { centreonBaseURL } from './centreonBaseURL';
 
 export interface Resource {

package/src/utils/useDebounce.ts

@@ -18,13 +18,16 @@ export const useDebounce = ({
     ref.current = functionToDebounce;
   }, [functionToDebounce]);
 
-  return useCallback((...args): void => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
+  return useCallback(
+    (...args): void => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
 
-    timeoutRef.current = setTimeout(() => {
-      ref.current?.(...args);
-    }, wait);
-  }, memoProps);
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.(...args);
+      }, wait);
+    },
+    [...memoProps, wait]
+  );
 };

package/src/utils/useDeepCallback.ts

@@ -12,4 +12,5 @@ export const useDeepCallback = <TParameters, TReturn, TMemoProps>({
   callback
 }: UseDeepCallback<TParameters, TReturn, TMemoProps>): ((
   props: TParameters
-) => TReturn) => useCallback((props) => callback(props), useDeepCompare(deps));
+) => TReturn) =>
+  useCallback((props) => callback(props), [...useDeepCompare(deps), callback]);

package/src/utils/useDeepMemo.ts

@@ -11,4 +11,4 @@ export const useDeepMemo = <TVariable, TMemoProps>({
   deps,
   variable
 }: UseDeepMemo<TVariable, TMemoProps>): TVariable =>
-  useMemo(() => variable, useDeepCompare(deps));
+  useMemo(() => variable, [...useDeepCompare(deps), variable]);

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -1,8 +1,8 @@
-import { Provider, createStore } from 'jotai';
-import { BrowserRouter } from 'react-router';
-
 import { Button } from '@mui/material';
 
+import { createStore, Provider } from 'jotai';
+import { BrowserRouter } from 'react-router';
+
 import { useFullscreen } from './useFullscreen';
 import { router, useFullscreenListener } from './useFullscreenListener';
 

package/src/utils/useFullscreen/useFullscreen.ts

@@ -1,8 +1,8 @@
 import { useAtom } from 'jotai';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSnackbar } from '../..';
-
 import { isFullscreenActivatedAtom } from './atoms';
 import { labelCannotEnterInFullscreen } from './translatedLabels';
 
@@ -24,9 +24,9 @@ export const useFullscreen = (): UseFullscreenState => {
     isFullscreenActivatedAtom
   );
 
-  const resetVariables = (): void => {
+  const resetVariables = useCallback((): void => {
     setIsFullscreenActivated(false);
-  };
+  }, [setIsFullscreenActivated]);
 
   const enterInFullscreen = (element: HTMLElement | null): void => {
     if (!document.fullscreenEnabled) {

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -1,10 +1,8 @@
-import { useEffect } from 'react';
-
 import { equals, includes } from 'ramda';
+import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router';
 
 import { useDeepCompare } from '../useMemoComponent';
-
 import { useFullscreen } from './useFullscreen';
 
 export const router = {
@@ -15,40 +13,43 @@ export const useFullscreenListener = (): boolean => {
   const { toggleFullscreen, resetVariables, isFullscreenActivated } =
     useFullscreen();
 
-  const toggle = (event: KeyboardEvent): void => {
-    if (
-      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
-      equals(
-        document.activeElement?.getAttribute('data-lexical-editor'),
-        'true'
-      ) ||
-      equals(document.activeElement?.getAttribute('contenteditable'), 'true') ||
-      !equals(event.code, 'KeyF')
-    ) {
-      return;
-    }
-
-    toggleFullscreen(document.querySelector('body'));
-  };
+  const toggle = useCallback(
+    (event: KeyboardEvent): void => {
+      if (
+        includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
+        equals(
+          document.activeElement?.getAttribute('data-lexical-editor'),
+          'true'
+        ) ||
+        equals(
+          document.activeElement?.getAttribute('contenteditable'),
+          'true'
+        ) ||
+        !equals(event.code, 'KeyF')
+      ) {
+        return;
+      }
+
+      toggleFullscreen(document.querySelector('body'));
+    },
+    [toggleFullscreen]
+  );
 
-  const changeFullscreen = (): void => {
+  const changeFullscreen = useCallback((): void => {
     if (document.fullscreenElement) {
       return;
     }
 
     resetVariables();
-  };
+  }, [resetVariables]);
 
-  useEffect(
-    () => {
-      document.addEventListener('fullscreenchange', changeFullscreen);
+  useEffect(() => {
+    document.addEventListener('fullscreenchange', changeFullscreen);
 
-      return () => {
-        document.removeEventListener('fullscreenchange', changeFullscreen);
-      };
-    },
-    useDeepCompare([document.fullscreenElement])
-  );
+    return () => {
+      document.removeEventListener('fullscreenchange', changeFullscreen);
+    };
+  }, [...useDeepCompare([document.fullscreenElement]), changeFullscreen]);
 
   useEffect(() => {
     window.addEventListener('keypress', toggle);
@@ -56,7 +57,7 @@ export const useFullscreenListener = (): boolean => {
     return () => {
       window.removeEventListener('keypress', toggle);
     };
-  }, [isFullscreenActivated]);
+  }, [toggle]);
 
   return isFullscreenActivated;
 };

package/src/utils/useInfiniteScrollListing.ts

@@ -1,17 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { PrimitiveAtom, useAtom } from 'jotai';
-import { equals, gte, isNil, reduce } from 'ramda';
-import { JsonDecoder } from 'ts.data.json';
-
 import {
-  QueryParameter,
   buildListingEndpoint,
+  type QueryParameter,
   useFetchQuery,
   useIntersectionObserver
 } from '@centreon/ui';
 
-import { Parameters } from '../api/buildListingEndpoint/models';
+import { type PrimitiveAtom, useAtom } from 'jotai';
+import { equals, gte, isNil, reduce } from 'ramda';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { JsonDecoder } from 'ts.data.json';
+
+import type { Parameters } from '../api/buildListingEndpoint/models';
 import type { Listing } from '../api/models';
 
 interface UseInfiniteScrollListing<T> {
@@ -114,11 +113,11 @@ export const useInfiniteScrollListing = <T>({
       getPrefetchQueryKey: (newPage) => ['dashboards', newPage],
       page
     });
-  }, [data]);
+  }, [data, limit, page, prefetchNextPage]);
 
   useEffect(() => {
     return () => setPage(1);
-  }, []);
+  }, [setPage]);
 
   return {
     elementRef,

package/src/utils/useIntersectionObserver.ts

@@ -38,7 +38,7 @@ export const useIntersectionObserver = ({
         observer.current.observe(node);
       }
     },
-    [maxPage, page, loading]
+    [maxPage, page, loading, action, intersectionObserverOptions]
   );
 
   return lastElementRef;

package/src/utils/useKeyObserver.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
@@ -7,18 +7,21 @@ interface UseKeyObserverProps {
 export const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
-  const pressShift = (): void => setIsShiftKeyDown(true);
-  const releaseShift = (): void => setIsShiftKeyDown(false);
+  const pressShift = useCallback((): void => setIsShiftKeyDown(true), []);
+  const releaseShift = useCallback((): void => setIsShiftKeyDown(false), []);
 
-  const observeKeyDown = (event: KeyboardEvent): void => {
-    if (event.shiftKey) {
-      pressShift();
-    }
-  };
+  const observeKeyDown = useCallback(
+    (event: KeyboardEvent): void => {
+      if (event.shiftKey) {
+        pressShift();
+      }
+    },
+    [pressShift]
+  );
 
-  const observeKeyUp = (): void => {
+  const observeKeyUp = useCallback((): void => {
     releaseShift();
-  };
+  }, [releaseShift]);
 
   useEffect(() => {
     window.addEventListener('keydown', observeKeyDown);
@@ -28,7 +31,7 @@ export const useKeyObserver = (): UseKeyObserverProps => {
       window.removeEventListener('keydown', observeKeyDown);
       window.removeEventListener('keyup', observeKeyUp);
     };
-  }, []);
+  }, [observeKeyDown, observeKeyUp]);
 
   return {
     isShiftKeyDown

package/src/utils/useLicenseExpirationWarning.test.tsx

@@ -1,148 +1,146 @@
-import { renderHook } from '@testing-library/react';
-import dayjs from 'dayjs';
+import { renderHook } from "@testing-library/react";
+import dayjs from "dayjs";
 
 import {
-  getFetchCall,
-  mockResponse,
-  resetMocks,
-  waitFor
-} from '../../test/testRenderer';
-import TestQueryProvider from '../api/TestQueryProvider';
-
-import { labelLicenseWarning } from './translatedLabel';
-
-import { useLicenseExpirationWarning } from '.';
+	getFetchCall,
+	mockResponse,
+	resetMocks,
+	waitFor,
+} from "../../test/testRenderer";
+import TestQueryProvider from "../api/TestQueryProvider";
+import { useLicenseExpirationWarning } from ".";
+import { labelLicenseWarning } from "./translatedLabel";
 
 const getMockedResponse = (expirationDate): object => ({
-  result: {
-    module: {
-      entities: [
-        {
-          description: 'Centreon Auto Discovery',
-          id: 'centreon-autodiscovery-server',
-          label: 'Centreon',
-          license: {
-            expiration_date: expirationDate,
-            host_limit: -1,
-            host_usage: 1,
-            is_valid: true,
-            required: true
-          },
-          type: 'module',
-          version: {
-            available: '23.10.0',
-            current: '23.10.0',
-            installed: true,
-            outdated: false
-          }
-        },
-        {
-          description: 'Centreon License Manager',
-          id: 'centreon-license-manager',
-          label: 'Centreon',
-          license: {
-            required: false
-          },
-          type: 'module',
-          version: {
-            available: '23.10.0',
-            current: '23.10.0',
-            installed: true,
-            outdated: false
-          }
-        },
-        {
-          description: 'Centreon Monitoring Connectors Manager',
-          id: 'centreon-pp-manager',
-          label: 'Centreon',
-          license: {
-            required: false
-          },
-          type: 'module',
-          version: {
-            available: '23.10.0',
-            current: '23.10.0',
-            installed: true,
-            outdated: false
-          }
-        }
-      ],
-      pagination: {
-        limit: 3,
-        offset: 0,
-        total: 3
-      }
-    },
-    widget: {
-      entities: [],
-      pagination: {
-        limit: 0,
-        offset: 0,
-        total: 0
-      }
-    }
-  },
-  status: true
+	result: {
+		module: {
+			entities: [
+				{
+					description: "Centreon Auto Discovery",
+					id: "centreon-autodiscovery-server",
+					label: "Centreon",
+					license: {
+						expiration_date: expirationDate,
+						host_limit: -1,
+						host_usage: 1,
+						is_valid: true,
+						required: true,
+					},
+					type: "module",
+					version: {
+						available: "23.10.0",
+						current: "23.10.0",
+						installed: true,
+						outdated: false,
+					},
+				},
+				{
+					description: "Centreon License Manager",
+					id: "centreon-license-manager",
+					label: "Centreon",
+					license: {
+						required: false,
+					},
+					type: "module",
+					version: {
+						available: "23.10.0",
+						current: "23.10.0",
+						installed: true,
+						outdated: false,
+					},
+				},
+				{
+					description: "Centreon Monitoring Connectors Manager",
+					id: "centreon-pp-manager",
+					label: "Centreon",
+					license: {
+						required: false,
+					},
+					type: "module",
+					version: {
+						available: "23.10.0",
+						current: "23.10.0",
+						installed: true,
+						outdated: false,
+					},
+				},
+			],
+			pagination: {
+				limit: 3,
+				offset: 0,
+				total: 3,
+			},
+		},
+		widget: {
+			entities: [],
+			pagination: {
+				limit: 0,
+				offset: 0,
+				total: 0,
+			},
+		},
+	},
+	status: true,
 });
 
 const mockRequest = ({ expirationDate }: { expirationDate }): void => {
-  resetMocks();
-  mockResponse({
-    data: getMockedResponse(expirationDate)
-  });
+	resetMocks();
+	mockResponse({
+		data: getMockedResponse(expirationDate),
+	});
 };
 
 const showMessage = jest.fn();
 
-jest.mock('../Snackbar/useSnackbar', () => ({
-  __esModule: true,
-  default: jest
-    .fn()
-    .mockImplementation(() => ({ showWarningMessage: showMessage }))
+jest.mock("../Snackbar/useSnackbar", () => ({
+	__esModule: true,
+	default: jest
+		.fn()
+		.mockImplementation(() => ({ showWarningMessage: showMessage })),
 }));
 
 const initialize = (): void => {
-  renderHook(
-    () =>
-      useLicenseExpirationWarning({
-        module: 'centreon-autodiscovery-server'
-      }),
-    {
-      wrapper: TestQueryProvider
-    }
-  );
+	renderHook(
+		() =>
+			useLicenseExpirationWarning({
+				module: "centreon-autodiscovery-server",
+			}),
+		{
+			wrapper: TestQueryProvider,
+		},
+	);
 };
 
 const currentDate = dayjs();
 
-describe('License', () => {
-  it('does not display any warning message when the license expires in more than 15 days from the current date', () => {
-    mockRequest({ expirationDate: currentDate.add(20, 'day') });
-    initialize();
+describe("License", () => {
+	it("does not display any warning message when the license expires in more than 15 days from the current date", () => {
+		mockRequest({ expirationDate: currentDate.add(20, "day") });
+		initialize();
 
-    waitFor(() => {
-      expect(getFetchCall(0)).toEqual(
-        'internal.php?object=centreon_module&action=list'
-      );
-    });
+		waitFor(() => {
+			expect(getFetchCall(0)).toEqual(
+				"internal.php?object=centreon_module&action=list",
+			);
+		});
 
-    expect(showMessage).not.toHaveBeenCalled();
-  });
+		expect(showMessage).not.toHaveBeenCalled();
+	});
 
-  it('displays a warning message when the license expires within 15 days', () => {
-    mockRequest({ expirationDate: currentDate.add(10.5, 'day') });
-    initialize();
+	it("displays a warning message when the license expires within 15 days", () => {
+		mockRequest({ expirationDate: currentDate.add(10.5, "day") });
+		initialize();
 
-    waitFor(() => {
-      expect(getFetchCall(0)).toEqual(
-        'internal.php?object=centreon_module&action=list'
-      );
-    });
+		waitFor(() => {
+			expect(getFetchCall(0)).toEqual(
+				"internal.php?object=centreon_module&action=list",
+			);
+		});
 
-    waitFor(() => {
-      expect(showMessage).toHaveBeenCalledWith(
-        labelLicenseWarning('centreon-autodiscovery-server', 10)
-      );
-    });
-  });
+		waitFor(() => {
+			expect(showMessage).toHaveBeenCalledWith(
+				labelLicenseWarning("centreon-autodiscovery-server", 10),
+			);
+		});
+	});
 });

package/src/utils/useLicenseExpirationWarning.ts

@@ -1,11 +1,9 @@
-import { useEffect } from 'react';
-
 import dayjs from 'dayjs';
-import { path, find, isNil, lt, pipe, propEq } from 'ramda';
+import { find, isNil, lt, path, pipe, propEq } from 'ramda';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useFetchQuery, useSnackbar } from '..';
-
 import { labelLicenseWarning } from './translatedLabel';
 
 const legacyBaseEndpoint = './api/internal.php';
@@ -48,5 +46,5 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
     if (lt(daysUntilExpiration, 15)) {
       showWarningMessage(t(labelLicenseWarning(module, daysUntilExpiration)));
     }
-  }, [data]);
+  }, [data, currentDate, getExpirationDate, module, showWarningMessage, t]);
 };

package/src/utils/useLoadImage.tsx

@@ -1,6 +1,5 @@
-import { useLayoutEffect } from 'react';
-
 import { useSetAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
 
 const loadImage = (imagePath: string): Promise<string> =>
   new Promise((resolve, reject) => {
@@ -22,5 +21,5 @@ export const useLoadImage = ({ imagePath, atom }): void => {
       .catch(() => {
         setImage(null);
       });
-  }, [imagePath]);
+  }, [imagePath, setImage]);
 };

package/src/utils/useLocale/index.ts

@@ -1,4 +1,5 @@
 import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+
 import { useAtomValue } from 'jotai';
 
 export const useLocale = () => {