@centreon/ui 24.4.72 → 24.4.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.72",
+  "version": "24.4.74",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -52,13 +52,13 @@
     "@cypress/react": "^8.0.0",
     "@cypress/webpack-dev-server": "^3.7.4",
     "@faker-js/faker": "^8.4.1",
-    "@mdx-js/react": "^3.0.1",
-    "@simonsmith/cypress-image-snapshot": "^9.0.1",
+    "@mdx-js/react": "^3.1.0",
+    "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-styling": "^1.0.6",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.0.26",
     "@storybook/builder-vite": "^7.0.9",
     "@storybook/jest": "^0.1.0",
@@ -74,13 +74,13 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/mocha": "^10.0.6",
+    "@types/jest": "^29.5.14",
+    "@types/mocha": "^10.0.10",
     "@types/ramda": "^0.29.9",
     "@types/react": "^18.2.65",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "axios-mock-adapter": "^1.22.0",
     "cypress": "^13.7.1",
     "identity-obj-proxy": "^3.0.0",
@@ -88,6 +88,7 @@
     "mochawesome": "^7.1.3",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
+    "playwright": "^1.50.1",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -113,33 +114,33 @@
     "@lexical/rich-text": "^0.12.6",
     "@lexical/selection": "^0.12.6",
     "@lexical/utils": "^0.12.6",
-    "@react-spring/web": "^9.7.3",
-    "@visx/clip-path": "^3.3.0",
+    "@react-spring/web": "^9.7.5",
+    "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^2.1.0",
-    "@visx/event": "^3.3.0",
-    "@visx/group": "^3.3.0",
-    "@visx/hierarchy": "^3.3.0",
-    "@visx/legend": "^3.5.0",
-    "@visx/pattern": "^3.3.0",
-    "@visx/point": "^3.3.0",
-    "@visx/scale": "^3.5.0",
+    "@visx/event": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/hierarchy": "^3.12.0",
+    "@visx/legend": "^3.12.0",
+    "@visx/pattern": "^3.12.0",
+    "@visx/point": "^3.12.0",
+    "@visx/scale": "^3.12.0",
     "@visx/shape": "^2.18.0",
-    "@visx/text": "^3.3.0",
+    "@visx/text": "^3.12.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
-    "@visx/zoom": "^3.3.0",
+    "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
-    "humanize-duration": "^3.31.0",
+    "humanize-duration": "^3.32.1",
     "lexical": "^0.12.6",
-    "notistack": "^3.0.1",
+    "notistack": "^3.0.2",
     "numeral": "^2.0.6",
     "ramda": "0.29.1",
-    "react-grid-layout": "^1.4.4",
+    "react-grid-layout": "^1.5.0",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.12.1",
+    "sanitize-html": "^2.14.0",
     "ulog": "^2.0.0-beta.19"
   },
   "peerDependencies": {

package/src/Dashboard/Item.tsx

@@ -15,7 +15,6 @@ import { useMemoComponent } from '../utils';
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
-  additionalMemoProps?: Array<unknown>;
   canMove?: boolean;
   children: ReactElement;
   className?: string;
@@ -40,8 +39,7 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
       onTouchEnd,
       id,
       disablePadding = false,
-      canMove = false,
-      additionalMemoProps = []
+      canMove = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -94,14 +92,7 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
           </Card>
         </div>
       ),
-      memoProps: [
-        style,
-        className,
-        header,
-        theme.palette.mode,
-        canMove,
-        ...additionalMemoProps
-      ]
+      memoProps: [style, className, header, theme.palette.mode, canMove]
     });
   }
 );

package/src/Dashboard/Layout.tsx

@@ -16,7 +16,6 @@ import Grid from './Grid';
 const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
-  additionalMemoProps?: Array<unknown>;
   changeLayout?: (newLayout: Array<Layout>) => void;
   children: Array<JSX.Element>;
   displayGrid?: boolean;
@@ -29,8 +28,7 @@ const DashboardLayout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout,
-  isStatic = false,
-  additionalMemoProps = []
+  isStatic = false
 }: DashboardLayoutProps<T>): JSX.Element => {
   const { classes } = useDashboardLayoutStyles(isStatic);
 
@@ -74,7 +72,7 @@ const DashboardLayout = <T extends Layout>({
         </ParentSize>
       </ResponsiveHeight>
     ),
-    memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
+    memoProps: [columns, layout, displayGrid, isStatic]
   });
 };
 

package/src/Dashboard/utils.ts

@@ -1,11 +1,11 @@
 import { lt } from 'ramda';
 import { Layout } from 'react-grid-layout';
 
-export const maxColumns = 12;
 const minColumns = 1;
 const breakpoint = 768;
 
 export const rowHeight = 64;
+export const maxColumns = 12;
 
 export const getIsSmallScreenSize = (): boolean =>
   lt(window.innerWidth, breakpoint);

package/src/Form/Inputs/Grid.tsx

@@ -8,15 +8,18 @@ interface StylesProps {
   alignItems?: string;
   columns?: number;
   gridTemplateColumns?: string;
+  isColumnDirection?: boolean;
 }
 
 const useStyles = makeStyles<StylesProps>()(
-  (theme, { columns, gridTemplateColumns, alignItems }) => ({
+  (theme, { columns, gridTemplateColumns, alignItems, isColumnDirection }) => ({
     gridFields: {
       alignItems: alignItems || 'flex-start',
       columnGap: theme.spacing(4),
-      display: 'grid',
-      gridTemplateColumns: gridTemplateColumns || `repeat(${columns}, 1fr)`,
+      display: isColumnDirection ? 'flex' : 'grid',
+      gridTemplateColumns: isColumnDirection
+        ? undefined
+        : gridTemplateColumns || `repeat(${columns}, 1fr)`,
       rowGap: theme.spacing(2)
     }
   })
@@ -26,7 +29,8 @@ const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
   const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
-    gridTemplateColumns: grid?.gridTemplateColumns
+    gridTemplateColumns: grid?.gridTemplateColumns,
+    isColumnDirection: grid?.isColumnDirection
   });
 
   const className = grid?.className || '';

package/src/Form/Inputs/models.ts

@@ -6,20 +6,20 @@ import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 
 export enum InputType {
-  Switch,
-  Radio,
-  Text,
-  SingleAutocomplete,
-  MultiAutocomplete,
-  Password,
-  SingleConnectedAutocomplete,
-  MultiConnectedAutocomplete,
-  FieldsTable,
-  Grid,
-  Custom,
-  Checkbox,
-  CheckboxGroup,
-  List
+  Switch = 0,
+  Radio = 1,
+  Text = 2,
+  SingleAutocomplete = 3,
+  MultiAutocomplete = 4,
+  Password = 5,
+  SingleConnectedAutocomplete = 6,
+  MultiConnectedAutocomplete = 7,
+  FieldsTable = 8,
+  Grid = 9,
+  Custom = 10,
+  Checkbox = 11,
+  CheckboxGroup = 12,
+  List = 13
 }
 
 interface FieldsTableGetRequiredProps {
@@ -73,6 +73,7 @@ export interface InputProps {
     className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
+    isColumnDirection?: boolean;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -55,21 +55,43 @@ describe('Bar stack', () => {
   it('adjusts size based on the provided width and height', () => {
     initialize({ displayLegend: false, height: '300px', width: '300px' });
 
-    cy.findByTestId('barStack').should('have.css', 'height', '300px');
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,95.18828451882847 h193 h8v8 v138.81171548117152 a8,8 0 0 1 -8,8 h-193 a8,8 0 0 1 -8,-8 v-138.81171548117152 v-8h8z'
+      );
 
     cy.makeSnapshot();
   });
 
   it('renders as a horizontal bar when variant is set to "horizontal"', () => {
     initialize({ variant: 'horizontal' });
-    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,0 h231.69874476987445 h8v8 v295 v8h-8 h-231.69874476987445 a8,8 0 0 1 -8,-8 v-295 a8,8 0 0 1 8,-8z'
+      );
+    cy.get('[data-is-vertical="false"]').should('be.visible');
 
     cy.makeSnapshot();
   });
 
   it('renders as a vertical bar when variant is set to "vertical"', () => {
     initialize({ variant: 'vertical' });
-    cy.get('[data-variant="vertical"]').should('exist');
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.get('[data-is-vertical="true"]').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -77,6 +99,14 @@ describe('Bar stack', () => {
   it('displays tooltip with correct information on hover', () => {
     initialize({ TooltipContent });
 
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+
     defaultData.forEach(({ label, value }) => {
       cy.findByTestId(label).trigger('mouseover', { force: true });
 
@@ -90,6 +120,14 @@ describe('Bar stack', () => {
 
   it('conditionally displays values on rects based on displayValues prop', () => {
     initialize({ displayValues: true });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
     defaultData.forEach(({ value }, index) => {
       cy.findAllByTestId('value')
         .eq(index)
@@ -106,6 +144,14 @@ describe('Bar stack', () => {
 
   it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
     initialize({ displayValues: true, unit: 'percentage' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
     defaultData.forEach(({ value }, index) => {
       cy.findAllByTestId('value')
         .eq(index)
@@ -118,21 +164,53 @@ describe('Bar stack', () => {
   });
 
   it('displays Legend component based on displayLegend prop', () => {
-    initialize({ displayLegend: true });
-    cy.findByTestId('Legend').should('be.visible');
-
     initialize({ displayLegend: false });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
     cy.findByTestId('Legend').should('not.exist');
 
     cy.makeSnapshot();
   });
 
-  it('displays the title when the title is giving', () => {
+  it('displays the title when the title is given', () => {
     initialize({ title: 'host' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
     cy.findByTestId('Title').should('be.visible');
 
-    initialize({});
-    cy.findByTestId('Title').should('not.exist');
+    cy.makeSnapshot();
+  });
+
+  it('displays the bars within a small display', () => {
+    initialize({
+      displayLegend: true,
+      height: '89px',
+      title: 'host',
+      width: '120px'
+    });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,20.941422594142264 h94 h8v8 v18.058577405857733 a8,8 0 0 1 -8,8 h-94 a8,8 0 0 1 -8,-8 v-18.058577405857733 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import ResponsiveBarStack from './BarStack';
 import { BarType } from './models';
 
 import { BarStack } from '.';
@@ -42,8 +43,8 @@ const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
 
 const Template = (args): JSX.Element => {
   return (
-    <div style={{ height: '300px', width: '500px' }}>
-      <BarStack {...args} />
+    <div style={{ height: '400px', width: '400px' }}>
+      <ResponsiveBarStack {...args} />
     </div>
   );
 };
@@ -104,6 +105,7 @@ export const Horizontal: Story = {
     TooltipContent,
     data,
     displayValues: true,
+    legendDirection: 'row',
     title: 'hosts',
     variant: 'horizontal'
   },

package/src/Graph/BarStack/BarStack.styles.ts

@@ -1,37 +1,66 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const useBarStackStyles = makeStyles()((theme) => ({
-  barStackTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: 0,
-    position: 'relative'
+import { legendMaxHeight, legendMaxWidth } from './constants';
+
+export const useStyles = makeStyles()({
+  clippedTitle: {
+    overflow: 'hidden',
+    textOverflow: 'clip'
   },
   container: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    justifyContent: 'center'
-  },
-  svgContainer: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.spacing(1.25),
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  svgWrapper: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyContent: 'center'
+    '&[data-has-title="false"]': {
+      gridTemplateRows: 'auto'
+    },
+    '&[data-title-variant="md"]': {
+      gridTemplateRows: '36px auto',
+      overflow: 'hidden',
+      textOverflow: 'clip'
+    },
+    '&[data-title-variant="sm"]': {
+      gridTemplateRows: '20px auto'
+    },
+    '&[data-title-variant="xs"]': {
+      gridTemplateRows: '40px auto'
+    },
+    display: 'grid',
+    height: '100%'
+  }
+});
+
+export const useGraphAndLegendStyles = makeStyles()((theme) => ({
+  graphAndLegend: {
+    '&[data-display-legend="false"][data-is-vertical="false"]': {
+      gridTemplateRows: '1fr'
+    },
+    '&[data-display-legend="true"][data-is-vertical="false"]': {
+      gap: theme.spacing(0.5),
+      gridTemplateRows: `1fr ${legendMaxHeight}px`
+    },
+    '&[data-is-vertical="true"][data-display-legend="false"]': {
+      gridTemplateColumns: '1fr'
+    },
+    '&[data-is-vertical="true"][data-display-legend="true"]': {
+      gap: theme.spacing(0.5),
+      gridTemplateColumns: `1fr ${legendMaxWidth}px`
+    },
+    display: 'grid',
+    height: '100%'
   },
-  title: {
-    fontSize: theme.typography.h6.fontSize,
-    fontWeight: theme.typography.fontWeightMedium,
-    margin: 0,
-    padding: 0,
-    textAlign: 'center'
+  legend: {
+    '&[data-is-vertical="false"]': {
+      overflowY: 'auto'
+    },
+    '&[data-is-vertical="true"]': {
+      alignSelf: 'center'
+    }
+  }
+}));
+
+export const useGraphStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    padding: 0
   }
 }));