@centreon/ui 24.11.14 → 24.11.21

package/src/Dashboard/Grid.tsx

@@ -0,0 +1,70 @@
+import { ReactElement, useMemo } from 'react';
+
+import { scaleLinear } from '@visx/scale';
+import { Grid as VisxGrid } from '@visx/visx';
+
+import { useTheme } from '@mui/material';
+
+import { useMemoComponent } from '../utils';
+
+import { maxColumns, rowHeight } from './utils';
+
+interface Props {
+  columns: number;
+  height: number;
+  width: number;
+}
+
+const Grid = ({ width, height, columns }: Props): ReactElement => {
+  const theme = useTheme();
+
+  const xScale = useMemo(
+    () =>
+      scaleLinear({
+        domain: [0, maxColumns],
+        range: [0, width]
+      }),
+    [width]
+  );
+
+  const numberOfRows = Math.floor(height / (rowHeight + 16));
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear({
+        domain: [0, numberOfRows],
+        range: [0, height]
+      }),
+    [height]
+  );
+
+  const tick = maxColumns / columns;
+
+  const xTickValues = Array(columns)
+    .fill(0)
+    .map((_, index) => index * tick);
+
+  const yTickValues = Array(numberOfRows)
+    .fill(0)
+    .map((_, index) => index);
+
+  return useMemoComponent({
+    Component: (
+      <svg style={{ height, position: 'absolute', width }}>
+        <VisxGrid.Grid
+          columnTickValues={xTickValues}
+          rowTickValues={yTickValues}
+          height={height}
+          yScale={yScale}
+          xScale={xScale}
+          stroke={theme.palette.divider}
+          top={-10}
+          width={width}
+        />
+      </svg>
+    ),
+    memoProps: [height, width, columns]
+  });
+};
+
+export default Grid;

package/src/Dashboard/Item.tsx

@@ -0,0 +1,151 @@
+import {
+  CSSProperties,
+  ForwardedRef,
+  MouseEvent,
+  ReactElement,
+  forwardRef,
+  useEffect,
+  useMemo
+} from 'react';
+
+import { useAtomValue } from 'jotai';
+import { equals, isNil, prop } from 'ramda';
+
+import { Card, useTheme } from '@mui/material';
+
+import LoadingSkeleton from '../LoadingSkeleton';
+import { useMemoComponent, useViewportIntersection } from '../utils';
+
+import { useDashboardItemStyles } from './Dashboard.styles';
+import { isResizingItemAtom } from './atoms';
+
+interface DashboardItemProps {
+  additionalMemoProps?: Array<unknown>;
+  canMove?: boolean;
+  children: ReactElement;
+  className?: string;
+  disablePadding?: boolean;
+  header?: ReactElement;
+  id: string;
+  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
+  onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
+  onTouchEnd?: (e) => void;
+  style?: CSSProperties;
+}
+
+const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
+  (
+    {
+      children,
+      style,
+      className,
+      header,
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd,
+      id,
+      disablePadding = false,
+      canMove = false,
+      additionalMemoProps = []
+    }: DashboardItemProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ): ReactElement => {
+    const { isInViewport, setElement } = useViewportIntersection({
+      rootMargin: '140px 0px 140px 0px'
+    });
+    const hasHeader = !isNil(header);
+
+    const { classes, cx } = useDashboardItemStyles({ hasHeader });
+    const theme = useTheme();
+
+    const isResizingItem = useAtomValue(isResizingItemAtom);
+
+    const isResizing = useMemo(
+      () => equals(id, isResizingItem),
+      [isResizingItem, id]
+    );
+
+    const sanitizedReactGridLayoutClassName = useMemo(
+      () => (isResizing ? className : className?.replace(' resizing ', '')),
+      [className, isResizing]
+    );
+
+    const listeners = {
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd
+    };
+
+    const cardContainerListeners = !hasHeader ? listeners : {};
+
+    useEffect(() => {
+      if (isNil(ref)) {
+        return;
+      }
+
+      setElement(ref.current);
+    }, [ref]);
+
+    return useMemoComponent({
+      Component: (
+        <div
+          {...cardContainerListeners}
+          className={sanitizedReactGridLayoutClassName}
+          ref={ref}
+          style={{
+            ...style,
+            width: `calc(${prop('width', style) || '0px'} - 12px)`
+          }}
+        >
+          <Card
+            className={classes.widgetContainer}
+            data-padding={!disablePadding}
+          >
+            {header && (
+              <div className={classes.widgetHeader} data-canMove={canMove}>
+                {canMove && (
+                  <div
+                    {...listeners}
+                    className={classes.widgetHeaderDraggable}
+                    data-testid={`${id}_move_panel`}
+                  />
+                )}
+                {header}
+              </div>
+            )}
+            <div
+              className={cx(
+                classes.widgetContent,
+                !disablePadding && classes.widgetPadding
+              )}
+            >
+              {!isInViewport ? (
+                <LoadingSkeleton
+                  animation={false}
+                  data-widget-skeleton={id}
+                  height="100%"
+                  width="100%"
+                />
+              ) : (
+                children
+              )}
+            </div>
+          </Card>
+        </div>
+      ),
+      memoProps: isInViewport
+        ? [
+            style,
+            className,
+            header,
+            theme.palette.mode,
+            canMove,
+            isInViewport,
+            ...additionalMemoProps
+          ]
+        : [isInViewport, theme.palette.mode, style]
+    });
+  }
+);
+
+export default Item;

package/src/Dashboard/Layout.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useSetAtom } from 'jotai';
+import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+
+import { ParentSize, useMemoComponent } from '..';
+
+import { Box } from '@mui/material';
+import { useDashboardLayoutStyles } from './Dashboard.styles';
+import Grid from './Grid';
+import { isResizingItemAtom } from './atoms';
+import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+
+const ReactGridLayout = WidthProvider(GridLayout);
+
+interface DashboardLayoutProps<T> {
+  additionalMemoProps?: Array<unknown>;
+  changeLayout?: (newLayout: Array<Layout>) => void;
+  children: Array<JSX.Element>;
+  displayGrid?: boolean;
+  isStatic?: boolean;
+  layout: Array<T>;
+}
+
+const bottom = (layout: Array<Layout>): number => {
+  let max = 0;
+  let bottomY = 0;
+
+  layout.forEach((panel) => {
+    bottomY = panel.y + panel.h;
+    if (bottomY > max) max = bottomY;
+  });
+
+  return max;
+};
+
+const DashboardLayout = <T extends Layout>({
+  children,
+  changeLayout,
+  displayGrid,
+  layout,
+  isStatic = false,
+  additionalMemoProps = []
+}: DashboardLayoutProps<T>): JSX.Element => {
+  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const { classes } = useDashboardLayoutStyles(isStatic);
+
+  const [columns, setColumns] = useState(getColumnsFromScreenSize());
+
+  const setIsResizingItem = useSetAtom(isResizingItemAtom);
+
+  const resize = (): void => {
+    setColumns(getColumnsFromScreenSize());
+  };
+
+  const startResize = useCallback((_, _e, newItem: T) => {
+    setIsResizingItem(newItem.i);
+  }, []);
+
+  const stopResize = useCallback(() => {
+    setIsResizingItem(null);
+  }, []);
+
+  const containerHeight =
+    useMemo((): number | undefined => {
+      const nbRow = bottom(getLayout(layout));
+      const containerPaddingY = 4;
+      return nbRow * rowHeight + (nbRow - 1) * 20 + containerPaddingY * 2;
+    }, [layout, rowHeight]) ?? 0;
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+
+    return (): void => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return useMemoComponent({
+    Component: (
+      <Box
+        ref={dashboardContainerRef}
+        sx={{ overflowY: 'auto', overflowX: 'hidden' }}
+      >
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <Box className={classes.container}>
+              {displayGrid && (
+                <Grid
+                  columns={columns}
+                  height={containerHeight > height ? containerHeight : height}
+                  width={width}
+                />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
+              >
+                {children}
+              </ReactGridLayout>
+            </Box>
+          )}
+        </ParentSize>
+      </Box>
+    ),
+    memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
+  });
+};
+
+export default DashboardLayout;

package/src/Dashboard/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isResizingItemAtom = atom<string | null>(null);

package/src/Dashboard/index.tsx

@@ -0,0 +1,9 @@
+import Item from './Item';
+import Layout from './Layout';
+
+export * from './utils';
+
+export const DashboardLayout = {
+  Item,
+  Layout
+};

package/src/Dashboard/utils.ts

@@ -0,0 +1,28 @@
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+export const maxColumns = 12;
+
+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,33 @@
-import DialogContentText from '@mui/material/DialogContentText';
+import { ButtonProps, DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
-type Props = DialogProps & { labelMessage?: string | null };
+type Props = DialogProps & {
+  children?: JSX.Element;
+  labelMessage?: string | null;
+  labelSecondMessage?: string | null;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
+};
 
-const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
-  <Dialog {...rest}>
-    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
+const Confirm = ({
+  labelMessage,
+  labelSecondMessage,
+  children,
+  restCancelButtonProps,
+  restConfirmButtonProps,
+  ...rest
+}: Props): JSX.Element => (
+  <Dialog
+    restCancelButtonProps={restCancelButtonProps}
+    restConfirmButtonProps={restConfirmButtonProps}
+    {...rest}
+  >
+    <DialogContentText>
+      {labelMessage && <Typography>{labelMessage}</Typography>}
+      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
+      {children}
+    </DialogContentText>
   </Dialog>
 );
 

package/src/Dialog/Duplicate/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../testRenderer';
+import { fireEvent, render } from '../../../test/testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/Duplicate/index.tsx

@@ -22,7 +22,7 @@ const Duplicate = ({
   labelInput = 'Count',
   labelConfirm = 'Duplicate',
   labelTitle = 'Duplicate',
-  limit = Infinity,
+  limit = Number.POSITIVE_INFINITY,
   onConfirm,
   ...rest
 }: Props): JSX.Element => {
@@ -37,7 +37,10 @@ const Duplicate = ({
     onConfirm(event, value);
   };
 
-  const isConfirmDisabled = or(isEmpty(value), parseInt(value, 10) > limit);
+  const isConfirmDisabled = or(
+    isEmpty(value),
+    Number.parseInt(value, 10) > limit
+  );
 
   return (
     <Dialog

package/src/Dialog/UnsavedChanges/index.tsx

@@ -1,18 +1,17 @@
 import { not } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { ConfirmDialog } from '../..';
+import { Modal } from '../../components/Modal';
 
 import {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelThereAreErrorsInTheForm
 } from './translatedLabels';
 
 interface Props {
@@ -40,30 +39,32 @@ const UnsavedChangesDialog = ({
   const labelConfirm = isValidForm ? labelSave : labelResolve;
 
   const labelMessage = `${
-    isValidForm ? labelYourFormHasUnsavedChanges : labelThereAreErrorsInTheForm
-  }. ${
-    isValidForm
-      ? labelDoYouWantToQuitWithoutSaving
-      : labelDoYouWantToQuitWithoutResolving
-  }`;
+    isValidForm ? labelIfYouClickOnDiscard : labelThereAreErrorsInTheForm
+  } ${isValidForm ? '' : labelDoYouWantToQuitWithoutResolving}`;
 
   if (not(dialogOpened)) {
     return null;
   }
 
   return (
-    <ConfirmDialog
-      confirmDisabled={isSubmitting}
-      labelCancel={t(labelDiscard)}
-      labelConfirm={t(labelConfirm)}
-      labelMessage={t(labelMessage)}
-      labelTitle={t(labelTitle)}
+    <Modal
+      hasCloseButton
       open={dialogOpened}
-      submitting={isSubmitting}
-      onBackdropClick={closeDialog}
-      onCancel={discardChanges}
-      onConfirm={isValidForm ? saveChanges : closeDialog}
-    />
+      size="medium"
+      onClose={closeDialog}
+    >
+      <Modal.Header>{t(labelTitle)}</Modal.Header>
+      <Modal.Body>{t(labelMessage)}</Modal.Body>
+      <Modal.Actions
+        disabled={isSubmitting}
+        labels={{
+          cancel: t(labelDiscard),
+          confirm: t(labelConfirm)
+        }}
+        onCancel={discardChanges}
+        onConfirm={isValidForm ? saveChanges : closeDialog}
+      />
+    </Modal>
   );
 };
 

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -1,9 +1,8 @@
 export const labelDiscard = 'Discard';
 export const labelResolve = 'Resolve';
-export const labelYourFormHasUnsavedChanges = 'Your form has unsaved changes';
-export const labelThereAreErrorsInTheForm = 'There are errors in the form';
-export const labelDoYouWantToQuitWithoutSaving =
-  'Do you want to quit the form without saving the changes?';
+export const labelIfYouClickOnDiscard =
+  'If you click on Discard, your changes will not be saved.';
+export const labelThereAreErrorsInTheForm = 'There are errors in the form.';
 export const labelDoYouWantToQuitWithoutResolving =
   'Do you want to quit the form without resolving the errors?';
 export const labelDoYouWantToSaveChanges = 'Do you want to save the changes?';
@@ -14,11 +13,10 @@ export const labelSave = 'Save';
 export default {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelThereAreErrorsInTheForm
 };

package/src/Dialog/index.stories.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography, Theme } from '@mui/material';
+import { Theme, Typography } from '@mui/material';
 
 import Dialog from '.';
 

package/src/Dialog/index.tsx

@@ -4,14 +4,17 @@ import { makeStyles } from 'tss-react/mui';
 
 import {
   Button,
-  Dialog as MuiDialog,
-  DialogTitle,
-  DialogContent,
+  ButtonProps,
+  CircularProgress,
   DialogActions,
+  DialogContent,
   DialogProps,
-  CircularProgress
+  DialogTitle,
+  Dialog as MuiDialog
 } from '@mui/material';
 
+import { DataTestAttributes } from '../@types/data-attributes';
+
 interface StylesProps {
   contentWidth?: number;
 }
@@ -35,18 +38,22 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
+  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: string | null;
+  labelTitle?: ReactNode;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
-} & DialogProps;
+} & DialogProps &
+  DataTestAttributes;
 
 const Dialog = ({
   open,
@@ -65,6 +72,9 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
+  dialogConfirmButtonClassName,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -91,16 +101,25 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button color="primary" disabled={cancelDisabled} onClick={onCancel}>
+          <Button
+            color="primary"
+            data-testid="Cancel"
+            disabled={cancelDisabled}
+            onClick={onCancel}
+            {...restCancelButtonProps}
+          >
             {labelCancel}
           </Button>
         )}
         <Button
           aria-label={labelConfirm || ''}
+          className={dialogConfirmButtonClassName}
           color="primary"
+          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
+          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/FallbackPage/FallbackPage.tsx

@@ -5,19 +5,19 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from '@mui/material';
 
+import { Image } from '..';
+import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
+import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { CentreonLogo } from '../Logo/CentreonLogo';
-import NotAuthorizedTemplateBackgroundDark from '../../assets/not-authorized-template-background-dark.svg';
-import NotAuthorizedTemplateBackgroundLight from '../../assets/not-authorized-template-background-light.svg';
-import { Image } from '..';
-import { useThemeMode } from '../utils/useThemeMode';
 import { typedMemo } from '../utils/typedMemo';
+import { useThemeMode } from '../utils/useThemeMode';
 
 const useStyles = makeStyles()((theme) => ({
   logo: {
     alignSelf: 'flex-end',
     height: theme.spacing(11),
-    width: '22rem'
+    width: '239px'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <section className={classes.logo}>
+        <div className={classes.logo}>
           <CentreonLogo />
-        </section>
+        </div>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

package/src/FileDropZone/index.stories.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import { Button, Paper, Typography, Theme } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
+import { Button, Paper, Theme, Typography } from '@mui/material';
 
 import FileDropZone, {
   CustomDropZoneContentProps,