@centreon/ui 23.10.22-MON-18498-cancel-changes.2 → 23.10.22-MON-19279-implement-e2e-tests-from-create-a-new-dashboard.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.22-MON-18498-cancel-changes.2",
+  "version": "23.10.22-MON-19279-implement-e2e-tests-from-create-a-new-dashboard.2",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Dashboard.styles.ts

@@ -2,69 +2,67 @@ import { makeStyles } from 'tss-react/mui';
 
 import { alpha } from '@mui/material';
 
-export const useDashboardLayoutStyles = makeStyles<boolean>()(
-  (theme, isStatic: boolean) => ({
-    container: {
-      '& .react-grid-item': {
-        borderRadius: theme.shape.borderRadius,
-        transition: theme.transitions.create('all', {
-          delay: 0,
-          duration: 100,
-          easing: theme.transitions.easing.easeOut
-        })
-      },
-      '& .react-grid-item.react-draggable-dragging': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.7)
-      },
-      '& .react-grid-item.resizing': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-resizable-handle': {
-        backgroundColor: theme.palette.action.focus,
-        backgroundImage: 'none',
-        borderRadius: theme.shape.borderRadius,
-        display: isStatic ? 'none' : 'block',
-        opacity: 0,
-        position: 'absolute'
-      },
-      '& .react-resizable-handle.react-resizable-handle-e': {
-        cursor: 'ew-resize',
-        height: `calc(100% - ${theme.spacing(3)})`,
-        marginTop: 0,
-        right: 0,
-        top: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(1)
-      },
-      '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 0,
-        cursor: 'ns-resize',
-        height: theme.spacing(1),
-        left: 0,
-        marginLeft: 0,
-        transform: 'rotate(0deg)',
-        width: `calc(100% - ${theme.spacing(3)})`
-      },
-      '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 0,
-        cursor: 'nwse-resize',
-        height: theme.spacing(2),
-        right: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(2)
-      },
-      '& .react-resizable-handle::after': {
-        content: 'none'
-      },
-      '& .react-resizable-handle:hover': {
-        opacity: 1
-      }
+export const useDashboardLayoutStyles = makeStyles()((theme) => ({
+  container: {
+    '& .react-grid-item': {
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create('all', {
+        delay: 0,
+        duration: 100,
+        easing: theme.transitions.easing.easeOut
+      })
+    },
+    '& .react-grid-item.react-draggable-dragging': {
+      boxShadow: theme.shadows[3]
+    },
+    '& .react-grid-item.react-grid-placeholder': {
+      backgroundColor: alpha(theme.palette.primary.main, 0.7)
+    },
+    '& .react-grid-item.resizing': {
+      boxShadow: theme.shadows[3]
+    },
+    '& .react-resizable-handle': {
+      backgroundColor: theme.palette.action.focus,
+      backgroundImage: 'none',
+      borderRadius: theme.shape.borderRadius,
+      display: 'block',
+      opacity: 0,
+      position: 'absolute'
+    },
+    '& .react-resizable-handle.react-resizable-handle-e': {
+      cursor: 'ew-resize',
+      height: `calc(100% - ${theme.spacing(3)})`,
+      marginTop: 0,
+      right: 0,
+      top: 0,
+      transform: 'rotate(0deg)',
+      width: theme.spacing(1)
+    },
+    '& .react-resizable-handle.react-resizable-handle-s': {
+      bottom: 0,
+      cursor: 'ns-resize',
+      height: theme.spacing(1),
+      left: 0,
+      marginLeft: 0,
+      transform: 'rotate(0deg)',
+      width: `calc(100% - ${theme.spacing(3)})`
+    },
+    '& .react-resizable-handle.react-resizable-handle-se': {
+      bottom: 0,
+      cursor: 'nwse-resize',
+      height: theme.spacing(2),
+      right: 0,
+      transform: 'rotate(0deg)',
+      width: theme.spacing(2)
+    },
+    '& .react-resizable-handle::after': {
+      content: 'none'
+    },
+    '& .react-resizable-handle:hover': {
+      opacity: 1
     }
-  })
-);
+  }
+}));
 
 export const useDashboardItemStyles = makeStyles()((theme) => ({
   widgetContainer: {

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { useMemo, ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { Grid as VisxGrid } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';

package/src/Dashboard/Item.tsx

@@ -18,7 +18,7 @@ interface DashboardItemProps {
   children: ReactElement;
   className?: string;
   header?: ReactElement;
-  id: string;
+  key: string;
   onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
   onTouchEnd?: (e) => void;
@@ -29,13 +29,13 @@ const Item = forwardRef(
   (
     {
       children,
+      key,
       style,
       className,
       header,
       onMouseDown,
       onMouseUp,
-      onTouchEnd,
-      id
+      onTouchEnd
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -55,17 +55,14 @@ const Item = forwardRef(
       Component: (
         <div
           className={className}
+          key={key}
           ref={ref}
           style={style}
           {...cardContainerListeners}
         >
           <Card className={classes.widgetContainer}>
             {header && (
-              <div
-                {...listeners}
-                className={classes.widgetHeader}
-                data-testid={`${id}_move_panel`}
-              >
+              <div {...listeners} className={classes.widgetHeader}>
                 {header}
               </div>
             )}
@@ -73,7 +70,7 @@ const Item = forwardRef(
           </Card>
         </div>
       ),
-      memoProps: [style, className, header]
+      memoProps: [key, style, className, header]
     });
   }
 );

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useMemo } from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 
 import { Button as MuiButton } from '@mui/material';
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -59,7 +59,6 @@ const DataTableItem = forwardRef(
           <MuiCardActions>
             <IconButton
               aria-label="edit"
-              data-testid="edit"
               icon={<EditIcon />}
               size="small"
               variant="primary"
@@ -67,7 +66,6 @@ const DataTableItem = forwardRef(
             />
             <IconButton
               aria-label="delete"
-              data-testid="dashboard-delete"
               icon={<DeleteIcon />}
               size="small"
               variant="ghost"

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import { Typography as MuiTypography } from '@mui/material';
 

package/src/components/Modal/ModalActions.tsx

@@ -31,17 +31,15 @@ const ModalActions = ({
       {children || (
         <>
           <Button
-            aria-label={labels?.cancel}
-            data-testid="cancel_confirmation"
+            aria-label="cancel"
             size="small"
-            variant="ghost"
+            variant="secondary"
             onClick={() => onCancel?.()}
           >
             {labels?.cancel}
           </Button>
           <Button
-            aria-label={labels?.confirm}
-            data-testid="confirm_confirmation"
+            aria-label="confirm"
             isDanger={isDanger}
             size="small"
             type="submit"