@centreon/ui 23.10.24-MON-19323-dashboard-page-header-component.1 → 23.10.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.24-MON-19323-dashboard-page-header-component.1",
+  "version": "23.10.24",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -8,7 +8,6 @@
     "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",
-    "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
     "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
@@ -55,23 +54,18 @@
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
     "@storybook/builder-vite": "^7.0.9",
-    "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
@@ -89,7 +83,6 @@
     "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
     "storybook-dark-mode": "^3.0.0",
-    "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-turbosnap": "^1.0.2"

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,107 @@
+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';
+
+export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
+
+interface StyleProps {
+  disabled: boolean;
+  hasIcon: boolean;
+  labelPlacement: LabelPlacement;
+}
+
+const getLabelSpacing = (labelPlacement, theme): string => {
+  return cond([
+    [equals('top'), always(theme.spacing(0, 0, 0.5))],
+    [equals('end'), always(theme.spacing(0, 0, 0, 0.5))],
+    [T, always(0)]
+  ])(labelPlacement);
+};
+
+const useStyles = makeStyles<StyleProps>()(
+  (theme, { disabled, hasIcon, labelPlacement }) => ({
+    container: hasIcon
+      ? {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          minHeight: theme.spacing(11)
+        }
+      : {},
+    icon: {
+      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,
+      padding: getLabelSpacing(labelPlacement, theme)
+    }
+  })
+);
+
+interface Props {
+  Icon?: SvgIconComponent;
+  checked: boolean;
+  className?: string;
+  dataTestId?: string;
+  disabled?: boolean;
+  label: string;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+}
+
+const Checkbox = ({
+  Icon,
+  checked,
+  label,
+  onChange,
+  className,
+  disabled = false,
+  labelPlacement = 'end',
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({
+    disabled,
+    hasIcon: !!Icon,
+    labelPlacement
+  });
+
+  return (
+    <Box className={cx(classes.container, className)}>
+      {Icon && <Icon className={classes.icon} />}
+      <FormControlLabel
+        control={
+          <MuiCheckbox
+            checked={checked}
+            color="primary"
+            disabled={disabled}
+            id={label}
+            size="small"
+            sx={{ padding: 0 }}
+            onChange={onChange}
+          />
+        }
+        data-testid={dataTestId || ''}
+        key={label}
+        label={<Typography className={classes.label}>{label}</Typography>}
+        labelPlacement={labelPlacement}
+        sx={{ margin: 0, padding: 0 }}
+      />
+    </Box>
+  );
+};
+
+export default Checkbox;

package/src/Checkbox/CheckboxGroup/index.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import CheckboxGroup from '.';
+
+const options = ['ok', 'warning', 'critical', 'unknown'];
+
+const values = ['ok', 'critical'];
+
+export default {
+  argTypes: {},
+  component: CheckboxGroup,
+  title: 'Checkbox/Multi'
+} as ComponentMeta<typeof CheckboxGroup>;
+
+const Template: ComponentStory<typeof CheckboxGroup> = (args) => (
+  <CheckboxGroup {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  options,
+  values
+};
+
+export const Horizontal = Template.bind({});
+
+Horizontal.args = {
+  direction: 'horizontal',
+  options,
+  values
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  direction: 'horizontal',
+  labelPlacement: 'top',
+  options,
+  values
+};

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -0,0 +1,66 @@
+import { equals, includes } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { FormGroup } from '@mui/material';
+
+import Checkbox, { LabelPlacement } from '../Checkbox';
+
+interface Props {
+  dataTestId?: string;
+  direction?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+  options: Array<string>;
+  values: Array<string>;
+}
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    display: 'flex',
+    justifyContent: 'center',
+    minWidth: theme.spacing(10)
+  },
+  container: {
+    display: 'flex',
+    gap: 1
+  }
+}));
+
+const CheckboxGroup = ({
+  options,
+  values,
+  direction = 'vertical',
+  onChange,
+  labelPlacement = 'end',
+  disabled = false,
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const row = !equals(direction, 'vertical');
+
+  return (
+    <FormGroup
+      className={classes.container}
+      data-testid={dataTestId || ''}
+      row={row}
+    >
+      {options.map((value) => {
+        return (
+          <Checkbox
+            checked={includes(value, values)}
+            className={classes.checkbox}
+            disabled={disabled}
+            key={value}
+            label={value}
+            labelPlacement={labelPlacement}
+            onChange={onChange}
+          />
+        );
+      })}
+    </FormGroup>
+  );
+};
+
+export default CheckboxGroup;

package/src/Checkbox/index.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import MailIcon from '@mui/icons-material/MailOutline';
+
+import Checkbox from './Checkbox';
+
+export default {
+  argTypes: {},
+  component: Checkbox,
+  title: 'Checkbox/Single'
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  checked: true,
+  label: 'Up'
+};
+
+export const WithIcon = Template.bind({});
+
+WithIcon.args = {
+  Icon: MailIcon,
+  checked: true,
+  label: 'Mail',
+  labelPlacement: 'end'
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  checked: true,
+  label: 'Down',
+  labelPlacement: 'top'
+};

package/src/Checkbox/index.tsx

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup';
+export { default as Checkbox } from './Checkbox';

package/src/Dashboard/Dashboard.styles.ts

@@ -2,67 +2,69 @@ import { makeStyles } from 'tss-react/mui';
 
 import { alpha } from '@mui/material';
 
-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 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 useDashboardItemStyles = makeStyles()((theme) => ({
   widgetContainer: {

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 import { Layout } from 'react-grid-layout';
 
@@ -60,18 +62,18 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: JSX.Element;
+  header?: ReactElement;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): JSX.Element => (
+const Header = (): ReactElement => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
+}: DashboardTemplateProps): ReactElement => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
       <DashboardLayout.Item header={header} key={i}>

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from 'react';
+import { useMemo, ReactElement } 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;
-  key: string;
+  id: 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
+      onTouchEnd,
+      id
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -55,14 +55,17 @@ const Item = forwardRef(
       Component: (
         <div
           className={className}
-          key={key}
           ref={ref}
           style={style}
           {...cardContainerListeners}
         >
           <Card className={classes.widgetContainer}>
             {header && (
-              <div {...listeners} className={classes.widgetHeader}>
+              <div
+                {...listeners}
+                className={classes.widgetHeader}
+                data-testid={`${id}_move_panel`}
+              >
                 {header}
               </div>
             )}
@@ -70,7 +73,7 @@ const Item = forwardRef(
           </Card>
         </div>
       ),
-      memoProps: [key, style, className, header]
+      memoProps: [style, className, header]
     });
   }
 );

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -14,7 +14,7 @@ const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
+  children: Array<ReactElement>;
   displayGrid?: boolean;
   layout: Array<T>;
 }
@@ -24,7 +24,7 @@ const Layout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout
-}: DashboardLayoutProps<T>): JSX.Element => {
+}: DashboardLayoutProps<T>): ReactElement => {
   const { classes } = useDashboardLayoutStyles();
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
     Component: (
       <ResponsiveHeight>
         <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
+          {({ width, height }): ReactElement => (
             <div className={classes.container}>
               {displayGrid && (
                 <Grid columns={columns} height={height} width={width} />

package/src/Dashboard/utils.ts

@@ -1,28 +1,28 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

package/src/Dialog/Confirm/index.tsx

@@ -1,12 +1,22 @@
-import DialogContentText from '@mui/material/DialogContentText';
+import { DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
-type Props = DialogProps & { labelMessage?: string | null };
+type Props = DialogProps & {
+  labelMessage?: string | null;
+  labelSecondMessage?: string | null;
+};
 
-const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
+const Confirm = ({
+  labelMessage,
+  labelSecondMessage,
+  ...rest
+}: Props): JSX.Element => (
   <Dialog {...rest}>
-    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
+    <DialogContentText>
+      {labelMessage && <Typography>{labelMessage}</Typography>}
+      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
+    </DialogContentText>
   </Dialog>
 );
 

package/src/Dialog/index.tsx

@@ -35,6 +35,7 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
+  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -65,6 +66,7 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
+  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -97,6 +99,7 @@ const Dialog = ({
         )}
         <Button
           aria-label={labelConfirm || ''}
+          className={dialogConfirmButtonClassName}
           color="primary"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}