@centreon/ui 26.3.4 → 26.3.6

package/src/Dashboard/Item.tsx

@@ -1,23 +1,23 @@
+import { Card, useTheme } from '@mui/material';
+
+import { useAtomValue } from 'jotai';
+import { equals, isNil, omit, type } from 'ramda';
 import {
-  CSSProperties,
-  ForwardedRef,
-  MouseEvent,
-  ReactElement,
+  type CSSProperties,
+  type ForwardedRef,
   forwardRef,
+  type MouseEvent,
+  type ReactElement,
   useEffect,
   useMemo
 } from 'react';
 
-import { useAtomValue } from 'jotai';
-import { equals, isNil, omit, type } from 'ramda';
-
-import { Card, useTheme } from '@mui/material';
-import LoadingSkeleton from '../LoadingSkeleton';
 import ExpandableContainer from '../components/ExpandableContainer';
-import { Parameters } from '../components/ExpandableContainer/models';
+import type { Parameters } from '../components/ExpandableContainer/models';
+import LoadingSkeleton from '../LoadingSkeleton';
 import { useMemoComponent, useViewportIntersection } from '../utils';
-import { useDashboardItemStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
+import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
@@ -84,11 +84,11 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
       }
 
       setElement(ref.current);
-    }, [ref]);
+    }, [ref, setElement]);
 
     const newTransform =
       style?.transform &&
-      `translate3d(${style.transform.match(/translate\(([a-z0-9\ \,\-]+)\)/)[1]}, 0px)`;
+      `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)[1]}, 0px)`;
 
     return useMemoComponent({
       Component: (
@@ -108,15 +108,15 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
               const childrenHeader = equals(type(header), 'Function')
                 ? (header as (params: Parameters) => ReactElement)({
                     isExpanded,
+                    key,
                     label,
                     ref,
-                    key,
                     ...rest
                   })
                 : header;
 
               return (
-                <div key={key} className={classes.widgetSubContainer}>
+                <div className={classes.widgetSubContainer} key={key}>
                   <Card
                     className={classes.widgetContainer}
                     data-padding={!disablePadding}

package/src/Dashboard/Layout.tsx

@@ -1,13 +1,12 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
 
 import { useSetAtom } from 'jotai';
-import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import GridLayout, { type Layout, WidthProvider } from 'react-grid-layout';
 
 import { ParentSize, useMemoComponent } from '..';
-
-import { Box } from '@mui/material';
-import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
+import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 import 'react-grid-layout/css/styles.css';
 
@@ -52,13 +51,16 @@ const DashboardLayout = <T extends Layout>({
     setColumns(getColumnsFromScreenSize());
   };
 
-  const startResize = useCallback((_, _e, newItem: T) => {
-    setIsResizingItem(newItem.i);
-  }, []);
+  const startResize = useCallback(
+    (_, _e, newItem: T) => {
+      setIsResizingItem(newItem.i);
+    },
+    [setIsResizingItem]
+  );
 
   const stopResize = useCallback(() => {
     setIsResizingItem(null);
-  }, []);
+  }, [setIsResizingItem]);
 
   useEffect(() => {
     window.addEventListener('resize', resize);
@@ -66,13 +68,13 @@ const DashboardLayout = <T extends Layout>({
     return (): void => {
       window.removeEventListener('resize', resize);
     };
-  }, []);
+  }, [resize]);
 
   return useMemoComponent({
     Component: (
       <Box
         ref={dashboardContainerRef}
-        sx={{ overflowY: 'auto', overflowX: 'hidden' }}
+        sx={{ overflowX: 'hidden', overflowY: 'auto' }}
       >
         <ParentSize>
           {({ width }): JSX.Element => (
@@ -81,13 +83,13 @@ const DashboardLayout = <T extends Layout>({
                 cols={columns}
                 layout={getLayout(layout)}
                 margin={[12, 12]}
-                resizeHandles={['s', 'e', 'se', 'sw', 'w']}
-                rowHeight={rowHeight}
-                width={width}
                 onLayoutChange={changeLayout}
                 onResizeStart={startResize}
                 onResizeStop={stopResize}
                 resizeHandle={Handle}
+                resizeHandles={['s', 'e', 'se', 'sw', 'w']}
+                rowHeight={rowHeight}
+                width={width}
               >
                 {children}
               </ReactGridLayout>

package/src/Dashboard/utils.ts

@@ -1,5 +1,5 @@
 import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
+import type { Layout } from 'react-grid-layout';
 
 const minColumns = 1;
 const breakpoint = 768;

package/src/Dialog/Confirm/index.stories.tsx

@@ -4,10 +4,10 @@ export default { title: 'Dialog/Confirm' };
 
 export const normal = (): JSX.Element => (
   <ConfirmDialog
-    open
     labelMessage="Your progress will not be saved."
     labelTitle="Do you want to confirm action ?"
     onCancel={(): void => undefined}
     onConfirm={(): void => undefined}
+    open
   />
 );

package/src/Dialog/Confirm/index.tsx

@@ -1,11 +1,11 @@
 import {
-  ButtonProps,
+  type ButtonProps,
   DialogContentText,
-  DialogContentTextProps,
+  type DialogContentTextProps,
   Typography
 } from '@mui/material';
 
-import Dialog, { Props as DialogProps } from '..';
+import Dialog, { type Props as DialogProps } from '..';
 
 type Props = DialogProps & {
   children?: JSX.Element;

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

@@ -4,26 +4,26 @@ export default { title: 'Dialog/Duplicate' };
 
 export const normal = (): JSX.Element => (
   <DuplicateDialog
-    open
     onCancel={(): void => undefined}
     onConfirm={(): void => undefined}
+    open
   />
 );
 
 export const confirmDisabled = (): JSX.Element => (
   <DuplicateDialog
     confirmDisabled
-    open
     onCancel={(): void => undefined}
     onConfirm={(): void => undefined}
+    open
   />
 );
 
 export const withLimitNumber = (): JSX.Element => (
   <DuplicateDialog
-    open
     limit={10}
     onCancel={(): void => undefined}
     onConfirm={(): void => undefined}
+    open
   />
 );

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

@@ -1,91 +1,91 @@
-import { fireEvent, render } from '../../../test/testRenderer';
-
-import DialogDuplicate from '.';
-
-describe('DialogDuplicate', () => {
-  it('duplicates by 1 by default', () => {
-    const mockConfirm = jest.fn();
-
-    const { getByText } = render(
-      <DialogDuplicate
-        open
-        labelCancel="cancel"
-        labelConfirm="confirm"
-        labelInput="Duplications"
-        labelTitle="title"
-        onCancel={jest.fn()}
-        onConfirm={mockConfirm}
-      />
-    );
-
-    fireEvent.click(getByText('confirm'));
-
-    expect(mockConfirm).toBeCalledWith(expect.anything(), 1);
-  });
-
-  it('duplicates by the given number', () => {
-    const mockConfirm = jest.fn();
-
-    const { getByDisplayValue, getByText } = render(
-      <DialogDuplicate
-        open
-        labelCancel="cancel"
-        labelConfirm="confirm"
-        labelInput="Duplications"
-        labelTitle="title"
-        onCancel={jest.fn()}
-        onConfirm={mockConfirm}
-      />
-    );
-
-    const input = getByDisplayValue('1');
-    fireEvent.change(input, { target: { value: '3' } });
-
-    fireEvent.click(getByText('confirm'));
-
-    expect(mockConfirm).toBeCalledWith(expect.anything(), '3');
-  });
-  it('disables the confirm button if no number was giving', () => {
-    const mockConfirm = jest.fn();
-
-    const { getByDisplayValue, getByText } = render(
-      <DialogDuplicate
-        open
-        labelCancel="cancel"
-        labelConfirm="confirm"
-        labelInput="Duplications"
-        labelTitle="title"
-        onCancel={jest.fn()}
-        onConfirm={mockConfirm}
-      />
-    );
-
-    const input = getByDisplayValue('1');
-    fireEvent.change(input, { target: { value: '' } });
-
-    expect(getByText('confirm')).toBeDisabled();
-  });
-  it('disables the confirm button if the given number is more than the limit', () => {
-    const mockConfirm = jest.fn();
-
-    const limit = 10;
-
-    const { getByDisplayValue, getByText } = render(
-      <DialogDuplicate
-        open
-        labelCancel="cancel"
-        labelConfirm="confirm"
-        labelInput="Duplications"
-        labelTitle="title"
-        limit={limit}
-        onCancel={jest.fn()}
-        onConfirm={mockConfirm}
-      />
-    );
-
-    const input = getByDisplayValue('1');
-    fireEvent.change(input, { target: { value: limit + 1 } });
-
-    expect(getByText('confirm')).toBeDisabled();
-  });
+import { fireEvent, render } from "../../../test/testRenderer";
+
+import DialogDuplicate from ".";
+
+describe("DialogDuplicate", () => {
+	it("duplicates by 1 by default", () => {
+		const mockConfirm = jest.fn();
+
+		const { getByText } = render(
+			<DialogDuplicate
+				open
+				labelCancel="cancel"
+				labelConfirm="confirm"
+				labelInput="Duplications"
+				labelTitle="title"
+				onCancel={jest.fn()}
+				onConfirm={mockConfirm}
+			/>,
+		);
+
+		fireEvent.click(getByText("confirm"));
+
+		expect(mockConfirm).toBeCalledWith(expect.anything(), 1);
+	});
+
+	it("duplicates by the given number", () => {
+		const mockConfirm = jest.fn();
+
+		const { getByDisplayValue, getByText } = render(
+			<DialogDuplicate
+				open
+				labelCancel="cancel"
+				labelConfirm="confirm"
+				labelInput="Duplications"
+				labelTitle="title"
+				onCancel={jest.fn()}
+				onConfirm={mockConfirm}
+			/>,
+		);
+
+		const input = getByDisplayValue("1");
+		fireEvent.change(input, { target: { value: "3" } });
+
+		fireEvent.click(getByText("confirm"));
+
+		expect(mockConfirm).toBeCalledWith(expect.anything(), "3");
+	});
+	it("disables the confirm button if no number was giving", () => {
+		const mockConfirm = jest.fn();
+
+		const { getByDisplayValue, getByText } = render(
+			<DialogDuplicate
+				open
+				labelCancel="cancel"
+				labelConfirm="confirm"
+				labelInput="Duplications"
+				labelTitle="title"
+				onCancel={jest.fn()}
+				onConfirm={mockConfirm}
+			/>,
+		);
+
+		const input = getByDisplayValue("1");
+		fireEvent.change(input, { target: { value: "" } });
+
+		expect(getByText("confirm")).toBeDisabled();
+	});
+	it("disables the confirm button if the given number is more than the limit", () => {
+		const mockConfirm = jest.fn();
+
+		const limit = 10;
+
+		const { getByDisplayValue, getByText } = render(
+			<DialogDuplicate
+				open
+				labelCancel="cancel"
+				labelConfirm="confirm"
+				labelInput="Duplications"
+				labelTitle="title"
+				limit={limit}
+				onCancel={jest.fn()}
+				onConfirm={mockConfirm}
+			/>,
+		);
+
+		const input = getByDisplayValue("1");
+		fireEvent.change(input, { target: { value: limit + 1 } });
+
+		expect(getByText("confirm")).toBeDisabled();
+	});
 });

package/src/Dialog/Duplicate/index.tsx

@@ -1,11 +1,10 @@
-import { useState } from 'react';
+import TextField from '@mui/material/TextField';
 
 import { isEmpty, or } from 'ramda';
+import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import TextField from '@mui/material/TextField';
-
-import Dialog, { Props as DialogProps } from '..';
+import Dialog, { type Props as DialogProps } from '..';
 
 type Props = DialogProps & {
   labelInput?: string;
@@ -53,9 +52,12 @@ const Duplicate = ({
     >
       <TextField
         autoFocus
-        fullWidth
         className={classes.container}
         color="primary"
+        fullWidth
+        label={labelInput}
+        margin="dense"
+        onChange={handleChange}
         slotProps={{
           htmlInput: {
             'aria-label': 'Duplications',
@@ -63,11 +65,8 @@ const Duplicate = ({
             min: 1
           }
         }}
-        label={labelInput}
-        margin="dense"
         type="number"
         value={value}
-        onChange={handleChange}
       />
     </Dialog>
   );

package/src/Dialog/UnsavedChanges/index.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { useSnackbar } from '../..';
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
-
 import UnsavedChangesDialog from '.';
 import '../../ThemeProvider/tailwindcss.css';
 
@@ -32,8 +31,8 @@ const Story = ({ isValidForm, isSubmitting }: Props): JSX.Element => {
   return (
     <SnackbarProvider>
       <UnsavedChangesDialog
-        dialogOpened
         closeDialog={closeDialog}
+        dialogOpened
         discardChanges={discardChanges}
         isSubmitting={isSubmitting}
         isValidForm={isValidForm}
@@ -52,7 +51,7 @@ export const PlaygroundUnsavedChangesDialog = TemplateUnsavedChangesDialog.bind(
 );
 
 export const normal = (): JSX.Element => (
-  <Story isValidForm isSubmitting={false} />
+  <Story isSubmitting={false} isValidForm />
 );
 
 export const withNotValidForm = (): JSX.Element => (

package/src/Dialog/UnsavedChanges/index.tsx

@@ -2,7 +2,6 @@ import { not } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { Modal } from '../../components/Modal';
-
 import {
   labelDiscard,
   labelDoYouWantToQuit,
@@ -51,9 +50,9 @@ const UnsavedChangesDialog = ({
   return (
     <Modal
       hasCloseButton
+      onClose={closeDialog}
       open={dialogOpened}
       size="medium"
-      onClose={closeDialog}
     >
       <Modal.Header>{t(labelTitle)}</Modal.Header>
       <Modal.Body>{t(labelMessage)}</Modal.Body>

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -14,11 +14,11 @@ export const labelDoYouWantToSaveChanges = 'Do you want to save the changes?';
 
 export default {
   labelDiscard,
-  labelSave,
+  labelDoYouWantToQuit,
+  labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelLeave,
+  labelSave,
   labelStay,
-  labelIfYouClickOnDiscard,
-  labelDoYouWantToQuit,
-  labelYourFormHasUnsavedChanges,
-  labelDoYouWantToSaveChanges
+  labelYourFormHasUnsavedChanges
 };

package/src/Dialog/UnsavedChanges/useUnsavedChanges.ts

@@ -1,6 +1,5 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-
 import { and, isNil, not } from 'ramda';
+import { type Dispatch, type SetStateAction, useState } from 'react';
 
 interface UnsavedDialogOpened {
   action: () => void;

package/src/Dialog/index.stories.tsx

@@ -1,9 +1,8 @@
-import { ReactElement } from 'react';
+import { type Theme, Typography } from '@mui/material';
 
+import type { ReactElement } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme, Typography } from '@mui/material';
-
 import Dialog from '.';
 
 export default { title: 'Dialog' };
@@ -33,9 +32,9 @@ interface Props {
 }
 const Story = ({ children, ...props }: Props): JSX.Element => (
   <Dialog
-    open
     onCancel={(): void => undefined}
     onConfirm={(): void => undefined}
+    open
     {...props}
   >
     {children}
@@ -65,7 +64,6 @@ const CustomDialog = (): JSX.Element => {
 
   return (
     <Dialog
-      open
       className={classes.root}
       dialogActionsClassName={classes.actions}
       dialogContentClassName={classes.content}
@@ -73,6 +71,7 @@ const CustomDialog = (): JSX.Element => {
       dialogTitleClassName={classes.title}
       onCancel={(): void => undefined}
       onConfirm={(): void => undefined}
+      open
     >
       Custom dialog
     </Dialog>

package/src/Dialog/index.tsx

@@ -1,20 +1,19 @@
-import { ReactNode } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-
 import {
   Button,
-  ButtonProps,
+  type ButtonProps,
   CircularProgress,
   DialogActions,
   DialogContent,
-  DialogProps,
+  type DialogProps,
   DialogTitle,
-  DialogTitleProps,
+  type DialogTitleProps,
   Dialog as MuiDialog
 } from '@mui/material';
 
-import { DataTestAttributes } from '../@types/data-attributes';
+import type { ReactNode } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import type { DataTestAttributes } from '../@types/data-attributes';
 
 interface StylesProps {
   contentWidth?: number;
@@ -84,12 +83,12 @@ const Dialog = ({
 
   return (
     <MuiDialog
+      onClose={onClose}
+      open={open}
       PaperProps={{
         className: dialogPaperClassName
       }}
-      open={open}
       scroll="paper"
-      onClose={onClose}
       {...rest}
     >
       {labelTitle && (

package/src/FallbackPage/FallbackPage.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { FallbackPage } from './FallbackPage';

package/src/FallbackPage/FallbackPage.tsx

@@ -1,10 +1,9 @@
-import { FC } from 'react';
+import { Typography } from '@mui/material';
 
 import { equals } from 'ramda';
+import type { FC } from 'react';
 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';

package/src/FileDropZone/index.stories.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
+import PersonIcon from '@mui/icons-material/Person';
+import { Button, Paper, type Theme, Typography } from '@mui/material';
 
+import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import PersonIcon from '@mui/icons-material/Person';
-import { Button, Paper, Theme, Typography } from '@mui/material';
-
 import FileDropZone, {
-  CustomDropZoneContentProps,
+  type CustomDropZoneContentProps,
   transformFileListToArray
 } from '.';
 
@@ -42,8 +41,8 @@ const Story = ({
   return (
     <Paper elevation={0}>
       <FileDropZone
-        CustomDropZoneContent={CustomDropZoneContent}
         accept={accept}
+        CustomDropZoneContent={CustomDropZoneContent}
         changeFiles={setFiles}
         className={className}
         files={files}
@@ -64,7 +63,7 @@ export const basicSingleImage = (): JSX.Element => (
 );
 
 export const basicMultipleImage = (): JSX.Element => (
-  <Story multiple accept="image/*" />
+  <Story accept="image/*" multiple />
 );
 
 export const basicSingleCustomExtension = (): JSX.Element => (
@@ -79,8 +78,8 @@ const DropZoneContent = ({
       style={{ height: '100%', position: 'absolute', width: '100%' }}
     />
     <Button
-      style={{ bottom: '0', position: 'absolute', right: '0' }}
       onClick={openFileExplorer}
+      style={{ bottom: '0', position: 'absolute', right: '0' }}
     >
       Open file explorer
     </Button>
@@ -89,8 +88,8 @@ const DropZoneContent = ({
 
 export const basicSingleImageWithACustomDropZoneContent = (): JSX.Element => (
   <Story
-    CustomDropZoneContent={DropZoneContent}
     accept="image/*"
+    CustomDropZoneContent={DropZoneContent}
     multiple={false}
   />
 );