@centreon/ui 24.4.73 → 24.4.74

package/src/utils/useLicenseExpirationWarning.test.tsx

@@ -0,0 +1,148 @@
+import dayjs from 'dayjs';
+import { renderHook } from '@testing-library/react';
+
+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, pipe, propEq, find, lt, isNil } 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/useLocale/index.ts

@@ -0,0 +1,10 @@
+import { useAtomValue } from 'jotai';
+
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+
+export const useLocale = (): string => {
+  const user = useAtomValue(userAtom);
+  const browserLocale = useAtomValue(browserLocaleAtom);
+
+  return user.locale || browserLocale;
+};

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

@@ -0,0 +1,40 @@
+import { Provider, createStore } from 'jotai';
+
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+
+import { useLocale } from '.';
+
+const TestComponent = (): JSX.Element => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+const initialize = ({ userLocale, browserLocale }): void => {
+  const store = createStore();
+
+  store.set(userAtom, { locale: userLocale });
+  store.set(browserLocaleAtom, browserLocale);
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent />
+      </Provider>
+    )
+  });
+};
+
+describe('useLocale', () => {
+  it('displays the user locale when the corresponding atom is set', () => {
+    initialize({ browserLocale: 'en', userLocale: 'fi' });
+
+    cy.contains('fi').should('be.visible');
+  });
+
+  it('displays the browser locale when the user locale is not set', () => {
+    initialize({ browserLocale: 'de', userLocale: null });
+
+    cy.contains('de').should('be.visible');
+  });
+});

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

@@ -10,7 +10,7 @@ import { Provider, useSetAtom } from 'jotai';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,9 +1,12 @@
 import dayjs from 'dayjs';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../useLocale';
+
 import shortLocales from './sortLocales';
 
 interface FormatParameters {
@@ -20,15 +23,18 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
+dayjs.extend(localizedFormat);
+
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 
 const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
-  const { locale, timezone } = useAtomValue(userAtom);
+  const locale = useLocale();
+  const { timezone } = useAtomValue(userAtom);
 
   const format = ({ date, formatString }: FormatParameters): string => {
-    const normalizedLocale = locale.substring(0, 2);
+    const normalizedLocale = locale?.substring(0, 2);
 
     const timezoneDate = dayjs(
       new Date(date).toLocaleString('en', { timeZone: timezone })
@@ -87,5 +93,4 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export default useLocaleDateTimeFormat;
-export { dateTimeFormat, dateFormat, timeFormat };
+export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };

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

@@ -10,7 +10,7 @@ import { render, RenderResult } from '@testing-library/react';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useMemoComponent.ts

@@ -19,7 +19,7 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-const useMemoComponent = ({
+export const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>

package/src/utils/usePluralizedTranslation.ts

@@ -0,0 +1,21 @@
+import pluralize from 'pluralize';
+import { useTranslation } from 'react-i18next';
+
+interface TProps {
+  count: number;
+  label: string;
+}
+
+export const usePluralizedTranslation = (): {
+  pluralizedT: (props: TProps) => string;
+} => {
+  const translation = useTranslation();
+
+  const pluralizedT = ({ label, count }: TProps): string => {
+    return pluralize(translation.t(label), count);
+  };
+
+  return {
+    pluralizedT
+  };
+};

package/src/utils/useRefreshInterval.ts

@@ -0,0 +1,39 @@
+import { useAtomValue } from 'jotai';
+import { always, cond, equals } from 'ramda';
+
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
+interface Props {
+  globalRefreshInterval?: {
+    interval: number | null;
+    type: 'global' | 'manual';
+  };
+  refreshInterval: 'default' | 'custom' | 'manual';
+  refreshIntervalCustom?: number;
+}
+
+export const useRefreshInterval = ({
+  refreshInterval,
+  refreshIntervalCustom,
+  globalRefreshInterval = {
+    interval: null,
+    type: 'global'
+  }
+}: Props): number | false => {
+  const platformInterval = useAtomValue(refreshIntervalAtom);
+
+  const refreshIntervalToUse = cond([
+    [
+      equals('default'),
+      always(
+        equals(globalRefreshInterval.type, 'manual')
+          ? false
+          : globalRefreshInterval.interval || platformInterval
+      )
+    ],
+    [equals('custom'), always(refreshIntervalCustom)],
+    [equals('manual'), always(false)]
+  ])(refreshInterval);
+
+  return refreshIntervalToUse ? (refreshIntervalToUse as number) * 1000 : false;
+};

package/src/utils/useResizeObserver.ts

@@ -0,0 +1,6 @@
+// https://github.com/ZeeCoder/use-resize-observer
+import useResizeObserver from 'use-resize-observer';
+
+export * from 'use-resize-observer';
+
+export { useResizeObserver };

package/{setupTests.js → test/setupTests.js}

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
-// import '@testing-library/jest-dom/extend-expect';
+
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';

package/{src → test}/testRenderer.tsx

@@ -9,7 +9,7 @@ import fetchMock, { MockParams } from 'jest-fetch-mock';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import ThemeProvider from './StoryBookThemeProvider';
+import ThemeProvider from '../src/StoryBookThemeProvider';
 
 interface Props {
   children: ReactElement;

package/.storybook/main.js

@@ -1,82 +0,0 @@
-const { equals } = require("ramda");
-
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)(?!(centreon-frontend(\\|\/)packages(\\|\/)(ui-context|centreon-ui)))/;
-  
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  features: {
-    previewMdx2: true,
-  },
-  stories: ['../src/*.stories.mdx', '../src/**/*.stories.@(jsx|tsx)'],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  },
-  addons: [
-    'storybook-addon-mock/register',
-    'storybook-dark-mode',
-    '@storybook/addon-controls', 
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
-    },
-  ],
-  webpackFinal: (config) => {
-    delete config.resolve.alias['emotion-theming'];
-    delete config.resolve.alias['@emotion/styled'];
-    delete config.resolve.alias['@emotion/core'];
-
-    const configWithoutEmotionAliases = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        extensions: ['.js', '.ts', '.tsx'],
-      },
-      module: {
-        ...config.module,
-        rules: [
-          {
-            test: /\.tsx?$/,
-            exclude: /node_modules(\\|\/)(?!(@centreon))/,
-            use: {
-              loader: 'swc-loader',
-              options: {
-                jsc: {
-                  transform: {
-                    react: {
-                      runtime: 'automatic',
-                    },
-                  },
-                  parser: {
-                    syntax: 'typescript',
-                  },
-                },
-                parseMap: true,
-              },
-            }
-          },
-          {
-            exclude: excludeNodeModulesExceptCentreonUi,
-            test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
-            use: [
-              {
-                loader: 'url-loader',
-                options: {
-                  limit: 10000,
-                  name: '[name].[hash:8].[ext]',
-                },
-              },
-            ],
-          },
-          ...(config.module.rules.filter(({ type }) => !equals(type, 'asset/resource'))),
-        ],
-      },
-    }
-
-    return configWithoutEmotionAliases;
-  }
-};

package/.storybook/preview.tsx

@@ -1,21 +0,0 @@
-import { addDecorator } from '@storybook/react';
-
-import { useDarkMode } from 'storybook-dark-mode';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import StoryBookThemeProvider from '../src/StoryBookThemeProvider';
-import QueryProvider from '../src/api/QueryProvider';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-
-const withThemeProvider = (story): JSX.Element => (
-  <StoryBookThemeProvider themeMode={useDarkMode() ? ThemeMode.dark :  ThemeMode.light}>
-    <QueryProvider>
-      {story()}
-      <ReactQueryDevtools />
-    </QueryProvider>
-  </StoryBookThemeProvider>
-);
-
-addDecorator(withThemeProvider);

package/jest.config.js

@@ -1,20 +0,0 @@
-const baseConfig = require('../js-config/jest');
-
-module.exports = {
-  ...baseConfig,
-  moduleNameMapper: {
-    '\\.(s?css|png|svg)$': 'identity-obj-proxy',
-    '^react($|/.+)': '<rootDir>/../../node_modules/react$1'
-  },
-  reporters: ['default', ['jest-junit', { outputName: 'junit.xml' }]],
-  roots: ['<rootDir>/src/'],
-  setupFilesAfterEnv: [
-    '<rootDir>/setupTests.js',
-    '@testing-library/jest-dom/extend-expect'
-  ],
-  testResultsProcessor: 'jest-junit',
-  transform: {
-    ...baseConfig.transform,
-    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx'
-  }
-};

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import SvgIcon from '@mui/material/SvgIcon';
-
-import { labelDragHandle } from '../../translatedLabels';
-
-interface Icon {
-  className?: string;
-  columnLabel?: string;
-  isInteractive?: boolean;
-  visible?: boolean;
-}
-
-const DraggableIcon = ({
-  visible = false,
-  columnLabel,
-  className,
-  isInteractive = false,
-  ...rest
-}: Icon): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <SvgIcon
-      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
-      fontSize="medium"
-      {...rest}
-      className={className}
-      role={isInteractive ? 'button' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {visible && (
-        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
-      )}
-    </SvgIcon>
-  );
-};
-
-export default DraggableIcon;

package/src/Listing/Skeleton.tsx

@@ -1,11 +0,0 @@
-import LoadingSkeleton from '../LoadingSkeleton';
-
-const ListingLoadingSkeleton = (): JSX.Element => (
-  <>
-    {['skeleton1', 'skeleton2', 'skeleton3'].map((key) => (
-      <LoadingSkeleton height={20} key={key} variant="text" width="100%" />
-    ))}
-  </>
-);
-
-export default ListingLoadingSkeleton;

package/src/storyshots.test.js

@@ -1,52 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots';
-import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
-
-jest.unmock('axios');
-
-const getMatchOptions = () => {
-  return {
-    failureThreshold: 0.2,
-    failureThresholdType: 'percent'
-  };
-};
-
-const beforeScreenshot = async (page) => {
-  await page.addStyleTag({
-    content: `
-    *,
-    *::before,
-    *::after {
-      animation-delay: -1s !important;
-      animation-duration: 0s !important;
-      animation-iteration-count: 1 !important;
-      background-attachment: initial !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0s !important;
-      transition: none !important;
-    }`
-  });
-
-  await page.setViewport({
-    height: 1000,
-    width: 1000
-  });
-};
-
-const getStoryKindRegex = () => {
-  const config = JSON.parse(process.env.TEST_CONFIGURATION);
-  if (!config.story) {
-    return null;
-  }
-
-  return new RegExp(`^(${config.story || ''})$`, 'g');
-};
-
-initStoryshots({
-  storyKindRegex: getStoryKindRegex(),
-  suite: 'Image StoryShots',
-  test: imageSnapshot({
-    beforeScreenshot,
-    getMatchOptions,
-    storybookUrl: `file://${__dirname}/../.out`
-  })
-});

package/testRunner.js

@@ -1,36 +0,0 @@
-/* eslint-disable array-callback-return */
-/* eslint-disable consistent-return */
-const config = {
-  story: null
-};
-
-const argv = process.argv.slice(0, 2);
-
-process.argv.reduce((cmd, arg) => {
-  if (cmd) {
-    config[cmd] = arg;
-
-    return;
-  }
-
-  if (arg.startsWith('--')) {
-    const sub = arg.substring('--'.length);
-    if (Object.keys(config).includes(sub)) {
-      if (typeof config[sub] === 'boolean') {
-        config[cmd] = true;
-
-        return;
-      }
-
-      return sub;
-    }
-  }
-
-  argv.push(arg);
-});
-
-process.argv = argv;
-
-process.env.TEST_CONFIGURATION = JSON.stringify(config);
-
-require('jest/bin/jest');