@centreon/ui 24.4.39 → 24.4.40

package/src/utils/index.ts

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

package/src/utils/useDateTimePickerAdapter.ts

@@ -0,0 +1,309 @@
+/* eslint-disable class-methods-use-this */
+import { useCallback } from 'react';
+
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals, isNil, not } from 'ramda';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { userAtom } from '@centreon/ui-context';
+
+interface GetDestinationAndConfiguredTimezoneOffsetProps {
+  endTimezone?: string;
+  startTimezone?: string;
+}
+
+interface UseDateTimePickerAdapterProps {
+  Adapter;
+  desktopPickerMediaQuery: string;
+}
+
+enum DSTState {
+  SUMMER,
+  WINTER,
+  NODST
+}
+
+interface ToTimezonedDateProps {
+  date: Date;
+  timeZone?: string;
+}
+
+interface GetDSTStateProps {
+  date: dayjs.Dayjs;
+  timezoneToUse?: string;
+}
+
+export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
+  const { timezone, locale } = useAtomValue(userAtom);
+  const { format } = useLocaleDateTimeFormat();
+
+  const desktopPickerMediaQuery =
+    '@media (pointer: fine) or (min-width: 1024px)';
+
+  const toTimezonedDate = ({
+    date,
+    timeZone = undefined
+  }: ToTimezonedDateProps): Date => {
+    if (isNil(timeZone)) {
+      return new Date(date.toLocaleString('en-US'));
+    }
+
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+  };
+
+  const getDestinationAndConfiguredTimezoneOffset = ({
+    startTimezone = undefined,
+    endTimezone = timezone
+  }: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
+    const now = new Date();
+    const currentTimezoneDate = toTimezonedDate({
+      date: now,
+      timeZone: startTimezone
+    });
+    const destinationTimezoneDate = toTimezonedDate({
+      date: now,
+      timeZone: endTimezone
+    });
+
+    return Math.floor(
+      (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
+        60 /
+        60 /
+        1000
+    );
+  };
+
+  const getDSTState = useCallback(
+    ({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
+      const hasNoTimezone = isNil(timezoneToUse);
+      const currentYear = toTimezonedDate({
+        date: new Date(),
+        timeZone: timezoneToUse
+      }).getFullYear();
+
+      const january = hasNoTimezone
+        ? dayjs(new Date(currentYear, 0, 1)).utcOffset()
+        : dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
+      const july = hasNoTimezone
+        ? dayjs(new Date(currentYear, 6, 1)).utcOffset()
+        : dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
+
+      if (equals(january, july)) {
+        return DSTState.NODST;
+      }
+
+      return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
+    },
+    [timezone]
+  );
+
+  const getDSTStateForCurrentTimezone = useCallback(
+    (date: dayjs.Dayjs): DSTState => {
+      return getDSTState({ date });
+    },
+    []
+  );
+
+  interface Chunk {
+    array: Array<unknown>;
+    size: number;
+  }
+  class Adapter extends AdapterDayjs {
+    public formatByString = (value, formatKey: string): string => {
+      return format({
+        date: value.tz(timezone).toDate(),
+        formatString: formatKey
+      });
+    };
+
+    public format = (date: dayjs.Dayjs, formatKey: string): string => {
+      return this.formatByString(
+        date.tz(timezone, true),
+        this.formats[formatKey]
+      );
+    };
+
+    public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      if (date.tz(timezone).isUTC()) {
+        return date.tz(timezone).startOf('week').utc();
+      }
+
+      return date.tz(timezone).startOf('week');
+    };
+
+    public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
+      return date.minute(count);
+    };
+
+    public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
+      return date.hour(count);
+    };
+
+    public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
+      const isSameYearAndMonth = this.isSameYear(date, comparing)
+        ? this.isSameMonth(date, comparing)
+        : false;
+
+      return (
+        isSameYearAndMonth &&
+        date.tz(timezone).isSame(comparing.tz(timezone), 'day')
+      );
+    };
+
+    public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).startOf('day') as dayjs.Dayjs;
+    };
+
+    public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).endOf('day') as dayjs.Dayjs;
+    };
+
+    public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      if (date.tz(timezone).isUTC()) {
+        return date.tz(timezone).utc();
+      }
+
+      return date.tz(timezone);
+    };
+
+    public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).endOf('month') as dayjs.Dayjs;
+    };
+
+    public isSameMonth = (
+      date: dayjs.Dayjs,
+      comparing: dayjs.Dayjs
+    ): boolean => {
+      return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
+    };
+
+    public getMonth = (date: dayjs.Dayjs): number => {
+      return date.tz(timezone).month();
+    };
+
+    public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
+      return date.isAfter(value.endOf('month'));
+    };
+
+    public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
+      return date.isBefore(value.startOf('month'));
+    };
+
+    public getDaysInMonth = (date: dayjs.Dayjs): number => {
+      return date.tz(timezone).daysInMonth();
+    };
+
+    public getWeekdays = (): Array<string> => {
+      const start = dayjs().locale(locale).tz(timezone).startOf('week');
+
+      return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
+        this.formatByString(start.add(diff, 'day'), 'dd')
+      );
+    };
+
+    public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
+      if (!array.length) {
+        return [];
+      }
+      const head = array.slice(0, size);
+      const tail = array.slice(size);
+
+      return [head, ...this.getChunkFromArray({ array: tail, size })];
+    };
+
+    public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
+      const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
+      const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
+      const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
+      const start = startOfWeek.startOf('day');
+      const end = endOfWeek.endOf('day');
+      const customStart = isMorning
+        ? startOfWeek.startOf('day')
+        : startOfWeek.startOf('day');
+      const customEnd = isMorning
+        ? endOfWeek.startOf('day')
+        : endOfWeek.startOf('day');
+      const currentStart = start.isUTC()
+        ? start.tz(timezone, true)
+        : customStart;
+      const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
+      const numberOfDaysInCurrentMonth = currentEnd.diff(
+        currentStart,
+        'd',
+        true
+      );
+      const daysOfMonthWithTimezone = [
+        ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
+      ].reduce(
+        (acc, _, currentIndex) => {
+          if (acc[currentIndex].isUTC()) {
+            const newCurrent = acc[currentIndex]
+              .utc()
+              .add(1, 'day')
+              .tz(timezone, true);
+
+            return [...acc, newCurrent];
+          }
+          const newCurrent = acc[currentIndex].add(1, 'day');
+
+          return [...acc, newCurrent];
+        },
+        [currentStart]
+      );
+      const weeksArray = this.getChunkFromArray({
+        array: daysOfMonthWithTimezone,
+        size: 7
+      });
+
+      return weeksArray as Array<Array<dayjs.Dayjs>>;
+    };
+
+    public mergeDateAndTime = (
+      date: dayjs.Dayjs,
+      time: dayjs.Dayjs
+    ): dayjs.Dayjs => {
+      const dateWithTimezone = date.tz(timezone).startOf('day');
+      const timeWithTimezone = time.tz(timezone);
+      const dateDSTState = getDSTState({
+        date: dateWithTimezone,
+        timezoneToUse: timezone
+      });
+      const dateDSTStateWithCurrentTimezone =
+        getDSTStateForCurrentTimezone(date);
+
+      if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
+        return dateWithTimezone
+          .add(
+            timeWithTimezone.hour() -
+              getDestinationAndConfiguredTimezoneOffset({
+                endTimezone: 'UTC',
+                startTimezone: dayjs.tz.guess()
+              }),
+            'hour'
+          )
+          .add(timeWithTimezone.minute(), 'minute')
+          .add(timeWithTimezone.second(), 'second');
+      }
+
+      if (not(equals(dateDSTState, DSTState.SUMMER))) {
+        return dateWithTimezone
+          .add(timeWithTimezone.hour(), 'hour')
+          .add(timeWithTimezone.minute(), 'minute')
+          .add(timeWithTimezone.second(), 'second');
+      }
+
+      return dateWithTimezone
+        .hour(timeWithTimezone.hour())
+        .minute(timeWithTimezone.minute())
+        .second(timeWithTimezone.second());
+    };
+  }
+
+  return {
+    Adapter,
+    desktopPickerMediaQuery
+  };
+};

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;