@centreon/ui 24.11.14 → 24.11.21

package/src/utils/useIntersectionObserver.ts

@@ -1,17 +1,19 @@
-import { useRef, useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 interface HookParam {
   action: () => void;
+  intersectionObserverOptions?: IntersectionObserverInit;
   loading: boolean;
   maxPage: number;
   page: number;
 }
 
-const useIntersectionObserver = ({
+export const useIntersectionObserver = ({
   maxPage,
   page,
   loading,
-  action
+  action,
+  intersectionObserverOptions
 }: HookParam): ((node) => void) => {
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
@@ -30,7 +32,7 @@ const useIntersectionObserver = ({
         if (entry.isIntersecting && page < maxPage) {
           action();
         }
-      });
+      }, intersectionObserverOptions);
 
       if (node && observer.current) {
         observer.current.observe(node);
@@ -41,5 +43,3 @@ const useIntersectionObserver = ({
 
   return lastElementRef;
 };
-
-export default useIntersectionObserver;

package/src/utils/useKeyObserver.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
 }
 
-const useKeyObserver = (): UseKeyObserverProps => {
+export const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
   const pressShift = (): void => setIsShiftKeyDown(true);
@@ -34,5 +34,3 @@ const useKeyObserver = (): UseKeyObserverProps => {
     isShiftKeyDown
   };
 };
-
-export default useKeyObserver;

package/src/utils/useLicenseExpirationWarning.test.tsx

@@ -0,0 +1,148 @@
+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 '.';
+
+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
+});
+
+const mockRequest = ({ expirationDate }: { expirationDate }): void => {
+  resetMocks();
+  mockResponse({
+    data: getMockedResponse(expirationDate)
+  });
+};
+
+const showMessage = jest.fn();
+
+jest.mock('../Snackbar/useSnackbar', () => ({
+  __esModule: true,
+  default: jest
+    .fn()
+    .mockImplementation(() => ({ showWarningMessage: showMessage }))
+}));
+
+const initialize = (): void => {
+  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();
+
+    waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        'internal.php?object=centreon_module&action=list'
+      );
+    });
+
+    expect(showMessage).not.toHaveBeenCalled();
+  });
+
+  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(showMessage).toHaveBeenCalledWith(
+        labelLicenseWarning('centreon-autodiscovery-server', 10)
+      );
+    });
+  });
+});

package/src/utils/useLicenseExpirationWarning.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+
+import dayjs from 'dayjs';
+import { path, find, isNil, lt, pipe, propEq } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { useFetchQuery, useSnackbar } from '..';
+
+import { labelLicenseWarning } from './translatedLabel';
+
+const legacyBaseEndpoint = './api/internal.php';
+const extensionsEndpoint = `${legacyBaseEndpoint}?object=centreon_module&action=list`;
+
+interface Props {
+  module: string;
+}
+
+export const useLicenseExpirationWarning = ({ module }: Props): void => {
+  const { t } = useTranslation();
+  const { showWarningMessage } = useSnackbar();
+
+  const { data } = useFetchQuery({
+    getEndpoint: () => extensionsEndpoint,
+    getQueryKey: () => [module]
+  });
+
+  const currentDate = dayjs();
+
+  const getExpirationDate = pipe(
+    path(['result', 'module', 'entities']),
+    find(propEq(module, 'id')),
+    path(['license', 'expiration_date'])
+  ) as (data) => string;
+
+  useEffect(() => {
+    if (isNil(data)) {
+      return;
+    }
+
+    const expirationDate = getExpirationDate(data);
+
+    if (isNil(expirationDate)) {
+      return;
+    }
+
+    const daysUntilExpiration = dayjs(expirationDate).diff(currentDate, 'day');
+
+    if (lt(daysUntilExpiration, 15)) {
+      showWarningMessage(t(labelLicenseWarning(module, daysUntilExpiration)));
+    }
+  }, [data]);
+};

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

@@ -2,15 +2,15 @@ import { useEffect } from 'react';
 
 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 localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import { render, RenderResult } from '@testing-library/react';
 import { Provider, useSetAtom } from 'jotai';
 
-import { userAtom, ThemeMode } from '@centreon/ui-context';
+import { ThemeMode, userAtom } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
 
@@ -20,6 +21,8 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
+dayjs.extend(localizedFormat);
+
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
@@ -87,5 +90,4 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export default useLocaleDateTimeFormat;
-export { dateTimeFormat, dateFormat, timeFormat };
+export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };

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

@@ -2,15 +2,15 @@ import { useEffect } from 'react';
 
 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 localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import { useSetAtom, Provider } from 'jotai';
-import { render, RenderResult } from '@testing-library/react';
+import { Provider, useSetAtom } from 'jotai';
 
-import { userAtom, ThemeMode } from '@centreon/ui-context';
+import { ThemeMode, userAtom } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

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

@@ -0,0 +1,98 @@
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+import 'dayjs/locale/de';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import 'dayjs/locale/pt';
+import { Props, useLocaleTimezoneDate } from './useLocaleTimezoneDate';
+
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+
+const date = dayjs(1602252661000);
+
+const Test = ({
+  locale,
+  timezone,
+  format
+}: Omit<Props, 'date'>): JSX.Element => {
+  const { formatDate } = useLocaleTimezoneDate();
+
+  return <p>{formatDate({ date, format, locale, timezone })}</p>;
+};
+
+const initialize = ({ timezone, locale, format }): void => {
+  cy.mount({
+    Component: <Test format={format} locale={locale} timezone={timezone} />
+  });
+};
+
+const locales = [undefined, 'en-GB', 'fr-FR', 'de-DE'];
+const timezones = [
+  'Europe/Paris',
+  'Europe/London',
+  'UTC',
+  'Africa/Casablanca',
+  'America/New_York'
+];
+const formats = ['L LT', 'LLLL'];
+
+const resultsEN = [
+  '10/09/2020 4:11 PM',
+  'Friday, October 9, 2020 4:11 PM',
+  '10/09/2020 3:11 PM',
+  'Friday, October 9, 2020 3:11 PM',
+  '10/09/2020 2:11 PM',
+  'Friday, October 9, 2020 2:11 PM',
+  '10/09/2020 3:11 PM',
+  'Friday, October 9, 2020 3:11 PM',
+  '10/09/2020 10:11 AM',
+  'Friday, October 9, 2020 10:11 AM'
+];
+
+const resultsFR = [
+  '09/10/2020 16:11',
+  'vendredi 9 octobre 2020 16:11',
+  '09/10/2020 15:11',
+  'vendredi 9 octobre 2020 15:11',
+  '09/10/2020 14:11',
+  'vendredi 9 octobre 2020 14:11',
+  '09/10/2020 15:11',
+  'vendredi 9 octobre 2020 15:11',
+  '09/10/2020 10:11',
+  'vendredi 9 octobre 2020 10:11'
+];
+
+const resultsDE = [
+  '09.10.2020 16:11',
+  'Freitag, 9. Oktober 2020 16:11',
+  '09.10.2020 15:11',
+  'Freitag, 9. Oktober 2020 15:11',
+  '09.10.2020 14:11',
+  'Freitag, 9. Oktober 2020 14:11',
+  '09.10.2020 15:11',
+  'Freitag, 9. Oktober 2020 15:11',
+  '09.10.2020 10:11',
+  'Freitag, 9. Oktober 2020 10:11'
+];
+
+const results = [...resultsEN, ...resultsEN, ...resultsFR, ...resultsDE];
+let index = 0;
+
+locales.forEach((locale) => {
+  timezones.forEach((timezone) => {
+    formats.forEach((format) => {
+      it(`displays the date with the locale ${locale}, the timezone ${timezone} and the format ${format}`, () => {
+        initialize({ format, locale, timezone });
+
+        cy.contains(results[index]).should('be.visible');
+        index += 1;
+      });
+    });
+  });
+});

package/src/utils/useLocaleTimezoneDate/useLocaleTimezoneDate.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { Dayjs } from 'dayjs';
+import { isNil } from 'ramda';
+
+export interface Props {
+  date: Dayjs;
+  format?: string;
+  locale?: string;
+  timezone?: string;
+}
+
+interface UseLocaleTimeZoneDate {
+  formatDate: (props: Props) => string;
+  toLocaleTimezoneDate: (props: Omit<Props, 'format'>) => Dayjs;
+}
+
+export const useLocaleTimezoneDate = (): UseLocaleTimeZoneDate => {
+  const toLocaleTimezoneDate = useCallback(
+    ({ date, locale = 'en', timezone }: Omit<Props, 'format'>): Dayjs => {
+      if (isNil(timezone)) {
+        return date.locale(locale);
+      }
+
+      return date.locale(locale).tz(timezone);
+    },
+    []
+  );
+
+  const formatDate = useCallback(
+    ({ date, locale = 'en', timezone, format = 'L LT' }: Props): string => {
+      return toLocaleTimezoneDate({ date, locale, timezone }).format(format);
+    },
+    []
+  );
+
+  return {
+    formatDate,
+    toLocaleTimezoneDate
+  };
+};

package/src/utils/useMemoComponent.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef, DependencyList, ReactElement } from 'react';
+import { DependencyList, ReactElement, useMemo, useRef } from 'react';
 
 import { equals } from 'ramda';
 
@@ -19,7 +19,7 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-const useMemoComponent = ({
+export const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>

package/src/utils/usePluralizedTranslation.test.ts

@@ -0,0 +1,159 @@
+import { act, renderHook } from '@testing-library/react';
+import { useAtom } from 'jotai';
+
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
+import { usePluralizedTranslation } from './usePluralizedTranslation';
+
+const baseUser = {
+  alias: 'admin',
+  isExportButtonEnabled: false,
+  name: 'admin',
+  timezone: 'Europe/Paris',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};
+
+describe('usePluralizedTranslation', () => {
+  describe('English', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'House'
+        })
+      ).toEqual('House');
+    });
+
+    it('returns the plural of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+  });
+
+  describe('French', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'Maison'
+        })
+      ).toEqual('Maisons');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+
+    it('returns the singular of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+  });
+});

package/src/utils/usePluralizedTranslation.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { useAtomValue } from 'jotai';
+import pluralize from 'pluralize';
+import { equals, includes } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { userAtom } from '@centreon/ui-context';
+
+interface TProps {
+  count: number;
+  label: string;
+}
+
+export const usePluralizedTranslation = (): {
+  pluralizedT: (props: TProps) => string;
+} => {
+  const translation = useTranslation();
+  const { locale } = useAtomValue(userAtom);
+
+  const isNotPartitiveLocale = includes('fr', locale);
+
+  const pluralizedT = useCallback(
+    ({ label, count }: TProps): string => {
+      const isZero = equals(count, 0);
+
+      return pluralize(
+        translation.t(label),
+        isZero && isNotPartitiveLocale ? 1 : count
+      );
+    },
+    [isNotPartitiveLocale]
+  );
+
+  return {
+    pluralizedT
+  };
+};