@centreon/ui 24.4.40 → 24.4.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.40",
+  "version": "24.4.42",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx

@@ -1,30 +1,19 @@
-import { ItemComposition } from '.';
+import { Props } from './ItemComposition';
 
-interface Props {
-  addButtonHidden?: boolean;
-  addbuttonDisabled?: boolean;
-  deleteButtonHidden?: boolean;
-  secondaryLabel?: string;
-}
+import { ItemComposition } from '.';
 
 const initialize = ({
-  addButtonHidden,
-  addbuttonDisabled,
-  secondaryLabel,
-  deleteButtonHidden
-}: Props): unknown => {
+  deleteButtonHidden,
+  ...props
+}: Partial<Props> & {
+  deleteButtonHidden?: boolean;
+}): unknown => {
   const addItem = cy.stub();
   const deleteItem = cy.stub();
 
   cy.mount({
     Component: (
-      <ItemComposition
-        addButtonHidden={addButtonHidden}
-        addbuttonDisabled={addbuttonDisabled}
-        labelAdd="Add"
-        secondaryLabel={secondaryLabel}
-        onAddItem={addItem}
-      >
+      <ItemComposition {...props} labelAdd="Add" onAddItem={addItem}>
         <ItemComposition.Item
           deleteButtonHidden={deleteButtonHidden}
           labelDelete="Delete"
@@ -113,4 +102,12 @@ describe('ItemComposition', () => {
         expect(deleteItem).to.have.been.calledWith();
       });
   });
+
+  it('displays items as linked when the prop is set to true', () => {
+    initialize({ displayItemsAsLinked: true });
+
+    cy.get('[data-linked]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -76,3 +76,17 @@ export const WithSelectInputs: Story = {
     onAddItem: stub
   }
 };
+
+export const WithLinkedItems: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <Typography>Item 1</Typography>
+        <Typography>Item 2</Typography>
+      </ItemComposition.Item>
+    )),
+    displayItemsAsLinked: true,
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};

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

@@ -14,6 +14,32 @@ export const useItemCompositionStyles = makeStyles()((theme) => ({
     flexDirection: 'column',
     gap: theme.spacing(2),
     width: '100%'
+  },
+  itemCompositionItems: {
+    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)
   }
 }));
 

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,6 +1,9 @@
 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 '..';
@@ -12,6 +15,7 @@ export type Props = {
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
+  displayItemsAsLinked?: boolean;
   labelAdd: string;
   onAddItem: () => void;
   secondaryLabel?: string;
@@ -24,13 +28,23 @@ export const ItemComposition = ({
   addbuttonDisabled,
   addButtonHidden,
   IconAdd,
+  displayItemsAsLinked,
   secondaryLabel
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
+  const hasMoreThanOneChildren = gt(children.length, 1);
+
   return (
     <div className={classes.itemCompositionContainer}>
-      {children}
+      <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