@centreon/ui 23.10.122 → 24.4.0

package/src/ThemeProvider/palettes.ts

@@ -1,6 +1,9 @@
 import { equals } from 'ramda';
 
-import { alpha, PaletteOptions } from '@mui/material';
+import {
+  type PaletteOptions as PaletteOptionsModel,
+  alpha
+} from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
@@ -140,10 +143,10 @@ declare module '@mui/material/Badge' {
   }
 }
 
-export const lightPalette: PaletteOptions = {
+export const lightPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
+    acknowledged: '#745F35',
+    acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -152,8 +155,8 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
+    inDowntime: '#512980',
+    inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -280,10 +283,10 @@ export const lightPalette: PaletteOptions = {
   }
 };
 
-export const darkPalette: PaletteOptions = {
+export const darkPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
+    acknowledged: '#DFD2B9',
+    acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -292,8 +295,8 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
+    inDowntime: '#E5D8F3',
+    inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },
@@ -418,5 +421,5 @@ export const darkPalette: PaletteOptions = {
   }
 };
 
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
+export const getPalette = (mode: ThemeMode): PaletteOptionsModel =>
   equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -12,22 +12,21 @@ const useStyles = makeStyles()((theme) => ({
   },
   containerDates: {
     display: 'flex',
-    gap: theme.spacing(0.5),
     [theme.breakpoints.down('sm')]: {
-      columnGap: theme.spacing(0.5),
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: theme.spacing(0.5)
     }
   },
   date: {
-    minWidth: theme.spacing(12.5),
+    minWidth: theme.spacing(12),
     textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
   label: {
-    minWidth: theme.spacing(3),
-    textAlign: 'start'
+    minWidth: theme.spacing(3.5),
+    textAlign: 'end'
   },
 
   picker: {
@@ -39,7 +38,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
-    columnGap: theme.spacing(1),
+    columnGap: theme.spacing(0.5),
     display: 'flex',
     flexDirection: 'row',
     [theme.breakpoints.down('sm')]: {

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -2,24 +2,29 @@ import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 
-import { userAtom } from '@centreon/ui-context';
-import { useDateTimePickerAdapter } from '@centreon/ui';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import {
   CustomTimePeriodProperty,
   DateTimePickerInputModel
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+import { useLocale } from '../../../utils';
 
 import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
 import { PickersStartEndDateModel } from './usePickersStartEndDate';
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 const useStyles = makeStyles()((theme) => ({
   error: {
     textAlign: 'center'
@@ -104,9 +109,8 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
-  const { Adapter } = useDateTimePickerAdapter();
 
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
 
   const maxStart = rangeStartDate?.max || endDate;
@@ -126,7 +130,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={Adapter}
+      dateAdapter={AdapterDayjs}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -18,8 +18,6 @@ export interface PickersData {
   getError?: (value: boolean) => void;
   isDisabledEndPicker?: boolean;
   isDisabledStartPicker?: boolean;
-  onCloseEndPicker?: (isClosed: boolean) => void;
-  onCloseStartPicker?: (isClosed: boolean) => void;
   rangeEndDate?: RangeDate;
   rangeStartDate?: RangeDate;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,48 +1,88 @@
-import dayjs from 'dayjs';
+import { useCallback } from 'react';
 
-import { DateTimePicker } from '@mui/x-date-pickers';
+import dayjs, { Dayjs } from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
 
-import { useDateTimePickerAdapter } from '@centreon/ui';
+import {
+  DateTimePicker,
+  DateTimePickerProps,
+  LocalizationProvider
+} from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { userAtom } from '@centreon/ui-context';
+
+import { useLocale } from '../utils';
 
 import { CustomTimePeriodProperty } from './models';
 
+interface ChangeDateProps {
+  date: Date;
+  property: CustomTimePeriodProperty | string;
+}
+
 interface Props {
-  changeDate: (props) => void;
+  changeDate: (props: ChangeDateProps) => void;
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  property: CustomTimePeriodProperty;
+  minDateTime?: Date;
+  property: CustomTimePeriodProperty | string;
 }
 
 const DateTimePickerInput = ({
   date,
   maxDate,
   minDate,
+  minDateTime,
   property,
   changeDate,
   disabled = false,
-  desktopMediaQuery
-}: Props): JSX.Element => {
-  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
+  desktopMediaQuery,
+  ...rest
+}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
+  const desktopPickerMediaQuery =
+    '@media (min-width: 1024px) or (pointer: fine)';
+
+  const { timezone, locale } = useAtomValue(userAtom);
+  const localeToUse = useLocale();
+
+  const isUTC = equals(timezone, 'UTC');
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
   };
 
+  const formatDate = useCallback(
+    (currentDate: Date | null): Dayjs => {
+      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
+    },
+    [isUTC, timezone]
+  );
+
   return (
-    <DateTimePicker<dayjs.Dayjs>
-      dayOfWeekFormatter={(day: string): string =>
-        day.substring(0, 2).toUpperCase()
-      }
-      desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
-      disabled={disabled}
-      maxDate={maxDate && dayjs(maxDate)}
-      minDate={minDate && dayjs(minDate)}
-      value={dayjs(date)}
-      onChange={changeTime}
-    />
+    <LocalizationProvider
+      adapterLocale={(locale ?? localeToUse).substring(0, 2)}
+      dateAdapter={AdapterDayjs}
+      dateLibInstance={dayjs}
+    >
+      <DateTimePicker<dayjs.Dayjs>
+        dayOfWeekFormatter={(dayOfWeek) =>
+          dayOfWeek.substring(0, 2).toLocaleUpperCase()
+        }
+        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+        disabled={disabled}
+        maxDate={maxDate && formatDate(maxDate)}
+        minDate={minDate && formatDate(minDate)}
+        minDateTime={minDateTime && formatDate(minDateTime)}
+        value={formatDate(date)}
+        onChange={changeTime}
+        {...rest}
+      />
+    </LocalizationProvider>
   );
 };
 

package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
 import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
@@ -19,18 +19,18 @@ dayjs.extend(localizedFormatPlugin);
 
 const data = [
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 500 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 500 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 200 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 200 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 1024 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 1024 },
     timezone: 'Europe/Paris'
   }
 ];
@@ -45,7 +45,7 @@ data.forEach((item) =>
 
       store.set(userAtom, {
         ...retrievedUser,
-        locale: 'fr_FR',
+        locale: 'en_US',
         timezone: 'Europe/Paris'
       });
 
@@ -59,7 +59,10 @@ data.forEach((item) =>
     });
 
     it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
-      cy.makeSnapshot(`${width}px`);
+      cy.makeSnapshotWithCustomResolution({
+        resolution: { height, width },
+        title: `${width}px`
+      });
     });
   })
 );

package/src/TimePeriods/TimePeriods.cypress.spec.tsx

@@ -3,15 +3,10 @@ import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { Provider, createStore } from 'jotai';
-import { equals, inc } from 'ramda';
+import { equals } from 'ramda';
 import { renderHook } from '@testing-library/react';
 
-import { LocalizationProvider } from '@mui/x-date-pickers';
-
-import {
-  useLocaleDateTimeFormat,
-  useDateTimePickerAdapter
-} from '@centreon/ui';
+import { useLocaleDateTimeFormat } from '@centreon/ui';
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
 import { CustomTimePeriodProperty } from './models';
@@ -297,10 +292,6 @@ testData.forEach((item) =>
     beforeEach(() => {
       cy.viewport('macbook-13');
 
-      const { result } = renderHook(() => useDateTimePickerAdapter());
-
-      const { Adapter } = result.current;
-
       const store = createStore();
       store.set(userAtom, {
         ...retrievedUser,
@@ -311,31 +302,16 @@ testData.forEach((item) =>
       cy.mount({
         Component: (
           <Provider store={store}>
-            <LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
-              <DateTimePickerInput
-                changeDate={cy.stub()}
-                date={new Date(item.initialDate)}
-                desktopMediaQuery="@media (min-width: 1024px)"
-                property={CustomTimePeriodProperty.start}
-              />
-            </LocalizationProvider>
+            <DateTimePickerInput
+              changeDate={cy.stub()}
+              date={new Date(item.initialDate)}
+              property={CustomTimePeriodProperty.start}
+            />
           </Provider>
         )
       });
     });
 
-    it('checks input calendar value contains correct date', () => {
-      const { result } = renderHook(() => useLocaleDateTimeFormat());
-      const { format } = result.current;
-
-      const dateInput = format({
-        date: dayjs(item.initialDate).tz(item.timezone),
-        formatString: 'L hh:mm A'
-      });
-
-      cy.get('input').should('have.value', dateInput);
-    });
-
     it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
       cy.get('button').click();
       item.data.forEach((element) => {
@@ -389,7 +365,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
+        cy.get('@listWeeks').should('have.length', numberWeeks);
         cy.get('@listWeeks').eq(0).as('firstWeek');
         cy.get('@firstWeek').children().as('listDaysInFirstWeek');
 
@@ -416,7 +392,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
+        cy.get('@listWeeks').should('have.length', numberWeeks);
 
         cy.get('@listWeeks')
           .eq(numberWeeks - 1)

package/src/TimePeriods/helpers/index.ts

@@ -23,4 +23,4 @@ export const getTimePeriodById = ({
   id,
   timePeriods
 }: TimePeriodById): TimePeriod =>
-  find<TimePeriod>(propEq('id', id))(timePeriods) as TimePeriod;
+  find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;

package/src/TimePeriods/index.stories.tsx

@@ -88,20 +88,27 @@ const args = {
   ]
 };
 
+const parameters = {
+  chromatic: { diffThreshold: 0.1 }
+};
+
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args
+  args,
+  parameters
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -109,5 +116,6 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  }
+  },
+  parameters
 };

package/src/TimePeriods/index.tsx

@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
 import {
   CustomTimePeriod as CustomTimePeriodModel,
   EndStartInterval,
-  TimePeriod
+  TimePeriod as TimePeriodModel
 } from './models';
 import useTimePeriod from './useTimePeriod';
 
@@ -34,7 +34,7 @@ interface Parameters extends EndStartInterval {
 export interface Props {
   adjustTimePeriodData?: Omit<CustomTimePeriodModel, 'timelineEventsLimit'>;
   disabled?: boolean;
-  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
+  extraTimePeriods?: Array<Omit<TimePeriodModel, 'timelineEventsLimit'>>;
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -7,6 +7,8 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { Badge, ClickAwayListener } from '@mui/material';
 import type { SvgIcon } from '@mui/material';
 
+import useCloseOnLegacyPage from './useCloseOnLegacyPage';
+
 const useStyles = makeStyles()((theme) => ({
   button: {
     '& > svg': {
@@ -115,6 +117,7 @@ const TopCounterLayout = ({
   const [toggled, setToggled] = useState(false);
 
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
+  useCloseOnLegacyPage({ setToggled });
 
   useEffect(() => {
     const closeMenu = (): void => setToggled(false);

package/src/TopCounterElements/useCloseOnLegacyPage.tsx

@@ -0,0 +1,42 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import { isNil } from 'ramda';
+import { useLocation } from 'react-router-dom';
+
+interface Props {
+  setToggled: Dispatch<SetStateAction<boolean>>;
+}
+const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
+  const { pathname, search } = useLocation();
+  const isLegacyRoute = pathname.includes('main.php');
+
+  const closeSubMenu = (): void => {
+    setToggled(false);
+  };
+
+  useEffect(() => {
+    const iframe = document.getElementById(
+      'main-content'
+    ) as HTMLIFrameElement | null;
+
+    if (!isLegacyRoute || isNil(iframe)) {
+      return () => undefined;
+    }
+
+    const closeSubMenuOnLegacyPage = (): void => {
+      iframe?.contentWindow?.document?.addEventListener('click', closeSubMenu);
+    };
+
+    iframe?.addEventListener('load', closeSubMenuOnLegacyPage);
+
+    return () => {
+      iframe?.removeEventListener('load', closeSubMenuOnLegacyPage);
+      iframe?.contentWindow?.document?.removeEventListener(
+        'click',
+        closeSubMenu
+      );
+    };
+  }, [pathname, search]);
+};
+
+export default useCloseOnLegacyPage;

package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx

@@ -0,0 +1,27 @@
+import FluidTypography from '.';
+
+const initialize = ({ width, min, max, pref }): void => {
+  cy.viewport(width, 590);
+
+  cy.mount({
+    Component: (
+      <FluidTypography max={max} min={min} pref={pref} text="Unreachable" />
+    )
+  });
+};
+
+describe('FluidTypography', () => {
+  [500, 300, 150].forEach((width) => {
+    Object.entries({ max: '80px', min: '30px', pref: 10 }).forEach(
+      ([key, value]) => {
+        it(`displays the text when the viewport is ${width}px and the ${key} is ${value}`, () => {
+          initialize({ [key]: value, width });
+
+          cy.contains('Unreachable').should('be.visible');
+
+          cy.matchImageSnapshot();
+        });
+      }
+    );
+  });
+});

package/src/Typography/FluidTypography/index.stories.tsx

@@ -40,9 +40,9 @@ basic.args = {
 
 export const with200pxWidth = FluidTypographyTemplate.bind({});
 with200pxWidth.args = {
-  height: '200px',
+  height: '50%',
   text: 'Hello world',
-  width: '200px'
+  width: '50%'
 };
 
 export const with20pxHeight = FluidTypographyTemplate.bind({});

package/src/Typography/FluidTypography/index.tsx

@@ -1,49 +1,42 @@
-import { useRef } from 'react';
-
 import { Typography, TypographyProps } from '@mui/material';
 
-import useFluidResizeObserver from './useFluidResizeObserver';
-
 type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
   text: string;
 }
 
 const FluidTypography = ({
   text,
   variant = 'body1',
-  className
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19
 }: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
   return (
     <div
-      ref={parentRef}
+      className={containerClassName}
       style={{
-        height: `${parentSize.height}px`,
+        containerType: 'inline-size',
+        height: `100%`,
         width: `100%`
       }}
     >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
     </div>
   );
 };