@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-sync-dev-2404.0

package/src/components/Zoom/ZoomContent.tsx

@@ -0,0 +1,167 @@
+import { 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';
+import ReplayIcon from '@mui/icons-material/Replay';
+
+import { IconButton } from '../Button';
+
+import { minimapScale, radius } from './constants';
+import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
+import { ChildrenProps, MinimapPosition, ZoomState } from './models';
+
+export interface Props {
+  children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
+  height: number;
+  minimapPosition: MinimapPosition;
+  showMinimap?: boolean;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+const ZoomContent = ({
+  zoom,
+  width,
+  height,
+  children,
+  showMinimap,
+  minimapPosition
+}: 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 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);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef.current]);
+
+  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
+    };
+
+  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"
+          rx={radius}
+          width={Math.max(contentClientRect?.width || 0, width)}
+        />
+        <g
+          data-testid="zoom-content"
+          ref={contentRef}
+          transform={zoom.toString()}
+        >
+          {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}
+          >
+            <Minimap
+              contentClientRect={contentClientRect}
+              diffBetweenContentAndSvg={
+                diffBetweenContentAndSvg || { left: 0, top: 0 }
+              }
+              height={height}
+              isDraggingFromContainer={isDragging}
+              width={width}
+              zoom={zoom}
+            >
+              <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}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ZoomContent;

package/src/components/Zoom/constants.ts

@@ -0,0 +1,2 @@
+export const radius = 16;
+export const minimapScale = 0.2;

package/src/components/Zoom/localPoint.ts

@@ -0,0 +1,51 @@
+import type {
+  FocusEvent as ReactFocusEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent
+} from 'react';
+
+import { Point } from '@visx/point';
+
+type EventType =
+  | MouseEvent
+  | TouchEvent
+  | FocusEvent
+  | ReactFocusEvent
+  | ReactMouseEvent
+  | ReactTouchEvent;
+
+type PointCoords = Pick<Point, 'x' | 'y'>;
+
+const DEFAULT_POINT = { x: 0, y: 0 };
+
+const isTouchEvent = (event?: EventType): event is TouchEvent =>
+  !!event && 'changedTouches' in event;
+
+export const isMouseEvent = (event?: EventType): event is MouseEvent =>
+  !!event && 'clientX' in event;
+
+const getXAndYFromEvent = (event?: EventType): PointCoords => {
+  if (!event) return { ...DEFAULT_POINT };
+
+  if (isTouchEvent(event)) {
+    return event.changedTouches.length > 0
+      ? {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY
+        }
+      : { ...DEFAULT_POINT };
+  }
+
+  if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  return { ...DEFAULT_POINT };
+};
+
+export const localPoint = (event: EventType): PointCoords | null => {
+  return getXAndYFromEvent(event);
+};

package/src/components/Zoom/models.ts

@@ -0,0 +1,25 @@
+export interface ZoomState {
+  transformMatrix: {
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    translateX: number;
+    translateY: number;
+  };
+}
+
+export type MinimapPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface ChildrenProps extends ZoomState {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+  height: number;
+  width: number;
+}

package/src/components/Zoom/useMinimap.ts

@@ -0,0 +1,156 @@
+import { useCallback, useState } from 'react';
+
+import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, gt, isNil, pick } from 'ramda';
+import { Point } from '@visx/point';
+
+import { ZoomState } from './models';
+
+export interface UseMinimapProps {
+  height: number;
+  isDraggingFromContainer: boolean;
+  minimapScale: number;
+  scale: number;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+interface UseMinimapState {
+  dragEnd: (e) => void;
+  dragStart: (e) => void;
+  move: (e) => void;
+  transformTo: (e) => void;
+  zoomInOut: (e) => void;
+}
+
+export const useMinimap = ({
+  width,
+  height,
+  zoom,
+  minimapScale,
+  isDraggingFromContainer,
+  scale
+}: UseMinimapProps): UseMinimapState => {
+  const [startPoint, setStartPoint] = useState<Pick<Point, 'x' | 'y'> | null>(
+    null
+  );
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+
+  const getMatrixPoint = useCallback(
+    (event, newScale?: number): { x: number; y: number } => {
+      const hasScale = scale > 1;
+      const point = {
+        x: event.nativeEvent.offsetX * (1 / minimapScale),
+        y: event.nativeEvent.offsetY * (1 / minimapScale)
+      };
+
+      const dx = -(
+        point.x * (newScale || zoom.transformMatrix.scaleX) -
+        width / 2
+      );
+      const dy = -(
+        point.y * (newScale || zoom.transformMatrix.scaleY) -
+        height / 2
+      );
+
+      return {
+        x: !hasScale ? dx : dx * scale - width / 2,
+        y: !hasScale ? dy : dy * scale - height / 2
+      };
+    },
+    [zoom.transformMatrix, scale, width, height, minimapScale]
+  );
+
+  const transformTo = useCallback(
+    (e): void => {
+      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: x,
+        translateY: y
+      });
+    },
+    [zoom.transformMatrix, scale]
+  );
+
+  const dragStart = (e): void => {
+    if (
+      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
+      isDraggingFromContainer
+    ) {
+      return;
+    }
+    setStartPoint(getMatrixPoint(e));
+    setStartTranslate(pick(['translateX', 'translateY'], zoom.transformMatrix));
+  };
+
+  const dragEnd = (): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  };
+
+  const move = useCallback(
+    (e): void => {
+      if (!startPoint || !startTranslate) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+
+      const diffX = startPoint.x - x;
+      const diffY = startPoint.y - y;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: startTranslate.translateX - diffX,
+        translateY: startTranslate.translateY - diffY
+      });
+    },
+
+    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
+  );
+
+  const zoomInOut = useCallback(
+    (e): void => {
+      const isZoomIn = gt(0, e.deltaY);
+
+      const newScaleX = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+
+      const newScaleY = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+      const { x, y } = getMatrixPoint(e, newScaleX);
+
+      const diffX = x - zoom.transformMatrix.translateX;
+      const diffY = y - zoom.transformMatrix.translateY;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        scaleX: newScaleX,
+        scaleY: newScaleY,
+        translateX: zoom.transformMatrix.translateX + diffX / 4,
+        translateY: zoom.transformMatrix.translateY + diffY / 4
+      });
+    },
+    [
+      zoom.transformMatrix,
+      width,
+      height,
+      isDraggingFromContainer,
+      scale,
+      startPoint
+    ]
+  );
+
+  return {
+    dragEnd,
+    dragStart,
+    move,
+    transformTo,
+    zoomInOut
+  };
+};

package/src/components/Zoom/useZoom.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+
+import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, isNil } from 'ramda';
+
+import { localPoint } from './localPoint';
+import { ZoomState } from './models';
+
+const isLeftMouseButtonClicked = (e): boolean =>
+  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
+
+interface UseZoomState {
+  dragEnd: () => void;
+  dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+  isDragging: boolean;
+  move: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+}
+
+export const useZoom = (): UseZoomState => {
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
+
+  const dragStart = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!isLeftMouseButtonClicked(e)) {
+          return;
+        }
+        const { translateX, translateY } = zoom.transformMatrix;
+        setStartPoint(localPoint(e) || null);
+        setStartTranslate({ translateX, translateY });
+      },
+    []
+  );
+
+  const move = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!startPoint || !startTranslate) {
+          return;
+        }
+        const currentPoint = localPoint(e);
+        const dx = currentPoint
+          ? -(startPoint.x - currentPoint.x)
+          : -startPoint.x;
+        const dy = currentPoint
+          ? -(startPoint.y - currentPoint.y)
+          : -startPoint.y;
+
+        const translateX = startTranslate.translateX + dx;
+        const translateY = startTranslate.translateY + dy;
+        zoom.setTranslate({
+          translateX,
+          translateY
+        });
+      },
+    [startPoint, startTranslate]
+  );
+  const dragEnd = useCallback((): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  }, []);
+
+  return {
+    dragEnd,
+    dragStart,
+    isDragging: Boolean(startPoint && startTranslate),
+    move
+  };
+};

package/src/components/Zoom/utils.ts

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+
+interface Props {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+}
+
+export const applyTranformStylesForZoom = ({
+  contentClientRect
+}: Props): CSSProperties => {
+  const contentRect = {
+    height: contentClientRect?.height || 1,
+    width: contentClientRect?.width || 1
+  };
+  const isPortrait = contentRect.height > contentRect.width;
+  const sizes = isPortrait ? ['width', 'height'] : ['height', 'width'];
+  const sizeScale = contentRect[sizes[0]] / contentRect[sizes[1]];
+
+  const lengthToUse = isPortrait
+    ? contentRect[sizes[1]] - contentRect[sizes[0]]
+    : contentRect[sizes[0]];
+
+  const t = sizeScale > 0.85 && isPortrait ? sizeScale * 4 : sizeScale / 2;
+  const xScaleFactor = sizeScale > 0.7 && !isPortrait ? 10 : 6;
+
+  return {
+    transform: `translate(-${isPortrait ? 0 : contentRect.width * (sizeScale / xScaleFactor)}px, -${lengthToUse * (isPortrait ? t + 0.08 : t / 2)}px)`
+  };
+};
+
+// DO NOT REMOVE: As the component is in work in progress, please this code in case we need
+// const getAdditionalPadding = (): number => {
+//   if (additionalScale > 0.05) {
+//     return 0;
+//   }
+
+//   const padding =
+//     additionalScale > 0.012
+//       ? (1 / additionalScale) * (1 / zoom.transformMatrix.scaleY)
+//       : 1 / additionalScale / zoom.transformMatrix.scaleY;
+
+//   if (additionalScale < 0.009) {
+//     const tweakScale = scaleLinear({
+//       clamp: true,
+//       domain: [0.009, 0.002],
+//       range: [1, 8]
+//     });
+
+//     return padding - padding / tweakScale(additionalScale);
+//   }
+
+//   return padding;
+// };

package/src/components/index.ts

@@ -11,3 +11,4 @@ export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
+export { default as Zoom } from './Zoom/Zoom';

package/src/index.ts

@@ -23,6 +23,7 @@ export { default as RegexpHelpTooltip } from './InputField/Search/RegexpHelpTool
 
 export { default as TextField } from './InputField/Text';
 export type { Props as TextFieldProps } from './InputField/Text';
+export { default as NumberField } from './InputField/Number/Number';
 
 export type { SelectEntry } from './InputField/Select';
 export { default as SelectField } from './InputField/Select';

package/src/utils/index.ts

@@ -20,3 +20,5 @@ export * from './useLicenseExpirationWarning';
 export * from './useRefreshInterval';
 export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
+export * from './useResizeObserver';
+export * from './useFullscreen';

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -0,0 +1,130 @@
+import { Provider, createStore } from 'jotai';
+import { BrowserRouter } from 'react-router-dom';
+
+import { Button } from '@mui/material';
+
+import { useFullscreen } from './useFullscreen';
+import { router, useFullscreenListener } from './useFullscreenListener';
+
+const labelEnterFullscreen = 'Enter fullscreen';
+const labelExitFullscreen = 'Exit fullscreen';
+
+const ChildComponent = (): JSX.Element => {
+  const { toggleFullscreen, fullscreenEnabled, isFullscreenActivated } =
+    useFullscreen();
+
+  return (
+    <div
+      data-fullscreenActivated={isFullscreenActivated}
+      data-fullscreenEnabled={fullscreenEnabled}
+      id="test"
+    >
+      <Button onClick={() => toggleFullscreen(document.body)}>
+        {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
+      </Button>
+      <input id="input" />
+      <textarea id="textarea" />
+    </div>
+  );
+};
+
+const TestComponent = (): JSX.Element => {
+  useFullscreenListener();
+
+  return <ChildComponent />;
+};
+
+const initialize = (): void => {
+  const store = createStore();
+
+  const queryParameters = new Map();
+
+  cy.stub(router, 'useSearchParams', () => queryParameters);
+
+  cy.mount({
+    Component: (
+      <BrowserRouter>
+        <Provider store={store}>
+          <TestComponent />
+        </Provider>
+      </BrowserRouter>
+    )
+  });
+};
+
+describe('Fullscreen', () => {
+  it('enters fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+  });
+
+  it('exits fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+
+  it('toggles fullscreen mode when the corresponding shortcut is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+
+  ['input', 'textarea'].forEach((tag) => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
+      initialize();
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+      cy.get(`#${tag}`).focus();
+
+      cy.get('#test').realPress(['F']);
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+      cy.get(`#${tag}`).should('have.value', 'F');
+    });
+  });
+});

package/src/utils/useFullscreen/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isFullscreenActivatedAtom = atom(false);

package/src/utils/useFullscreen/index.ts

@@ -0,0 +1,2 @@
+export * from './useFullscreen';
+export * from './useFullscreenListener';

package/src/utils/useFullscreen/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelCannotEnterInFullscreen = 'Cannot enter fullscreen mode';