@centreon/ui 24.4.46 → 24.4.48

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

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

package/src/utils/useLicenseExpirationWarning.ts

@@ -19,7 +19,7 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
   const { t } = useTranslation();
   const { showWarningMessage } = useSnackbar();
 
-  const { data } = useFetchQuery({
+  const { fetchQuery } = useFetchQuery({
     getEndpoint: () => extensionsEndpoint,
     getQueryKey: () => [module]
   });
@@ -28,25 +28,25 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
 
   const getExpirationDate = pipe(
     path(['result', 'module', 'entities']),
-    find(propEq(module, 'id')),
+    find(propEq('id', module)),
     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]);
+    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)));
+      }
+    });
+  }, []);
 };

package/src/Form/Form.cypress.spec.tsx

@@ -1,133 +0,0 @@
-import { object } from 'yup';
-import { faker } from '@faker-js/faker';
-import { useFormikContext } from 'formik';
-
-import { Typography } from '@mui/material';
-
-import { Button } from '../components';
-
-import { Form } from './Form';
-import { InputType } from './Inputs/models';
-
-faker.seed(42);
-
-const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
-  const { values } = useFormikContext();
-  const add = (): void => {
-    addItem({
-      alias: faker.company.name(),
-      id: values.list.length,
-      name: faker.person.firstName()
-    });
-  };
-
-  return (
-    <Button variant="ghost" onClick={add}>
-      Add item
-    </Button>
-  );
-};
-
-const SortContent = ({
-  name,
-  alias
-}: {
-  alias: string;
-  name: string;
-}): JSX.Element => (
-  <Typography>
-    {name} ({alias})
-  </Typography>
-);
-
-const initializeFormList = (): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'list',
-            group: '',
-            label: '',
-            list: {
-              AddItem,
-              SortContent,
-              addItemLabel: 'Add an item to the list',
-              itemProps: ['id', 'name', 'alias'],
-              sortLabel: 'Sort items'
-            },
-            type: InputType.List
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-describe('Form list', () => {
-  beforeEach(initializeFormList);
-
-  it('adds an element to the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('sorts elements in the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
-
-    cy.moveSortableElementUsingAriaLabel({
-      ariaLabel: 'sort-0',
-      direction: 'down'
-    });
-
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('removes an element from the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Akeem (Quigley LLC)').should('be.visible');
-
-    cy.findByLabelText('delete-0').click();
-
-    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Form/Inputs/List/Content.tsx

@@ -1,62 +0,0 @@
-import { ReactNode } from 'react';
-
-import { DraggableSyntheticListeners } from '@dnd-kit/core';
-
-import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-
-import { IconButton } from '../../../components';
-
-import { useListStyles } from './List.styles';
-
-export interface ContentProps {
-  attributes;
-  children: ReactNode;
-  deleteItem: (id: string) => () => void;
-  id: string;
-  isDragging: boolean;
-  isInDragOverlay?: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
-  listeners: DraggableSyntheticListeners;
-  name: string;
-  style;
-}
-
-const Content = ({
-  listeners,
-  itemRef,
-  attributes,
-  style,
-  isDragging,
-  id,
-  children,
-  deleteItem
-}: ContentProps): JSX.Element => {
-  const { classes } = useListStyles();
-
-  return (
-    <div
-      className={classes.content}
-      ref={itemRef}
-      {...attributes}
-      style={style}
-    >
-      <IconButton
-        data-dragging={isDragging}
-        size="small"
-        {...listeners}
-        aria-label={`sort-${id}`}
-        icon={<KrilinIndicatorIcon fontSize="small" />}
-      />
-      <div className={classes.innerContent}>{children}</div>
-      <IconButton
-        aria-label={`delete-${id}`}
-        icon={<DeleteOutlineIcon color="error" fontSize="small" />}
-        size="small"
-        onClick={deleteItem(id)}
-      />
-    </div>
-  );
-};
-
-export default Content;

package/src/Form/Inputs/List/List.styles.ts

@@ -1,29 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useListStyles = makeStyles()((theme) => ({
-  content: {
-    '& [data-dragging="false"]': {
-      cursor: 'grab'
-    },
-    '& [data-dragging="true"]': {
-      cursor: 'grabbing'
-    },
-    alignItems: 'center',
-    borderBottom: `1px dashed ${theme.palette.action.disabledBackground}`,
-    display: 'flex',
-    flexDirection: 'row',
-    padding: theme.spacing(1, 0)
-  },
-  innerContent: {
-    flexGrow: 1
-  },
-  items: {
-    maxHeight: theme.spacing(16),
-    overflowY: 'auto'
-  },
-  list: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1)
-  }
-}));

package/src/Form/Inputs/List/List.tsx

@@ -1,58 +0,0 @@
-import { ComponentType } from 'react';
-
-import { closestCenter } from '@dnd-kit/core';
-import { verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useTranslation } from 'react-i18next';
-
-import { InputPropsWithoutGroup } from '../models';
-import { SortableItems, Subtitle } from '../../..';
-
-import { useList } from './useList';
-import { useListStyles } from './List.styles';
-import Content, { ContentProps } from './Content';
-
-const List = ({
-  list,
-  fieldName
-}: InputPropsWithoutGroup): JSX.Element | null => {
-  const { t } = useTranslation();
-  const { classes } = useListStyles();
-
-  const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
-
-  const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
-    AddItem: ComponentType<{ addItem }>;
-    SortContent: ComponentType;
-    addItemLabel?: string;
-    itemProps: Array<string>;
-    sortLabel?: string;
-  };
-
-  return (
-    <div className={classes.list}>
-      {addItemLabel && <Subtitle>{t(addItemLabel)}</Subtitle>}
-      <AddItem addItem={addItem} />
-      {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
-      <div className={classes.items}>
-        <SortableItems
-          updateSortableItemsOnItemsChange
-          // eslint-disable-next-line react/no-unstable-nested-components
-          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
-            <Content {...props} deleteItem={deleteItem}>
-              <SortContent {...props} />
-            </Content>
-          )}
-          collisionDetection={closestCenter}
-          itemProps={itemProps}
-          items={sortedList}
-          sortingStrategy={verticalListSortingStrategy}
-          onDragEnd={({ items }): void => {
-            sortList(items);
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default List;

package/src/Form/Inputs/List/useList.ts

@@ -1,81 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import {
-  append,
-  equals,
-  inc,
-  isEmpty,
-  pluck,
-  prop,
-  reject,
-  sortBy
-} from 'ramda';
-
-import { SelectEntry } from '../../..';
-
-interface UseListState {
-  addItem: (newItem: SelectEntry) => void;
-  deleteItem: (id: string) => () => void;
-  sortList: (items: Array<string>) => void;
-  sortedList: Array<unknown>;
-}
-
-export const useList = ({ fieldName }): UseListState => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-  const maxOrder = useRef(0);
-
-  const list = values[fieldName];
-
-  const sortedList = useMemo(
-    () =>
-      sortBy(prop('order'), list).map(({ id, ...props }) => ({
-        id: `${id}`,
-        ...props
-      })),
-    [list]
-  );
-
-  const addItem = (newItem: SelectEntry): void => {
-    setFieldValue(
-      fieldName,
-      append(
-        {
-          ...newItem,
-          id: (newItem as SelectEntry).id as number,
-          order: inc(maxOrder.current)
-        },
-        list
-      )
-    );
-  };
-
-  const deleteItem = (id: string) => (): void => {
-    const newItems = reject((item) => equals(Number(id), item.id))(list);
-
-    setFieldValue(fieldName, newItems);
-  };
-
-  const sortList = (items: Array<string>): void => {
-    const newOrderedList = items.map((itemId, idx) => {
-      const item = sortedList.find(({ id }) => equals(id, itemId));
-
-      return {
-        ...item,
-        id: Number(item?.id),
-        order: inc(idx)
-      };
-    });
-
-    setFieldValue(fieldName, newOrderedList);
-  };
-
-  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
-
-  return {
-    addItem,
-    deleteItem,
-    sortList,
-    sortedList
-  };
-};

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -1,154 +0,0 @@
-import numeral from 'numeral';
-
-import BarStack from './BarStack';
-import { BarType, BarStackProps } from './models';
-
-const defaultData = [
-  { color: '#88B922', label: 'Ok', value: 148 },
-  { color: '#999999', label: 'Unknown', value: 13 },
-  { color: '#F7931A', label: 'Warning', value: 16 },
-  { color: '#FF6666', label: 'Down', value: 62 }
-];
-
-const dataWithNullValues = [
-  { color: '#88B922', label: 'Ok', value: 0 },
-  { color: '#999999', label: 'Unknown', value: 0 },
-  { color: '#F7931A', label: 'Warning', value: 0 },
-  { color: '#FF6666', label: 'Down', value: 0 }
-];
-
-const total = Math.floor(
-  defaultData.reduce((acc, { value }) => acc + value, 0)
-);
-
-const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
-  return (
-    <div data-testid={`tooltip-${label}`} style={{ color }}>
-      {label} : {value}
-    </div>
-  );
-};
-
-const initialize = ({
-  width = '400px',
-  height = '400px',
-  data = defaultData,
-  ...args
-}: Omit<BarStackProps, 'data'> & {
-  data?;
-  height?: string;
-  width?: string;
-}): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height, width }}>
-        <BarStack {...args} data={data} />
-      </div>
-    )
-  });
-};
-
-describe('Bar stack', () => {
-  it('renders Bar stack correctly with provided data', () => {
-    initialize({});
-
-    defaultData.forEach(({ label }) => {
-      cy.findByTestId(label).should('be.visible');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('adjusts size based on the provided width and height', () => {
-    initialize({ displayLegend: false, height: '300px', width: '300px' });
-
-    cy.findByTestId('barStack').should('have.css', 'height', '300px');
-
-    cy.makeSnapshot();
-  });
-
-  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
-    initialize({ variant: 'horizontal' });
-    cy.get('[data-variant="horizontal"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('renders as a vertical bar when variant is set to "vertical"', () => {
-    initialize({ variant: 'vertical' });
-    cy.get('[data-variant="vertical"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays tooltip with correct information on hover', () => {
-    initialize({ TooltipContent });
-
-    defaultData.forEach(({ label, value }) => {
-      cy.findByTestId(label).trigger('mouseover', { force: true });
-
-      cy.findByTestId(`tooltip-${label}`)
-        .should('contain', label)
-        .and('contain', numeral(value).format('0a').toUpperCase());
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('conditionally displays values on rects based on displayValues prop', () => {
-    initialize({ displayValues: true });
-    defaultData.forEach(({ value }, index) => {
-      cy.findAllByTestId('value')
-        .eq(index)
-        .children()
-        .eq(0)
-        .should('have.text', value);
-    });
-
-    initialize({ displayValues: false });
-    cy.findAllByTestId('value').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
-    initialize({ displayValues: true, unit: 'percentage' });
-    defaultData.forEach(({ value }, index) => {
-      cy.findAllByTestId('value')
-        .eq(index)
-        .children()
-        .eq(0)
-        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('displays Legend component based on displayLegend prop', () => {
-    initialize({ displayLegend: true });
-    cy.findByTestId('Legend').should('be.visible');
-
-    initialize({ displayLegend: false });
-    cy.findByTestId('Legend').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the title when the title is giving', () => {
-    initialize({ title: 'host' });
-    cy.findByTestId('Title').should('be.visible');
-
-    initialize({});
-    cy.findByTestId('Title').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a message "No Data Available" when all values are null', () => {
-    initialize({ data: dataWithNullValues, title: 'host' });
-
-    cy.contains('No Data Available');
-
-    cy.makeSnapshot();
-  });
-});