@centreon/ui 23.10.22-MON-19195-save-dashboard-changes.8 → 23.10.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.22-MON-19195-save-dashboard-changes.8",
+  "version": "23.10.22",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-const meta = {
+export default {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,13 +26,8 @@ const meta = {
 
   component: ButtonSave,
 
-  parameters: {
-    chromatic: { delay: 300 }
-  },
   title: 'Button/Save'
-};
-
-export default meta;
+} as ComponentMeta<typeof ButtonSave>;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -47,7 +42,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" size="medium" />
+  <ButtonSave labelSave="Save" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -55,7 +50,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="medium" />
+  <ButtonSave loading labelLoading="Loading" />
 );
 
 export const succeededWithText = (): JSX.Element => (

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';
 
@@ -64,8 +64,8 @@ const Button = ({
       type={type}
       variant={muiVariantMap[variant]}
       onClick={(e) => onClick?.(e)}
-      {...MuiOverrideProps}
       {...attr}
+      {...MuiOverrideProps}
     >
       {children}
     </MuiButton>

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="delete"
               icon={<DeleteIcon />}
               size="small"
               variant="ghost"

package/src/components/Form/Dashboard/Dashboard.resource.ts

@@ -1,4 +1,4 @@
 export type DashboardResource = {
-  description?: string | null;
+  description?: string;
   name: string;
 };

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -11,8 +11,7 @@ import { useStyles } from './DashboardForm.styles';
 import {
   labelMustBeAtLeast,
   labelMustBeMost,
-  labelRequired,
-  labelCharacters
+  labelRequired
 } from './translatedLabels';
 import {
   DashboardFormActions,
@@ -44,7 +43,7 @@ const DashboardForm = ({
 
   const formProps = useMemo<FormProps<DashboardResource>>(
     () => ({
-      initialValues: resource ?? { description: null, name: '' },
+      initialValues: resource ?? { name: '' },
       inputs: [
         {
           fieldName: 'name',
@@ -56,7 +55,7 @@ const DashboardForm = ({
         {
           fieldName: 'description',
           group: 'main',
-          label: labels?.entity?.description || '',
+          label: labels?.entity?.description,
           text: {
             multilineRows: 3
           },
@@ -66,12 +65,9 @@ const DashboardForm = ({
       submit: (values, bag) => onSubmit?.(values, bag),
       validationSchema: Yup.object().shape({
         description: Yup.string()
-          .label(labels?.entity?.description || '')
-          .max(
-            180,
-            (p) =>
-              `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
-          )
+          .label(labels?.entity?.description)
+          .max(180, ({ max, label }) => t(labelMustBeMost, { label, max }))
+          .optional()
           .nullable(),
         name: Yup.string()
           .label(labels?.entity?.name)

package/src/components/Form/Dashboard/translatedLabels.ts

@@ -3,4 +3,3 @@ export const labelMustBeMost = '{{label}} can be at most {{max}} characters';
 export const labelMustBeAtLeast =
   '{{label}} should be at least {{min}} characters long';
 export const labelRequired = 'Required';
-export const labelCharacters = 'characters';

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,8 +31,7 @@ const ModalActions = ({
       {children || (
         <>
           <Button
-            aria-label={labels?.cancel}
-            data-testid="cancel"
+            aria-label="cancel"
             size="small"
             variant="secondary"
             onClick={() => onCancel?.()}
@@ -40,8 +39,7 @@ const ModalActions = ({
             {labels?.cancel}
           </Button>
           <Button
-            aria-label={labels?.confirm}
-            data-testid="confirm"
+            aria-label="confirm"
             isDanger={isDanger}
             size="small"
             type="submit"