@centreon/ui 24.4.59 → 24.4.61

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { atom, useSetAtom, createStore, Provider } from 'jotai';
+
+import { Button } from '../../Button';
+
+import { ConfirmationModal } from './ConfirmationModal';
+
+const meta: Meta<typeof ConfirmationModal> = {
+  component: ConfirmationModal
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+
+const testAtom = atom<string | null>(null);
+
+const store = createStore();
+
+const Component = (args): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>Click to open modal</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: 'Description',
+      title: 'Title'
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};
+
+export const WithDynamicLabels: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: (data) => `Hello ${data} from description`,
+      title: (data) => `Hello ${data}`
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+
+import { useAtom, PrimitiveAtom } from 'jotai';
+import { equals, pick, type } from 'ramda';
+
+import { Modal } from '..';
+
+export interface ConfirmationModalProps<TAtom> {
+  atom: PrimitiveAtom<string | null>;
+  disabled?: boolean;
+  hasCloseButton?: boolean;
+  isDanger?: boolean;
+  labels: {
+    cancel: string | ((atom: Awaited<TAtom> | null) => string);
+    confirm: string | ((atom: Awaited<TAtom> | null) => string);
+    description: string | ((atom: Awaited<TAtom> | null) => string);
+    title: string | ((atom: Awaited<TAtom> | null) => string);
+  };
+  onCancel?: (atomData: Awaited<TAtom> | null) => void;
+  onClose?: (atomData: Awaited<TAtom> | null) => void;
+  onConfirm?: (atomData: Awaited<TAtom> | null) => void;
+}
+
+interface GetLabelProps<TAtom> {
+  atomData: Awaited<TAtom> | null;
+  label: string | ((atom: Awaited<TAtom> | null) => string);
+}
+
+const getLabel = <TAtom,>({ label, atomData }: GetLabelProps<TAtom>): string =>
+  equals(type(label), 'String')
+    ? (label as string)
+    : (label as (atom: Awaited<TAtom> | null) => string)(atomData);
+
+export const ConfirmationModal = <TAtom,>({
+  atom,
+  labels,
+  onConfirm,
+  onCancel,
+  onClose,
+  hasCloseButton = true,
+  isDanger,
+  disabled
+}: ConfirmationModalProps<TAtom>): JSX.Element => {
+  const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
+
+  const closeModal = (): void => {
+    onClose?.(atomData);
+    setAtomData(null);
+  };
+
+  const formattedLabels = useMemo(() => {
+    return {
+      cancel: getLabel({ atomData, label: labels.cancel }),
+      confirm: getLabel({ atomData, label: labels.confirm }),
+      description: getLabel({ atomData, label: labels.description }),
+      title: getLabel({ atomData, label: labels.title })
+    };
+  }, [labels, atomData]);
+
+  const confirm = (): void => {
+    onConfirm?.(atomData);
+    setAtomData(null);
+  };
+
+  const cancel = (): void => {
+    onCancel?.(atomData);
+    setAtomData(null);
+  };
+
+  return (
+    <Modal
+      hasCloseButton={hasCloseButton}
+      open={Boolean(atomData)}
+      onClose={closeModal}
+    >
+      <Modal.Header>{formattedLabels.title}</Modal.Header>
+      <Modal.Body>{formattedLabels.description}</Modal.Body>
+      <Modal.Actions
+        disabled={disabled}
+        isDanger={isDanger}
+        labels={pick(['confirm', 'cancel'], formattedLabels)}
+        onCancel={cancel}
+        onConfirm={confirm}
+      />
+    </Modal>
+  );
+};

package/src/components/Modal/Modal.styles.ts

@@ -28,6 +28,7 @@ const useStyles = makeStyles<{
       left: props?.left ?? 0,
       margin: 0,
       maxWidth: 'unset',
+      paddingBottom: theme.spacing(8),
       position: 'absolute',
       right: props?.right ?? 0,
       top: props?.top ?? 0,
@@ -50,14 +51,18 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     '&[data-fixed="true"]': {
-      position: 'fixed'
+      background: theme.palette.background.paper,
+      position: 'fixed',
+      width: '100%'
     },
-    bottom: theme.spacing(2),
+    bottom: 0,
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    right: theme.spacing(2)
+    padding: theme.spacing(1, 2.5, 2.5, 0),
+    right: 0,
+    zIndex: theme.zIndex.modal
   },
   modalBody: {
     '& > p': {

package/src/components/Modal/index.ts

@@ -3,6 +3,8 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalActions } from './ModalActions';
 
+export { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
+
 export const Modal = Object.assign(ModalRoot, {
   Actions: ModalActions,
   Body: ModalBody,

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ConfirmationTooltip>;
 
 export const Default: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
     ),
     labels: {
@@ -30,7 +30,7 @@ export const Default: Story = {
 
 export const WithConfirmVariant: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',
@@ -46,7 +46,7 @@ export const WithConfirmVariant: Story = {
 
 export const WithSecondaryLabel: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -49,7 +49,7 @@ export const ConfirmationTooltip = ({
   return (
     <ClickAwayListener onClickAway={close}>
       <div>
-        {children(isOpen ? close : open)}
+        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
         <Popper
           anchorEl={anchorElement}
           className={classes.popper}

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

@@ -11,7 +11,7 @@ interface Labels {
 }
 
 export interface Props {
-  children: (toggleTooltip) => ReactElement;
+  children: ({ toggleTooltip, isOpen }) => ReactElement;
   confirmVariant?: ActionVariants;
   labels: Labels;
   onConfirm: () => void;

package/src/index.ts

@@ -163,8 +163,8 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
+export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';
-
+export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
-export { default as Subtitle } from './Typography/Subtitle';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs } from 'ramda';
+import { fromPairs, startsWith } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,6 +25,10 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
+      if (startsWith('/', value)) {
+        return [key, value];
+      }
+
       return [key, JSON.parse(value)];
     }
   );

package/src/utils/index.ts

@@ -3,7 +3,6 @@ export * from './getNormalizedId';
 export * from './statuses';
 export * from './typedMemo';
 export * from './useCopyToClipboard';
-export * from './useDateTimePickerAdapter';
 export * from './useDebounce';
 export * from './useDeepCallback';
 export * from './useDeepMemo';
@@ -20,5 +19,6 @@ export * from './useInfiniteScrollListing';
 export * from './useLicenseExpirationWarning';
 export * from './useRefreshInterval';
 export * from './centreonBaseURL';
+export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';

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

@@ -110,9 +110,7 @@ describe('Fullscreen', () => {
   });
 
   ['input', 'textarea'].forEach((tag) => {
-    it(`cannot toggle fullscreen feature using the shortcut when ${
-      tag === 'input' ? 'an' : 'a'
-    } ${tag} is focused`, () => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
       initialize();
 
       cy.get('#test')

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -39,13 +39,16 @@ export const useFullscreenListener = (): boolean => {
     resetVariables();
   };
 
-  useEffect(() => {
-    document.addEventListener('fullscreenchange', changeFullscreen);
-
-    return () => {
-      document.removeEventListener('fullscreenchange', changeFullscreen);
-    };
-  }, useDeepCompare([document.fullscreenElement]));
+  useEffect(
+    () => {
+      document.addEventListener('fullscreenchange', changeFullscreen);
+
+      return () => {
+        document.removeEventListener('fullscreenchange', changeFullscreen);
+      };
+    },
+    useDeepCompare([document.fullscreenElement])
+  );
 
   useEffect(() => {
     window.addEventListener('keypress', toggle);

package/src/utils/useInfiniteScrollListing.ts

@@ -24,6 +24,7 @@ interface UseInfiniteScrollListing<T> {
 interface UseInfiniteScrollListingProps<T> {
   customQueryParameters?: Array<QueryParameter>;
   decoder?: JsonDecoder.Decoder<Listing<T>>;
+  enabled?: boolean;
   endpoint: string;
   limit?: number;
   pageAtom: PrimitiveAtom<number>;
@@ -40,7 +41,8 @@ export const useInfiniteScrollListing = <T>({
   suspense = true,
   parameters,
   customQueryParameters,
-  limit = 100
+  limit = 100,
+  enabled = true
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -61,6 +63,7 @@ export const useInfiniteScrollListing = <T>({
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
+      enabled,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       suspense: suspense && equals(page, 1)

package/src/utils/{useLicenseExpirationWarning.cypress.spec.tsx → useLicenseExpirationWarning.test.tsx}

@@ -1,6 +1,13 @@
 import dayjs from 'dayjs';
+import { renderHook } from '@testing-library/react';
 
-import { TestQueryProvider, Method, SnackbarProvider } from '@centreon/ui';
+import {
+  getFetchCall,
+  mockResponse,
+  resetMocks,
+  waitFor
+} from '../../test/testRenderer';
+import TestQueryProvider from '../api/TestQueryProvider';
 
 import { labelLicenseWarning } from './translatedLabel';
 
@@ -79,59 +86,63 @@ const getMockedResponse = (expirationDate): object => ({
 });
 
 const mockRequest = ({ expirationDate }: { expirationDate }): void => {
-  cy.interceptAPIRequest({
-    alias: 'getLicenseInformations',
-    method: Method.GET,
-    path: '**internal.php?object=centreon_module&action=list',
-    response: getMockedResponse(expirationDate)
+  resetMocks();
+  mockResponse({
+    data: getMockedResponse(expirationDate)
   });
 };
 
-const TestComponent = (): JSX.Element => {
-  useLicenseExpirationWarning({
-    module: 'centreon-autodiscovery-server'
-  });
+const showMessage = jest.fn();
 
-  return <div />;
-};
-
-const TestWithQueryProvider = (): JSX.Element => {
-  return (
-    <TestQueryProvider>
-      <SnackbarProvider>
-        <TestComponent />
-      </SnackbarProvider>
-    </TestQueryProvider>
-  );
-};
+jest.mock('../Snackbar/useSnackbar', () => ({
+  __esModule: true,
+  default: jest
+    .fn()
+    .mockImplementation(() => ({ showWarningMessage: showMessage }))
+}));
 
 const initialize = (): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: <TestWithQueryProvider />
-  });
+  renderHook(
+    () =>
+      useLicenseExpirationWarning({
+        module: 'centreon-autodiscovery-server'
+      }),
+    {
+      wrapper: TestQueryProvider
+    }
+  );
 };
 
 const currentDate = dayjs();
 
 describe('License', () => {
-  beforeEach(initialize);
-
   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();
 
-    cy.waitForRequest('@getLicenseInformations');
+    waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        'internal.php?object=centreon_module&action=list'
+      );
+    });
 
-    cy.findByText(
-      labelLicenseWarning('centreon-autodiscovery-server', 20)
-    ).should('not.exist');
+    expect(showMessage).not.toHaveBeenCalled();
   });
+
   it('displays a warning message when the license expires within 15 days', () => {
     mockRequest({ expirationDate: currentDate.add(10.5, 'day') });
-
-    cy.findByText(labelLicenseWarning('centreon-autodiscovery-server', 10));
-
-    cy.makeSnapshot();
+    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

@@ -19,7 +19,7 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
   const { t } = useTranslation();
   const { showWarningMessage } = useSnackbar();
 
-  const { fetchQuery } = useFetchQuery({
+  const { data } = useFetchQuery({
     getEndpoint: () => extensionsEndpoint,
     getQueryKey: () => [module]
   });
@@ -28,25 +28,25 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
 
   const getExpirationDate = pipe(
     path(['result', 'module', 'entities']),
-    find(propEq('id', module)),
+    find(propEq(module, 'id')),
     path(['license', 'expiration_date'])
   ) as (data) => string;
 
   useEffect(() => {
-    fetchQuery().then((response) => {
-      const expirationDate = getExpirationDate(response);
-      if (isNil(expirationDate)) {
-        return;
-      }
-
-      const daysUntilExpiration = dayjs(expirationDate).diff(
-        currentDate,
-        'day'
-      );
-
-      if (lt(daysUntilExpiration, 15)) {
-        showWarningMessage(t(labelLicenseWarning(module, daysUntilExpiration)));
-      }
-    });
-  }, []);
+    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/usePluralizedTranslation.ts

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import pluralize from 'pluralize';
+
+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/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -1,56 +0,0 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface UseFluidResizeObserver {
-  isParent?: boolean;
-  ref: MutableRefObject<HTMLElement | undefined>;
-}
-
-const useFluidResizeObserver = ({
-  ref,
-  isParent
-}: UseFluidResizeObserver): Size => {
-  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
-
-  const observer = useRef<ResizeObserver | null>(null);
-
-  const resizeObserver = useCallback(
-    (element) => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new ResizeObserver(
-        ([entry]: Array<ResizeObserverEntry>) => {
-          setSize({
-            height: entry.target?.getBoundingClientRect().height || 0,
-            width: entry.target?.getBoundingClientRect().width || 0
-          });
-        }
-      );
-
-      if (element && observer.current) {
-        observer.current.observe(element);
-      }
-    },
-    [ref.current]
-  );
-
-  useEffect(() => {
-    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
-  }, [ref.current]);
-
-  return size;
-};
-
-export default useFluidResizeObserver;