@centreon/ui 24.7.8 → 24.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.7.8",
+  "version": "24.7.10",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -53,55 +53,55 @@
     "@cypress/webpack-dev-server": "^3.10.0",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.54.5",
-    "@modern-js/storybook": "^2.54.5",
-    "@simonsmith/cypress-image-snapshot": "^9.0.3",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
+    "@modern-js/prod-server": "^2.56.0",
+    "@modern-js/storybook": "^2.56.0",
+    "@simonsmith/cypress-image-snapshot": "^9.1.0",
+    "@storybook/addon-a11y": "^8.2.5",
+    "@storybook/addon-docs": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-themes": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/manager-api": "^8.2.5",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/preview-api": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/react-vite": "^8.2.5",
+    "@storybook/test": "^8.2.5",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.5",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.7",
-    "@types/ramda": "^0.30.0",
+    "@types/ramda": "^0.30.1",
     "@types/react": "^18.3.3",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "axios-mock-adapter": "^1.22.0",
     "chai": "^5.1.1",
-    "cypress": "^13.13.0",
+    "cypress": "^13.13.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "2.3.1",
-    "msw-storybook-addon": "^2.0.2",
-    "puppeteer": "^22.12.1",
+    "msw": "2.3.2",
+    "msw-storybook-addon": "^2.0.3",
+    "puppeteer": "^22.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "speed-measure-vite-plugin": "^1.0.1",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.5",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
-    "style-dictionary": "^4.0.0",
+    "style-dictionary": "^4.0.1",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^5.3.3",
+    "vite": "^5.3.4",
     "vite-plugin-istanbul": "^6.0.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-turbosnap": "^1.0.3"
@@ -115,8 +115,8 @@
     "@lexical/rich-text": "^0.16.1",
     "@lexical/selection": "^0.16.1",
     "@lexical/utils": "^0.16.1",
-    "@mui/material": "^5.15.21",
-    "@react-spring/web": "^9.7.3",
+    "@mui/material": "^5.16.4",
+    "@react-spring/web": "^9.7.4",
     "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^3.3.0",
     "@visx/event": "^3.3.0",
@@ -133,7 +133,7 @@
     "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "humanize-duration": "^3.32.1",
     "lexical": "^0.16.1",
     "notistack": "^3.0.1",
@@ -142,7 +142,7 @@
     "react-grid-layout": "^1.4.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5",
     "sanitize-html": "^2.13.0",
     "ulog": "^2.0.0-beta.19"

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.1'
+const PACKAGE_VERSION = '2.3.2'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/Dashboard/Dashboard.cypress.spec.tsx

@@ -65,7 +65,6 @@ describe('Dashboard', () => {
     cy.get('[data-widget-skeleton="a"]').should('not.exist');
     cy.get('[data-widget-skeleton="b"]').should('not.exist');
     cy.get('[data-widget-skeleton="c"]').should('not.exist');
-    cy.get('[data-widget-skeleton="d"]').should('exist');
 
     cy.makeSnapshot();
   });

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -33,7 +33,8 @@ const ResponsiveBarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column'
+  legendDirection = 'column',
+  tooltipProps = {}
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes, cx } = useBarStackStyles();
@@ -143,6 +144,7 @@ const ResponsiveBarStack = ({
                                 title={title}
                                 total={total}
                                 value={barStack.bars[0].bar.data[barStack.key]}
+                                {...tooltipProps}
                               />
                             )
                           }

package/src/Graph/BarStack/models.ts

@@ -14,6 +14,7 @@ export type BarStackProps = {
   onSingleBarClick?: (barData) => void;
   size?: number;
   title?: string;
+  tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'vertical' | 'horizontal';
 };

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -55,17 +55,10 @@ const Template = (args): JSX.Element => {
   return <HeatMap {...args} arrowClassName={classes.arrow} />;
 };
 
-const TileContent = ({
-  data,
-  backgroundColor
-}: {
-  backgroundColor: string;
-  data: Data;
-}): JSX.Element => (
+const TileContent = ({ data }: { data: Data }): JSX.Element => (
   <div
     style={{
       alignItems: 'center',
-      backgroundColor,
       display: 'flex',
       height: '100%',
       justifyContent: 'center'

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -13,8 +13,9 @@ export const useHeatMapStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   heatMapTileContent: {
-    height: `calc(100% - ${theme.spacing(1)})`,
-    width: `calc(100% - ${theme.spacing(1)})`
+    height: '100%',
+    position: 'relative',
+    width: '100%'
   },
   heatMapTooltip: {
     backgroundColor: theme.palette.background.paper,

package/src/Graph/LineChart/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 
 import { useTheme } from '@mui/material';
 
-import IconDowntime from '../../../Icons/Downtime';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
 import { Args } from '../models';
+import { DowntimeIcon } from '../../../../../Icon';
 
 const DowntimeAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();
@@ -15,7 +15,7 @@ const DowntimeAnnotations = (props: Args): JSX.Element => {
 
   return (
     <EventAnnotations
-      Icon={IconDowntime}
+      Icon={DowntimeIcon}
       ariaLabel={t(labelDowntime)}
       color={color}
       type="downtime"

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

@@ -410,8 +410,6 @@ describe('Line chart', () => {
 
       cy.contains('8:00 AM').should('be.visible');
       cy.get('path[fill="rgba(102, 153, 204, 0.8)"]').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it('shows points when the prop is set', () => {

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -53,7 +53,8 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column'
+  legendDirection = 'column',
+  tooltipProps = {}
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -163,6 +164,7 @@ const ResponsivePie = ({
                               title={title}
                               total={total}
                               value={arc.data.value}
+                              {...tooltipProps}
                             />
                           )
                         }

package/src/Graph/PieChart/models.ts

@@ -14,6 +14,7 @@ export interface PieProps {
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;
+  tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'pie' | 'donut';
 }

package/src/Icon/AcnowledgementIcon.tsx

@@ -0,0 +1,8 @@
+import { Person } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const AcknowledgementIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Person} dataTestId="AcknowledgementIcon" {...props} />
+);

package/src/Icon/BaseIcon.tsx

@@ -0,0 +1,32 @@
+import { has } from 'ramda';
+
+import { SvgIcon, SvgIconProps, SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+interface Props extends SvgIconProps {
+  Icon: JSX.Element | OverridableComponent<SvgIconTypeMap>;
+  dataTestId?: string;
+}
+
+const BaseIcon = ({ Icon, dataTestId, ...props }: Props): JSX.Element => {
+  if (!has('key', Icon)) {
+    const Component = Icon as (props: SvgIconProps) => JSX.Element;
+
+    return (
+      <SvgIcon
+        data-testid={dataTestId || (Icon as () => JSX.Element).name}
+        {...props}
+      >
+        <Component />
+      </SvgIcon>
+    );
+  }
+
+  return (
+    <SvgIcon data-testid={dataTestId} {...props}>
+      {Icon as JSX.Element}
+    </SvgIcon>
+  );
+};
+
+export default BaseIcon;

package/src/Icon/DowntimeIcon.tsx

@@ -0,0 +1,14 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M7.6215 5.243C7.9422 5.243 8.2557 5.1479 8.52236 4.96972C8.78901 4.79155 8.99685 4.53831 9.11958 4.24202C9.2423 3.94573 9.27441 3.6197 9.21185 3.30516C9.14928 2.99062 8.99485 2.70169 8.76808 2.47492C8.54131 2.24815 8.25238 2.09372 7.93784 2.03116C7.6233 1.96859 7.29727 2.0007 7.00098 2.12343C6.70469 2.24616 6.45145 2.45399 6.27327 2.72065C6.0951 2.9873 6 3.30079 6 3.6215C6 4.05155 6.17084 4.46398 6.47493 4.76807C6.77902 5.07216 7.19145 5.243 7.6215 5.243Z" />
+    <path d="M17.8192 12.3739C17.743 12.1905 17.6143 12.0338 17.4492 11.9235C17.2841 11.8132 17.0901 11.7541 16.8915 11.7538C16.8915 11.7538 14.9107 11.4903 14.3232 11.8736C14.0659 12.083 13.8556 12.3442 13.706 12.6403L10.396 12.1161C10.142 11.2785 9.05429 8.10738 9.05429 8.10738L8.24354 6.81076C8.09994 6.57117 7.89855 6.37142 7.6578 6.22979C7.41705 6.08815 7.14463 6.00914 6.86545 6C6.64749 6.01064 6.43062 6.03754 6.21666 6.0805L2 7.86971V11.68H2.23096L4.36037 12.0174L2.81746 19.7866H4.52041L5.979 13.3006L7.68196 14.9221V19.7866H9.30345V13.706L8.16304 12.6183L13.3649 13.4415L10.4094 19.9725L20.928 19.8671L17.8192 12.3739ZM8.03845 9.87167C8.03845 9.87167 8.59142 11.1712 8.88179 11.8736L7.67525 11.682L8.03845 9.87167ZM3.62437 11.0408V8.921L5.08295 8.35368L4.52137 11.1827L3.62437 11.0408Z" />
+  </g>
+);
+
+export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+);

package/src/Icon/HostIcon.tsx

@@ -0,0 +1,8 @@
+import { Dns } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const HostIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Dns} dataTestId="HostIcon" {...props} />
+);

package/src/Icon/ServiceIcon.tsx

@@ -0,0 +1,8 @@
+import { Grain } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const ServiceIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Grain} dataTestId="ServiceIcon" {...props} />
+);

package/src/Icon/index.ts

@@ -0,0 +1,4 @@
+export { HostIcon } from './HostIcon';
+export { ServiceIcon } from './ServiceIcon';
+export { DowntimeIcon } from './DowntimeIcon';
+export { AcknowledgementIcon } from './AcnowledgementIcon';

package/src/index.ts

@@ -166,3 +166,4 @@ export * from './ParentSize';
 export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export * from './Icon';

package/src/utils/useInfiniteScrollListing.ts

@@ -60,7 +60,12 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [queryKeyName, page],
+    getQueryKey: () => [
+      queryKeyName,
+      page,
+      JSON.stringify(parameters),
+      JSON.stringify(customQueryParameters)
+    ],
     isPaginated: true,
     queryOptions: {
       enabled,

package/src/@assets/icons/downtime.icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{opacity:1;}</style></defs><g transform="translate(-94.852 -137.365)"><rect class="a" width="24" height="24" transform="translate(94.852 137.365)"/><g class="b" transform="translate(97.108 140.129)"><path d="M103.476,143.64a1.692,1.692,0,1,0-1.692-1.692A1.692,1.692,0,0,0,103.476,143.64Z" transform="translate(-97.132 -140.255)"/><path d="M114.266,150.2a1.05,1.05,0,0,0-.968-.647s-2.067-.275-2.68.125a2.464,2.464,0,0,0-.644.8l-3.454-.547c-.265-.874-1.4-4.183-1.4-4.183l-.846-1.353a1.743,1.743,0,0,0-1.438-.846,4.571,4.571,0,0,0-.677.084l-4.4,1.867v3.976H98l2.222.352-1.61,8.107h1.777l1.522-6.768,1.777,1.692v5.076h1.692v-6.345l-1.19-1.135,5.428.859-3.084,6.815,10.976-.11Zm-10.206-2.611s.577,1.356.88,2.089l-1.259-.2Zm-4.606,1.22v-2.212l1.522-.592-.586,2.952Z" transform="translate(-97.762 -139.74)"/></g></g></svg>

package/src/Graph/LineChart/Icons/Downtime.tsx

@@ -1,9 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
-
-import IconDowntime from '../../../@assets/icons/downtime.icon.svg';
-
-const Downtime = (props: SvgIconProps): JSX.Element => (
-  <SvgIcon component={IconDowntime} {...props} />
-);
-
-export default Downtime;