@centreon/ui 24.4.8 → 24.4.10

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -27,9 +27,9 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq('display', false), lines);
+  const displayedLines = reject(propEq(false, 'display'), lines);
   const getLineByMetric = (metric_id: number): Line =>
-    find(propEq('metric_id', metric_id), lines) as Line;
+    find(propEq(metric_id, 'metric_id'), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
     const data = lines.map((line) => ({
@@ -92,7 +92,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
+      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

package/src/Graph/LineChart/helpers/doc.ts

@@ -69,21 +69,24 @@ export const getDescription = ({ sections }: Description): string => {
       })}<br></details>`;
     }
 
-    const formattedProps = props.reduce((accumulator, currentValue, index) => {
-      const key = Object.keys(currentValue)[0];
-      const { description, type } = currentValue[key];
-      const body = `${accumulator} ${getBodyDescription({
-        description,
-        key,
-        type
-      })}`;
+    const formattedProps = props.reduce(
+      (accumulator, currentValue, index) => {
+        const key = Object.keys(currentValue)[0];
+        const { description, type } = currentValue[key];
+        const body = `${accumulator} ${getBodyDescription({
+          description,
+          key,
+          type
+        })}`;
 
-      if (!equals(index, props.length - 1)) {
-        return body;
-      }
+        if (!equals(index, props.length - 1)) {
+          return body;
+        }
 
-      return `${body}</details>`;
-    }, getInitialValue({ section: name, type: item?.type }));
+        return `${body}</details>`;
+      },
+      getInitialValue({ section: name, type: item?.type })
+    );
 
     return formattedProps as string;
   });

package/src/Graph/LineChart/helpers/index.ts

@@ -14,7 +14,7 @@ import { LineChartData } from '../../common/models';
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq('display', false), sortedLines);
+  const displayedLines = reject(propEq(false, 'display'), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

package/src/Graph/LineChart/index.stories.tsx

@@ -39,8 +39,7 @@ import { Interval, ThresholdType, TooltipData } from './models';
 import WrapperLineChart from './index';
 
 const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart,
-  tags: ['autodocs']
+  component: WrapperLineChart
 };
 export default meta;
 
@@ -353,6 +352,9 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,4 +1,4 @@
-import { Thresholds } from '../common/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -8,7 +8,7 @@ interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
   size: 'small' | 'medium';
-  thresholds: Thresholds;
+  thresholds: ThresholdsModel;
   xScale: (value: number) => number;
 }
 

package/src/Graph/Text/Text.stories.tsx

@@ -24,7 +24,21 @@ export const success: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -36,7 +50,21 @@ export const warning: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.2, 0.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.4
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -48,7 +76,21 @@ export const critical: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.13, 0.35]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.3
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -61,7 +103,21 @@ export const rawValue: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };

package/src/Graph/common/timeSeries/index.ts

@@ -179,7 +179,7 @@ const getMetricValuesForUnit = ({
     ) as Array<number>;
 
   return pipe(
-    filter(propEq('unit', unit)) as (line) => Array<Line>,
+    filter(propEq(unit, 'unit')) as (line) => Array<Line>,
     map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
@@ -203,7 +203,7 @@ const getLineForMetric = ({
   lines,
   metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq('metric_id', metric_id), lines);
+  find(propEq(metric_id, 'metric_id'), lines);
 
 interface LinesTimeSeries {
   lines: Array<Line>;
@@ -275,7 +275,7 @@ interface HasStackedLines {
 }
 
 const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
-  pipe(getSortedStackedLines, any(propEq('unit', unit)))(lines);
+  pipe(getSortedStackedLines, any(propEq(unit, 'unit')))(lines);
 
 const getTimeSeriesForLines = ({
   lines,

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -283,13 +283,16 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(() => {
-      setSearchParameter(
-        !isEmpty(searchConditions)
-          ? { conditions: searchConditions }
-          : undefined
-      );
-    }, useDeepCompare([searchConditions]));
+    useEffect(
+      () => {
+        setSearchParameter(
+          !isEmpty(searchConditions)
+            ? { conditions: searchConditions }
+            : undefined
+        );
+      },
+      useDeepCompare([searchConditions])
+    );
 
     useEffect(() => {
       if (!autocompleteChangedValue && !props?.value) {

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq('id', item), items),
+        (item) => find(propEq(item, 'id'), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq('id', id), items);
+      const itemIndex = findIndex(propEq(id, 'id'), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq('id', id), values);
+        const index = findIndex(propEq(id, 'id'), values);
 
         const newSelectedValues = remove(index, 1, values);
 

package/src/InputField/Select/IconPopover/index.tsx

@@ -73,14 +73,14 @@ const IconPopoverMultiAutocomplete = ({
   };
 
   const isSelected = (id: number | string): boolean => {
-    return pipe(find(propEq('id', id)), Boolean)(value);
+    return pipe(find(propEq(id, 'id')), Boolean)(value);
   };
 
   const unSelect = (option: SelectEntry): void => {
     const { id } = option;
 
     const updatedValue = isSelected(id)
-      ? reject(propEq('id', id), value)
+      ? reject(propEq(id, 'id'), value)
       : [...value, option];
 
     onChange(updatedValue);

package/src/InputField/Select/index.tsx

@@ -69,7 +69,7 @@ const SelectField = ({
   const { classes, cx } = useStyles();
 
   const getOption = (id): SelectEntry => {
-    return options.find(propEq('id', id)) as SelectEntry;
+    return options.find(propEq(id, 'id')) as SelectEntry;
   };
 
   const changeOption = (event): void => {

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq('id', id), columns) as Column;
+    return find(propEq(id, 'id'), columns) as Column;
   };
 
   const Content = React.useCallback(

package/src/Listing/Listing.styles.ts

@@ -9,13 +9,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  limit: number;
   listingVariant: ListingVariant;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,7 +55,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || limit
+        rows?.length || 1
       }, ${dataStyle.body.height}px)`,
       position: 'relative'
     },

package/src/Listing/index.stories.tsx

@@ -366,6 +366,16 @@ const columnsWithSubItems = [
   }
 ];
 
+const TemplateSubItems = (args): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.listing}>
+      <Listing {...args} />
+    </div>
+  );
+};
+
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -382,5 +392,6 @@ export const ListingWithSubItems = {
       rowProperty: 'subItems'
     },
     totalRows: 10
-  }
+  },
+  render: TemplateSubItems
 };

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq('id', id))
+    columns.find(propEq(id, 'id'))
   ) as Array<Column>;
 };
 
@@ -229,7 +229,6 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
-    limit,
     listingVariant,
     rows: rowsToDisplay
   });

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,6 +12,7 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -38,6 +39,7 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
+  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -143,6 +145,7 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
+  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -178,6 +181,13 @@ const RichTextEditor = ({
     }
   };
 
+  const change = (state: EditorState, editor: LexicalEditor): void => {
+    editor.update(() => {
+      setHtmlString?.($generateHtmlFromNodes(editor, null));
+    });
+    getEditorState?.(state, editor);
+  };
+
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -210,6 +220,7 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
+                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -218,7 +229,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={getEditorState} />
+          <OnChangePlugin onChange={change} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

package/src/SortableItems/index.tsx

@@ -15,11 +15,7 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  SortingStrategy
-} from '@dnd-kit/sortable';
+import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -117,7 +113,6 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -169,7 +164,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(propertyToFilterItemsOn, id), items);
+    find(propEq(id, propertyToFilterItemsOn), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 

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,19 +1,29 @@
-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, 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;
+  property: CustomTimePeriodProperty | string;
 }
 
 const DateTimePickerInput = ({
@@ -25,24 +35,42 @@ const DateTimePickerInput = ({
   disabled = false,
   desktopMediaQuery
 }: Props): JSX.Element => {
-  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
+  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)}
+        value={formatDate(date)}
+        onChange={changeTime}
+      />
+    </LocalizationProvider>
   );
 };