@centreon/ui 24.4.21 → 24.4.22

package/src/Dashboard/Grid.tsx

@@ -0,0 +1,70 @@
+import { useMemo, ReactElement } from 'react';
+
+import { Grid as VisxGrid } from '@visx/visx';
+import { scaleLinear } from '@visx/scale';
+
+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);
+
+  return useMemoComponent({
+    Component: (
+      <svg style={{ height, position: 'absolute', width }}>
+        <VisxGrid.GridColumns
+          height={height}
+          scale={xScale}
+          stroke={theme.palette.divider}
+          tickValues={xTickValues}
+          width={width}
+        />
+        <VisxGrid.GridRows
+          height={height}
+          scale={yScale}
+          stroke={theme.palette.divider}
+          top={-10}
+          width={width}
+        />
+      </svg>
+    ),
+    memoProps: [height, width, columns]
+  });
+};
+
+export default Grid;

package/src/Dashboard/Item.tsx

@@ -0,0 +1,100 @@
+import {
+  CSSProperties,
+  ForwardedRef,
+  forwardRef,
+  MouseEvent,
+  ReactElement
+} from 'react';
+
+import { isNil, prop } from 'ramda';
+
+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;
+  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
+    }: DashboardItemProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ): ReactElement => {
+    const hasHeader = !isNil(header);
+
+    const { classes, cx } = useDashboardItemStyles({ hasHeader });
+    const theme = useTheme();
+
+    const listeners = {
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd
+    };
+
+    const cardContainerListeners = !hasHeader ? listeners : {};
+
+    return useMemoComponent({
+      Component: (
+        <div
+          {...cardContainerListeners}
+          className={className}
+          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}>
+                <div
+                  {...listeners}
+                  className={classes.widgetHeaderDraggable}
+                  data-testid={`${id}_move_panel`}
+                />
+                {header}
+              </div>
+            )}
+            <div
+              className={cx(
+                classes.widgetContent,
+                !disablePadding && classes.widgetPadding
+              )}
+            >
+              {children}
+            </div>
+          </Card>
+        </div>
+      ),
+      memoProps: [style, className, header, theme.palette.mode, canMove]
+    });
+  }
+);
+
+export default Item;

package/src/Dashboard/Layout.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+
+import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+
+import {
+  Responsive as ResponsiveHeight,
+  ParentSize,
+  useMemoComponent
+} from '..';
+
+import { useDashboardLayoutStyles } from './Dashboard.styles';
+import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+import Grid from './Grid';
+
+const ReactGridLayout = WidthProvider(GridLayout);
+
+interface DashboardLayoutProps<T> {
+  changeLayout?: (newLayout: Array<Layout>) => void;
+  children: Array<JSX.Element>;
+  displayGrid?: boolean;
+  isStatic?: boolean;
+  layout: Array<T>;
+}
+
+const DashboardLayout = <T extends Layout>({
+  children,
+  changeLayout,
+  displayGrid,
+  layout,
+  isStatic = false
+}: DashboardLayoutProps<T>): JSX.Element => {
+  const { classes } = useDashboardLayoutStyles(isStatic);
+
+  const [columns, setColumns] = useState(getColumnsFromScreenSize());
+
+  const resize = (): void => {
+    setColumns(getColumnsFromScreenSize());
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+
+    return (): void => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return useMemoComponent({
+    Component: (
+      <ResponsiveHeight margin={40}>
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <div className={classes.container}>
+              {displayGrid && (
+                <Grid columns={columns} height={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}
+              >
+                {children}
+              </ReactGridLayout>
+            </div>
+          )}
+        </ParentSize>
+      </ResponsiveHeight>
+    ),
+    memoProps: [columns, layout, displayGrid, isStatic]
+  });
+};
+
+export default DashboardLayout;

package/src/Dashboard/index.tsx

@@ -0,0 +1,9 @@
+import Layout from './Layout';
+import Item from './Item';
+
+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';
+
+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,25 @@
-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 & {
+  children?: JSX.Element;
+  labelMessage?: string | null;
+  labelSecondMessage?: string | null;
+};
 
-const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
+const Confirm = ({
+  labelMessage,
+  labelSecondMessage,
+  children,
+  ...rest
+}: Props): JSX.Element => (
   <Dialog {...rest}>
-    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
+    <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 { render, fireEvent } from '../../../test/testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/index.tsx

@@ -12,6 +12,8 @@ import {
   CircularProgress
 } from '@mui/material';
 
+import { DataTestAttributes } from '../@types/data-attributes';
+
 interface StylesProps {
   contentWidth?: number;
 }
@@ -35,6 +37,7 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
+  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -46,7 +49,8 @@ export type Props = {
   onConfirm: (event, value?) => void;
   open: boolean;
   submitting?: boolean;
-} & DialogProps;
+} & DialogProps &
+  DataTestAttributes;
 
 const Dialog = ({
   open,
@@ -65,6 +69,7 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
+  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -91,13 +96,20 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button color="primary" disabled={cancelDisabled} onClick={onCancel}>
+          <Button
+            color="primary"
+            data-testid="Cancel"
+            disabled={cancelDisabled}
+            onClick={onCancel}
+          >
             {labelCancel}
           </Button>
         )}
         <Button
           aria-label={labelConfirm || ''}
+          className={dialogConfirmButtonClassName}
           color="primary"
+          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}

package/src/FallbackPage/FallbackPage.tsx

@@ -7,8 +7,8 @@ import { Typography } from '@mui/material';
 
 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 NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
+import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
 import { Image } from '..';
 import { useThemeMode } from '../utils/useThemeMode';
 import { typedMemo } from '../utils/typedMemo';
@@ -17,7 +17,7 @@ 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.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';
@@ -98,7 +98,9 @@ const getExtensions = cond([
   [T, identity]
 ]) as (accept: string) => Array<string>;
 
-export const transformFileListToArray = (files: FileList | null): Array<File> =>
+export const transformFileListToArray = (
+  files: FileList | null
+): Array<File> =>
   isNil(files)
     ? []
     : (Array(files.length)

package/src/Form/CollapsibleGroup.tsx

@@ -18,6 +18,7 @@ import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -50,9 +51,10 @@ const CollapsibleGroup = ({
   isCollapsible,
   group,
   hasGroupTitle,
-  defaultIsOpen = false
+  defaultIsOpen = false,
+  className
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -61,6 +63,8 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
+  const containerClassName = className || '';
+
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -72,13 +76,13 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={classes.groupTitleContainer}
+          className={cx(classes.groupTitleContainer, containerClassName)}
           onClick={toggle}
         >
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={classes.groupTitleContainer}>
+        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
           {containerComponentChildren}
         </Box>
       ),
@@ -91,7 +95,13 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography variant="h5">{t(group?.name as string)}</Typography>
+            <Typography
+              className="groupText"
+              variant="h5"
+              {...group?.titleAttributes}
+            >
+              {t(group?.name as string)}
+            </Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/Form.cypress.spec.tsx

@@ -0,0 +1,133 @@
+import { object } from 'yup';
+import { faker } from '@faker-js/faker';
+import { useFormikContext } from 'formik';
+
+import { Typography } from '@mui/material';
+
+import { Button } from '../components';
+
+import { Form } from './Form';
+import { InputType } from './Inputs/models';
+
+faker.seed(42);
+
+const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
+  const { values } = useFormikContext();
+  const add = (): void => {
+    addItem({
+      alias: faker.company.name(),
+      id: values.list.length,
+      name: faker.person.firstName()
+    });
+  };
+
+  return (
+    <Button variant="ghost" onClick={add}>
+      Add item
+    </Button>
+  );
+};
+
+const SortContent = ({
+  name,
+  alias
+}: {
+  alias: string;
+  name: string;
+}): JSX.Element => (
+  <Typography>
+    {name} ({alias})
+  </Typography>
+);
+
+const initializeFormList = (): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'list',
+            group: '',
+            label: '',
+            list: {
+              AddItem,
+              SortContent,
+              addItemLabel: 'Add an item to the list',
+              itemProps: ['id', 'name', 'alias'],
+              sortLabel: 'Sort items'
+            },
+            type: InputType.List
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+describe('Form list', () => {
+  beforeEach(initializeFormList);
+
+  it('adds an element to the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('sorts elements in the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.moveSortableElementUsingAriaLabel({
+      ariaLabel: 'sort-0',
+      direction: 'down'
+    });
+
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('removes an element from the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Akeem (Quigley LLC)').should('be.visible');
+
+    cy.findByLabelText('delete-0').click();
+
+    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Form/{index.stories.tsx → Form.stories.tsx}

@@ -8,8 +8,7 @@ import {
   basicFormValidationSchema,
   CustomButton
 } from './storiesData';
-
-import Form, { GroupDirection } from '.';
+import { Form, GroupDirection } from './Form';
 
 export default { title: 'Form' };
 
@@ -72,7 +71,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups}
+      groups={basicFormGroups.filter((group) => group.order !== 3)}
     />
   </Paper>
 );

package/src/Form/Form.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
+  }
+}));
+
+export { useStyles };