@centreon/ui 26.3.4 → 26.3.6

package/src/utils/useLocale/useLocale.cypress.spec.tsx

@@ -1,5 +1,7 @@
 import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
-import { Provider, createStore } from 'jotai';
+
+import { createStore, Provider } from 'jotai';
+
 import { useLocale } from '.';
 
 const TestComponent = () => {
@@ -25,7 +27,7 @@ const initialize = ({ userLocale, browserLocale }) => {
 
 describe('useLocale', () => {
   it('displays the user locale when the corresponding atom is set', () => {
-    initialize({ userLocale: 'fi', browserLocale: 'en' });
+    initialize({ browserLocale: 'en', userLocale: 'fi' });
 
     cy.contains('fi').should('be.visible');
   });

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

@@ -1,103 +1,103 @@
-import { useEffect } from 'react';
+import dayjs from "dayjs";
+import { useEffect } from "react";
+import "dayjs/locale/en";
 
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import { RenderResult, render } from '@testing-library/react';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { Provider, useSetAtom } from 'jotai';
+import { ThemeMode, userAtom } from "@centreon/ui-context";
+import { type RenderResult, render } from "@testing-library/react";
+import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
+import timezonePlugin from "dayjs/plugin/timezone";
+import utcPlugin from "dayjs/plugin/utc";
+import { Provider, useSetAtom } from "jotai";
 
-import { ThemeMode, userAtom } from '@centreon/ui-context';
-
-import { useLocaleDateTimeFormat } from '.';
+import { useLocaleDateTimeFormat } from ".";
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
 dayjs.extend(localizedFormatPlugin);
 
+// biome-ignore lint/suspicious/noImplicitAnyLet: need it
 let context;
 
 const TestComponent = (): JSX.Element => {
-  const localeDateTimeFormat = useLocaleDateTimeFormat();
-  const setUser = useSetAtom(userAtom);
-
-  useEffect(() => {
-    setUser({
-      alias: 'admin',
-      default_page: '/monitoring/resources',
-      isExportButtonEnabled: false,
-      locale: 'en',
-      name: 'admin',
-      themeMode: ThemeMode.light,
-      timezone: 'Europe/Paris',
-      use_deprecated_pages: false
-    });
-  }, []);
-
-  context = localeDateTimeFormat;
-
-  return <div />;
+	const localeDateTimeFormat = useLocaleDateTimeFormat();
+	const setUser = useSetAtom(userAtom);
+
+	useEffect(() => {
+		setUser({
+			alias: "admin",
+			default_page: "/monitoring/resources",
+			isExportButtonEnabled: false,
+			locale: "en",
+			name: "admin",
+			themeMode: ThemeMode.light,
+			timezone: "Europe/Paris",
+			use_deprecated_pages: false,
+		});
+	}, [setUser]);
+
+	context = localeDateTimeFormat;
+
+	return <div />;
 };
 
 const renderLocaleDateTimeFormat = (): RenderResult => {
-  return render(
-    <Provider>
-      <TestComponent />
-    </Provider>
-  );
+	return render(
+		<Provider>
+			<TestComponent />
+		</Provider>,
+	);
 };
 
-const dateTime = '1995-12-17T03:24:00Z';
+const dateTime = "1995-12-17T03:24:00Z";
 
 describe(useLocaleDateTimeFormat, () => {
-  describe('toDateTime', () => {
-    it('formats the given Date to a string showing the date and the time', () => {
-      renderLocaleDateTimeFormat();
+	describe("toDateTime", () => {
+		it("formats the given Date to a string showing the date and the time", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toDateTime(new Date(dateTime));
+			const formattedDateTime = context.toDateTime(new Date(dateTime));
 
-      expect(formattedDateTime).toEqual('12/17/1995 4:24 AM');
-    });
-  });
+			expect(formattedDateTime).toEqual("12/17/1995 4:24 AM");
+		});
+	});
 
-  describe('toDate', () => {
-    it('formats the given Date to a string showing the date', () => {
-      renderLocaleDateTimeFormat();
+	describe("toDate", () => {
+		it("formats the given Date to a string showing the date", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toDate(new Date(dateTime));
+			const formattedDateTime = context.toDate(new Date(dateTime));
 
-      expect(formattedDateTime).toEqual('12/17/1995');
-    });
-  });
+			expect(formattedDateTime).toEqual("12/17/1995");
+		});
+	});
 
-  describe('toTime', () => {
-    it('formats the given Date to a string showing the time', () => {
-      renderLocaleDateTimeFormat();
+	describe("toTime", () => {
+		it("formats the given Date to a string showing the time", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toTime(new Date(dateTime));
+			const formattedDateTime = context.toTime(new Date(dateTime));
 
-      expect(formattedDateTime).toEqual('4:24 AM');
-    });
-  });
+			expect(formattedDateTime).toEqual("4:24 AM");
+		});
+	});
 
-  describe('toIsoString', () => {
-    it('formats the given Date to an ISO complient string', () => {
-      renderLocaleDateTimeFormat();
+	describe("toIsoString", () => {
+		it("formats the given Date to an ISO complient string", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toIsoString(new Date(dateTime));
+			const formattedDateTime = context.toIsoString(new Date(dateTime));
 
-      expect(formattedDateTime).toEqual('1995-12-17T03:24:00Z');
-    });
-  });
+			expect(formattedDateTime).toEqual("1995-12-17T03:24:00Z");
+		});
+	});
 
-  describe('toHumanizedDuration', () => {
-    it('formats the given duration to a humanized duration', () => {
-      renderLocaleDateTimeFormat();
+	describe("toHumanizedDuration", () => {
+		it("formats the given duration to a humanized duration", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toHumanizedDuration(22141);
+			const formattedDateTime = context.toHumanizedDuration(22141);
 
-      expect(formattedDateTime).toEqual('6h 9m 1s');
-    });
-  });
+			expect(formattedDateTime).toEqual("6h 9m 1s");
+		});
+	});
 });

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,10 +1,10 @@
+import { userAtom } from '@centreon/ui-context';
+
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
 
-import { userAtom } from '@centreon/ui-context';
-
 import { useLocale } from '../useLocale';
 import shortLocales from './sortLocales';
 

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

@@ -1,61 +1,61 @@
-import { useEffect } from 'react';
+import dayjs from "dayjs";
+import { useEffect } from "react";
+import "dayjs/locale/en";
 
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import { RenderResult, render } from '@testing-library/react';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { Provider, useSetAtom } from 'jotai';
+import { ThemeMode, userAtom } from "@centreon/ui-context";
+import { type RenderResult, render } from "@testing-library/react";
+import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
+import timezonePlugin from "dayjs/plugin/timezone";
+import utcPlugin from "dayjs/plugin/utc";
+import { Provider, useSetAtom } from "jotai";
 
-import { ThemeMode, userAtom } from '@centreon/ui-context';
-
-import { useLocaleDateTimeFormat } from '.';
+import { useLocaleDateTimeFormat } from ".";
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
 dayjs.extend(localizedFormatPlugin);
 
+// biome-ignore lint/suspicious/noImplicitAnyLet: need it
 let context;
 
 const TestComponent = (): JSX.Element => {
-  const localeDateTimeFormat = useLocaleDateTimeFormat();
-  const setUser = useSetAtom(userAtom);
-
-  useEffect(() => {
-    setUser({
-      alias: 'admin',
-      default_page: '/monitoring/resources',
-      isExportButtonEnabled: false,
-      locale: 'unsupported_locale',
-      name: 'admin',
-      themeMode: ThemeMode.light,
-      timezone: 'Europe/Paris',
-      use_deprecated_pages: false
-    });
-  }, []);
-
-  context = localeDateTimeFormat;
-
-  return <div />;
+	const localeDateTimeFormat = useLocaleDateTimeFormat();
+	const setUser = useSetAtom(userAtom);
+
+	useEffect(() => {
+		setUser({
+			alias: "admin",
+			default_page: "/monitoring/resources",
+			isExportButtonEnabled: false,
+			locale: "unsupported_locale",
+			name: "admin",
+			themeMode: ThemeMode.light,
+			timezone: "Europe/Paris",
+			use_deprecated_pages: false,
+		});
+	}, [setUser]);
+
+	context = localeDateTimeFormat;
+
+	return <div />;
 };
 
 const renderLocaleDateTimeFormat = (): RenderResult => {
-  return render(
-    <Provider>
-      <TestComponent />
-    </Provider>
-  );
+	return render(
+		<Provider>
+			<TestComponent />
+		</Provider>,
+	);
 };
 
 describe(useLocaleDateTimeFormat, () => {
-  describe('toHumanizedDuration', () => {
-    it('formats the given duration in English to a humanized duration when the locale is unsupported', () => {
-      renderLocaleDateTimeFormat();
+	describe("toHumanizedDuration", () => {
+		it("formats the given duration in English to a humanized duration when the locale is unsupported", () => {
+			renderLocaleDateTimeFormat();
 
-      const formattedDateTime = context.toHumanizedDuration(22141);
+			const formattedDateTime = context.toHumanizedDuration(22141);
 
-      expect(formattedDateTime).toEqual('6h 9m 1s');
-    });
-  });
+			expect(formattedDateTime).toEqual("6h 9m 1s");
+		});
+	});
 });

package/src/utils/useLocaleTimezoneDate/LocaleTimezoneDate.cypress.spec.tsx

@@ -8,7 +8,8 @@ import 'dayjs/locale/fr';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/pt';
-import { Props, useLocaleTimezoneDate } from './useLocaleTimezoneDate';
+
+import { type Props, useLocaleTimezoneDate } from './useLocaleTimezoneDate';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);

package/src/utils/useLocaleTimezoneDate/useLocaleTimezoneDate.ts

@@ -1,7 +1,6 @@
-import { useCallback } from 'react';
-
-import { Dayjs } from 'dayjs';
+import type { Dayjs } from 'dayjs';
 import { isNil } from 'ramda';
+import { useCallback } from 'react';
 
 export interface Props {
   date: Dayjs;
@@ -31,7 +30,7 @@ export const useLocaleTimezoneDate = (): UseLocaleTimeZoneDate => {
     ({ date, locale = 'en', timezone, format = 'L LT' }: Props): string => {
       return toLocaleTimezoneDate({ date, locale, timezone }).format(format);
     },
-    []
+    [toLocaleTimezoneDate]
   );
 
   return {

package/src/utils/useMemoComponent.ts

@@ -1,6 +1,5 @@
-import { DependencyList, ReactElement, useMemo, useRef } from 'react';
-
 import { equals } from 'ramda';
+import { type DependencyList, type ReactElement, useMemo, useRef } from 'react';
 
 export const useDeepCompare = (value: DependencyList): Array<number> => {
   const ref = useRef<React.DependencyList>();
@@ -23,6 +22,6 @@ export const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>
-  useMemo(() => Component, useDeepCompare(memoProps));
+  useMemo(() => Component, [...useDeepCompare(memoProps), Component]);
 
 export default useMemoComponent;

package/src/utils/usePluralizedTranslation.test.ts

@@ -1,8 +1,8 @@
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
 import { act, renderHook } from '@testing-library/react';
 import { useAtom } from 'jotai';
 
-import { ListingVariant, userAtom } from '@centreon/ui-context';
-
 import { usePluralizedTranslation } from './usePluralizedTranslation';
 
 const baseUser = {

package/src/utils/usePluralizedTranslation.ts

@@ -1,7 +1,6 @@
-import { useCallback } from 'react';
-
 import pluralize from 'pluralize';
 import { equals, includes } from 'ramda';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useLocale } from './useLocale';
@@ -28,7 +27,7 @@ export const usePluralizedTranslation = (): {
         isZero && isNotPartitiveLocale ? 1 : count
       );
     },
-    [isNotPartitiveLocale]
+    [isNotPartitiveLocale, translation.t]
   );
 
   return {

package/src/utils/useRefreshInterval.ts

@@ -1,8 +1,8 @@
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
 import { useAtomValue } from 'jotai';
 import { always, cond, equals } from 'ramda';
 
-import { refreshIntervalAtom } from '@centreon/ui-context';
-
 interface Props {
   globalRefreshInterval?: {
     interval: number | null;

package/src/utils/useThemeMode.ts

@@ -1,9 +1,9 @@
-import { equals } from 'ramda';
-
 import { useTheme } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import { equals } from 'ramda';
+
 /**
  * Hook that a return an isDarkMode boolean value.
  * @returns {boolean} isDarkMode

package/src/utils/useViewportIntersection.ts

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import {
+  type Dispatch,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 
 interface ViewportIntersectionState {
   isInViewport: boolean;
@@ -30,7 +36,7 @@ export const useViewportIntersection = (
     return (): void => {
       observer.current?.disconnect();
     };
-  }, [element]);
+  }, [element, options]);
 
   return {
     isInViewport: entry?.isIntersecting ?? true,

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -1,64 +0,0 @@
-import {
-  RenderResult,
-  fireEvent,
-  getFetchCall,
-  mockResponse,
-  render,
-  resetMocks,
-  waitFor
-} from '../../../../../../test/testRenderer';
-import TestQueryProvider from '../../../../../api/TestQueryProvider';
-
-import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
-
-import MultiConnectedAutocompleteField from '.';
-
-const renderMultiAutocompleteField = (customRenderTags?): RenderResult =>
-  render(
-    <TestQueryProvider>
-      <MultiConnectedAutocompleteField
-        baseEndpoint=""
-        field="host.name"
-        getEndpoint={getEndpoint}
-        label={label}
-        placeholder="Type here..."
-        value={[optionsData.result[0]]}
-        customRenderTags={customRenderTags}
-      />
-    </TestQueryProvider>
-  );
-
-describe(MultiConnectedAutocompleteField, () => {
-  beforeEach(() => {
-    resetMocks();
-    mockResponse({ data: optionsData });
-  });
-
-  it('excludes selected value ids from the search request', async () => {
-    const { getByLabelText } = renderMultiAutocompleteField();
-
-    fireEvent.click(getByLabelText('Open'));
-
-    await waitFor(() => {
-      expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
-    });
-  });
-
-  it('display tags when customTagsRender is defined', async () => {
-    const customRender = (tags: React.ReactNode): React.ReactNode => (
-      <div data-testid="custom-tags-wrapper">
-        {tags}
-      </div>
-    );
-
-    const { getByLabelText, getByTestId } = renderMultiAutocompleteField(customRender);
-
-    fireEvent.click(getByLabelText('Open'));
-
-    await waitFor(() => {
-      const tagChip = getByTestId(`tag-option-chip-${optionsData.result[0].id}`);
-      expect(tagChip).toBeVisible();
-      expect(tagChip).toHaveTextContent(optionsData.result[0].name);
-    });
-  });
-});