@centreon/ui 24.8.6 → 24.8.7

package/src/Icon/IconAttach/index.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
@@ -45,13 +42,11 @@ interface Props {
   defaultImage: string;
   imgSource: string;
   labelNoIcon?: string;
-  onClick: () => void;
   title: string;
   uploadedImage: string;
 }
 
 const IconAttach = ({
-  onClick,
   defaultImage,
   uploadedImage,
   imgSource,
@@ -61,7 +56,7 @@ const IconAttach = ({
   const { classes } = useStyles();
 
   return (
-    <span className={classes.iconAttach} onClick={onClick}>
+    <span className={classes.iconAttach}>
       {defaultImage && (
         <span className={classes.iconAttachLabel}>{labelNoIcon}</span>
       )}

package/src/Image/Image.tsx

@@ -1,75 +1,75 @@
-import { memo } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-import { equals, isNil } from 'ramda';
-
-import { useLoadImage } from './useLoadImage';
-
-export enum ImageVariant {
-  Contain = 'contain',
-  Cover = 'cover'
-}
-
-interface Props {
-  alt: string;
-  className?: string;
-  fallback: JSX.Element;
-  height?: number | string;
-  imagePath: string;
-  variant?: ImageVariant;
-  width?: number | string;
-}
-
-const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
-  (_, { width, height, variant }) => ({
-    fallbackContainer: {
-      height: '100%',
-      width: '100%'
-    },
-    imageContent: {
-      height,
-      objectFit: variant,
-      width
-    }
-  })
-);
-
-const ImageContent = ({
-  alt,
-  className,
-  height,
-  width,
-  imagePath,
-  variant = ImageVariant.Cover,
-  fallback
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ height, variant, width });
-  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
-
-  if (!isImageLoaded) {
-    return (
-      <div className={classes.fallbackContainer} data-testid={alt}>
-        {fallback}
-      </div>
-    );
-  }
-
-  return (
-    <img
-      alt={alt}
-      className={cx(classes.imageContent, className)}
-      data-testid={alt}
-      src={imagePath}
-    />
-  );
-};
-
-const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
-  if (isNil(imagePath)) {
-    return null;
-  }
-
-  return <ImageContent {...props} imagePath={imagePath} />;
-};
-
-export default memo(SuspendedImage, equals);
+import { memo } from 'react';
+
+import { equals, isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { useLoadImage } from './useLoadImage';
+
+export enum ImageVariant {
+  Contain = 'contain',
+  Cover = 'cover'
+}
+
+interface Props {
+  alt: string;
+  className?: string;
+  fallback: JSX.Element;
+  height?: number | string;
+  imagePath: string;
+  variant?: ImageVariant;
+  width?: number | string;
+}
+
+const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
+  (_, { width, height, variant }) => ({
+    fallbackContainer: {
+      height: '100%',
+      width: '100%'
+    },
+    imageContent: {
+      height,
+      objectFit: variant,
+      width
+    }
+  })
+);
+
+const ImageContent = ({
+  alt,
+  className,
+  height,
+  width,
+  imagePath,
+  variant = ImageVariant.Cover,
+  fallback
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ height, variant, width });
+  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+
+  if (!isImageLoaded) {
+    return (
+      <div className={classes.fallbackContainer} data-testid={alt}>
+        {fallback}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      alt={alt}
+      className={cx(classes.imageContent, className)}
+      data-testid={alt}
+      src={imagePath}
+    />
+  );
+};
+
+const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
+  if (isNil(imagePath)) {
+    return null;
+  }
+
+  return <ImageContent {...props} imagePath={imagePath} />;
+};
+
+export default memo(SuspendedImage, equals);

package/src/Image/atoms.ts

@@ -1,3 +1,3 @@
-import { atom } from 'jotai';
-
-export const imagesAtom = atom<Record<string, string>>({});
+import { atom } from 'jotai';
+
+export const imagesAtom = atom<Record<string, string>>({});

package/src/Image/index.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentStory } from '@storybook/react';
 
-import LoadingSkeleton from '../LoadingSkeleton';
 import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
+import LoadingSkeleton from '../LoadingSkeleton';
 
 import Image, { ImageVariant } from './Image';
 

package/src/Image/index.test.tsx

@@ -1,53 +1,53 @@
-import { RenderResult, screen, waitFor } from '@testing-library/react';
-import { Provider } from 'jotai';
-
-import { render } from '../../test/testRenderer';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
-
-import Image from './Image';
-
-jest.mock('../../@assets/centreon-logo-one-line-light.svg');
-
-const renderImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath={CentreonLogoLight}
-      />
-    </Provider>
-  );
-
-const renderNotFoundImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath="another_image"
-      />
-    </Provider>
-  );
-
-describe('useLoadImage', () => {
-  it('displays the loaded image', async () => {
-    renderImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
-
-  it('displays a not found image', async () => {
-    renderNotFoundImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
-});
+import { RenderResult, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'jotai';
+
+import { render } from '../../test/testRenderer';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+
+import Image from './Image';
+
+jest.mock('../../@assets/centreon-logo-one-line-light.svg');
+
+const renderImage = (): RenderResult =>
+  render(
+    <Provider>
+      <Image
+        alt="test"
+        fallback={<p>Loading...</p>}
+        imagePath={CentreonLogoLight}
+      />
+    </Provider>
+  );
+
+const renderNotFoundImage = (): RenderResult =>
+  render(
+    <Provider>
+      <Image
+        alt="test"
+        fallback={<p>Loading...</p>}
+        imagePath="another_image"
+      />
+    </Provider>
+  );
+
+describe('useLoadImage', () => {
+  it('displays the loaded image', async () => {
+    renderImage();
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByAltText('test')).toBeInTheDocument();
+    });
+  });
+
+  it('displays a not found image', async () => {
+    renderNotFoundImage();
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByAltText('test')).toBeInTheDocument();
+    });
+  });
+});

package/src/Image/models.ts

@@ -1,3 +1,3 @@
-export interface Image {
-  read: () => string;
-}
+export interface Image {
+  read: () => string;
+}

package/src/Image/useLoadImage.ts

@@ -1,49 +1,49 @@
-import { SetStateAction, useAtom } from 'jotai';
-import { isEmpty, isNil, prop } from 'ramda';
-
-import { imagesAtom } from './atoms';
-
-interface CreateImageProps {
-  alt: string;
-  image?: string;
-  imageSrc: string;
-  setImages: (update: SetStateAction<Record<string, string>>) => void;
-}
-
-const createImage = ({
-  setImages,
-  imageSrc,
-  image,
-  alt
-}: CreateImageProps): void => {
-  const imageLoaderPromise = (): Promise<string> =>
-    new Promise<string>((resolve, reject) => {
-      const img = new Image();
-      img.src = imageSrc;
-      img.onload = (): void => resolve(imageSrc);
-      img.onerror = (): void =>
-        reject(new Error(`Failed to load image ${imageSrc}`));
-    });
-
-  if (!isNil(image) || isEmpty(image)) {
-    return;
-  }
-
-  imageLoaderPromise()
-    .then((result: string): void => {
-      setImages((currentImages) => ({ ...currentImages, [alt]: result }));
-    })
-    .catch(() => {
-      setImages((currentImages) => ({ ...currentImages, [alt]: '' }));
-    });
-};
-
-export const useLoadImage = ({ imageSrc, alt }): boolean => {
-  const [images, setImages] = useAtom(imagesAtom);
-
-  const image = prop(alt, images);
-
-  createImage({ alt, image, imageSrc, setImages });
-
-  return !isNil(image) || isEmpty(image);
-};
+import { SetStateAction, useAtom } from 'jotai';
+import { isEmpty, isNil, prop } from 'ramda';
+
+import { imagesAtom } from './atoms';
+
+interface CreateImageProps {
+  alt: string;
+  image?: string;
+  imageSrc: string;
+  setImages: (update: SetStateAction<Record<string, string>>) => void;
+}
+
+const createImage = ({
+  setImages,
+  imageSrc,
+  image,
+  alt
+}: CreateImageProps): void => {
+  const imageLoaderPromise = (): Promise<string> =>
+    new Promise<string>((resolve, reject) => {
+      const img = new Image();
+      img.src = imageSrc;
+      img.onload = (): void => resolve(imageSrc);
+      img.onerror = (): void =>
+        reject(new Error(`Failed to load image ${imageSrc}`));
+    });
+
+  if (!isNil(image) || isEmpty(image)) {
+    return;
+  }
+
+  imageLoaderPromise()
+    .then((result: string): void => {
+      setImages((currentImages) => ({ ...currentImages, [alt]: result }));
+    })
+    .catch(() => {
+      setImages((currentImages) => ({ ...currentImages, [alt]: '' }));
+    });
+};
+
+export const useLoadImage = ({ imageSrc, alt }): boolean => {
+  const [images, setImages] = useAtom(imagesAtom);
+
+  const image = prop(alt, images);
+
+  createImage({ alt, image, imageSrc, setImages });
+
+  return !isNil(image) || isEmpty(image);
+};

package/src/InputField/Number/Number.tsx

@@ -44,8 +44,8 @@ const NumberField = ({
         T,
         always(
           clamp(
-            inputProps?.min || -Infinity,
-            inputProps?.max || Infinity,
+            inputProps?.min || Number.NEGATIVE_INFINITY,
+            inputProps?.max || Number.POSITIVE_INFINITY,
             number
           )
         )

package/src/InputField/Search/PersistentTooltip.tsx

@@ -1,11 +1,11 @@
 import { ReactElement, useState } from 'react';
 
-import { isNil, cond, T } from 'ramda';
+import { T, cond, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Tooltip, IconButton } from '@mui/material';
 import IconHelp from '@mui/icons-material/HelpOutline';
 import IconClose from '@mui/icons-material/HighlightOff';
+import { IconButton, Tooltip } from '@mui/material';
 
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {

package/src/InputField/Search/RegexpHelpTooltip.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { ifElse, always, isNil } from 'ramda';
+import { always, ifElse, isNil } from 'ramda';
 
 import { Box, Link } from '@mui/material';
 

package/src/InputField/Search/index.stories.tsx

@@ -1,5 +1,5 @@
-import RegexpHelpTooltip from './RegexpHelpTooltip';
 import PersistentTooltip from './PersistentTooltip';
+import RegexpHelpTooltip from './RegexpHelpTooltip';
 
 import SearchInput from '.';
 

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -1,9 +1,9 @@
 import {
+  RenderResult,
   fireEvent,
   getFetchCall,
   mockResponse,
   render,
-  RenderResult,
   resetMocks,
   waitFor
 } from '../../../../../../test/testRenderer';

package/src/InputField/Select/Autocomplete/Connected/Multi/index.tsx

@@ -1,5 +1,5 @@
-import MultiAutocompleteField from '../../Multi';
 import ConnectedAutocompleteField from '..';
+import MultiAutocompleteField from '../../Multi';
 
 const MultiConnectedAutocompleteField = ConnectedAutocompleteField(
   MultiAutocompleteField,

package/src/InputField/Select/Autocomplete/Connected/index.stories.tsx

@@ -1,9 +1,9 @@
-import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
+import { buildListingEndpoint } from '../../../..';
 import { Listing } from '../../../../api/models';
 
-import SingleConnectedAutocompleteField from './Single';
 import MultiConnectedAutocompleteField from './Multi';
+import SingleConnectedAutocompleteField from './Single';
 
 export default {
   title: 'InputField/Autocomplete/Connected'
@@ -41,7 +41,7 @@ const mockSearch = (page: number): object => ({
   response: (request): Listing<SelectEntry> => {
     const { searchParams } = request;
 
-    return buildResult(parseInt(searchParams.page || '0', 10));
+    return buildResult(Number.parseInt(searchParams.page || '0', 10));
   },
   status: 200,
   url: `/endpoint?page=${page}&search=`
@@ -54,7 +54,7 @@ const getMockData = (): Array<object> => [
     response: (request): Listing<SelectEntry> => {
       const { searchParams } = request;
 
-      return buildResult(parseInt(searchParams.page || '0', 10));
+      return buildResult(Number.parseInt(searchParams.page || '0', 10));
     },
     status: 200,
     url: '/endpoint?page='

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -1,16 +1,16 @@
 import {
-  render,
-  fireEvent,
-  waitFor,
   RenderResult,
   act,
-  resetMocks,
+  fireEvent,
+  getFetchCall,
   mockResponse,
-  getFetchCall
+  render,
+  resetMocks,
+  waitFor
 } from '../../../../../test/testRenderer';
+import TestQueryProvider from '../../../../api/TestQueryProvider';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
-import TestQueryProvider from '../../../../api/TestQueryProvider';
 
 import SingleConnectedAutocompleteField from './Single';
 

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,34 +1,34 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import {
   equals,
-  prop,
-  last,
+  has,
   isEmpty,
-  map,
   isNil,
-  pipe,
+  last,
+  map,
   not,
-  has,
   omit,
+  pipe,
+  prop,
   uniqBy
 } from 'ramda';
 
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import {
-  useDebounce,
-  useIntersectionObserver,
-  useDeepCompare
-} from '../../../../utils';
 import { ListingModel, SelectEntry } from '../../../..';
-import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import {
+  useDebounce,
+  useDeepCompare,
+  useIntersectionObserver
+} from '../../../../utils';
+import Option from '../../Option';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;

package/src/InputField/Select/Autocomplete/Draggable/MultiConnected.tsx

@@ -1,5 +1,5 @@
-import MultiAutocompleteField from '../Multi';
 import ConnectedAutocompleteField from '../Connected';
+import MultiAutocompleteField from '../Multi';
 
 import DraggableAutocompleteField from '.';
 

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -1,6 +1,6 @@
-import { map, find, propEq } from 'ramda';
 import { rectIntersection } from '@dnd-kit/core';
 import { rectSortingStrategy } from '@dnd-kit/sortable';
+import { find, map, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { lighten } from '@mui/material';

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
-
-import { findIndex, not, propEq } from 'ramda';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 import clsx from 'clsx';
+import { findIndex, not, propEq } from 'ramda';
 
 import { Chip, Typography, useTheme } from '@mui/material';
 
+import { RefObject, useRef } from 'react';
 import { DraggableSelectEntry, SortableListProps } from './SortableList';
 
 interface ContentProps
@@ -14,7 +13,7 @@ interface ContentProps
   id: string;
   index: number;
   isDragging: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
+  itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
   style;
 }
@@ -42,9 +41,9 @@ const SortableListContent = ({
     isDragging
   }: ContentProps): JSX.Element => {
     const theme = useTheme();
-    const labelItemRef = React.useRef<HTMLElement | null>(null);
+    const labelItemRef = useRef<HTMLElement | null>(null);
 
-    const mouseUp = (event: React.MouseEvent): void => {
+    const mouseUp = (event: MouseEvent): void => {
       if (not(event.shiftKey)) {
         return;
       }

package/src/InputField/Select/Autocomplete/Draggable/index.stories.tsx

@@ -8,8 +8,8 @@ import { SelectEntry } from '../..';
 import { buildListingEndpoint } from '../../../..';
 import { Listing } from '../../../../api/models';
 
-import MultiDraggableConnectedAutocompleteField from './MultiConnected';
 import MultiDraggableAutocompleteField from './Multi';
+import MultiDraggableConnectedAutocompleteField from './MultiConnected';
 
 import { ItemActionProps } from '.';
 
@@ -49,7 +49,7 @@ const mockSearch = (page: number): object => ({
   response: (request): Listing<SelectEntry> => {
     const { searchParams } = request;
 
-    return buildResult(parseInt(searchParams.page || '0', 10));
+    return buildResult(Number.parseInt(searchParams.page || '0', 10));
   },
   status: 200,
   url: `/endpoint?page=${page}&search=`
@@ -62,7 +62,7 @@ const getMockData = (): Array<object> => [
     response: (request): Listing<SelectEntry> => {
       const { searchParams } = request;
 
-      return buildResult(parseInt(searchParams.page || '0', 10));
+      return buildResult(Number.parseInt(searchParams.page || '0', 10));
     },
     status: 200,
     url: '/endpoint?page='
@@ -74,9 +74,9 @@ const getMockData = (): Array<object> => [
 ];
 
 const options = [
-  { id: `0`, name: 'First Entity' },
-  { id: `1`, name: 'Second Entity' },
-  { id: `2`, name: 'Third Entity' }
+  { id: '0', name: 'First Entity' },
+  { id: '1', name: 'Second Entity' },
+  { id: '2', name: 'Third Entity' }
 ];
 
 const MultiDraggable = (): JSX.Element => (