@centreon/ui 23.10.1-fix-notification-tests.0 → 23.10.1-hotfix-23-10-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-fix-notification-tests.0",
+  "version": "23.10.1-hotfix-23-10-next.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -102,10 +102,14 @@
   },
   "dependencies": {
     "@lexical/link": "0.11.3",
+    "@lexical/list": "^0.11.3",
     "@lexical/react": "0.11.3",
+    "@lexical/rich-text": "^0.11.3",
     "@lexical/selection": "0.11.3",
     "@lexical/utils": "0.11.3",
+    "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
+    "@visx/group": "^3.3.0",
     "@visx/pattern": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^2.12.2",
@@ -115,6 +119,8 @@
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
     "lexical": "0.11.3",
+    "msw": "0.49.1",
+    "msw-storybook-addon": "^1.10.0",
     "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",
@@ -148,5 +154,8 @@
   "jest-junit": {
     "suiteName": "jest tests",
     "output": "./junit.xml"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.1).
+ * Mock Service Worker (0.49.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
@@ -300,4 +300,4 @@ function sleep(timeMs) {
 async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
-}
+}

package/src/ActionsList/ActionsList.styles.ts

@@ -0,0 +1,116 @@
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+
+import { Theme, alpha } from '@mui/material';
+
+interface GetBackgroundAndColorProps {
+  status: string;
+  theme: Theme;
+}
+
+const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
+  equals(theme.palette.mode, 'dark')
+    ? theme.palette.common.white
+    : theme.palette[status].main;
+
+export const useStyles = makeStyles()((theme) => ({
+  item: {
+    '& .MuiListItemText-secondary': {
+      textWrap: 'pretty'
+    },
+    '&[data-variant="error"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'error', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.error.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'error', theme })
+      },
+      color: theme.palette.error.main
+    },
+    '&[data-variant="info"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'info', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.info.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'info', theme })
+      },
+      color: theme.palette.info.main
+    },
+    '&[data-variant="pending"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'pending', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.pending.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'pending', theme })
+      },
+      color: theme.palette.pending.main
+    },
+    '&[data-variant="primary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'primary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'primary', theme })
+      },
+      color: theme.palette.primary.main
+    },
+    '&[data-variant="secondary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'secondary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.secondary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'secondary', theme })
+      },
+      color: theme.palette.secondary.main
+    },
+    '&[data-variant="success"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'success', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.success.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'success', theme })
+      },
+      color: theme.palette.success.main
+    },
+    '&[data-variant="warning"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'warning', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.warning.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'warning', theme })
+      },
+      color: theme.palette.warning.main
+    }
+  },
+  list: {
+    width: '100%'
+  }
+}));

package/src/ActionsList/index.stories.tsx

@@ -24,6 +24,68 @@ const actions = [
   }
 ];
 
+const actionsWithVariants = [
+  {
+    label: 'No variant',
+    onClick: (): void => undefined
+  },
+  {
+    label: 'Primary',
+    onClick: (): void => undefined,
+    variant: 'primary'
+  },
+  {
+    label: 'Secondary',
+    onClick: (): void => undefined,
+    variant: 'secondary'
+  },
+  {
+    label: 'Success',
+    onClick: (): void => undefined,
+    variant: 'success'
+  },
+  {
+    label: 'Warning',
+    onClick: (): void => undefined,
+    variant: 'warning'
+  },
+  {
+    label: 'Error',
+    onClick: (): void => undefined,
+    variant: 'error'
+  },
+  {
+    label: 'Info',
+    onClick: (): void => undefined,
+    variant: 'info'
+  },
+  {
+    label: 'Pending',
+    onClick: (): void => undefined,
+    variant: 'pending'
+  }
+];
+
+const actionsWithSecondaryLabel = [
+  {
+    Icon: EditIcon,
+    label: 'Edit',
+    onClick: (): void => undefined
+  },
+  {
+    Icon: CopyIcon,
+    label: 'Duplicate',
+    onClick: (): void => undefined,
+    secondaryLabel:
+      'This is a secondary label that the purpose is to give a small description about an action'
+  },
+  {
+    Icon: DeleteIcon,
+    label: 'Delete',
+    onClick: (): void => undefined
+  }
+];
+
 export default {
   argTypes: {},
   component: ActionsList,
@@ -39,3 +101,15 @@ export const Playground = Template.bind({});
 Playground.args = {
   actions
 };
+
+export const Variants = Template.bind({});
+
+Variants.args = {
+  actions: actionsWithVariants
+};
+
+export const SecondaryLabel = Template.bind({});
+
+SecondaryLabel.args = {
+  actions: actionsWithSecondaryLabel
+};

package/src/ActionsList/index.tsx

@@ -1,35 +1,43 @@
 /* eslint-disable react/no-array-index-key */
-import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
 import {
-  SvgIconProps,
   MenuList,
   MenuItem,
   ListItemText,
   ListItemIcon,
-  Divider
+  Divider,
+  SvgIconTypeMap
 } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+import { sanitizedHTML } from '..';
+
+import { useStyles } from './ActionsList.styles';
+import { ActionVariants } from './models';
 
 interface ActionsType {
-  Icon?: (props: SvgIconProps) => JSX.Element;
+  Icon?: OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
+    muiName: string;
+  };
   label: string;
   onClick?: (e?) => void;
+  secondaryLabel?: string;
+  variant?: ActionVariants;
 }
 
+export enum ActionsListActionDivider {
+  divider = 'divider'
+}
+export type ActionsListActions = Array<ActionsType | ActionsListActionDivider>;
+
 interface Props {
-  actions: Array<ActionsType | 'divider'>;
+  actions: ActionsListActions;
   className?: string;
   listItemClassName?: string;
 }
 
-const useStyles = makeStyles()({
-  list: {
-    maxWidth: '100%'
-  }
-});
-
 const ActionsList = ({
   className,
   listItemClassName,
@@ -41,22 +49,35 @@ const ActionsList = ({
   return (
     <MenuList className={cx(classes.list, className)}>
       {actions?.map((action, idx) => {
-        if (equals(action, 'divider')) {
+        if (equals(action, ActionsListActionDivider.divider)) {
           return <Divider key={`divider_${idx}`} />;
         }
 
-        const { label, Icon, onClick } = action as ActionsType;
+        const { label, Icon, onClick, variant, secondaryLabel } =
+          action as ActionsType;
 
         return (
-          <MenuItem aria-label={label} id={label} key={label} onClick={onClick}>
+          <MenuItem
+            aria-label={label}
+            className={classes.item}
+            data-variant={variant}
+            id={label}
+            key={label}
+            onClick={onClick}
+          >
             {Icon && (
               <ListItemIcon>
                 <Icon fontSize="small" />
               </ListItemIcon>
             )}
-            <ListItemText className={listItemClassName}>
-              {t(label)}
-            </ListItemText>
+            <ListItemText
+              className={listItemClassName}
+              primary={t(label)}
+              secondary={
+                secondaryLabel &&
+                sanitizedHTML({ initialContent: t(secondaryLabel) })
+              }
+            />
           </MenuItem>
         );
       })}

package/src/ActionsList/models.ts

@@ -0,0 +1,8 @@
+export type ActionVariants =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'pending';

package/src/Button/Icon/index.tsx

@@ -11,6 +11,9 @@ import { getNormalizedId } from '../../utils';
 const useStyles = makeStyles()((theme) => ({
   button: {
     padding: theme.spacing(0.25)
+  },
+  tooltip: {
+    background: theme.palette.background.tooltip
   }
 }));
 
@@ -19,6 +22,7 @@ type Props = {
   className?: string;
   onClick: (event) => void;
   title?: string;
+  tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'
     | 'left'
@@ -39,12 +43,17 @@ const IconButton = ({
   ariaLabel,
   className,
   tooltipPlacement,
+  tooltipClassName,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
   return (
-    <Tooltip placement={tooltipPlacement} title={title}>
+    <Tooltip
+      classes={{ tooltip: cx(classes.tooltip, tooltipClassName) }}
+      placement={tooltipPlacement}
+      title={title}
+    >
       <span aria-label={undefined}>
         <MuiIconButton
           aria-label={ariaLabel}

package/src/Checkbox/Checkbox.tsx

@@ -2,17 +2,12 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  Box,
-  Typography
-} from '@mui/material';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
+import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 interface StyleProps {
-  disabled: boolean;
   hasIcon: boolean;
   labelPlacement: LabelPlacement;
 }
@@ -26,7 +21,13 @@ const getLabelSpacing = (labelPlacement, theme): string => {
 };
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { disabled, hasIcon, labelPlacement }) => ({
+  (theme, { hasIcon, labelPlacement }) => ({
+    checkbox: {
+      '&.Mui-checked': {
+        color: theme.palette.primary.main
+      },
+      color: theme.palette.primary.main
+    },
     container: hasIcon
       ? {
           alignItems: 'center',
@@ -40,13 +41,8 @@ const useStyles = makeStyles<StyleProps>()(
       fontSize: theme.spacing(10)
     },
     label: {
-      color: disabled
-        ? theme.palette.action.disabled
-        : theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: equals(labelPlacement, 'top')
-        ? theme.typography.fontWeightBold
-        : theme.typography.fontWeightMedium,
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: getLabelSpacing(labelPlacement, theme)
     }
   })
@@ -60,6 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 
@@ -71,10 +68,10 @@ const Checkbox = ({
   className,
   disabled = false,
   labelPlacement = 'end',
-  dataTestId
+  dataTestId,
+  labelProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
-    disabled,
     hasIcon: !!Icon,
     labelPlacement
   });
@@ -86,6 +83,7 @@ const Checkbox = ({
         control={
           <MuiCheckbox
             checked={checked}
+            className={classes.checkbox}
             color="primary"
             disabled={disabled}
             id={label}
@@ -96,7 +94,11 @@ const Checkbox = ({
         }
         data-testid={dataTestId || ''}
         key={label}
-        label={<Typography className={classes.label}>{label}</Typography>}
+        label={
+          <Typography classes={{ root: classes.label }} {...labelProps}>
+            {label}
+          </Typography>
+        }
         labelPlacement={labelPlacement}
         sx={{ margin: 0, padding: 0 }}
       />

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,15 +1,19 @@
 import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormGroup } from '@mui/material';
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
 interface Props {
+  className?: string;
   dataTestId?: string;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
+  formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;
@@ -34,27 +38,32 @@ const CheckboxGroup = ({
   onChange,
   labelPlacement = 'end',
   disabled = false,
-  dataTestId
+  dataTestId,
+  className,
+  labelProps,
+  formGroupProps
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const row = !equals(direction, 'vertical');
 
   return (
     <FormGroup
-      className={classes.container}
+      classes={{ root: classes.container }}
       data-testid={dataTestId || ''}
       row={row}
+      {...formGroupProps}
     >
       {options.map((value) => {
         return (
           <Checkbox
             checked={includes(value, values)}
-            className={classes.checkbox}
+            className={cx(classes.checkbox, className)}
             disabled={disabled}
             key={value}
             label={value}
             labelPlacement={labelPlacement}
+            labelProps={labelProps}
             onChange={onChange}
           />
         );

package/src/Dashboard/Dashboard.styles.ts

@@ -69,7 +69,14 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
 export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
   (theme, { hasHeader }) => ({
     widgetContainer: {
+      '&[data-padding="false"]': {
+        padding: 0
+      },
+      background: theme.palette.background.widget,
+      border: 'none',
+      borderRadius: theme.spacing(1),
       height: '100%',
+      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
@@ -79,12 +86,23 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      cursor: 'move',
-      padding: theme.spacing(0.5, 2)
+      '&[data-canMove="false"]': {
+        cursor: 'default'
+      },
+      '&[data-canMove="true"]': {
+        cursor: 'move'
+      },
+      padding: theme.spacing(0.5, 2),
+      position: 'relative'
+    },
+    widgetHeaderDraggable: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 2) : theme.spacing(1, 2)
+      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
     }
   })
 );

package/src/Dashboard/Item.tsx

@@ -6,15 +6,16 @@ import {
   ReactElement
 } from 'react';
 
-import { isNil } from 'ramda';
+import { isNil, prop } from 'ramda';
 
-import { Card } from '@mui/material';
+import { Card, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '../utils';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
+  canMove?: boolean;
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
@@ -37,13 +38,15 @@ const Item = forwardRef(
       onMouseUp,
       onTouchEnd,
       id,
-      disablePadding = false
+      disablePadding = false,
+      canMove = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
     const hasHeader = !isNil(header);
 
     const { classes, cx } = useDashboardItemStyles({ hasHeader });
+    const theme = useTheme();
 
     const listeners = {
       onMouseDown,
@@ -56,18 +59,25 @@ const Item = forwardRef(
     return useMemoComponent({
       Component: (
         <div
+          {...cardContainerListeners}
           className={className}
           ref={ref}
-          style={style}
-          {...cardContainerListeners}
+          style={{
+            ...style,
+            width: `calc(${prop('width', style) || '0px'} - 12px)`
+          }}
         >
-          <Card className={classes.widgetContainer}>
+          <Card
+            className={classes.widgetContainer}
+            data-padding={!disablePadding}
+          >
             {header && (
-              <div
-                {...listeners}
-                className={classes.widgetHeader}
-                data-testid={`${id}_move_panel`}
-              >
+              <div className={classes.widgetHeader} data-canMove={canMove}>
+                <div
+                  {...listeners}
+                  className={classes.widgetHeaderDraggable}
+                  data-testid={`${id}_move_panel`}
+                />
                 {header}
               </div>
             )}
@@ -82,7 +92,7 @@ const Item = forwardRef(
           </Card>
         </div>
       ),
-      memoProps: [style, className, header]
+      memoProps: [style, className, header, theme.palette.mode, canMove]
     });
   }
 );