@centreon/ui 23.10.122 → 24.4.0

package/src/components/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx

@@ -0,0 +1,168 @@
+import { atom, createStore, useSetAtom, Provider } from 'jotai';
+
+import { Button } from '@mui/material';
+
+import { ConfirmationModal, ConfirmationModalProps } from './ConfirmationModal';
+
+const testAtom = atom<string | null>(null);
+
+const buttonLabel = 'Click to open modal';
+
+const TestComponent = (args: ConfirmationModalProps<string>): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>{buttonLabel}</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+const staticLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: 'Description',
+  title: 'Title'
+};
+
+const dynamicLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: (data) => `Description ${data}`,
+  title: (data) => `Hello ${data}`
+};
+
+const initialize = (
+  props: Pick<
+    ConfirmationModalProps<string>,
+    'labels' | 'disabled' | 'hasCloseButton' | 'isDanger'
+  >
+): { cancel; confirm } => {
+  const store = createStore();
+
+  const cancel = cy.stub();
+  const confirm = cy.stub();
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent
+          {...props}
+          atom={testAtom}
+          onCancel={cancel}
+          onConfirm={confirm}
+        />
+      </Provider>
+    )
+  });
+
+  return {
+    cancel,
+    confirm
+  };
+};
+
+describe('Confirmation modal', () => {
+  it('displays the modal with static labels', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+    cy.contains('Description').should('be.visible');
+    cy.findByLabelText('close').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal with dynamic labels', () => {
+    initialize({ labels: dynamicLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Hello John').should('be.visible');
+    cy.contains('Description John').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as disabled when a prop is set', () => {
+    initialize({ disabled: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as danger when a prop is set', () => {
+    initialize({ isDanger: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('have.attr', 'data-is-danger', 'true');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal without the close button when a prop is set', () => {
+    initialize({ hasCloseButton: false, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.findByLabelText('close').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the close button is clicked', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.findByLabelText('close').click();
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the cancel button is clicked', () => {
+    const { cancel } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Cancel')
+      .click()
+      .then(() => {
+        expect(cancel).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+  it('closes the modal when the confirm button is clicked', () => {
+    const { confirm } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Confirm')
+      .click()
+      .then(() => {
+        expect(confirm).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { atom, useSetAtom, createStore, Provider } from 'jotai';
+
+import { Button } from '../../Button';
+
+import { ConfirmationModal } from './ConfirmationModal';
+
+const meta: Meta<typeof ConfirmationModal> = {
+  component: ConfirmationModal
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+
+const testAtom = atom<string | null>(null);
+
+const store = createStore();
+
+const Component = (args): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>Click to open modal</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: 'Description',
+      title: 'Title'
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};
+
+export const WithDynamicLabels: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: (data) => `Hello ${data} from description`,
+      title: (data) => `Hello ${data}`
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+
+import { useAtom, PrimitiveAtom } from 'jotai';
+import { equals, pick, type } from 'ramda';
+
+import { Modal } from '..';
+
+export interface ConfirmationModalProps<TAtom> {
+  atom: PrimitiveAtom<string | null>;
+  disabled?: boolean;
+  hasCloseButton?: boolean;
+  isDanger?: boolean;
+  labels: {
+    cancel: string | ((atom: Awaited<TAtom> | null) => string);
+    confirm: string | ((atom: Awaited<TAtom> | null) => string);
+    description: string | ((atom: Awaited<TAtom> | null) => string);
+    title: string | ((atom: Awaited<TAtom> | null) => string);
+  };
+  onCancel?: (atomData: Awaited<TAtom> | null) => void;
+  onClose?: (atomData: Awaited<TAtom> | null) => void;
+  onConfirm?: (atomData: Awaited<TAtom> | null) => void;
+}
+
+interface GetLabelProps<TAtom> {
+  atomData: Awaited<TAtom> | null;
+  label: string | ((atom: Awaited<TAtom> | null) => string);
+}
+
+const getLabel = <TAtom,>({ label, atomData }: GetLabelProps<TAtom>): string =>
+  equals(type(label), 'String')
+    ? (label as string)
+    : (label as (atom: Awaited<TAtom> | null) => string)(atomData);
+
+export const ConfirmationModal = <TAtom,>({
+  atom,
+  labels,
+  onConfirm,
+  onCancel,
+  onClose,
+  hasCloseButton = true,
+  isDanger,
+  disabled
+}: ConfirmationModalProps<TAtom>): JSX.Element => {
+  const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
+
+  const closeModal = (): void => {
+    onClose?.(atomData);
+    setAtomData(null);
+  };
+
+  const formattedLabels = useMemo(() => {
+    return {
+      cancel: getLabel({ atomData, label: labels.cancel }),
+      confirm: getLabel({ atomData, label: labels.confirm }),
+      description: getLabel({ atomData, label: labels.description }),
+      title: getLabel({ atomData, label: labels.title })
+    };
+  }, [labels, atomData]);
+
+  const confirm = (): void => {
+    onConfirm?.(atomData);
+    setAtomData(null);
+  };
+
+  const cancel = (): void => {
+    onCancel?.(atomData);
+    setAtomData(null);
+  };
+
+  return (
+    <Modal
+      hasCloseButton={hasCloseButton}
+      open={Boolean(atomData)}
+      onClose={closeModal}
+    >
+      <Modal.Header>{formattedLabels.title}</Modal.Header>
+      <Modal.Body>{formattedLabels.description}</Modal.Body>
+      <Modal.Actions
+        disabled={disabled}
+        isDanger={isDanger}
+        labels={pick(['confirm', 'cancel'], formattedLabels)}
+        onCancel={cancel}
+        onConfirm={confirm}
+      />
+    </Modal>
+  );
+};

package/src/components/Modal/Modal.styles.ts

@@ -24,10 +24,11 @@ const useStyles = makeStyles<{
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
       bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
       left: props?.left ?? 0,
       margin: 0,
-      maxHeight: 'unset',
       maxWidth: 'unset',
+      paddingBottom: theme.spacing(8),
       position: 'absolute',
       right: props?.right ?? 0,
       top: props?.top ?? 0,
@@ -49,12 +50,19 @@ const useStyles = makeStyles<{
     }
   },
   modalActions: {
+    '&[data-fixed="true"]': {
+      background: theme.palette.background.paper,
+      position: 'fixed',
+      width: '100%'
+    },
     bottom: 0,
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'sticky'
+    padding: theme.spacing(1, 2.5, 2.5, 0),
+    right: 0,
+    zIndex: theme.zIndex.modal
   },
   modalBody: {
     '& > p': {

package/src/components/Modal/ModalActions.tsx

@@ -8,6 +8,7 @@ export type ModalActionsProps = {
   children?: React.ReactNode;
   disabled?: boolean;
   isDanger?: boolean;
+  isFixed?: boolean;
   labels?: ModalActionsLabels;
   onCancel?: () => void;
   onConfirm?: () => void;
@@ -24,12 +25,13 @@ const ModalActions = ({
   onCancel,
   onConfirm,
   isDanger = false,
-  disabled
+  disabled,
+  isFixed
 }: ModalActionsProps): ReactElement => {
   const { classes } = useStyles();
 
   return (
-    <div className={classes.modalActions}>
+    <div className={classes.modalActions} data-fixed={isFixed}>
       {children || (
         <>
           <Button

package/src/components/Modal/index.ts

@@ -3,6 +3,8 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalActions } from './ModalActions';
 
+export { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
+
 export const Modal = Object.assign(ModalRoot, {
   Actions: ModalActions,
   Body: ModalBody,

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ConfirmationTooltip>;
 
 export const Default: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
     ),
     labels: {
@@ -30,7 +30,7 @@ export const Default: Story = {
 
 export const WithConfirmVariant: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',
@@ -46,7 +46,7 @@ export const WithConfirmVariant: Story = {
 
 export const WithSecondaryLabel: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -49,7 +49,7 @@ export const ConfirmationTooltip = ({
   return (
     <ClickAwayListener onClickAway={close}>
       <div>
-        {children(isOpen ? close : open)}
+        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
         <Popper
           anchorEl={anchorElement}
           className={classes.popper}

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -11,7 +11,7 @@ interface Labels {
 }
 
 export interface Props {
-  children: (toggleTooltip) => ReactElement;
+  children: ({ toggleTooltip, isOpen }) => ReactElement;
   confirmVariant?: ActionVariants;
   labels: Labels;
   onConfirm: () => void;

package/src/components/Zoom/Minimap.tsx

@@ -0,0 +1,127 @@
+import { useMemo } from 'react';
+
+import { scaleLinear } from '@visx/scale';
+
+import { minimapScale, radius } from './constants';
+import { UseMinimapProps, useMinimap } from './useMinimap';
+import { useZoomStyles } from './Zoom.styles';
+
+interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
+  children: JSX.Element;
+  contentClientRect: {
+    height: number;
+    width: number;
+  };
+  diffBetweenContentAndSvg: {
+    left: number;
+    top: number;
+  };
+  isDraggingFromContainer: boolean;
+}
+
+const Minimap = ({
+  zoom,
+  children,
+  height,
+  width,
+  contentClientRect,
+  isDraggingFromContainer,
+  diffBetweenContentAndSvg
+}: Props): JSX.Element => {
+  const { classes } = useZoomStyles();
+
+  const yMinimapScale = useMemo(
+    () => contentClientRect.height / zoom.transformMatrix.scaleY / height,
+    [contentClientRect.height, height]
+  );
+  const xMinimapScale = useMemo(
+    () => contentClientRect.width / zoom.transformMatrix.scaleX / width,
+    [contentClientRect.width, width]
+  );
+
+  const scale = Math.max(yMinimapScale, xMinimapScale);
+  const invertedScale = 1 / scale;
+  const scaleToUse = (invertedScale > 1 ? 1 : invertedScale) || 1;
+
+  const { move, zoomInOut, dragStart, dragEnd } = useMinimap({
+    height,
+    isDraggingFromContainer,
+    minimapScale,
+    scale: (invertedScale > 1 ? 1 : scale) || 1,
+    width,
+    zoom
+  });
+
+  const finalHeight = height;
+  const finalWidth = width;
+
+  const additionalScaleScale = scaleLinear({
+    clamp: true,
+    domain: [contentClientRect.height, 0],
+    range: [0, 0.05]
+  });
+
+  const additionalScale =
+    additionalScaleScale(contentClientRect.height - height) /
+    2 /
+    zoom.transformMatrix.scaleY;
+
+  const translateX = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.left /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.left]
+  );
+  const translateY = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.top /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.top]
+  );
+
+  return (
+    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+      <rect
+        className={classes.minimapBackground}
+        height={finalHeight}
+        rx={radius}
+        width={finalWidth}
+      />
+      <g
+        className={classes.movingZone}
+        style={{
+          transform: `scale(${scaleToUse - additionalScale}) translate(${translateX}px, ${translateY}px)`
+        }}
+      >
+        {children}
+        <g>
+          <rect
+            className={classes.minimapZoom}
+            fillOpacity={0.2}
+            height={height}
+            rx={radius}
+            transform={zoom.toStringInvert()}
+            width={width}
+          />
+        </g>
+      </g>
+      <rect
+        data-testid="minimap-interaction"
+        fill="transparent"
+        height={finalHeight}
+        rx={radius}
+        width={finalWidth}
+        onMouseDown={dragStart}
+        onMouseEnter={dragStart}
+        onMouseLeave={dragEnd}
+        onMouseMove={move}
+        onMouseUp={dragEnd}
+        onWheel={zoomInOut}
+      />
+    </g>
+  );
+};
+
+export default Minimap;