@centreon/ui 24.11.0 → 24.11.2

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,9 +42,7 @@ const Text = ({
     touched,
     errors,
     handleBlur,
-    setFieldTouched,
-    setValues,
-    setTouched
+    setFieldTouched
   } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
@@ -52,14 +50,7 @@ const Text = ({
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({
-        setFieldValue,
-        value,
-        setFieldTouched,
-        setValues,
-        values,
-        setTouched
-      });
+      change({ setFieldValue, value, setFieldTouched });
 
       return;
     }
@@ -122,7 +113,7 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth={text?.fullWidth ?? true}
+        fullWidth
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}

package/src/Form/Inputs/index.tsx

@@ -36,7 +36,6 @@ 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';
@@ -79,7 +78,6 @@ 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)]
 ]);
 
@@ -115,8 +113,7 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2),
-    marginBottom: theme.spacing(1)
+    rowGap: theme.spacing(2)
   }
 }));
 
@@ -168,7 +165,7 @@ const Inputs = ({
     );
 
     return pluck('name', usedGroups);
-  }, [inputsByGroup, groups]);
+  }, []);
 
   const sortedInputsByGroup = useMemo(
     () =>

package/src/Form/Inputs/models.ts

@@ -19,8 +19,7 @@ export enum InputType {
   Custom = 10,
   Checkbox = 11,
   CheckboxGroup = 12,
-  List = 13,
-  File = 14
+  List = 13
 }
 
 interface FieldsTableGetRequiredProps {
@@ -38,16 +37,8 @@ export interface InputProps {
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
-    fullWidth?: boolean;
   };
-  change?: ({
-    setFieldValue,
-    value,
-    setFieldTouched,
-    setValues,
-    values,
-    setTouched
-  }) => void;
+  change?: ({ setFieldValue, value, setFieldTouched }) => void;
   checkbox?: {
     direction?: 'horizontal' | 'vertical';
     labelPlacement?: LabelPlacement;
@@ -60,12 +51,6 @@ 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>;
   };
@@ -118,7 +103,6 @@ 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, mixed, number, object, string } from 'yup';
+import { array, boolean, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -78,8 +78,7 @@ export const basicFormValidationSchema = object().shape({
     })
   ),
   scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required')),
-  file: mixed()
+  sports: array().of(selectEntryValidationSchema.required('Required'))
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -135,8 +134,7 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: [],
-  file: null
+  sports: []
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -446,16 +444,6 @@ 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,4 +5,3 @@ 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,7 +38,6 @@ export interface BarChartProps
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  skipIntersectionObserver?: boolean;
 }
 
 const BarChart = ({
@@ -58,8 +57,7 @@ const BarChart = ({
   barStyle = {
     opacity: 1,
     radius: 0.2
-  },
-  skipIntersectionObserver
+  }
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -95,7 +93,6 @@ const BarChart = ({
               thresholds={thresholds}
               tooltip={tooltip}
               width={width}
-              skipIntersectionObserver={skipIntersectionObserver}
             />
           )}
         </ParentSize>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

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

package/src/Graph/Chart/Chart.tsx

@@ -56,10 +56,6 @@ 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> => {
@@ -101,9 +97,7 @@ const Chart = ({
   },
   thresholds,
   thresholdUnit,
-  limitLegend,
-  skipIntersectionObserver,
-  transformMatrix
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -225,7 +219,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport && !skipIntersectionObserver) {
+  if (!isInViewport) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}
@@ -325,7 +319,6 @@ 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 || 0)
+      ? new Date(mousePositionTimeTick)
       : null;
 
     setTickAxisBottom(timeTickValue);

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

@@ -76,18 +76,13 @@ interface Props {
   commonData: CommonData;
   timeShiftZonesData: TimeShiftZonesData;
   zoomData: ZoomPreviewModel;
-  transformMatrix?: {
-    fx?: (pointX: number) => number;
-    fy?: (pointY: number) => number;
-  }
 }
 
 const InteractionWithGraph = ({
   zoomData,
   commonData,
   annotationData,
-  timeShiftZonesData,
-  transformMatrix
+  timeShiftZonesData
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -132,10 +127,7 @@ const InteractionWithGraph = ({
     if (!mousePoint) {
       return;
     }
-    updateMousePosition([
-      transformMatrix?.fx?.(mousePoint.x) ?? mousePoint.x,
-      transformMatrix?.fy?.(mousePoint.y) ?? mousePoint.y
-    ]);
+    updateMousePosition([mousePoint.x, 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 type { LineChartData } from '../../common/models';
+import { LineChartData } from '../../common/models';
 import {
   getLineData,
   getTimeSeries,
   getTimeValue
 } from '../../common/timeSeries';
-import type { LinesData } from '../BasicComponents/Lines/models';
+import { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
-import type { GetDate, GraphInterval } from '../models';
+import { 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 timeValue = getTimeValue({
+  const { timeTick } = getTimeValue({
     timeSeries,
     x: positionX,
     xScale
   });
 
-  return new Date(timeValue?.timeTick || 0);
+  return new Date(timeTick);
 };

package/src/Graph/Chart/index.tsx

@@ -34,10 +34,6 @@ 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 = ({
@@ -69,7 +65,6 @@ const WrapperChart = ({
   thresholdUnit,
   limitLegend,
   getRef,
-  transformMatrix,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
@@ -125,8 +120,6 @@ const WrapperChart = ({
               tooltip={tooltip}
               width={width ?? responsiveWidth}
               zoomPreview={zoomPreview}
-              skipIntersectionObserver={rest.skipIntersectionObserver}
-              transformMatrix={transformMatrix}
             />
           );
         }}

package/src/Graph/Chart/models.ts

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

package/src/InputField/Text/index.tsx

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

package/src/Listing/index.tsx

@@ -139,7 +139,6 @@ export interface Props<TRow> {
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
-  isActionBarVisible: boolean;
 }
 
 const defaultColumnConfiguration = {
@@ -148,13 +147,7 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <
-  TRow extends {
-    id: RowId;
-    internalListingParentId?: RowId;
-    internalListingParentRow: TRow;
-  }
->({
+const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   customListingComponent,
   displayCustomListing,
   limit = 10,
@@ -198,8 +191,7 @@ const Listing = <
     getRowProperty: () => '',
     labelCollapse: 'Collapse',
     labelExpand: 'Expand'
-  },
-  isActionBarVisible = true
+  }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -254,8 +246,7 @@ const Listing = <
                   row,
                   ...row[subItems.getRowProperty()].map((subRow) => ({
                     ...subRow,
-                    internalListingParentId: row.id,
-                    internalListingParentRow: row
+                    internalListingParentId: row.id
                   }))
                 ];
               }
@@ -526,33 +517,30 @@ const Listing = <
         className={classes.container}
         ref={containerRef as RefObject<HTMLDivElement>}
       >
-        {
-          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>
-        }
+        <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,11 +76,3 @@ 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,6 +134,8 @@ 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,7 +10,6 @@ import {
 } from '@mui/material';
 import type { PopperProps } from '@mui/material/Popper';
 
-import { equals, type } from 'ramda';
 import { IconButton } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -30,9 +29,8 @@ interface PopoverData {
 
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element | JSX.Element;
+  children: (props?) => JSX.Element;
   className?: string;
-  tooltipClassName?: string;
   dataTestId?: string;
   getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
@@ -54,7 +52,6 @@ const PopoverMenu = ({
   className,
   dataTestId,
   getPopoverData,
-  tooltipClassName,
   popperProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -116,11 +113,7 @@ const PopoverMenu = ({
             onResizeCapture={(): undefined => undefined}
             {...popperProps}
           >
-            <Paper className={tooltipClassName}>
-              {equals(type(children), 'Function')
-                ? children({ close })
-                : children}
-            </Paper>
+            <Paper>{children({ close })}</Paper>
           </Popper>
         </ClickAwayListener>
       )}

package/src/SortableItems/index.tsx

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

package/src/ThemeProvider/index.tsx

@@ -261,7 +261,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
             {
               backgroundColor: theme.palette.background.default,
               border: 'none',
-              borderRadius: `${theme.shape.borderRadius}px`,
+              borderRadius: 0,
               boxShadow: theme.shadows[3]
             }
         })

package/src/ThemeProvider/palettes.ts

@@ -157,7 +157,7 @@ declare module '@mui/material/Badge' {
 
 export const lightPalette: PaletteOptions = {
   action: {
-    acknowledged: '#745F35',
+    acknowledged: '#67532C',
     acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
@@ -167,7 +167,7 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#512980',
+    inDowntime: '#4B2352',
     inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
@@ -297,7 +297,7 @@ export const lightPalette: PaletteOptions = {
 
 export const darkPalette: PaletteOptions = {
   action: {
-    acknowledged: '#DFD2B9',
+    acknowledged: '#67532C',
     acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
@@ -307,7 +307,7 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#E5D8F3',
+    inDowntime: '#4B2352',
     inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -53,8 +53,7 @@ const initializeDataTableEmpty = (canCreate = false): void => {
             actions: {
               create: 'Create'
             },
-            title: 'Welcome',
-            description: 'Description'
+            title: 'Welcome'
           }}
           onCreate={cy.stub()}
         />

package/src/components/DataTable/DataTable.stories.tsx

@@ -48,23 +48,6 @@ export const AsEmptyState: Story = {
   }
 };
 
-export const AsEmptyStateWithDescription: Story = {
-  args: {
-    children: (
-      <DataTable.EmptyState
-        labels={{
-          actions: {
-            create: 'Create item'
-          },
-          title: 'No items found',
-          description: 'Description'
-        }}
-      />
-    ),
-    isEmpty: true
-  }
-};
-
 export const withFixedHeightContainer: Story = {
   args: { ...Default.args },
   render: (args) => (

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -10,6 +10,7 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(4),
+
     h2: {
       color: theme.palette.text.primary,
       font: 'normal normal 600 34px/36px Roboto',
@@ -19,9 +20,6 @@ const useStyles = makeStyles()((theme) => ({
     justifyContent: 'center',
     minHeight: '30vh',
     width: '100%'
-  },
-  description: {
-    maxWidth: '65%'
   }
 }));