@centreon/ui 24.8.5 → 24.8.7

package/src/ThemeProvider/index.tsx

@@ -1,32 +1,30 @@
-import * as React 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 RobotoMediumWoff2 from '../fonts/roboto-medium-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 { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
@@ -294,13 +292,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,10 +1,25 @@
 import { equals } from 'ramda';
 
-import { alpha, PaletteOptions } from '@mui/material';
+import { PaletteOptions, alpha } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
-
-import * as BaseTokens from '../base/tokens/themes/base.tokens';
+import {
+  colorBlue50,
+  colorBlue400,
+  colorBlue600,
+  colorBlue900,
+  colorGrey50,
+  colorGrey100,
+  colorGrey200,
+  colorGrey300,
+  colorGrey400,
+  colorGrey500,
+  colorGrey600,
+  colorGrey700,
+  colorGrey800,
+  colorGrey900,
+  colorGrey950
+} from '../base/tokens/themes/base.tokens';
 
 declare module '@mui/material/styles/createPalette' {
   interface TypeAction {
@@ -170,7 +185,7 @@ export const lightPalette: PaletteOptions = {
     color: {
       error: '#FF6666',
       info: '#1588D1',
-      neutral: BaseTokens.colorGrey300,
+      neutral: colorGrey300,
       success: '#88B922',
       warning: '#FD9B27'
     }
@@ -214,29 +229,29 @@ export const lightPalette: PaletteOptions = {
     background: '#FFFFFF',
     button: {
       background: {
-        active: BaseTokens.colorBlue50,
+        active: colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey100
+        hover: colorGrey100
       },
       color: {
-        active: BaseTokens.colorBlue400,
-        default: BaseTokens.colorGrey400,
-        hover: BaseTokens.colorGrey500
+        active: colorBlue400,
+        default: colorGrey400,
+        hover: colorGrey500
       }
     },
     divider: {
-      border: BaseTokens.colorGrey200
+      border: colorGrey200
     },
     item: {
       background: {
-        active: BaseTokens.colorBlue50,
+        active: colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey100
+        hover: colorGrey100
       },
       color: {
-        active: BaseTokens.colorBlue400,
-        default: BaseTokens.colorGrey900,
-        hover: BaseTokens.colorGrey950
+        active: colorBlue400,
+        default: colorGrey900,
+        hover: colorGrey950
       }
     }
   },
@@ -310,7 +325,7 @@ export const darkPalette: PaletteOptions = {
     color: {
       error: '#D60101',
       info: '#1CA9F4',
-      neutral: BaseTokens.colorGrey700,
+      neutral: colorGrey700,
       success: '#5F8118',
       warning: '#C55400'
     }
@@ -351,31 +366,31 @@ export const darkPalette: PaletteOptions = {
     }
   },
   menu: {
-    background: BaseTokens.colorGrey950,
+    background: colorGrey950,
     button: {
       background: {
-        active: BaseTokens.colorBlue900,
+        active: colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey900
+        hover: colorGrey900
       },
       color: {
-        active: BaseTokens.colorBlue600,
-        default: BaseTokens.colorGrey600,
-        hover: BaseTokens.colorGrey500
+        active: colorBlue600,
+        default: colorGrey600,
+        hover: colorGrey500
       }
     },
     divider: {
-      border: BaseTokens.colorGrey800
+      border: colorGrey800
     },
     item: {
       background: {
-        active: BaseTokens.colorBlue900,
+        active: colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey900
+        hover: colorGrey900
       },
       color: {
-        active: BaseTokens.colorBlue400,
-        default: BaseTokens.colorGrey50,
+        active: colorBlue400,
+        default: colorGrey50,
         hover: '#fff'
       }
     }

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

@@ -12,8 +12,8 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { isInvalidDate } from '../../helpers';
 import DateTimePickerInput from '../../DateTimePickerInput';
+import { isInvalidDate } from '../../helpers';
 import {
   CustomTimePeriodProperty,
   DateTimePickerInputModel

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

@@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Popover } from '@mui/material';
 
+import PickersStartEndDate from './PickersStartEndDate';
 import {
   PickersData,
   PopoverData,
@@ -9,7 +10,6 @@ import {
   defaultTransformOrigin
 } from './models';
 import usePickersStartEndDate from './usePickersStartEndDate';
-import PickersStartEndDate from './PickersStartEndDate';
 
 const useStyles = makeStyles()((theme) => ({
   paper: {

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -25,10 +25,12 @@ interface Props {
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
+  locale?: string;
   maxDate?: Date;
   minDate?: Date;
   minDateTime?: Date;
   property: CustomTimePeriodProperty | string;
+  timezone?: string;
 }
 
 const DateTimePickerInput = ({
@@ -40,14 +42,16 @@ const DateTimePickerInput = ({
   changeDate,
   disabled = false,
   desktopMediaQuery,
+  locale,
+  timezone,
   ...rest
 }: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
   const desktopPickerMediaQuery =
     '@media (min-width: 1024px) or (pointer: fine)';
 
-  const { timezone, locale } = useAtomValue(userAtom);
+  const user = useAtomValue(userAtom);
 
-  const isUTC = equals(timezone, 'UTC');
+  const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
@@ -55,14 +59,20 @@ const DateTimePickerInput = ({
 
   const formatDate = useCallback(
     (currentDate: Date | null): Dayjs => {
-      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
+      if (timezone) {
+        return dayjs(currentDate).tz(timezone);
+      }
+
+      return isUTC
+        ? dayjs.utc(currentDate)
+        : dayjs.tz(currentDate, user.timezone);
     },
-    [isUTC, timezone]
+    [isUTC, timezone, user.timezone]
   );
 
   return (
     <LocalizationProvider
-      adapterLocale={locale.substring(0, 2)}
+      adapterLocale={(locale ?? user.locale).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,7 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { T, always, cond, equals, lte, map, pick } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
 

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

@@ -1,16 +1,16 @@
+import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
 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 } from 'ramda';
-import { renderHook } from '@testing-library/react';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
-import { CustomTimePeriodProperty } from './models';
 import DateTimePickerInput from './DateTimePickerInput';
+import { CustomTimePeriodProperty } from './models';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
@@ -339,7 +339,7 @@ testData.forEach((item) =>
         cy.get('@listWeeks').children('button').as('days');
 
         cy.get('@days')
-          .each(($day) => daysInCurrentMonth.push($day.text()))
+          .each((day) => daysInCurrentMonth.push(day.text()))
           .as('currentDays');
 
         cy.get('@currentDays').then(() => {

package/src/TimePeriods/TimePeriods.tsx

@@ -14,8 +14,8 @@ import { Paper, Theme, useMediaQuery } from '@mui/material';
 import CustomTimePeriod from './CustomTimePeriod';
 import SelectedTimePeriod from './SelectedTimePeriod';
 import { useStyles } from './TimePeriods.styles';
-import useTimePeriod from './useTimePeriod';
 import { WrapperTimePeriodProps } from './models';
+import useTimePeriod from './useTimePeriod';
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(utcPlugin);

package/src/TimePeriods/helpers/index.ts

@@ -1,5 +1,5 @@
-import { find, propEq } from 'ramda';
 import dayjs from 'dayjs';
+import { find, propEq } from 'ramda';
 
 import {
   CustomTimePeriod,

package/src/TimePeriods/index.stories.tsx

@@ -3,8 +3,8 @@ import dayjs from 'dayjs';
 
 import Switch from '@mui/material/Switch';
 
-import { dateFormat } from './models';
 import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
+import { dateFormat } from './models';
 
 import TimePeriod from '.';
 

package/src/TimePeriods/index.tsx

@@ -11,8 +11,8 @@ import utcPlugin from 'dayjs/plugin/utc';
 import { ParentSize } from '..';
 import LoadingSkeleton from '../LoadingSkeleton';
 
-import { WrapperTimePeriodProps } from './models';
 import TimePeriods from './TimePeriods';
+import { WrapperTimePeriodProps } from './models';
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(utcPlugin);

package/src/TimePeriods/models.ts

@@ -3,12 +3,12 @@ import { ReactNode } from 'react';
 import dayjs from 'dayjs';
 
 import {
-  labelLastDay,
   label1Day,
   label7Days,
   label31Days,
   labelLast7Days,
-  labelLast31Days
+  labelLast31Days,
+  labelLastDay
 } from './translatedLabels';
 
 export const dateFormat = 'L';

package/src/TimePeriods/timePeriodsAtoms.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import { atom } from 'jotai';
-import { always, cond, gte, isNil, T } from 'ramda';
+import { T, always, cond, gte, isNil } from 'ramda';
 
 import {
   defaultTimePeriod,

package/src/TimePeriods/useTimePeriod.ts

@@ -2,14 +2,14 @@ import { useEffect } from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 
+import { WrapperTimePeriodProps } from './models';
 import {
+  adjustTimePeriodDerivedAtom,
   customTimePeriodAtom,
-  getDatesDerivedAtom,
-  selectedTimePeriodAtom,
   errorTimePeriodAtom,
-  adjustTimePeriodDerivedAtom
+  getDatesDerivedAtom,
+  selectedTimePeriodAtom
 } from './timePeriodsAtoms';
-import { WrapperTimePeriodProps } from './models';
 
 const useTimePeriod = ({
   getParameters,

package/src/TopCounterElements/ResourceSubMenu.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react';
-
 import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 import { Link } from 'react-router-dom';
+import { makeStyles } from 'tss-react/mui';
 
 import { List, ListItem } from '@mui/material';
 
@@ -80,7 +78,6 @@ const SubMenu = ({ items, onClose }: SubMenuProps): JSX.Element => {
             disableGutters
             className={classes.submenuItem}
             key={to}
-            role="none"
             onClick={onClose}
           >
             <Link

package/src/TopCounterElements/StatusCounter.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Badge, Tooltip } from '@mui/material';
 
-import { getStatusColors, SeverityCode } from '@centreon/ui';
+import { SeverityCode, getStatusColors } from '@centreon/ui';
 
 export interface StyleProps {
   severityCode?: SeverityCode | null;
@@ -55,7 +55,7 @@ const StatusCounter = ({
         classes={{
           badge: cx(classes.badge, className)
         }}
-        max={Infinity}
+        max={Number.POSITIVE_INFINITY}
         overlap="circular"
       />
     </Tooltip>

package/src/Typography/FluidTypography/index.tsx

@@ -1,46 +1,46 @@
-import { Typography, TypographyProps } from '@mui/material';
-
-type CustomTypographyProps = Pick<TypographyProps, 'variant' | 'sx'>;
-export interface FluidTypographyProps extends CustomTypographyProps {
-  className?: string;
-  containerClassName?: string;
-  max?: string;
-  min?: string;
-  pref?: number;
-  text: string;
-}
-
-const FluidTypography = ({
-  text,
-  variant = 'body1',
-  className,
-  containerClassName,
-  min = '10px',
-  max = '1000px',
-  pref = 19,
-  sx
-}: FluidTypographyProps): JSX.Element => {
-  return (
-    <div
-      className={containerClassName}
-      style={{
-        containerType: 'inline-size',
-        height: `100%`,
-        width: `100%`
-      }}
-    >
-      <Typography
-        className={className}
-        sx={{
-          fontSize: `clamp(${min}, ${pref}cqi, ${max})`,
-          ...sx
-        }}
-        variant={variant}
-      >
-        {text}
-      </Typography>
-    </div>
-  );
-};
-
-export default FluidTypography;
+import { Typography, TypographyProps } from '@mui/material';
+
+type CustomTypographyProps = Pick<TypographyProps, 'variant' | 'sx'>;
+export interface FluidTypographyProps extends CustomTypographyProps {
+  className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
+  text: string;
+}
+
+const FluidTypography = ({
+  text,
+  variant = 'body1',
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19,
+  sx
+}: FluidTypographyProps): JSX.Element => {
+  return (
+    <div
+      className={containerClassName}
+      style={{
+        containerType: 'inline-size',
+        height: '100%',
+        width: '100%'
+      }}
+    >
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`,
+          ...sx
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
+    </div>
+  );
+};
+
+export default FluidTypography;

package/src/Typography/Subtitle.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 
-import { type, equals } from 'ramda';
+import { equals, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { Typography } from '@mui/material';
 
 import { Tooltip } from '../components';
 

package/src/Typography/story.utils.tsx

@@ -1,14 +1,14 @@
-import { makeStyles } from 'tss-react/mui';
 import { toPairs } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import {
-  useTheme,
-  Typography,
   Box,
-  Stack,
-  CardContent,
   Card,
-  CardHeader
+  CardContent,
+  CardHeader,
+  Stack,
+  Typography,
+  useTheme
 } from '@mui/material';
 
 const useStyles = makeStyles()((theme) => ({

package/src/WallpaperPage/index.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 
-import { makeStyles } from 'tss-react/mui';
 import { isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import { Paper } from '@mui/material';
 

package/src/Wizard/ActionsBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '../../test/testRenderer';
+import { fireEvent, render, screen } from '../../test/testRenderer';
 
 import ActionsBar from './ActionsBar';
 

package/src/Wizard/ActionsBar.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { Grid, Button, Typography, CircularProgress } from '@mui/material';
+import { Button, CircularProgress, Grid, Typography } from '@mui/material';
 
 import { ActionsBarProps } from './models';
 

package/src/Wizard/StepIcon.tsx

@@ -1,8 +1,8 @@
 import { makeStyles } from 'tss-react/mui';
 
+import Check from '@mui/icons-material/Check';
 import { StepIconProps } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
-import Check from '@mui/icons-material/Check';
 
 const useStepIconStyles = makeStyles()((theme) => ({
   avatar: {

package/src/Wizard/Stepper.tsx

@@ -1,10 +1,10 @@
-import { length, gte } from 'ramda';
+import { gte, length } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Stepper as MUIStepper, Step, StepLabel } from '@mui/material';
 
-import { Step as StepType } from './models';
 import StepIcon from './StepIcon';
+import { Step as StepType } from './models';
 
 interface Props {
   currentStep: number;

package/src/Wizard/WizardContent.tsx

@@ -4,8 +4,8 @@ import { useFormikContext } from 'formik';
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { WizardContentProps } from './models';
 import ActionsBar from './ActionsBar';
+import { WizardContentProps } from './models';
 
 const useStyles = makeStyles()(() => ({
   content: {

package/src/Wizard/index.stories.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { useFormikContext, FormikErrors, FormikValues } from 'formik';
+import { FormikErrors, FormikValues, useFormikContext } from 'formik';
 
-import { Typography, TextField } from '@mui/material';
+import { TextField, Typography } from '@mui/material';
 
 import { StepComponentProps } from './models';
 

package/src/Wizard/index.test.tsx

@@ -3,11 +3,11 @@ import { useEffect } from 'react';
 import * as Yup from 'yup';
 
 import {
-  render,
+  RenderResult,
   fireEvent,
-  waitFor,
+  render,
   screen,
-  RenderResult
+  waitFor
 } from '../../test/testRenderer';
 
 import { StepComponentProps } from './models';

package/src/Wizard/index.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react';
 
-import { equals, length, dec, pipe, inc, filter, isEmpty, not } from 'ramda';
 import { Formik } from 'formik';
+import { dec, equals, filter, inc, isEmpty, length, not, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Dialog, DialogContent } from '@mui/material';
 
 import Confirm from '../Dialog/Confirm';
 
-import { WizardProps } from './models';
 import Stepper from './Stepper';
 import WizardContent from './WizardContent';
+import { WizardProps } from './models';
 
 const useStyles = makeStyles()(() => ({
   dialogContent: {