@centreon/ui 24.9.6 → 24.10.0

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

@@ -0,0 +1,168 @@
+import { Provider, atom, createStore, useSetAtom } 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 { Provider, atom, createStore, useSetAtom } 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 { PrimitiveAtom, useAtom } 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.stories.tsx

@@ -0,0 +1,142 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+
+import { Modal } from '.';
+
+const meta: Meta<typeof Modal> = {
+  argTypes: {
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['small', 'medium', 'large', 'xlarge', 'fullscreen']
+    }
+  },
+  component: Modal
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    hasCloseButton: true,
+    open: true,
+    size: 'small'
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
+export const AsDangerAction: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Body>
+        <Modal.Body>
+          <p>
+            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
+            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
+          </p>
+        </Modal.Body>
+      </Modal.Body>
+      <Modal.Actions
+        isDanger
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
+export const WithCustomAction: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <Modal.Body>
+          <p>
+            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
+            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
+          </p>
+        </Modal.Body>
+      </Modal.Body>
+      <Modal.Actions>
+        <Button size="small" variant="primary">
+          OK
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  )
+};
+
+export const AsPassive: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+    </Modal>
+  )
+};
+
+export const fullscreenWithCustomMargins: Story = {
+  args: {
+    fullscreenMargins: {
+      bottom: 20,
+      left: 40,
+      right: 10,
+      top: 90
+    },
+    hasCloseButton: true,
+    open: true,
+    size: 'fullscreen'
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};

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

@@ -0,0 +1,96 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles<{
+  bottom?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+}>()((theme, props) => ({
+  modal: {
+    '& .MuiDialog-paper': {
+      gap: theme.spacing(2),
+      padding: theme.spacing(2.5)
+    },
+    '&[data-size="fullscreen"]': {
+      zIndex: 0
+    },
+    '&[data-size="fullscreen"] .MuiBackdrop-root': {
+      display: 'none'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-container': {
+      alignItems: 'flex-end',
+      height: '100vh',
+      justifyContent: 'flex-end'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-paper': {
+      bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
+      left: props?.left ?? 0,
+      margin: 0,
+      maxWidth: 'unset',
+      paddingBottom: theme.spacing(8),
+      position: 'absolute',
+      right: props?.right ?? 0,
+      top: props?.top ?? 0,
+      transition: theme.transitions.create('left')
+    },
+    '&[data-size="large"] .MuiDialog-paper': {
+      maxWidth: '704px',
+      width: '704px'
+    },
+    '&[data-size="medium"] .MuiDialog-paper': {
+      width: '520px'
+    },
+    '&[data-size="small"] .MuiDialog-paper': {
+      width: '400px'
+    },
+    '&[data-size="xlarge"] .MuiDialog-paper': {
+      maxWidth: '1400px',
+      width: 'calc(100% - 64px)'
+    }
+  },
+  modalActions: {
+    '&[data-fixed="true"]': {
+      background: theme.palette.background.paper,
+      padding: theme.spacing(1, 2.5, 2.5, 0),
+      position: 'fixed',
+      width: '100%'
+    },
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    justifyContent: 'flex-end',
+    padding: theme.spacing(1, 0, 0, 0),
+    right: 0,
+    zIndex: theme.zIndex.modal
+  },
+  modalBody: {
+    '& > p': {
+      '&:first-of-type': {
+        margin: theme.spacing(0, 0, 1, 0)
+      },
+      margin: theme.spacing(1, 0, 1, 0),
+      width: '90%'
+    }
+  },
+  modalCloseButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    svg: {
+      opacity: 0.6
+    },
+    top: theme.spacing(1)
+  },
+  modalHeader: {
+    '& .MuiDialogTitle-root': {
+      padding: theme.spacing(0)
+    },
+    display: 'flex',
+    gap: theme.spacing(2),
+
+    justifyContent: 'space-between'
+  }
+}));
+
+export { useStyles };

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,79 @@
+import React, { ReactElement } from 'react';
+
+import { equals } from 'ramda';
+
+import { Close as CloseIcon } from '@mui/icons-material';
+import { Dialog as MuiDialog, Slide } from '@mui/material';
+
+import { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import { IconButton } from '../Button';
+
+import { useStyles } from './Modal.styles';
+
+export type ModalProps = {
+  children: React.ReactNode;
+  fullscreenMargins?: {
+    bottom?: number;
+    left?: number;
+    right?: number;
+    top?: number;
+  };
+  hasCloseButton?: boolean;
+  onClose?: (
+    event: object,
+    reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
+  ) => void;
+  open: boolean;
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+} & AriaLabelingAttributes;
+
+/** *
+ * @description This component is *WIP* and is not ready for production. Use the default `Dialog` component instead.
+ */
+const Modal = ({
+  children,
+  hasCloseButton = true,
+  onClose,
+  open,
+  size = 'small',
+  fullscreenMargins = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0
+  },
+  ...attr
+}: ModalProps): ReactElement => {
+  const { classes } = useStyles(fullscreenMargins);
+
+  const isFullscreen = equals(size, 'fullscreen');
+
+  return (
+    <MuiDialog
+      TransitionComponent={isFullscreen ? Slide : undefined}
+      TransitionProps={{
+        direction: 'up'
+      }}
+      className={classes.modal}
+      data-size={size}
+      open={open}
+      onClose={onClose}
+      {...attr}
+    >
+      {hasCloseButton && (
+        <div className={classes.modalCloseButton}>
+          <IconButton
+            aria-label="close"
+            icon={<CloseIcon />}
+            size="small"
+            variant="ghost"
+            onClick={(e) => onClose?.(e, 'closeButton')}
+          />
+        </div>
+      )}
+      {children}
+    </MuiDialog>
+  );
+};
+
+export { Modal };

package/src/components/Modal/ModalActions.tsx

@@ -0,0 +1,64 @@
+import React, { ReactElement } from 'react';
+
+import { Button } from '../Button';
+
+import { useStyles } from './Modal.styles';
+
+export type ModalActionsProps = {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  isDanger?: boolean;
+  isFixed?: boolean;
+  labels?: ModalActionsLabels;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+};
+
+export type ModalActionsLabels = {
+  cancel: string;
+  confirm: string;
+};
+
+const ModalActions = ({
+  children,
+  labels,
+  onCancel,
+  onConfirm,
+  isDanger = false,
+  disabled,
+  isFixed
+}: ModalActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.modalActions} data-fixed={isFixed}>
+      {children || (
+        <>
+          <Button
+            aria-label={labels?.cancel}
+            data-testid="cancel"
+            size="small"
+            variant="secondary"
+            onClick={() => onCancel?.()}
+          >
+            {labels?.cancel}
+          </Button>
+          <Button
+            aria-label={labels?.confirm}
+            data-testid="confirm"
+            disabled={disabled}
+            isDanger={isDanger}
+            size="small"
+            type="submit"
+            variant="primary"
+            onClick={() => onConfirm?.()}
+          >
+            {labels?.confirm}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export { ModalActions };

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './Modal.styles';
+
+export type ModalHeaderProps = {
+  children?: ReactNode;
+};
+
+const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <div className={classes.modalBody}>{children}</div>;
+};
+
+export { ModalBody };