@centreon/ui 25.10.29 → 25.10.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.10.29",
+  "version": "25.10.30",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -28,8 +28,8 @@
     "url": "git+https://github.com/centreon/centreon.git"
   },
   "keywords": [
-    "centreon",
-    "react"
+    "react",
+    "centreon"
   ],
   "author": {
     "name": "centreon@centreon.com"

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

package/src/Dashboard/Item.tsx

@@ -1,28 +1,29 @@
+import { Card, useTheme } from '@mui/material';
+
+import { useAtomValue } from 'jotai';
+import { equals, isNil, omit, type } from 'ramda';
 import {
-  CSSProperties,
-  ForwardedRef,
-  MouseEvent,
-  ReactElement,
-  forwardRef,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactElement,
+  RefObject,
   useEffect,
   useMemo
 } from 'react';
 
-import { useAtomValue } from 'jotai';
-import { equals, isNil, omit, type } from 'ramda';
-
-import { Card, useTheme } from '@mui/material';
-import LoadingSkeleton from '../LoadingSkeleton';
 import ExpandableContainer from '../components/ExpandableContainer';
-import { Parameters } from '../components/ExpandableContainer/models';
+import type { Parameters } from '../components/ExpandableContainer/models';
 import { useMemoComponent, useViewportIntersection } from '../utils';
-import { useDashboardItemStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
+import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
   canMove?: boolean;
-  children: ReactElement;
+  children: Array<
+    | ReactElement
+    | (({ isInViewport }: { isInViewport: boolean }) => ReactElement)
+  >;
   className?: string;
   disablePadding?: boolean;
   header?: ReactElement | ((params: Parameters) => ReactElement);
@@ -31,148 +32,140 @@ interface DashboardItemProps {
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
   onTouchEnd?: (e) => void;
   style?: CSSProperties;
+  ref?: RefObject<HTMLDivElement>;
 }
 
-const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
-  (
-    {
-      children,
-      style,
-      className,
-      header,
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd,
-      id,
-      disablePadding = false,
-      canMove = false,
-      additionalMemoProps = []
-    }: DashboardItemProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ): ReactElement => {
-    const { isInViewport, setElement } = useViewportIntersection({
-      rootMargin: '140px 0px 140px 0px'
-    });
-    const hasHeader = !isNil(header);
-
-    const { classes, cx } = useDashboardItemStyles({ hasHeader });
-    const theme = useTheme();
-
-    const isResizingItem = useAtomValue(isResizingItemAtom);
-
-    const isResizing = useMemo(
-      () => equals(id, isResizingItem),
-      [isResizingItem, id]
-    );
-
-    const sanitizedReactGridLayoutClassName = useMemo(
-      () => (isResizing ? className : className?.replace(' resizing ', '')),
-      [className, isResizing]
-    );
-
-    const listeners = {
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd
-    };
-
-    const cardContainerListeners = !hasHeader ? listeners : {};
-
-    useEffect(() => {
-      if (isNil(ref?.current)) {
-        return;
-      }
-
-      setElement(ref.current);
-    }, [ref]);
-
-    const newTransform =
-      style?.transform &&
-      `translate3d(${style.transform.match(/translate\(([a-z0-9\ \,\-]+)\)/)[1]}, 0px)`;
-
-    return useMemoComponent({
-      Component: (
-        <div
-          {...cardContainerListeners}
-          className={sanitizedReactGridLayoutClassName}
-          ref={ref}
-          style={{
-            ...omit(['transform'], style || {}),
-            transform: newTransform
-          }}
-        >
-          <ExpandableContainer>
-            {({ isExpanded, label, key, ...rest }) => {
-              const canControl = isExpanded ? false : canMove;
-
-              const childrenHeader = equals(type(header), 'Function')
-                ? (header as (params: Parameters) => ReactElement)({
-                    isExpanded,
-                    label,
-                    ref,
-                    key,
-                    ...rest
-                  })
-                : header;
-
-              return (
-                <div key={key} className={classes.widgetSubContainer}>
-                  <Card
-                    className={classes.widgetContainer}
-                    data-padding={!disablePadding}
-                  >
-                    {childrenHeader && (
-                      <div
-                        className={classes.widgetHeader}
-                        data-can-move={canControl}
-                      >
-                        {canControl && (
-                          <div
-                            {...listeners}
-                            className={classes.widgetHeaderDraggable}
-                            data-testid={`${id}_move_panel`}
-                          />
-                        )}
-                        {childrenHeader}
-                      </div>
-                    )}
+const Item = ({
+  children,
+  style,
+  className,
+  header,
+  onMouseDown,
+  onMouseUp,
+  onTouchEnd,
+  id,
+  disablePadding = false,
+  canMove = false,
+  additionalMemoProps = [],
+  ref
+}: DashboardItemProps): ReactElement => {
+  const { isInViewport, setElement } = useViewportIntersection({
+    rootMargin: '140px 0px 140px 0px'
+  });
+  const hasHeader = !isNil(header);
+
+  const { classes, cx } = useDashboardItemStyles({ hasHeader });
+  const theme = useTheme();
+
+  const isResizingItem = useAtomValue(isResizingItemAtom);
+
+  const isResizing = useMemo(
+    () => equals(id, isResizingItem),
+    [isResizingItem, id]
+  );
+
+  const sanitizedReactGridLayoutClassName = useMemo(
+    () => (isResizing ? className : className?.replace(' resizing ', '')),
+    [className, isResizing]
+  );
+
+  const listeners = {
+    onMouseDown,
+    onMouseUp,
+    onTouchEnd
+  };
+
+  const cardContainerListeners = !hasHeader ? listeners : {};
+
+  useEffect(() => {
+    if (isNil(ref?.current)) {
+      return;
+    }
+
+    setElement(ref.current);
+  }, [ref, setElement]);
+
+  const newTransform =
+    style?.transform &&
+    `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)?.[1]}, 0px)`;
+
+  return useMemoComponent({
+    Component: (
+      <div
+        {...cardContainerListeners}
+        className={sanitizedReactGridLayoutClassName}
+        ref={ref}
+        style={{
+          ...omit(['transform'], style || {}),
+          transform: newTransform
+        }}
+      >
+        <ExpandableContainer>
+          {({ isExpanded, label, key, ...rest }) => {
+            const canControl = isExpanded ? false : canMove;
+
+            const childrenHeader = equals(type(header), 'Function')
+              ? (header as (params: Parameters) => ReactElement)({
+                  isExpanded,
+                  key,
+                  label,
+                  ref: ref as RefObject<HTMLDivElement>,
+                  ...rest
+                })
+              : (header as ReactElement);
+
+            return (
+              <div className={classes.widgetSubContainer} key={key}>
+                <Card
+                  className={classes.widgetContainer}
+                  data-padding={!disablePadding}
+                >
+                  {childrenHeader && (
                     <div
-                      className={cx(
-                        classes.widgetContent,
-                        !disablePadding && classes.widgetPadding
-                      )}
+                      className={classes.widgetHeader}
+                      data-can-move={canControl}
                     >
-                      {!isInViewport ? (
-                        <LoadingSkeleton
-                          animation={false}
-                          data-widget-skeleton={id}
-                          height="100%"
-                          width="100%"
+                      {canControl && (
+                        <div
+                          {...listeners}
+                          className={classes.widgetHeaderDraggable}
+                          data-testid={`${id}_move_panel`}
                         />
-                      ) : (
-                        children
                       )}
+                      {childrenHeader}
                     </div>
-                  </Card>
-                </div>
-              );
-            }}
-          </ExpandableContainer>
-        </div>
-      ),
-      memoProps: isInViewport
-        ? [
-            style,
-            className,
-            header,
-            theme.palette.mode,
-            canMove,
-            isInViewport,
-            ...additionalMemoProps
-          ]
-        : [isInViewport, theme.palette.mode, style]
-    });
-  }
-);
+                  )}
+                  <div
+                    className={cx(
+                      classes.widgetContent,
+                      !disablePadding && classes.widgetPadding
+                    )}
+                  >
+                    {children.map((child) =>
+                      typeof child === 'function'
+                        ? child({ isInViewport })
+                        : child
+                    )}
+                  </div>
+                </Card>
+              </div>
+            );
+          }}
+        </ExpandableContainer>
+      </div>
+    ),
+    memoProps: isInViewport
+      ? [
+          style,
+          className,
+          header,
+          theme.palette.mode,
+          canMove,
+          isInViewport,
+          ...additionalMemoProps
+        ]
+      : [isInViewport, theme.palette.mode, style]
+  });
+};
 
 export default Item;

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -137,6 +137,8 @@ const ConnectedAutocomplete = ({
         getEndpoint={getEndpoint}
         decoder={connectedAutocomplete?.decoder}
         getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
+        getOptionLabel={connectedAutocomplete?.getOptionLabel}
+        optionProperty={connectedAutocomplete?.optionProperty}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
         label={t(label)}

package/src/Form/Inputs/Grid.tsx

@@ -21,9 +21,8 @@ const Grid = ({
     <div
       className={`${className} grid gap-3`}
       style={{
-        gridTemplateColumns: className
-          ? grid?.gridTemplateColumns || undefined
-          : grid?.gridTemplateColumns ||
+        gridTemplateColumns:
+          className ? grid?.gridTemplateColumns || undefined : grid?.gridTemplateColumns ||
             `repeat(${grid?.columns.length || 1}, 1fr)`,
         alignItems: grid?.alignItems || 'flex-start'
       }}

package/src/Form/Inputs/models.ts

@@ -62,6 +62,8 @@ export interface InputProps {
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
+    getOptionLabel?: (option) => string;
+    optionProperty?: string;
     disableSelectAll?: boolean;
     limitTags?: number;
     decoder?;

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,9 @@
 export const useNavigateToSection = () => {
-  return (sectionName: string) => {
-    const section = document.querySelector(
-      `[data-section-group-form-id="${sectionName}"]`
-    );
+    return (sectionName: string) => {
+        const section = document.querySelector(
+            `[data-section-group-form-id="${sectionName}"]`
+        );
 
-    section?.scrollIntoView({ behavior: 'smooth' });
-  };
+        section?.scrollIntoView({ behavior: 'smooth' });
+    };
 };

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

@@ -4,12 +4,10 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
-import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -86,6 +84,61 @@ const checkWidth = (orientation): void => {
 };
 
 describe('Bar chart', () => {
+  it('displays a tooltip when a single bar is hovered', () => {
+    initialize({
+      orientation: 'horizontal'
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('7.47 KiB').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip when a stacked bar is hovered', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'ascending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+    cy.contains('0.02 ms').should('be.visible');
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+  });
+
   ['horizontal', 'vertical'].forEach((orientation) => {
     it(`displays the bar chart ${orientation}ly`, () => {
       initialize({ orientation });
@@ -185,27 +238,6 @@ describe('Bar chart', () => {
     });
   });
 
-  it('displays a tooltip when a single bar is hovered', () => {
-    initialize({
-      orientation: 'horizontal'
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('7.47 KB').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('does not display a tooltip when a bar is hovered and a props is set', () => {
     initialize({
       data: dataPingServiceStacked,
@@ -230,68 +262,6 @@ describe('Bar chart', () => {
     cy.makeSnapshot();
   });
 
-  it('displays a tooltip when a stacked bar is hovered', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'all',
-        sortOrder: 'ascending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-    cy.contains('0.02 ms').should('be.visible');
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-  });
-
-  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'single',
-        sortOrder: 'descending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('displays the bottom axis correctly when data starts from several days ago', () => {
     initialize({
       data: dataLastWeek,
@@ -314,21 +284,4 @@ describe('Bar chart', () => {
     cy.contains('1 s').should('be.visible');
     cy.contains('1%').should('be.visible');
   });
-
-  it('displays the stacked bar chart correctly when a point is missing compare to the time serie', () => {
-    initialize({ data: dataMissingPoint });
-
-    cy.findByTestId('stacked-bar-2-0-139').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the stacked bar chart with bars stacked together', () => {
-    initialize({ data: dataPingServiceLinesStackKeys });
-
-    cy.findByTestId('stacked-bar-3-0-0.05336').should('be.visible');
-    cy.findByTestId('stacked-bar-4-0-0.06684').should('be.visible');
-
-    cy.makeSnapshot();
-  });
 });