@centreon/ui 23.10.121 → 24.4.1-0

package/src/StoryBookThemeProvider/index.tsx

@@ -1,36 +1,35 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-
-import {
-  ThemeProvider as MuiThemeProvider,
-  StyledEngineProvider,
-  createTheme,
-  CssBaseline
-} from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import { getTheme } from '../ThemeProvider';
-
-interface Props {
-  children: React.ReactElement;
-  themeMode: ThemeMode;
-}
-
-const StoryBookThemeProvider = ({
-  children,
-  themeMode
-}: Props): JSX.Element => {
-  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme}>
-        {children}
-        <CssBaseline />
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-export default StoryBookThemeProvider;
+import { useMemo } from 'react';
+
+import {
+  CssBaseline,
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  createTheme
+} from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+import { getTheme } from '../ThemeProvider';
+
+interface Props {
+  children: React.ReactElement;
+  themeMode: ThemeMode;
+}
+
+const StoryBookThemeProvider = ({
+  children,
+  themeMode
+}: Props): JSX.Element => {
+  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        {children}
+        <CssBaseline />
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default StoryBookThemeProvider;

package/src/ThemeProvider/index.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import { ReactNode, useMemo } from 'react';
 
 import { useAtomValue } from 'jotai';
-import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
+import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
-  createTheme,
   InputBaseProps,
+  ThemeProvider as MuiThemeProvider,
   StyledEngineProvider,
   Theme,
-  ThemeProvider as MuiThemeProvider
+  createTheme
 } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
+import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
-import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
-import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
-import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
+
+import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
+import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
+import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
+import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
@@ -147,6 +147,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
+        ::-webkit-scrollbar {
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+          background-color: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          };
+          border-radius: ${theme.spacing(0.5)};
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${theme.palette.primary.main};
+        }
+        * {
+          scrollbar-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          } ${theme.palette.background.default};
+          scrollbar-width: thin;
+        }
         html {
           margin: 0;
           padding: 0;
@@ -160,6 +184,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
@@ -266,13 +293,13 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 });
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const ThemeProvider = ({ children }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = React.useMemo(
+  const theme = useMemo(
     () => createTheme(getTheme(themeMode || ThemeMode.light)),
     [themeMode]
   );

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,12 +2,15 @@ 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 {
@@ -20,6 +23,9 @@ 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,7 +110,6 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
-  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -126,7 +131,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,85 @@
-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 { 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 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.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);