@centreon/ui 26.3.4 → 26.3.6

package/src/SortableItems/index.tsx

@@ -1,36 +1,36 @@
+import { useTheme } from '@mui/material';
+
 import {
-  CollisionDetection,
+  type CollisionDetection,
   DndContext,
-  DragEndEvent,
-  DragOverEvent,
+  type DragEndEvent,
+  type DraggableSyntheticListeners,
+  type DragOverEvent,
   DragOverlay,
-  DragStartEvent,
-  DraggableSyntheticListeners,
+  type DragStartEvent,
   KeyboardSensor,
   MouseSensor,
-  Over,
+  type Over,
   PointerSensor,
   useSensor,
   useSensors
 } from '@dnd-kit/core';
-import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, type SortingStrategy } from '@dnd-kit/sortable';
 import {
-  path,
   equals,
   find,
   indexOf,
   isNil,
   move,
   not,
+  path,
   pick,
   pipe,
   pluck,
   propEq
 } from 'ramda';
+import { type RefObject, useEffect, useState } from 'react';
 
-import { useTheme } from '@mui/material';
-
-import { RefObject, useEffect, useState } from 'react';
 import Item from './Item';
 import SortableItem from './SortableItem';
 
@@ -172,55 +172,52 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
       return;
     }
     setSortableItemsIds(getItemsIds());
-  }, [items]);
+  }, [updateSortableItemsOnItemsChange, items]);
 
   return (
     <DndContext
       collisionDetection={collisionDetection}
-      sensors={sensors}
       onDragCancel={dragCancel}
       onDragEnd={dragEnd}
       onDragOver={dragOver}
       onDragStart={dragStart}
+      sensors={sensors}
     >
       <SortableContext items={sortableItemsIds} strategy={sortingStrategy}>
         <RootComponent>
-          {/* biome-ignore lint: */}
-          <>
-            {sortableItemsIds.map((sortableItemId, index) => {
-              const item = getItemById(sortableItemId) as
-                | Record<string, unknown>
-                | undefined;
-
-              if (isNil(item)) {
-                return null;
-              }
-
-              return (
-                not(getDisableItemCondition(item as T)) && (
-                  <SortableItem
-                    Content={Content}
-                    index={index}
-                    itemId={sortableItemId}
-                    itemProps={itemProps}
-                    key={sortableItemId}
-                    memoProps={memoProps}
-                    {...pick(itemProps, item)}
-                    additionalProps={additionalProps}
-                  />
-                )
-              );
-            })}
-          </>
+          {sortableItemsIds.map((sortableItemId, index) => {
+            const item = getItemById(sortableItemId) as
+              | Record<string, unknown>
+              | undefined;
+
+            if (isNil(item)) {
+              return null;
+            }
+
+            return (
+              not(getDisableItemCondition(item as T)) && (
+                <SortableItem
+                  Content={Content}
+                  index={index}
+                  itemId={sortableItemId}
+                  itemProps={itemProps}
+                  key={sortableItemId}
+                  memoProps={memoProps}
+                  {...pick(itemProps, item)}
+                  additionalProps={additionalProps}
+                />
+              )
+            );
+          })}
         </RootComponent>
       </SortableContext>
       <DragOverlay style={{ zIndex: theme.zIndex.tooltip }}>
         <RootComponent isInDragOverlay>
           {activeId ? (
             <Item
+              Content={Content}
               isDragging
               isInDragOverlay
-              Content={Content}
               title={activeId}
               {...pick(itemProps, activeItem)}
               {...additionalProps}

package/src/StatusChip/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
+import type { Theme } from '@mui/material';
 
-import { Theme } from '@mui/material';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import StatusChip, { SeverityCode } from '.';
 

package/src/StatusChip/index.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import { Chip, type ChipProps } from '@mui/material';
 
 import { equals } from 'ramda';
+import type { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps } from '@mui/material';
-
-import { SeverityCode, getStatusColors } from '../utils/statuses';
+import { getStatusColors, SeverityCode } from '../utils/statuses';
 
 export type Props = {
   clickable?: boolean;

package/src/StoryBookThemeProvider/index.tsx

@@ -1,15 +1,15 @@
-import { ReactElement, useMemo } from 'react';
-
 import {
   CssBaseline,
+  createTheme,
   ThemeProvider as MuiThemeProvider,
-  StyledEngineProvider,
-  createTheme
+  StyledEngineProvider
 } from '@mui/material';
+import { GlobalStyles } from '@mui/system';
 
-import { ThemeMode } from '@centreon/ui-context';
+import type { ThemeMode } from '@centreon/ui-context';
+
+import { type ReactElement, useMemo } from 'react';
 
-import { GlobalStyles } from '@mui/system';
 import { getTheme } from '../ThemeProvider';
 
 interface Props {
@@ -24,7 +24,7 @@ const StoryBookThemeProvider = ({
   const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
 
   return (
-    <StyledEngineProvider injectFirst enableCssLayer>
+    <StyledEngineProvider enableCssLayer injectFirst>
       <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         {children}

package/src/ThemeProvider/base.css

@@ -35,7 +35,7 @@
   }
 
   #root {
-    background-color: var(--color-background-paper) !important;
+    background-color: var(--color-background-paper);
   }
 
   @variant dark {

package/src/ThemeProvider/index.tsx

@@ -1,29 +1,28 @@
-import { useAtomValue } from 'jotai';
-import { equals, mergeDeepRight } from 'ramda';
-import { CSSInterpolation } from 'tss-react';
-
 import {
-  ButtonProps,
-  InputBaseProps,
+  type ButtonProps,
+  createTheme,
+  type InputBaseProps,
   ThemeProvider as MuiThemeProvider,
-  PaletteOptions,
+  type PaletteOptions,
   StyledEngineProvider,
-  Theme,
-  createTheme
+  type Theme
 } from '@mui/material';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeOptions } from '@mui/material/styles/createTheme';
+import type { ThemeOptions } from '@mui/material/styles/createTheme';
+import { GlobalStyles } from '@mui/system';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
 
+import { useAtomValue } from 'jotai';
+import { equals, mergeDeepRight } from 'ramda';
+import { type ReactNode, useMemo } from 'react';
+import type { CSSInterpolation } from 'tss-react';
+
 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 { GlobalStyles } from '@mui/system';
-import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
@@ -277,7 +276,7 @@ const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
   }, [themeMode, overrideTheme]);
 
   return (
-    <StyledEngineProvider injectFirst enableCssLayer>
+    <StyledEngineProvider enableCssLayer injectFirst>
       <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         <CssBaseline />

package/src/ThemeProvider/palettes.ts

@@ -1,8 +1,9 @@
-import { equals } from 'ramda';
-
-import { PaletteOptions, alpha } from '@mui/material';
+import { alpha, type PaletteOptions } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
+
+import { equals } from 'ramda';
+
 import {
   colorBlue50,
   colorBlue400,
@@ -161,8 +162,6 @@ export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
-    inFlapping: '#064A3F',
-    inFlappingBackground: '#D8F3EF',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -173,6 +172,8 @@ export const lightPalette: PaletteOptions = {
     hoverOpacity: 0.06,
     inDowntime: '#512980',
     inDowntimeBackground: '#E5D8F3',
+    inFlapping: '#064A3F',
+    inFlappingBackground: '#D8F3EF',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -295,9 +296,9 @@ export const lightPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#000',
-    main: '#FD9B27',
+    dark: '#FC7E00',
     light: '#FCC481',
-    dark: '#FC7E00'
+    main: '#FD9B27'
   }
 };
 
@@ -305,8 +306,6 @@ export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
-    inFlapping: '#D8F3EF',
-    inFlappingBackground: '#064A3F',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -317,6 +316,8 @@ export const darkPalette: PaletteOptions = {
     hoverOpacity: 0.16,
     inDowntime: '#E5D8F3',
     inDowntimeBackground: '#512980',
+    inFlapping: '#D8F3EF',
+    inFlappingBackground: '#064A3F',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,18 +1,17 @@
-import { useAtomValue } from 'jotai';
-import { useTranslation } from 'react-i18next';
-
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { Button, Typography } from '@mui/material';
 
 import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
 
+import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
 import { customTimePeriodAtom } from '../timePeriodsAtoms';
 import {
   labelCompactTimePeriod,
   labelFrom,
   labelTo
 } from '../translatedLabels';
-
 import useStyles from './CompactCustomTimePeriod.styles';
 
 interface Props {
@@ -40,8 +39,8 @@ const CompactCustomTimePeriod = ({
       color="primary"
       data-testid={labelCompactTimePeriod}
       disabled={disabled}
-      variant="outlined"
       onClick={onClick}
+      variant="outlined"
     >
       <div className={classes.buttonContent}>
         <AccessTimeIcon />

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

@@ -6,7 +6,7 @@ interface Props {
 }
 
 const ErrorText = ({ message, style }: Props): JSX.Element => (
-  <FormHelperText error className={style}>
+  <FormHelperText className={style} error>
     {message}
   </FormHelperText>
 );

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

@@ -1,3 +1,8 @@
+/** biome-ignore-all lint/a11y/useAriaPropsSupportedByRole: need it */
+import { Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -6,23 +11,18 @@ import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from '@mui/material';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
+import { useLocale } from '../../../utils';
 import DateTimePickerInput from '../../DateTimePickerInput';
 import { isInvalidDate } from '../../helpers';
 import {
   CustomTimePeriodProperty,
-  DateTimePickerInputModel
+  type DateTimePickerInputModel
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-
-import { useLocale } from '../../../utils';
 import ErrorText from './ErrorText';
 import {
   PickersStartEndDateDirection,
-  PickersStartEndDateProps
+  type PickersStartEndDateProps
 } from './models';
 
 dayjs.extend(utc);

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

@@ -1,14 +1,14 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Popover } from '@mui/material';
 
-import PickersStartEndDate from './PickersStartEndDate';
+import { makeStyles } from 'tss-react/mui';
+
 import {
-  PickersData,
-  PopoverData,
   defaultAnchorOrigin,
-  defaultTransformOrigin
+  defaultTransformOrigin,
+  type PickersData,
+  type PopoverData
 } from './models';
+import PickersStartEndDate from './PickersStartEndDate';
 import usePickersStartEndDate from './usePickersStartEndDate';
 
 const useStyles = makeStyles()((theme) => ({
@@ -57,9 +57,9 @@ const PopoverCustomTimePeriod = ({
       anchorPosition={anchorPosition}
       anchorReference={anchorReference}
       className={classes.paper}
+      onClose={onClose}
       open={open}
       transformOrigin={transformOrigin ?? defaultTransformOrigin}
-      onClose={onClose}
     >
       <PickersStartEndDate
         changeDate={changeDate}

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

@@ -1,8 +1,7 @@
-import { PopoverOrigin, PopoverPosition } from '@mui/material';
+import type { PopoverOrigin, PopoverPosition } from '@mui/material';
 
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
-
-import { PickersStartEndDateModel } from './usePickersStartEndDate';
+import type { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+import type { PickersStartEndDateModel } from './usePickersStartEndDate';
 
 interface RangeDate {
   max?: Date;

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

@@ -1,14 +1,12 @@
-import { useEffect, useState } from 'react';
-
 import dayjs from 'dayjs';
 import { useSetAtom } from 'jotai';
 import { and, cond, equals, isNil } from 'ramda';
+import { useEffect, useState } from 'react';
 
 import { isInvalidDate } from '../../helpers';
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+import { type CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-
-import { AcceptDateProps } from './models';
+import type { AcceptDateProps } from './models';
 
 export interface PickersStartEndDateModel {
   changeDate: (props: AcceptDateProps) => void;
@@ -61,14 +59,14 @@ const usePickersStartEndDate = ({
     }
     setStart(customTimePeriod.start);
     setEnd(customTimePeriod.end);
-  }, [customTimePeriod.start, customTimePeriod.end]);
+  }, [customTimePeriod.start, customTimePeriod.end, end, start]);
 
   useEffect(() => {
     if (!end || !start) {
       return;
     }
     setError(isInvalidDate({ endDate: end, startDate: start }));
-  }, [end, start]);
+  }, [end, start, setError]);
 
   return {
     changeDate,

package/src/TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod.tsx

@@ -1,9 +1,9 @@
-import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
 import {
-  AcceptDateProps,
+  type AcceptDateProps,
   PickersStartEndDateDirection,
-  PickersStartEndDateProps
+  type PickersStartEndDateProps
 } from './PopoverCustomTimePeriod/models';
+import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
 
 interface Props {
   changeDate: (props: AcceptDateProps) => void;

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -1,14 +1,12 @@
-import { MouseEvent, useState } from 'react';
+import { useDebounce } from '@centreon/ui';
 
 import { useAtomValue, useSetAtom } from 'jotai';
-
-import { useDebounce } from '@centreon/ui';
+import { type MouseEvent, useState } from 'react';
 
 import {
   changeCustomTimePeriodDerivedAtom,
   customTimePeriodAtom
 } from '../timePeriodsAtoms';
-
 import CompactCustomTimePeriod from './CompactCustomTimePeriod';
 import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
 

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,20 +1,19 @@
-import { useCallback } from 'react';
-
-import dayjs, { Dayjs } from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
-
 import {
   DateTimePicker,
-  DateTimePickerProps,
+  type DateTimePickerProps,
   LocalizationProvider
 } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import dayjs, { type Dayjs } from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+import { useCallback } from 'react';
+
 import { useLocale } from '../utils';
-import { CustomTimePeriodProperty } from './models';
+import type { CustomTimePeriodProperty } from './models';
 
 interface ChangeDateProps {
   date: Date;
@@ -87,8 +86,8 @@ const DateTimePickerInput = ({
         maxDate={maxDate && formatDate(maxDate)}
         minDate={minDate && formatDate(minDate)}
         minDateTime={minDateTime && formatDate(minDateTime)}
-        value={formatDate(date)}
         onChange={changeTime}
+        value={formatDate(date)}
         {...rest}
       />
     </LocalizationProvider>

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

@@ -1,17 +1,17 @@
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { Provider, createStore } from 'jotai';
 
 import { Switch } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { retrievedUser } from './mockedData';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { createStore, Provider } from 'jotai';
 
 import TimePeriod from './index';
+import { retrievedUser } from './mockedData';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);
@@ -35,7 +35,7 @@ const data = [
   }
 ];
 
-data.forEach((item) =>
+data.forEach((item) => {
   describe('Time period', () => {
     const { height, width } = item.resolution;
     beforeEach(() => {
@@ -70,5 +70,5 @@ data.forEach((item) =>
         title: `${width}px`
       });
     });
-  })
-);
+  });
+});

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,11 +1,11 @@
+import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
+
 import { useAtomValue, useSetAtom } from 'jotai';
-import { T, always, cond, equals, lte, map, pick } from 'ramda';
+import { always, cond, equals, lte, map, pick, T } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
-
-import { TimePeriod, timePeriods } from './models';
+import { type TimePeriod, timePeriods } from './models';
 import {
   changeSelectedTimePeriodDerivedAtom,
   selectedTimePeriodAtom
@@ -72,17 +72,17 @@ const SelectedTimePeriod = ({
             <Button
               className={classes.button}
               data-testid={id}
-              variant={
-                equals(selectedTimePeriodData?.id, id)
-                  ? 'contained'
-                  : 'outlined'
-              }
               onClick={(): void =>
                 changeSelectedTimePeriod({
                   id,
                   timePeriods: currentTimePeriods
                 })
               }
+              variant={
+                equals(selectedTimePeriodData?.id, id)
+                  ? 'contained'
+                  : 'outlined'
+              }
             >
               {
                 cond<number, string>([

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

@@ -1,14 +1,14 @@
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
 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 { createStore, Provider } from 'jotai';
 import { equals } from 'ramda';
 
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { ListingVariant, userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from './DateTimePickerInput';
 import { CustomTimePeriodProperty } from './models';
 
@@ -287,7 +287,7 @@ const checkIfDuplicateExists = (arr: Array<unknown>): boolean => {
   return new Set(arr).size !== arr.length;
 };
 
-testData.forEach((item) =>
+testData.forEach((item) => {
   describe(`DateTimePicker ${item.button}`, () => {
     beforeEach(() => {
       cy.viewport('macbook-13');
@@ -454,7 +454,9 @@ testData.forEach((item) =>
             formatString: 'dd'
           })
         );
-        daysArray.forEach((day) => cy.contains(day.toUpperCase()));
+        daysArray.forEach((day) => {
+          cy.contains(day.toUpperCase());
+        });
         const currentMonth = Object.keys(element)[0];
         if (equals(item.button, ButtonCalendar.PMONTH)) {
           getPreviousMonth({ currentMonth, labelButton: item.button });
@@ -482,5 +484,5 @@ testData.forEach((item) =>
         );
       });
     });
-  })
-);
+  });
+});