@centreon/ui 24.10.12 → 24.10.13

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -16,6 +16,7 @@ export interface DataTableItemProps {
   hasActions?: boolean;
   hasCardAction?: boolean;
   onClick?: () => void;
+  thumbnail?: string | null;
   title: string;
 }
 
@@ -27,7 +28,8 @@ const DataTableItem = forwardRef(
       hasCardAction = false,
       hasActions = false,
       onClick,
-      Actions
+      Actions,
+      thumbnail
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -46,15 +48,28 @@ const DataTableItem = forwardRef(
         variant="outlined"
       >
         <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
+          {thumbnail && (
+            <img
+              alt={`thumbnail-${title}-${description}`}
+              className={classes.thumbnail}
+              data-testId={`thumbnail-${title}-${description}`}
+              loading="lazy"
+              src={thumbnail}
+            />
+          )}
+          <MuiCardContent className={classes.cardContent}>
             <MuiTypography fontWeight={500} variant="h5">
               {title}
             </MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
+            {description && (
+              <MuiTypography className={classes.description}>
+                {description}
+              </MuiTypography>
+            )}
           </MuiCardContent>
         </ActionArea>
         {hasActions && (
-          <MuiCardActions>
+          <MuiCardActions className={classes.cardActions}>
             <span />
             <span>{Actions}</span>
           </MuiCardActions>

package/src/components/Form/FormActions.tsx

@@ -12,6 +12,8 @@ export type FormActionsProps = {
   labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
+  isCancelButtonVisible?: boolean;
+  disableSubmit?: boolean;
 };
 
 export type FormActionsLabels = {
@@ -23,27 +25,34 @@ const FormActions = <TResource extends object>({
   labels,
   onCancel,
   variant,
-  enableSubmitWhenNotDirty
+  enableSubmitWhenNotDirty,
+  isCancelButtonVisible = true,
+  disableSubmit = false
 }: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
     useFormikContext<TResource>();
 
   const isSubmitDisabled =
-    isSubmitting || (!dirty && !enableSubmitWhenNotDirty) || !isValid;
+    disableSubmit ||
+    isSubmitting ||
+    (!dirty && !enableSubmitWhenNotDirty) ||
+    !isValid;
 
   return (
     <div className={classes.actions}>
-      <Button
-        aria-label={labels.cancel}
-        data-testid="cancel"
-        disabled={isSubmitting}
-        size="medium"
-        variant="secondary"
-        onClick={() => onCancel?.()}
-      >
-        {labels.cancel}
-      </Button>
+      {isCancelButtonVisible && (
+        <Button
+          aria-label={labels.cancel}
+          data-testid="cancel"
+          disabled={isSubmitting}
+          size="medium"
+          variant="secondary"
+          onClick={() => onCancel?.()}
+        >
+          {labels.cancel}
+        </Button>
+      )}
       <Button
         aria-label={labels.submit[variant]}
         data-testid="submit"

package/src/components/Layout/AreaIndicator.tsx

@@ -25,7 +25,7 @@ const AreaIndicator = ({
       data-depth={depth}
       style={{ height, width }}
     >
-      {/* biome-ignore lint/a11y: */}
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label>{name}</label>
       {children}
     </div>

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -2,10 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
-    height: '100%',
     display: 'grid',
-    gridTemplateRows: 'auto 1fr',
-    height: '100%',
+    gridTemplateRows: 'min-content',
     overflow: 'hidden'
   },
   pageLayoutActions: {
@@ -24,11 +22,8 @@ export const useStyles = makeStyles()((theme) => ({
     '&[data-has-background="true"]': {
       backgroundColor: theme.palette.layout.body.background
     },
-    '&[data-has-actions="true"]': {
-      gridTemplateRows: 'min-content auto',
-    },
     display: 'grid',
-    gridTemplateRows: 'auto',
+    gridTemplateRows: 'min-content',
     overflow: 'hidden',
     padding: theme.spacing(1.5, 3, 5)
   },

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,7 +17,6 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
-      data-has-actions={!!children?.length}
       id="page-body"
     >
       {children}

package/src/components/Zoom/Zoom.tsx

@@ -1,4 +1,6 @@
 import { Zoom as VisxZoom } from '@visx/zoom';
+import { TransformMatrix } from '@visx/zoom/lib/types';
+import { type MutableRefObject } from 'react';
 
 import { ParentSize } from '../..';
 
@@ -12,6 +14,8 @@ export interface ZoomProps {
   scaleMax?: number;
   scaleMin?: number;
   showMinimap?: boolean;
+  contentRef?: MutableRefObject<SVGGElement | null>;
+  transformMatrix?: TransformMatrix;
 }
 
 const initialTransform = {
@@ -29,14 +33,16 @@ const Zoom = ({
   scaleMax = 4,
   showMinimap = false,
   minimapPosition = 'top-left',
-  id = 0
+  id = 0,
+  contentRef,
+  transformMatrix = initialTransform
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
       {({ width, height }) => (
         <VisxZoom<SVGSVGElement>
           height={height}
-          initialTransformMatrix={initialTransform}
+          initialTransformMatrix={transformMatrix}
           scaleXMax={scaleMax}
           scaleXMin={scaleMin}
           scaleYMax={scaleMax}
@@ -51,6 +57,7 @@ const Zoom = ({
               showMinimap={showMinimap}
               width={width}
               zoom={zoom}
+              ref={contentRef}
             >
               {children}
             </ZoomContent>

package/src/components/Zoom/ZoomContent.tsx

@@ -1,7 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import {
+  type ForwardedRef,
+  MutableRefObject,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
-import { ProvidedZoom } from '@visx/zoom/lib/types';
 
 import ZoomInIcon from '@mui/icons-material/Add';
 import ZoomOutIcon from '@mui/icons-material/Remove';
@@ -12,159 +18,160 @@ import { IconButton } from '../Button';
 import Minimap from './Minimap';
 import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import { ChildrenProps, MinimapPosition, ZoomState } from './models';
+import {
+  type Dimension,
+  type MinimapPosition,
+  ZoomChildren,
+  type ZoomInterface
+} from './models';
 import { useZoom } from './useZoom';
 
-export interface Props {
-  children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
-  height: number;
+export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
-  width: number;
-  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
 }
 
-const ZoomContent = ({
-  zoom,
-  width,
-  height,
-  children,
-  showMinimap,
-  minimapPosition,
-  id
-}: Props): JSX.Element => {
-  const { classes } = useZoomStyles();
-  const contentRef = useRef<SVGGElement | null>(null);
-  const minimapSvgRef = useRef<SVGSVGElement | null>(null);
-  const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
+const ZoomContent = forwardRef(
+  (
+    { zoom, width, height, children, showMinimap, minimapPosition, id }: Props,
+    ref?: ForwardedRef<SVGGElement | null>
+  ): JSX.Element => {
+    const { classes } = useZoomStyles();
 
-  const resizeObserver = new ResizeObserver(() => {
-    const contentBoundingClientRect = (
-      contentRef.current as SVGGElement
-    ).getBoundingClientRect();
+    const fallbackRef = useRef<SVGGElement | null>(null);
+    const contentRef = (ref ||
+      fallbackRef) as MutableRefObject<SVGGElement | null>;
+    const minimapSvgRef = useRef<SVGSVGElement | null>(null);
+    const minimapContentRef = useRef<SVGSVGElement | null>(null);
+    const [contentClientRect, setContentClientRect] =
+      useState<Dimension | null>(null);
 
-    setContentClientRect({
-      height: contentBoundingClientRect.height,
-      width: contentBoundingClientRect.width
+    const resizeObserver = new ResizeObserver(() => {
+      const contentBoundingClientRect = (
+        contentRef.current as SVGGElement
+      ).getBoundingClientRect();
+
+      setContentClientRect({
+        height: contentBoundingClientRect.height,
+        width: contentBoundingClientRect.width
+      });
     });
-  });
 
-  useEffect(() => {
-    if (contentRef.current) {
-      resizeObserver.disconnect();
-      resizeObserver.observe(contentRef.current);
-    }
+    useEffect(() => {
+      if (contentRef.current) {
+        resizeObserver.disconnect();
+        resizeObserver.observe(contentRef.current);
+      }
 
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [contentRef.current]);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [contentRef.current]);
 
-  const { move, dragEnd, dragStart, isDragging } = useZoom();
+    const { move, dragEnd, dragStart, isDragging } = useZoom();
 
-  const diffBetweenContentAndSvg = minimapSvgRef.current &&
-    minimapContentRef.current && {
-      left:
-        minimapContentRef.current.getBoundingClientRect().left -
-        minimapSvgRef.current.getBoundingClientRect().left,
-      top:
-        minimapContentRef.current.getBoundingClientRect().top -
-        minimapSvgRef.current.getBoundingClientRect().top
-    };
+    const diffBetweenContentAndSvg = minimapSvgRef.current &&
+      minimapContentRef.current && {
+        left:
+          minimapContentRef.current.getBoundingClientRect().left -
+          minimapSvgRef.current.getBoundingClientRect().left,
+        top:
+          minimapContentRef.current.getBoundingClientRect().top -
+          minimapSvgRef.current.getBoundingClientRect().top
+      };
 
-  return (
-    <div style={{ position: 'relative' }}>
-      <svg
-        className={classes.svg}
-        data-is-grabbing={isDragging}
-        data-testid="zoom-container"
-        height={height}
-        width={width}
-        onMouseDown={dragStart(zoom)}
-        onMouseEnter={dragStart(zoom)}
-        onMouseLeave={dragEnd}
-        onMouseMove={move(zoom)}
-        onMouseUp={dragEnd}
-        onWheel={zoom.handleWheel}
-      >
-        <RectClipPath
-          height={Math.max(contentClientRect?.height || 0, height)}
-          id={`zoom-clip-${id}`}
-          rx={radius}
-          width={Math.max(contentClientRect?.width || 0, width)}
-        />
-        <g
-          data-testid="zoom-content"
-          ref={contentRef}
-          transform={zoom.toString()}
+    return (
+      <div style={{ position: 'relative' }}>
+        <svg
+          className={classes.svg}
+          data-is-grabbing={isDragging}
+          data-testid="zoom-container"
+          height={height}
+          width={width}
+          onMouseDown={dragStart(zoom)}
+          onMouseEnter={dragStart(zoom)}
+          onMouseLeave={dragEnd}
+          onMouseMove={move(zoom)}
+          onMouseUp={dragEnd}
+          onWheel={zoom.handleWheel}
         >
-          {children({
-            contentClientRect,
-            height,
-            transformMatrix: zoom.transformMatrix,
-            width
-          })}
-        </g>
-      </svg>
-      <div className={classes.actionsAndZoom} data-position={minimapPosition}>
-        {showMinimap && contentClientRect && (
-          <svg
-            className={classes.minimapContainer}
-            data-testid="minimap"
-            height={height * minimapScale}
-            ref={minimapSvgRef}
-            width={width * minimapScale}
+          <RectClipPath
+            height={Math.max(contentClientRect?.height || 0, height)}
+            id={`zoom-clip-${id}`}
+            rx={radius}
+            width={Math.max(contentClientRect?.width || 0, width)}
+          />
+          <g
+            data-testid="zoom-content"
+            ref={contentRef}
+            transform={zoom.toString()}
           >
-            <Minimap
-              contentClientRect={contentClientRect}
-              diffBetweenContentAndSvg={
-                diffBetweenContentAndSvg || { left: 0, top: 0 }
-              }
-              height={height}
-              id={id}
-              isDraggingFromContainer={isDragging}
-              width={width}
-              zoom={zoom}
+            {children({
+              contentClientRect,
+              height,
+              transformMatrix: zoom.transformMatrix,
+              width,
+              zoom
+            })}
+          </g>
+        </svg>
+        <div className={classes.actionsAndZoom} data-position={minimapPosition}>
+          {showMinimap && contentClientRect && (
+            <svg
+              className={classes.minimapContainer}
+              data-testid="minimap"
+              height={height * minimapScale}
+              ref={minimapSvgRef}
+              width={width * minimapScale}
             >
-              <g ref={minimapContentRef}>
-                {children({
-                  contentClientRect,
-                  height,
-                  transformMatrix: zoom.transformMatrix,
-                  width
-                })}
-              </g>
-            </Minimap>
-          </svg>
-        )}
-        <div className={classes.actions}>
-          <IconButton
-            data-testid="zoom in"
-            icon={<ZoomInIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
-          />
-          <IconButton
-            data-testid="zoom out"
-            icon={<ZoomOutIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
-          />
-          <IconButton
-            data-testid="clear"
-            icon={<ReplayIcon />}
-            size="small"
-            onClick={zoom.reset}
-          />
+              <Minimap
+                contentClientRect={contentClientRect}
+                diffBetweenContentAndSvg={
+                  diffBetweenContentAndSvg || { left: 0, top: 0 }
+                }
+                height={height}
+                id={id}
+                isDraggingFromContainer={isDragging}
+                width={width}
+                zoom={zoom}
+              >
+                <g ref={minimapContentRef}>
+                  {children({
+                    contentClientRect,
+                    height,
+                    transformMatrix: zoom.transformMatrix,
+                    width,
+                    zoom
+                  })}
+                </g>
+              </Minimap>
+            </svg>
+          )}
+          <div className={classes.actions}>
+            <IconButton
+              data-testid="zoom in"
+              icon={<ZoomInIcon />}
+              size="small"
+              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
+            />
+            <IconButton
+              data-testid="zoom out"
+              icon={<ZoomOutIcon />}
+              size="small"
+              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
+            />
+            <IconButton
+              data-testid="clear"
+              icon={<ReplayIcon />}
+              size="small"
+              onClick={zoom.reset}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export default ZoomContent;

package/src/components/Zoom/models.ts

@@ -1,12 +1,12 @@
+import { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
+
 export interface ZoomState {
-  transformMatrix: {
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-  };
+  transformMatrix: TransformMatrix;
+}
+
+export interface Dimension {
+  height: number;
+  width: number;
 }
 
 export type MinimapPosition =
@@ -15,11 +15,14 @@ export type MinimapPosition =
   | 'bottom-left'
   | 'bottom-right';
 
-export interface ChildrenProps extends ZoomState {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-  height: number;
-  width: number;
+export interface ZoomInterface {
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+export interface ChildrenProps extends ZoomState, Dimension, ZoomInterface {
+  contentClientRect: Dimension | null;
+}
+
+export interface ZoomChildren {
+  children: (args: ChildrenProps) => JSX.Element;
 }

package/src/components/Zoom/useMinimap.ts

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { Point } from '@visx/point';
 import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals, gt, isNil, pick } from 'ramda';
+import { equals, gt, pick } from 'ramda';
 
 import { ZoomState } from './models';
 
@@ -62,8 +62,8 @@ export const useMinimap = ({
   );
 
   const transformTo = useCallback(
-    (e): void => {
-      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
+    (e: MouseEvent): void => {
+      if (!equals(e.buttons, 1)) {
         return;
       }
       const { x, y } = getMatrixPoint(e);
@@ -76,11 +76,8 @@ export const useMinimap = ({
     [zoom.transformMatrix, scale]
   );
 
-  const dragStart = (e): void => {
-    if (
-      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
-      isDraggingFromContainer
-    ) {
+  const dragStart = (e: MouseEvent): void => {
+    if (!equals(e.buttons, 1) || isDraggingFromContainer) {
       return;
     }
     setStartPoint(getMatrixPoint(e));

package/src/components/Zoom/useZoom.ts

@@ -1,13 +1,13 @@
 import { useCallback, useState } from 'react';
 
 import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals, isNil } from 'ramda';
+import { equals } from 'ramda';
 
 import { localPoint } from './localPoint';
 import { ZoomState } from './models';
 
-const isLeftMouseButtonClicked = (e): boolean =>
-  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
+const isLeftMouseButtonClicked = (e: MouseEvent): boolean =>
+  equals(e.buttons, 1);
 
 interface UseZoomState {
   dragEnd: () => void;

package/src/index.ts

@@ -71,6 +71,7 @@ export { default as StatusChip } from './StatusChip';
 export type { Props as StatusChipProps } from './StatusChip';
 
 export type { Listing as ListingModel } from './api/models';
+export type { ListingMap as ListingMapModel } from './api/models';
 
 export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
@@ -131,6 +132,7 @@ export {
   default as useGraphQuery,
   resourceTypeQueryParameter
 } from './api/useGraphQuery';
+export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as QueryProvider, client } from './api/QueryProvider';
 export {
   default as FileDropZone,

package/src/utils/index.ts

@@ -28,3 +28,4 @@ export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZ
 export * from '../TimePeriods/helpers';
 export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
 export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';
+export * from './useLocale';

package/src/utils/useLocale/index.ts

@@ -0,0 +1,9 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { useAtomValue } from 'jotai';
+
+export const useLocale = () => {
+  const user = useAtomValue(userAtom);
+  const browserLocale = useAtomValue(browserLocaleAtom);
+
+  return user.locale || browserLocale;
+};

package/src/utils/useLocale/useLocale.cypress.spec.tsx

@@ -0,0 +1,38 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import { useLocale } from '.';
+
+const TestComponent = () => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+const initialize = ({ userLocale, browserLocale }) => {
+  const store = createStore();
+
+  store.set(userAtom, { locale: userLocale });
+  store.set(browserLocaleAtom, browserLocale);
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent />
+      </Provider>
+    )
+  });
+};
+
+describe('useLocale', () => {
+  it('displays the user locale when the corresponding atom is set', () => {
+    initialize({ userLocale: 'fi', browserLocale: 'en' });
+
+    cy.contains('fi').should('be.visible');
+  });
+
+  it('displays the browser locale when the user locale is not set', () => {
+    initialize({ browserLocale: 'de', userLocale: null });
+
+    cy.contains('de').should('be.visible');
+  });
+});