@centreon/ui 23.10.118 → 23.10.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.118",
+  "version": "23.10.119",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -73,13 +73,13 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/cypress": "^1.1.3",
     "@types/jest": "^27.5.0",
-    "@types/ramda": "^0.29.6",
+    "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
-    "cypress": "^13.3.1",
+    "cypress": "^12.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -101,13 +101,12 @@
     "vite-plugin-turbosnap": "^1.0.2"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.2",
-    "@lexical/link": "^0.12.2",
-    "@lexical/list": "^0.12.2",
-    "@lexical/react": "^0.12.2",
-    "@lexical/rich-text": "^0.12.2",
-    "@lexical/selection": "^0.12.2",
-    "@lexical/utils": "^0.12.2",
+    "@lexical/link": "0.11.3",
+    "@lexical/list": "^0.11.3",
+    "@lexical/react": "0.11.3",
+    "@lexical/rich-text": "^0.11.3",
+    "@lexical/selection": "0.11.3",
+    "@lexical/utils": "0.11.3",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
@@ -119,9 +118,8 @@
     "anylogger": "^1.0.11",
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.2",
-    "notistack": "^3.0.1",
-    "ramda": "0.29.1",
+    "lexical": "0.11.3",
+    "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
@@ -137,7 +135,7 @@
     "@mui/icons-material": "5.x",
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
-    "@tanstack/react-query": "5.x",
+    "@tanstack/react-query": "4.x",
     "axios": "0.x",
     "dayjs": "1.x",
     "formik": "2.x",

package/src/Button/Save/StartIcon.tsx

@@ -15,9 +15,9 @@ interface Props {
 
 const StartIcon = ({ startIconConfig }: Props): JSX.Element | null =>
   cond<Array<StartIconConfigProps>, JSX.Element | null>([
-    [pipe(propEq(true, 'hasLabel'), not), always(null)],
-    [propEq(true, 'succeeded'), always(<CheckIcon />)],
-    [propEq(true, 'loading'), always(<SaveIcon />)],
+    [pipe(propEq('hasLabel', true), not), always(null)],
+    [propEq('succeeded', true), always(<CheckIcon />)],
+    [propEq('loading', true), always(<SaveIcon />)],
     [T, always(<SaveIcon />)]
   ])(startIconConfig);
 

package/src/Dashboard/Item.tsx

@@ -27,7 +27,7 @@ interface DashboardItemProps {
   style?: CSSProperties;
 }
 
-const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
+const Item = forwardRef(
   (
     {
       children,

package/src/FileDropZone/index.tsx

@@ -98,9 +98,7 @@ const getExtensions = cond([
   [T, identity]
 ]) as (accept: string) => Array<string>;
 
-export const transformFileListToArray = (
-  files: FileList | null
-): Array<File> =>
+export const transformFileListToArray = (files: FileList | null): Array<File> =>
   isNil(files)
     ? []
     : (Array(files.length)

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -46,7 +46,10 @@ const CheckboxGroup = ({
       return;
     }
 
-    setFieldValue(fieldName, value?.filter((elm) => !equals(elm, label)));
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
   };
 
   return useMemoComponent({

package/src/Form/Inputs/index.tsx

@@ -185,7 +185,7 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
         const isFirstElement = areGroupsOpen || R.equals(index, 0);

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,11 +130,10 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map(
-        (element) =>
-          element?.map(({ Component, props, key }) => (
-            <Component {...props} id={key} key={key} />
-          ))
+      {filteredThresholdLines.map((element) =>
+        element?.map(({ Component, props, key }) => (
+          <Component {...props} id={key} key={key} />
+        ))
       )}
     </g>
   );

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -28,7 +28,7 @@ const useFilterLines = ({
   linesGraph,
   setLinesGraph
 }: UseFilterLines): Result => {
-  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
+  const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,8 +43,9 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
-    ?.name})`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${
+    event.contact?.name
+  })`;
 
   return (
     <g>

package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -26,7 +26,7 @@ const EventAnnotations = ({
   color,
   annotationHoveredId
 }: Props): JSX.Element => {
-  const events = filter(propEq(type, 'type'), data);
+  const events = filter(propEq('type', type), data);
 
   return (
     <>

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

@@ -27,15 +27,15 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq(false, 'display'), lines);
+  const displayedLines = reject(propEq('display', false), 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 line = getLineByMetric(metric_id);
 
     setLinesGraph([
-      ...reject(propEq(metric_id, 'metric_id'), lines),
+      ...reject(propEq('metric_id', metric_id), lines),
       { ...line, display: !line.display }
     ]);
   };
@@ -43,7 +43,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const highlightLine = (metric_id): void => {
     const fadedLines = map((line) => ({ ...line, highlight: false }), lines);
     const data = [
-      ...reject(propEq(metric_id, 'metric_id'), fadedLines),
+      ...reject(propEq('metric_id', metric_id), fadedLines),
       { ...getLineByMetric(metric_id), highlight: true }
     ];
 
@@ -93,7 +93,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
+      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

package/src/Graph/LineChart/LineChart.tsx

@@ -34,8 +34,6 @@ import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
 
-const extraMargin = 10;
-
 interface Props extends LineChartProps {
   curve: CurveType;
   graphData: Data;
@@ -94,8 +92,7 @@ const LineChart = ({
     showTooltip: showThresholdTooltip
   } = Tooltip.useTooltip();
 
-  const graphWidth =
-    width > 0 ? width - margin.left - margin.right - extraMargin : 0;
+  const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight =
     (height || 0) > 0
       ? (height || 0) -
@@ -188,7 +185,7 @@ const LineChart = ({
             width={width}
           />
           <svg height={graphHeight + margin.top} ref={graphSvgRef} width="100%">
-            <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
+            <Group.Group left={margin.left} top={margin.top}>
               <Grids
                 height={graphHeight - margin.top}
                 leftScale={leftScale}

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

@@ -69,24 +69,21 @@ 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(false, 'display'), sortedLines);
+  const displayedLines = reject(propEq('display', false), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

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

@@ -39,7 +39,8 @@ import { Interval, ThresholdType, TooltipData } from './models';
 import WrapperLineChart from './index';
 
 const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart
+  component: WrapperLineChart,
+  tags: ['autodocs']
 };
 export default meta;
 

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

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

@@ -280,16 +280,13 @@ 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(item, 'id'), items),
+        (item) => find(propEq('id', item), 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/index.stories.tsx

@@ -366,16 +366,6 @@ const columnsWithSubItems = [
   }
 ];
 
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
-
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -392,6 +382,5 @@ 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>;
 };