@centreon/ui 24.8.6 → 24.8.7

package/src/components/Form/AccessRights/Stats/Stats.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'react-i18next';
 import { useAtomValue } from 'jotai';
 import { identity } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import { Typography } from '@mui/material';
 
-import { Labels } from '../models';
 import { statsDerivedAtom } from '../atoms';
+import { Labels } from '../models';
 
 interface Props {
   labels: Labels['list'];

package/src/components/Form/AccessRights/atoms.ts

@@ -1,7 +1,7 @@
 import { atom } from 'jotai';
 import { equals, pluck, prop, remove, update } from 'ramda';
 
-import { AccessRightInitialValues, AccessRight, ContactType } from './models';
+import { AccessRight, AccessRightInitialValues, ContactType } from './models';
 
 export const valuesAtom = atom<Array<AccessRight>>([]);
 export const initialValuesAtom = atom<Array<AccessRightInitialValues>>([]);

package/src/components/Form/AccessRights/storiesData.ts

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
 
-import { Listing } from '../../../api/models';
 import { SelectEntry } from '../../..';
+import { Listing } from '../../../api/models';
 
 import { AccessRightInitialValues, Labels } from './models';
 

package/src/components/Form/AccessRights/useAccessRightsChange.ts

@@ -5,8 +5,8 @@ import { useAtomValue } from 'jotai';
 import { useDeepCompare } from '../../../utils';
 
 import { valuesAtom } from './atoms';
-import { formatValueForSubmition } from './utils';
 import { AccessRightInitialValues } from './models';
+import { formatValueForSubmition } from './utils';
 
 export const useAccessRightsChange = (
   onChange?: (values: Array<AccessRightInitialValues>) => void

package/src/components/Form/Dashboard/DashboardDuplicationForm.tsx

@@ -1,20 +1,20 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, object } from 'yup';
 import { useTranslation } from 'react-i18next';
+import { object, string } from 'yup';
 
-import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
+import { InputType } from '../../../Form/Inputs/models';
 import { FormVariant } from '../Form.models';
 import { FormActions, FormActionsProps } from '../FormActions';
 
+import { DashboardResource } from './Dashboard.resource';
 import { useStyles } from './DashboardForm.styles';
 import {
   labelMustBeAtLeast,
   labelMustBeMost,
   labelRequired
 } from './translatedLabels';
-import { DashboardResource } from './Dashboard.resource';
 
 type DashboardFormProps = {
   labels: DashboardFormLabels;

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,23 +1,23 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, number, object } from 'yup';
-import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { number, object, string } from 'yup';
 
-import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
+import { InputType } from '../../../Form/Inputs/models';
 import { FormVariant } from '../Form.models';
 import { FormActions, FormActionsProps } from '../FormActions';
 
+import { DashboardResource } from './Dashboard.resource';
 import { useStyles } from './DashboardForm.styles';
+import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
 import {
   labelCharacters,
   labelMustBeAtLeast,
   labelMustBeMost,
   labelRequired
 } from './translatedLabels';
-import { DashboardResource } from './Dashboard.resource';
-import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
 
 export type DashboardFormProps = {
   labels: DashboardFormLabels;

package/src/components/Form/Dashboard/GlobalRefreshFieldOption.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { isEmpty } from 'ramda';
-import pluralize from 'pluralize';
 import { useAtomValue } from 'jotai';
+import pluralize from 'pluralize';
+import { isEmpty } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import { Typography } from '@mui/material';
 
@@ -12,12 +12,12 @@ import { refreshIntervalAtom } from '@centreon/ui-context';
 
 import { TextField } from '../../..';
 
+import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
 import {
   labelGlobalRefreshInterval,
   labelInterval,
   labelSeconds
 } from './translatedLabels';
-import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
 
 const GlobalRefreshFieldOption = (): JSX.Element => {
   const { classes } = useGlobalRefreshIntervalStyles();

package/src/components/Header/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderActions.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { Typography as MuiTypography } from '@mui/material';
 

package/src/components/Header/PageHeader/index.ts

@@ -1,9 +1,9 @@
 import { PageHeader as PageHeaderRoot } from './PageHeader';
+import { PageHeaderActions } from './PageHeaderActions';
 import { PageHeaderMain } from './PageHeaderMain';
 import { PageHeaderMenu } from './PageHeaderMenu';
-import { PageHeaderTitle } from './PageHeaderTitle';
-import { PageHeaderActions } from './PageHeaderActions';
 import { PageHeaderMessage } from './PageHeaderMessage';
+import { PageHeaderTitle } from './PageHeaderTitle';
 
 export const PageHeader = Object.assign(PageHeaderRoot, {
   Actions: PageHeaderActions,

package/src/components/Inputs/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { SwitchProps, Switch as MuiSwitch } from '@mui/material';
+import { Switch as MuiSwitch, SwitchProps } from '@mui/material';
 
 import { useSwitchStyles } from './Switch.styles';
 

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -16,10 +16,12 @@ type Story = StoryObj<typeof ItemComposition>;
 
 const stub = (): void => undefined;
 
+const items = [0, 1, 2, 3, 4];
+
 export const Default: Story = {
   args: {
-    children: [...Array(5)].map((_, i) => (
-      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+    children: items.map((item) => (
+      <ItemComposition.Item key={item} labelDelete="Delete" onDeleteItem={stub}>
         <Typography>Item 1</Typography>
         <Typography>Item 2</Typography>
       </ItemComposition.Item>
@@ -54,7 +56,7 @@ const options = [
 
 export const WithSelectInputs: Story = {
   args: {
-    children: [...Array(5)].map((_, i) => (
+    children: items.map((i) => (
       <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
         <SelectField
           dataTestId="select 1"
@@ -79,7 +81,7 @@ export const WithSelectInputs: Story = {
 
 export const WithLinkedItems: Story = {
   args: {
-    children: [...Array(5)].map((_, i) => (
+    children: items.map((i) => (
       <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
         <Typography>Item 1</Typography>
         <Typography>Item 2</Typography>

package/src/components/ItemComposition/index.ts

@@ -1,5 +1,5 @@
-import { ItemComposition as ItemCompositionRoot } from './ItemComposition';
 import { Item } from './Item';
+import { ItemComposition as ItemCompositionRoot } from './ItemComposition';
 
 export const ItemComposition = Object.assign(ItemCompositionRoot, {
   Item

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { AreaIndicator } from '../AreaIndicator';
 import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageHeader.stories';
+import { AreaIndicator } from '../AreaIndicator';
 
 import { PageLayout } from './index';
 

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -36,19 +36,18 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements &&
-          elements.map((element) => (
-            <Menu.Item
-              key={`${element.id}`}
-              onClick={navigateToElement(element.id)}
-              {...(isActive(element.id) && {
-                isActive: true,
-                isDisabled: true
-              })}
-            >
-              {element.name}
-            </Menu.Item>
-          ))}
+        {elements?.map((element) => (
+          <Menu.Item
+            key={`${element.id}`}
+            onClick={navigateToElement(element.id)}
+            {...(isActive(element.id) && {
+              isActive: true,
+              isDisabled: true
+            })}
+          >
+            {element.name}
+          </Menu.Item>
+        ))}
         <Menu.Divider key="divider" />
         <Menu.Item key="create">
           <>

package/src/components/Layout/PageLayout/index.ts

@@ -1,7 +1,7 @@
 import { PageLayout as PageLayoutRoot } from './PageLayout';
-import { PageLayoutHeader } from './PageLayoutHeader';
-import { PageLayoutBody } from './PageLayoutBody';
 import { PageLayoutActions } from './PageLayoutActions';
+import { PageLayoutBody } from './PageLayoutBody';
+import { PageLayoutHeader } from './PageLayoutHeader';
 import { PageQuickAccess } from './PageQuickAccess';
 
 export const PageLayout = Object.assign(PageLayoutRoot, {

package/src/components/List/Item/ListItem.tsx

@@ -1,14 +1,14 @@
-import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
+import { ForwardedRef, ReactElement, ReactNode, forwardRef } from 'react';
 
 import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type Props = {
+interface Props {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
-};
+}
 
 export const ListItem = forwardRef(
   (

package/src/components/List/Item/index.ts

@@ -1,8 +1,8 @@
+import { Avatar as AvatarRoot } from './Avatar';
+import { AvatarSkeleton } from './AvatarSkeleton';
 import { ListItem as ListItemRoot } from './ListItem';
 import { Text as TextRoot } from './Text';
 import { TextSkeleton } from './TextSkeleton';
-import { Avatar as AvatarRoot } from './Avatar';
-import { AvatarSkeleton } from './AvatarSkeleton';
 
 export const ListItem = Object.assign(ListItemRoot, {
   Avatar: Object.assign(AvatarRoot, {

package/src/components/List/List.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import { Meta, StoryObj } from '@storybook/react';
 
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -13,17 +12,20 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-const sampleData = Array(50).fill({
-  icon: <DeleteIcon />,
-  primary: 'Primary text',
-  secondary: 'Secondary text'
-});
+const sampleData = Array(50)
+  .fill(0)
+  .map((_, index) => ({
+    index,
+    icon: <DeleteIcon />,
+    primary: 'Primary text',
+    secondary: 'Secondary text'
+  }));
 
 export const Default: Story = {
   render: () => (
     <List>
-      {sampleData.map(({ primary }, index) => (
-        <List.Item key={`${primary}_${index}`}>
+      {sampleData.map(({ primary }) => (
+        <List.Item key={`${primary}`}>
           <List.Item.Text primaryText={primary} />
         </List.Item>
       ))}
@@ -34,8 +36,8 @@ export const Default: Story = {
 export const withAction: Story = {
   render: () => (
     <List>
-      {sampleData.map(({ icon, primary }, index) => (
-        <List.Item action={icon} key={`${primary}_${index}`}>
+      {sampleData.map(({ icon, primary }) => (
+        <List.Item action={icon} key={`${primary}`}>
           <List.Item.Text primaryText={primary} />
         </List.Item>
       ))}
@@ -46,8 +48,8 @@ export const withAction: Story = {
 export const withSecondaryText: Story = {
   render: () => (
     <List>
-      {sampleData.map(({ primary, secondary }, index) => (
-        <List.Item key={`${primary}_${index}`}>
+      {sampleData.map(({ primary, secondary }) => (
+        <List.Item key={`${primary}`}>
           <List.Item.Text primaryText={primary} secondaryText={secondary} />
         </List.Item>
       ))}
@@ -59,8 +61,8 @@ export const withSmallContainer: Story = {
   render: () => (
     <Box sx={{ height: 400, width: 200 }}>
       <List>
-        {sampleData.map(({ icon, primary, secondary }, index) => (
-          <List.Item action={icon} key={`${primary}_${index}`}>
+        {sampleData.map(({ icon, primary, secondary }) => (
+          <List.Item action={icon} key={`${primary}`}>
             <List.Item.Text primaryText={primary} secondaryText={secondary} />
           </List.Item>
         ))}

package/src/components/List/List.tsx

@@ -4,9 +4,9 @@ import { List as MuiList } from '@mui/material';
 
 import { useStyles } from './List.styles';
 
-type Props = {
+interface Props {
   children: ReactNode;
-};
+}
 
 export const List = ({ children }: Props): ReactElement => {
   const { classes } = useStyles();

package/src/components/List/index.ts

@@ -1,5 +1,5 @@
-import { List as ListRoot } from './List';
 import { ListItem } from './Item';
+import { List as ListRoot } from './List';
 
 export const List = Object.assign(ListRoot, {
   Item: ListItem

package/src/components/Menu/Button/MenuButton.tsx

@@ -5,9 +5,9 @@ import {
   Menu as MenuIcon
 } from '@mui/icons-material';
 
-import { Button, ButtonProps } from '../../Button';
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
+import { Button, ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
 import { useStyles } from './MenuButton.styles';

package/src/components/Menu/index.ts

@@ -1,7 +1,7 @@
-import { Menu as MenuRoot } from './Menu';
 import { MenuButton } from './Button';
-import { MenuItem } from './MenuItem';
+import { Menu as MenuRoot } from './Menu';
 import { MenuDivider } from './MenuDivider';
+import { MenuItem } from './MenuItem';
 import { MenuItems } from './MenuItems';
 
 export const Menu = Object.assign(MenuRoot, {

package/src/components/Menu/useMenu.tsx

@@ -1,12 +1,12 @@
 import { ReactElement, ReactNode, useRef } from 'react';
 
 import {
+  Provider,
   atom,
   createStore,
   useAtom,
-  Provider,
-  useStore,
-  useAtomValue
+  useAtomValue,
+  useStore
 } from 'jotai';
 import { useHydrateAtoms } from 'jotai/utils';
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx

@@ -1,4 +1,4 @@
-import { atom, createStore, useSetAtom, Provider } from 'jotai';
+import { Provider, atom, createStore, useSetAtom } from 'jotai';
 
 import { Button } from '@mui/material';
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { atom, useSetAtom, createStore, Provider } from 'jotai';
+import { Provider, atom, createStore, useSetAtom } from 'jotai';
 
 import { Button } from '../../Button';
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useAtom, PrimitiveAtom } from 'jotai';
+import { PrimitiveAtom, useAtom } from 'jotai';
 import { equals, pick, type } from 'ramda';
 
 import { Modal } from '..';

package/src/components/Modal/Modal.tsx

@@ -2,8 +2,8 @@ import React, { ReactElement } from 'react';
 
 import { equals } from 'ramda';
 
-import { Dialog as MuiDialog, Slide } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
+import { Dialog as MuiDialog, Slide } from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { IconButton } from '../Button';

package/src/components/Modal/ModalBody.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './Modal.styles';
 

package/src/components/Modal/ModalHeader.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 

package/src/components/Modal/index.ts

@@ -1,7 +1,7 @@
 import { Modal as ModalRoot } from './Modal';
-import { ModalHeader } from './ModalHeader';
-import { ModalBody } from './ModalBody';
 import { ModalActions } from './ModalActions';
+import { ModalBody } from './ModalBody';
+import { ModalHeader } from './ModalHeader';
 
 export { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
 

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -1,10 +1,10 @@
 import { MouseEvent, useState } from 'react';
 
-import { ClickAwayListener, Box, Popper } from '@mui/material';
+import { Box, ClickAwayListener, Popper } from '@mui/material';
 
+import { useStyles } from './ConfirmationTooltip.styles';
 import TooltipContent from './TooltipContent';
 import { Props } from './models';
-import { useStyles } from './ConfirmationTooltip.styles';
 
 export const ConfirmationTooltip = ({
   children,

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -1,5 +1,5 @@
-import { ActionVariants } from '../../../ActionsList/models';
 import { ActionsList } from '../../..';
+import { ActionVariants } from '../../../ActionsList/models';
 
 import { useStyles } from './ConfirmationTooltip.styles';
 

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -2,8 +2,8 @@ import { ReactElement, useCallback, useEffect, useRef } from 'react';
 
 import { atom, useAtom } from 'jotai';
 
-import { Tooltip, TooltipProps } from '../Tooltip';
 import { useResizeObserver } from '../../../utils/useResizeObserver';
+import { Tooltip, TooltipProps } from '../Tooltip';
 
 import { useStyles } from './TextOverflowTooltip.styles';
 

package/src/components/Zoom/Minimap.tsx

@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 
+import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
 import { UseMinimapProps, useMinimap } from './useMinimap';
-import { useZoomStyles } from './Zoom.styles';
 
 interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
   children: JSX.Element;

package/src/components/Zoom/Zoom.stories.tsx

@@ -33,7 +33,7 @@ const Content = (): JSX.Element => {
       <g style={{ transform: 'translate(600px, 400px)' }}>
         <circle fill="green" r={70} />
       </g>
-      <g style={{ transform: `translate(2400px, 1400px)` }}>
+      <g style={{ transform: 'translate(2400px, 1400px)' }}>
         <circle fill="red" r={70} />
       </g>
     </g>

package/src/components/Zoom/ZoomContent.tsx

@@ -9,11 +9,11 @@ import ReplayIcon from '@mui/icons-material/Replay';
 
 import { IconButton } from '../Button';
 
-import { minimapScale, radius } from './constants';
-import { useZoom } from './useZoom';
-import { useZoomStyles } from './Zoom.styles';
 import Minimap from './Minimap';
+import { useZoomStyles } from './Zoom.styles';
+import { minimapScale, radius } from './constants';
 import { ChildrenProps, MinimapPosition, ZoomState } from './models';
+import { useZoom } from './useZoom';
 
 export interface Props {
   children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;

package/src/components/Zoom/localPoint.ts

@@ -16,7 +16,7 @@ type EventType =
 
 type PointCoords = Pick<Point, 'x' | 'y'>;
 
-const DEFAULT_POINT = { x: 0, y: 0 };
+const defaultPoint = { x: 0, y: 0 };
 
 const isTouchEvent = (event?: EventType): event is TouchEvent =>
   !!event && 'changedTouches' in event;
@@ -25,7 +25,7 @@ export const isMouseEvent = (event?: EventType): event is MouseEvent =>
   !!event && 'clientX' in event;
 
 const getXAndYFromEvent = (event?: EventType): PointCoords => {
-  if (!event) return { ...DEFAULT_POINT };
+  if (!event) return { ...defaultPoint };
 
   if (isTouchEvent(event)) {
     return event.changedTouches.length > 0
@@ -33,7 +33,7 @@ const getXAndYFromEvent = (event?: EventType): PointCoords => {
           x: event.changedTouches[0].clientX,
           y: event.changedTouches[0].clientY
         }
-      : { ...DEFAULT_POINT };
+      : { ...defaultPoint };
   }
 
   if (isMouseEvent(event)) {
@@ -43,7 +43,7 @@ const getXAndYFromEvent = (event?: EventType): PointCoords => {
     };
   }
 
-  return { ...DEFAULT_POINT };
+  return { ...defaultPoint };
 };
 
 export const localPoint = (event: EventType): PointCoords | null => {

package/src/components/Zoom/useMinimap.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 
+import { Point } from '@visx/point';
 import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
 import { equals, gt, isNil, pick } from 'ramda';
-import { Point } from '@visx/point';
 
 import { ZoomState } from './models';
 

package/src/queryParameters/index.ts

@@ -1,4 +1,4 @@
-import { isNil, isEmpty } from 'ramda';
+import { isEmpty, isNil } from 'ramda';
 
 import { QueryParameter } from './models';