@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-test-code-coverage.1

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -1,12 +1,45 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useItemCompositionStyles = makeStyles()((theme) => ({
+  buttonAndSecondaryLabel: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  },
   itemCompositionContainer: {
+    width: '100%'
+  },
+  itemCompositionItems: {
     alignItems: 'flex-start',
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2),
     width: '100%'
+  },
+  itemCompositionItemsAndLink: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    gap: theme.spacing(0.5),
+    width: '100%'
+  },
+  linkIcon: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(0.5, 0),
+    transform: `rotate3d(0, 0, 1, 90deg) translate3d(0, ${theme.spacing(
+      1.6
+    )}, 0)`
+  },
+  linkedItems: {
+    alignItems: 'center',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRight: 'none',
+    display: 'flex',
+    margin: theme.spacing(2, 0, 2, 1),
+    minHeight: '100%',
+    position: 'relative',
+    width: theme.spacing(1)
   }
 }));
 
@@ -19,11 +52,11 @@ export const useItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   itemContent: {
-    display: 'flex',
-    flexDirection: 'row',
+    display: 'grid',
+    gridAutoFlow: 'column',
     width: '100%'
   },
   visibilityHiden: {
-    visibility: 'hidden'
+    display: 'none'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,18 +1,24 @@
 import { ReactElement } from 'react';
 
+import { gt } from 'ramda';
+
 import AddIcon from '@mui/icons-material/Add';
+import LinkIcon from '@mui/icons-material/Link';
+import { Typography } from '@mui/material';
 
 import { Button } from '..';
 
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
-type Props = {
+export type Props = {
   IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
+  displayItemsAsLinked?: boolean;
   labelAdd: string;
   onAddItem: () => void;
+  secondaryLabel?: string;
 };
 
 export const ItemComposition = ({
@@ -21,27 +27,45 @@ export const ItemComposition = ({
   labelAdd,
   addbuttonDisabled,
   addButtonHidden,
-  IconAdd
+  IconAdd,
+  displayItemsAsLinked,
+  secondaryLabel
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
+  const hasMoreThanOneChildren = gt(children.length, 1);
+
   return (
     <div className={classes.itemCompositionContainer}>
-      {children}
-      {!addButtonHidden && (
-        <Button
-          aria-label={labelAdd}
-          data-testid={labelAdd}
-          disabled={addbuttonDisabled}
-          icon={IconAdd || <AddIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-          onClick={onAddItem}
-        >
-          {labelAdd}
-        </Button>
-      )}
+      <div className={classes.itemCompositionItemsAndLink}>
+        <div className={classes.itemCompositionItems}>{children}</div>
+        {displayItemsAsLinked && hasMoreThanOneChildren && (
+          <div data-linked className={classes.linkedItems}>
+            <LinkIcon className={classes.linkIcon} viewBox="0 0 24 24" />
+          </div>
+        )}
+      </div>
+      <div className={classes.buttonAndSecondaryLabel}>
+        {!addButtonHidden && (
+          <Button
+            aria-label={labelAdd}
+            data-testid={labelAdd}
+            disabled={addbuttonDisabled}
+            icon={IconAdd || <AddIcon />}
+            iconVariant="start"
+            size="small"
+            variant="ghost"
+            onClick={onAddItem}
+          >
+            {labelAdd}
+          </Button>
+        )}
+        {secondaryLabel && (
+          <Typography sx={{ color: 'text.secondary' }}>
+            {secondaryLabel}
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItem as MuiListItem } from '@mui/material';
+import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type ListItemProps = {
+type Props = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type ListItemProps = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: ListItemProps,
+    { action, children, className, ...attr }: Props & ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();

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

@@ -28,6 +28,7 @@ const useStyles = makeStyles<{
       left: props?.left ?? 0,
       margin: 0,
       maxWidth: 'unset',
+      paddingBottom: theme.spacing(8),
       position: 'absolute',
       right: props?.right ?? 0,
       top: props?.top ?? 0,
@@ -50,14 +51,18 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     '&[data-fixed="true"]': {
-      position: 'fixed'
+      background: theme.palette.background.paper,
+      position: 'fixed',
+      width: '100%'
     },
-    bottom: theme.spacing(2),
+    bottom: 0,
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    right: theme.spacing(2.5)
+    padding: theme.spacing(1, 2.5, 2.5, 0),
+    right: 0,
+    zIndex: theme.zIndex.modal
   },
   modalBody: {
     '& > p': {

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;