@centreon/ui 24.11.2 → 24.11.4

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, includes, split, type } from 'ramda';
+import { equals, includes, path, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -26,12 +26,20 @@ const Radio = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeRadio = (_, value): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
-        change({ setFieldValue, value: equals(value, 'true') });
+        change({
+          setFieldValue,
+          value: equals(value, 'true'),
+          values,
+          setFieldTouched,
+          setValues,
+          setTouched
+        });
 
         return;
       }
@@ -42,7 +50,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value });
+      change({ setFieldValue, value, values, setFieldTouched, setValues });
 
       return;
     }

package/src/Form/Inputs/Switch.tsx

@@ -22,11 +22,19 @@ const Switch = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
-      change({ setFieldValue, value: event.target.checked });
+      change({
+        setFieldValue,
+        value: event.target.checked,
+        values,
+        setFieldTouched,
+        setValues,
+        setTouched
+      });
 
       return;
     }

package/src/Form/Inputs/Text.tsx

@@ -2,11 +2,11 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import {
-  path,
   equals,
   gt,
   isEmpty,
   not,
+  path,
   split,
   type as variableType
 } from 'ramda';
@@ -42,7 +42,9 @@ const Text = ({
     touched,
     errors,
     handleBlur,
-    setFieldTouched
+    setFieldTouched,
+    setValues,
+    setTouched
   } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
@@ -50,7 +52,14 @@ const Text = ({
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value, setFieldTouched });
+      change({
+        setFieldValue,
+        value,
+        setFieldTouched,
+        setValues,
+        values,
+        setTouched
+      });
 
       return;
     }
@@ -113,7 +122,7 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth
+        fullWidth={text?.fullWidth ?? true}
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}

package/src/Form/Inputs/index.tsx

@@ -36,6 +36,7 @@ import CheckboxGroup from './CheckboxGroup';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import Custom from './Custom';
 import FieldsTable from './FieldsTable/FieldsTable';
+import File from './File';
 import Grid from './Grid';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -78,6 +79,7 @@ export const getInput = cond<
     always(CheckboxGroup)
   ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
+  [equals(InputType.File) as (b: InputType) => boolean, always(File)],
   [T, always(TextInput)]
 ]);
 
@@ -113,7 +115,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2)
+    rowGap: theme.spacing(2),
+    marginBottom: theme.spacing(1)
   }
 }));
 
@@ -165,7 +168,7 @@ const Inputs = ({
     );
 
     return pluck('name', usedGroups);
-  }, []);
+  }, [inputsByGroup, groups]);
 
   const sortedInputsByGroup = useMemo(
     () =>

package/src/Form/Inputs/models.ts

@@ -19,7 +19,8 @@ export enum InputType {
   Custom = 10,
   Checkbox = 11,
   CheckboxGroup = 12,
-  List = 13
+  List = 13,
+  File = 14
 }
 
 interface FieldsTableGetRequiredProps {
@@ -37,8 +38,16 @@ export interface InputProps {
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
+    fullWidth?: boolean;
   };
-  change?: ({ setFieldValue, value, setFieldTouched }) => void;
+  change?: ({
+    setFieldValue,
+    value,
+    setFieldTouched,
+    setValues,
+    values,
+    setTouched
+  }) => void;
   checkbox?: {
     direction?: 'horizontal' | 'vertical';
     labelPlacement?: LabelPlacement;
@@ -51,6 +60,12 @@ export interface InputProps {
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
   };
+  file?: {
+    multiple?: boolean;
+    accept?: string;
+    maxFileSize?: number;
+    CustomDropZoneContent: ({ files }) => JSX.Element;
+  };
   custom?: {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
@@ -103,6 +118,7 @@ export interface InputProps {
     placeholder?: string;
     type?: string;
     min?: number;
+    fullWidth?: boolean;
   };
   type: InputType;
 }

package/src/Form/storiesData.tsx

@@ -8,7 +8,7 @@ import { Typography } from '@mui/material';
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
 
-import { array, boolean, number, object, string } from 'yup';
+import { array, boolean, mixed, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -78,7 +78,8 @@ export const basicFormValidationSchema = object().shape({
     })
   ),
   scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required'))
+  sports: array().of(selectEntryValidationSchema.required('Required')),
+  file: mixed()
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -134,7 +135,8 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: []
+  sports: [],
+  file: null
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -444,6 +446,16 @@ export const basicFormInputs: Array<InputProps> = [
       multilineRows: 4
     },
     type: InputType.Text
+  },
+  {
+    fieldName: 'file',
+    group: 'First group',
+    label: 'File',
+    type: InputType.File,
+    file: {
+      accept: 'image/*',
+      multiple: true
+    }
   }
 ];
 

package/src/Form/translatedLabels.ts

@@ -5,3 +5,4 @@ export const labelSaved = 'Saved';
 export const labelReset = 'Reset';
 export const labelDisplayThePassword = 'Display the password';
 export const labelHideThePassword = 'Hide the password';
+export const labelDropOrSelectAFile = 'Drop or select a file';

package/src/Graph/BarChart/BarChart.tsx

@@ -38,6 +38,7 @@ export interface BarChartProps
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
+  skipIntersectionObserver?: boolean;
 }
 
 const BarChart = ({
@@ -57,7 +58,8 @@ const BarChart = ({
   barStyle = {
     opacity: 1,
     radius: 0.2
-  }
+  },
+  skipIntersectionObserver
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -93,6 +95,7 @@ const BarChart = ({
               thresholds={thresholds}
               tooltip={tooltip}
               width={width}
+              skipIntersectionObserver={skipIntersectionObserver}
             />
           )}
         </ParentSize>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -54,7 +54,8 @@ const ResponsiveBarChart = ({
   limitLegend,
   orientation,
   tooltip,
-  barStyle
+  barStyle,
+  skipIntersectionObserver
 }: Props): JSX.Element => {
   const { title, timeSeries, baseAxis, lines } = graphData;
 
@@ -149,7 +150,7 @@ const ResponsiveBarChart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport) {
+  if (!isInViewport && !skipIntersectionObserver) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}

package/src/Graph/Chart/Chart.tsx

@@ -56,6 +56,10 @@ interface Props extends LineChartProps {
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
@@ -97,7 +101,9 @@ const Chart = ({
   },
   thresholds,
   thresholdUnit,
-  limitLegend
+  limitLegend,
+  skipIntersectionObserver,
+  transformMatrix
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -219,7 +225,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport) {
+  if (!isInViewport && !skipIntersectionObserver) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}
@@ -319,6 +325,7 @@ const Chart = ({
                       graphInterval
                     }}
                     zoomData={{ ...zoomPreview }}
+                    transformMatrix={transformMatrix}
                   />
                   {thresholds?.enabled && (
                     <Thresholds

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -58,10 +58,10 @@ const useTickGraph = ({
       return;
     }
     const mousePositionTimeTick = mousePosition
-      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
+      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale })?.timeTick
       : 0;
     const timeTickValue = mousePosition
-      ? new Date(mousePositionTimeTick)
+      ? new Date(mousePositionTimeTick || 0)
       : null;
 
     setTickAxisBottom(timeTickValue);

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -76,13 +76,18 @@ interface Props {
   commonData: CommonData;
   timeShiftZonesData: TimeShiftZonesData;
   zoomData: ZoomPreviewModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const InteractionWithGraph = ({
   zoomData,
   commonData,
   annotationData,
-  timeShiftZonesData
+  timeShiftZonesData,
+  transformMatrix
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -127,7 +132,10 @@ const InteractionWithGraph = ({
     if (!mousePoint) {
       return;
     }
-    updateMousePosition([mousePoint.x, mousePoint.y]);
+    updateMousePosition([
+      transformMatrix?.fx?.(mousePoint.x) ?? mousePoint.x,
+      transformMatrix?.fy?.(mousePoint.y) ?? mousePoint.y
+    ]);
   };
 
   const mouseDown = (event): void => {

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

@@ -2,15 +2,15 @@ import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
 import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
 
-import { LineChartData } from '../../common/models';
+import type { LineChartData } from '../../common/models';
 import {
   getLineData,
   getTimeSeries,
   getTimeValue
 } from '../../common/timeSeries';
-import { LinesData } from '../BasicComponents/Lines/models';
+import type { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
-import { GetDate, GraphInterval } from '../models';
+import type { GetDate, GraphInterval } from '../models';
 
 dayjs.extend(durationPlugin);
 
@@ -56,11 +56,11 @@ export const displayArea = (data: unknown): boolean =>
   !isEmpty(data) && !isNil(data);
 
 export const getDate = ({ positionX, xScale, timeSeries }: GetDate): Date => {
-  const { timeTick } = getTimeValue({
+  const timeValue = getTimeValue({
     timeSeries,
     x: positionX,
     xScale
   });
 
-  return new Date(timeTick);
+  return new Date(timeValue?.timeTick || 0);
 };

package/src/Graph/Chart/index.tsx

@@ -34,6 +34,10 @@ interface Props extends Partial<LineChartProps> {
   thresholds?: Thresholds;
   getRef?: (ref: MutableRefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const WrapperChart = ({
@@ -65,6 +69,7 @@ const WrapperChart = ({
   thresholdUnit,
   limitLegend,
   getRef,
+  transformMatrix,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
@@ -120,6 +125,8 @@ const WrapperChart = ({
               tooltip={tooltip}
               width={width ?? responsiveWidth}
               zoomPreview={zoomPreview}
+              skipIntersectionObserver={rest.skipIntersectionObserver}
+              transformMatrix={transformMatrix}
             />
           );
         }}

package/src/Graph/Chart/models.ts

@@ -120,6 +120,7 @@ export interface LineChartProps {
   tooltip?: Tooltip;
   width: number;
   zoomPreview?: InteractedZone;
+  skipIntersectionObserver?: boolean;
 }
 
 export interface Area {

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

@@ -14,6 +14,7 @@ import {
   filter,
   find,
   flatten,
+  gt,
   head,
   identity,
   includes,
@@ -298,13 +299,17 @@ const getTimeSeriesForLines = ({
   return map(
     ({ timeTick, ...metricsValue }): TimeValue => ({
       ...reduce(
-        (acc, metric_id): Omit<TimeValue, 'timePick'> => ({
-          ...acc,
-          [metric_id]:
-            invert && metricsValue[metric_id]
-              ? negate(metricsValue[metric_id])
-              : metricsValue[metric_id]
-        }),
+        (acc, metric_id): Omit<TimeValue, 'timePick'> => {
+          return {
+            ...acc,
+            [metric_id]:
+              invert &&
+              metricsValue[metric_id] &&
+              gt(metricsValue[metric_id], 0)
+                ? negate(metricsValue[metric_id])
+                : metricsValue[metric_id]
+          };
+        },
         {},
         metrics
       ),
@@ -363,7 +368,9 @@ const getScale = ({
   const isLogScale = equals(scale, 'logarithmic');
   const minValue = Math.min(
     hasDisplayAsBar && 0,
-    invert ? negate(getMax(graphValues)) : getMin(graphValues),
+    invert && graphValues.every(lt(0))
+      ? negate(getMax(graphValues))
+      : getMin(graphValues),
     getMin(stackedValues),
     Math.min(...thresholds)
   );

package/src/InputField/Text/index.tsx

@@ -77,7 +77,7 @@ const OptionalLabelInputAdornment = ({
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
 export type TextProps = {
-  EndAdornment?: React.FC;
+  EndAdornment?: React.FC | JSX.Element;
   StartAdornment?: React.FC;
   ariaLabel?: string;
   autoSize?: boolean;

package/src/Listing/index.tsx

@@ -139,6 +139,7 @@ export interface Props<TRow> {
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
+  isActionBarVisible: boolean;
 }
 
 const defaultColumnConfiguration = {
@@ -147,7 +148,13 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
+const Listing = <
+  TRow extends {
+    id: RowId;
+    internalListingParentId?: RowId;
+    internalListingParentRow: TRow;
+  }
+>({
   customListingComponent,
   displayCustomListing,
   limit = 10,
@@ -191,7 +198,8 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     getRowProperty: () => '',
     labelCollapse: 'Collapse',
     labelExpand: 'Expand'
-  }
+  },
+  isActionBarVisible = true
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -246,7 +254,8 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
                   row,
                   ...row[subItems.getRowProperty()].map((subRow) => ({
                     ...subRow,
-                    internalListingParentId: row.id
+                    internalListingParentId: row.id,
+                    internalListingParentRow: row
                   }))
                 ];
               }
@@ -517,30 +526,33 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
         className={classes.container}
         ref={containerRef as RefObject<HTMLDivElement>}
       >
-        <div
-          className={classes.actionBar}
-          ref={actionBarRef as RefObject<HTMLDivElement>}
-        >
-          <ListingActionBar
-            actions={actions}
-            actionsBarMemoProps={actionsBarMemoProps}
-            columnConfiguration={columnConfiguration}
-            columns={columns}
-            currentPage={currentPage}
-            customPaginationClassName={customPaginationClassName}
-            limit={limit}
-            listingVariant={listingVariant}
-            moveTablePagination={moveTablePagination}
-            paginated={paginated}
-            totalRows={totalRows}
-            viewerModeConfiguration={viewerModeConfiguration}
-            widthToMoveTablePagination={widthToMoveTablePagination}
-            onLimitChange={changeLimit}
-            onPaginate={onPaginate}
-            onResetColumns={onResetColumns}
-            onSelectColumns={onSelectColumns}
-          />
-        </div>
+        {
+          isActionBarVisible && 
+            <div
+              className={classes.actionBar}
+              ref={actionBarRef as RefObject<HTMLDivElement>}
+            >
+              <ListingActionBar
+                actions={actions}
+                actionsBarMemoProps={actionsBarMemoProps}
+                columnConfiguration={columnConfiguration}
+                columns={columns}
+                currentPage={currentPage}
+                customPaginationClassName={customPaginationClassName}
+                limit={limit}
+                listingVariant={listingVariant}
+                moveTablePagination={moveTablePagination}
+                paginated={paginated}
+                totalRows={totalRows}
+                viewerModeConfiguration={viewerModeConfiguration}
+                widthToMoveTablePagination={widthToMoveTablePagination}
+                onLimitChange={changeLimit}
+                onPaginate={onPaginate}
+                onResetColumns={onResetColumns}
+                onSelectColumns={onSelectColumns}
+              />
+            </div>
+        }
 
         <ParentSize
           parentSizeStyles={{

package/src/Listing/models.ts

@@ -76,3 +76,11 @@ export interface TableStyleAtom {
     width: number;
   };
 }
+
+export interface ListingSubItems {
+  canCheckSubItems: boolean;
+  enable: boolean;
+  getRowProperty: (row?) => string;
+  labelCollapse: string;
+  labelExpand: string;
+}

package/src/MultiSelectEntries/index.tsx

@@ -134,8 +134,6 @@ const MultiSelectEntries = ({
         [classes.container]: true
       } as CxArg)}
       ref={hoverRef as Ref<HTMLDivElement>}
-      role="button"
-      tabIndex={0}
       onClick={onClick}
       onKeyDown={onClick}
     >

package/src/PopoverMenu/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/material';
 import type { PopperProps } from '@mui/material/Popper';
 
+import { equals, type } from 'ramda';
 import { IconButton } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -29,8 +30,9 @@ interface PopoverData {
 
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element;
+  children: (props?) => JSX.Element | JSX.Element;
   className?: string;
+  tooltipClassName?: string;
   dataTestId?: string;
   getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
@@ -52,6 +54,7 @@ const PopoverMenu = ({
   className,
   dataTestId,
   getPopoverData,
+  tooltipClassName,
   popperProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -113,7 +116,11 @@ const PopoverMenu = ({
             onResizeCapture={(): undefined => undefined}
             {...popperProps}
           >
-            <Paper>{children({ close })}</Paper>
+            <Paper className={tooltipClassName}>
+              {equals(type(children), 'Function')
+                ? children({ close })
+                : children}
+            </Paper>
           </Popper>
         </ClickAwayListener>
       )}

package/src/SortableItems/index.tsx

@@ -185,6 +185,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     >
       <SortableContext items={sortableItemsIds} strategy={sortingStrategy}>
         <RootComponent>
+          {/* biome-ignore lint: */}
           <>
             {sortableItemsIds.map((sortableItemId, index) => {
               const item = getItemById(sortableItemId) as