@centreon/ui 24.8.6 → 24.9.0

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import LoadingSkeleton from '../../LoadingSkeleton';
 
 import { EmptyRow } from './EmptyRow';
@@ -10,13 +8,13 @@ interface SkeletonLoaderProps {
 
 const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
   <>
-    {[...Array(rows)].map((_v, i) => (
-      <EmptyRow
-        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
-      >
-        <LoadingSkeleton variant="text" width="100%" />
-      </EmptyRow>
-    ))}
+    {[...Array(rows)]
+      .map((_, i) => i)
+      .map((v) => (
+        <EmptyRow key={`skeleton-row-${v}`}>
+          <LoadingSkeleton variant="text" width="100%" />
+        </EmptyRow>
+      ))}
   </>
 );
 

package/src/Listing/index.stories.tsx

@@ -331,7 +331,7 @@ const listingWithSubItems = [...tenElements].map((_, index) => ({
   selected: false,
   subItems:
     index % 2 === 0
-      ? [...tenElements].map((__, subIndex) => ({
+      ? [...tenElements].map((_, subIndex) => ({
           active: false,
           description: `Sub item ${subIndex + (index + 10) * 10} description`,
           disableCheckbox: false,

package/src/Listing/index.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 
-import * as React from 'react';
-
+import { useAtomValue } from 'jotai';
 import {
   concat,
   differenceWith,
@@ -10,6 +9,7 @@ import {
   findIndex,
   gt,
   gte,
+  identity,
   includes,
   isNil,
   last,
@@ -27,19 +27,31 @@ import {
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { useAtomValue } from 'jotai';
 
 import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { useKeyObserver, useMemoComponent } from '../utils';
 import { ParentSize } from '..';
+import { useKeyObserver, useMemoComponent } from '../utils';
 
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
+import { EmptyResult } from './EmptyResult/EmptyResult';
+import { ListingHeader } from './Header';
+import { useListingStyles } from './Listing.styles';
+import ListingRow from './Row/Row';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import {
   Column,
   ColumnConfiguration,
@@ -48,14 +60,9 @@ import {
   RowId,
   SortOrder
 } from './models';
-import ListingRow from './Row/Row';
+import { subItemsPivotsAtom } from './tableAtoms';
 import { labelNoResultFound } from './translatedLabels';
 import useStyleTable from './useStyleTable';
-import { useListingStyles } from './Listing.styles';
-import { EmptyResult } from './EmptyResult/EmptyResult';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
-import { ListingHeader } from './Header';
-import { subItemsPivotsAtom } from './tableAtoms';
 
 const subItemPrefixKey = 'listing';
 
@@ -69,9 +76,9 @@ const getVisibleColumns = ({
     return columns;
   }
 
-  return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
-  ) as Array<Column>;
+  return selectedColumnIds
+    .map((id) => columns.find(propEq(id, 'id')))
+    .filter(identity) as Array<Column>;
 };
 
 interface CustomStyle {
@@ -198,19 +205,19 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
 
   const { t } = useTranslation();
 
-  const [hoveredRowId, setHoveredRowId] = React.useState<RowId | null>(null);
-  const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = React.useState<
+  const [hoveredRowId, setHoveredRowId] = useState<RowId | null>(null);
+  const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = useState<
     number | null
   >(null);
-  const [lastSelectionIndex, setLastSelectionIndex] = React.useState<
-    number | null
-  >(null);
-  const containerRef = React.useRef<HTMLDivElement>();
-  const actionBarRef = React.useRef<HTMLDivElement>();
+  const [lastSelectionIndex, setLastSelectionIndex] = useState<number | null>(
+    null
+  );
+  const containerRef = useRef<HTMLDivElement>();
+  const actionBarRef = useRef<HTMLDivElement>();
 
   const subItemsPivots = useAtomValue(subItemsPivotsAtom);
 
-  const allSubItemIds = React.useMemo(
+  const allSubItemIds = useMemo(
     () =>
       reduce<TRow | number, Array<string | number>>(
         (acc, row) => [
@@ -225,7 +232,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     [rows, subItems]
   );
 
-  const rowsToDisplay = React.useMemo(
+  const rowsToDisplay = useMemo(
     () =>
       subItems?.enable
         ? reduce<TRow, Array<TRow>>(
@@ -253,18 +260,18 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     [rows, subItemsPivots, subItems]
   );
 
-  const getSubItemRowId = React.useCallback((row: TRow) => {
+  const getSubItemRowId = useCallback((row: TRow) => {
     return `${subItemPrefixKey}_${row.internalListingParentId}_${row.id}`;
   }, []);
 
-  const getIsSubItem = React.useCallback(
+  const getIsSubItem = useCallback(
     (row: TRow) => {
       return allSubItemIds.includes(getSubItemRowId(row));
     },
     [allSubItemIds]
   );
 
-  const getRowId = React.useCallback(
+  const getRowId = useCallback(
     (row: TRow) => {
       return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
     },
@@ -429,7 +436,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     );
   };
 
-  const selectRow = (event: React.MouseEvent, row): void => {
+  const selectRow = (event: MouseEvent, row): void => {
     event.preventDefault();
     event.stopPropagation();
     // This prevents unwanted text selection
@@ -487,7 +494,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     columns
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (not(isShiftKeyDown)) {
       setShiftKeyDownRowPivot(null);
 
@@ -508,11 +515,11 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
       )}
       <div
         className={classes.container}
-        ref={containerRef as React.RefObject<HTMLDivElement>}
+        ref={containerRef as RefObject<HTMLDivElement>}
       >
         <div
           className={classes.actionBar}
-          ref={actionBarRef as React.RefObject<HTMLDivElement>}
+          ref={actionBarRef as RefObject<HTMLDivElement>}
         >
           <ListingActionBar
             actions={actions}
@@ -557,7 +564,6 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
                   stickyHeader
                   className={classes.table}
                   component="div"
-                  role={undefined}
                   size="small"
                 >
                   <ListingHeader

package/src/Listing/useResizeObserver.ts

@@ -1,4 +1,4 @@
-import { useEffect, RefObject } from 'react';
+import { RefObject, useEffect } from 'react';
 
 import ResizeObserver from 'resize-observer-polyfill';
 

package/src/ListingPage/Filter.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
+import { ReactElement, forwardRef } from 'react';
 import { useMemoComponent } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -14,24 +13,22 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 export interface FilterProps {
-  content?: React.ReactElement;
+  content?: ReactElement;
 }
 
-const Filter = React.forwardRef(
-  ({ content }: FilterProps, ref): JSX.Element => {
-    const { classes } = useStyles();
-
-    return (
-      <Box
-        className={classes.content}
-        component="div"
-        ref={ref as React.RefObject<HTMLDivElement>}
-      >
-        {content}
-      </Box>
-    );
-  }
-);
+const Filter = forwardRef(({ content }: FilterProps, ref): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <Box
+      className={classes.content}
+      component="div"
+      ref={ref as React.RefObject<HTMLDivElement>}
+    >
+      {content}
+    </Box>
+  );
+});
 
 interface MemoizedFilterProps extends FilterProps {
   memoProps?: Array<unknown>;

package/src/ListingPage/index.tsx

@@ -4,9 +4,9 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import { useMemoComponent } from '../utils';
-import WithPanel from '../Panel/WithPanel';
 import { ParentSize } from '..';
+import WithPanel from '../Panel/WithPanel';
+import { useMemoComponent } from '../utils';
 
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';

package/src/Logo/CentreonLogo.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import { Image, ImageVariant } from '..';
+import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { useThemeMode } from '../utils/useThemeMode';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
-import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
 
 import { labelCentreonLogo } from './translatedLabels';
 

package/src/MenuSkeleton/index.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { SkeletonProps, useTheme, alpha } from '@mui/material';
+import { SkeletonProps, alpha, useTheme } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 

package/src/Module/LicensedModule/LicenseCheck/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
-import { FallbackPage } from '../../../FallbackPage/FallbackPage';
 import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
+import { FallbackPage } from '../../../FallbackPage/FallbackPage';
 import { getModuleLicenseCheckEndpoint } from '../api';
 
 import { licenseDecoder } from './decoder';

package/src/Module/index.tsx

@@ -1,9 +1,9 @@
-import { Provider as JotaiProvider, createStore } from 'jotai';
 import { QueryClient } from '@tanstack/react-query';
+import { Provider as JotaiProvider, createStore } from 'jotai';
 
-import { createGenerateClassName, StylesProvider } from '@mui/styles';
+import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
-import { ThemeProvider, QueryProvider } from '..';
+import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {

package/src/MultiSelectEntries/index.tsx

@@ -2,8 +2,8 @@
 
 import { Ref } from 'react';
 
-import { makeStyles } from 'tss-react/mui';
 import { CxArg } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
 
 import IconCreate from '@mui/icons-material/Create';
 import { Box, Chip, FormHelperText, Grid, Typography } from '@mui/material';

package/src/MultiSelectEntries/useHover.ts

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, Ref } from 'react';
+import { Ref, useEffect, useRef, useState } from 'react';
 
 const useHover = (): Array<Ref<Node> | boolean> => {
   const [value, setValue] = useState<boolean>(false);

package/src/Panel/Section/ExpandableSection.tsx

@@ -1,15 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  Typography,
-  AccordionSummary,
-  AccordionDetails,
   Accordion,
-  styled,
+  AccordionDetails,
   AccordionProps,
-  AccordionSummaryProps
+  AccordionSummary,
+  AccordionSummaryProps,
+  Typography,
+  styled
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const useStyles = makeStyles()((theme) => ({
   details: {

package/src/Panel/Section/index.test.tsx

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

package/src/Panel/Section/index.tsx

@@ -1,8 +1,8 @@
 import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { List, ListItem, Slide, Paper } from '@mui/material';
 import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
+import { List, ListItem, Paper, Slide } from '@mui/material';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';

package/src/Panel/index.tsx

@@ -1,16 +1,18 @@
-/* eslint-disable react/no-unused-prop-types */
-// There is an issue about using forwardRef: https://github.com/yannickcr/eslint-plugin-react/issues/2760
-
-import * as React from 'react';
-
 import { isEmpty, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
+import { AppBar, Divider, Paper, Slide, Tabs } from '@mui/material';
 
 import { IconButton } from '..';
 
+import {
+  ReactElement,
+  RefObject,
+  forwardRef,
+  useCallback,
+  useEffect
+} from 'react';
 import { minTabHeight } from './Tab';
 
 interface StylesProps extends Pick<Props, 'headerBackgroundColor' | 'width'> {
@@ -86,20 +88,20 @@ export interface Tab {
 
 export interface Props {
   className?: string;
-  header?: React.ReactElement;
+  header?: ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
   onClose?: () => void;
   onResize?: (newWidth: number) => void;
   onTabSelect?: (event, id: number) => void;
-  selectedTab: React.ReactElement;
+  selectedTab: ReactElement;
   selectedTabId?: number;
   tabs?: Array<JSX.Element>;
   width?: number;
 }
 
-const Panel = React.forwardRef(
+const Panel = forwardRef(
   (
     {
       header,
@@ -133,7 +135,7 @@ const Panel = React.forwardRef(
       }
     };
 
-    React.useEffect(() => {
+    useEffect(() => {
       window.addEventListener('resize', resizeWindow);
 
       return (): void => {
@@ -151,7 +153,7 @@ const Panel = React.forwardRef(
       document.removeEventListener('mousemove', moveMouse, true);
     };
 
-    const moveMouse = React.useCallback((e) => {
+    const moveMouse = useCallback((e) => {
       e.preventDefault();
 
       const maxWidth = getMaxWidth();
@@ -183,7 +185,7 @@ const Panel = React.forwardRef(
       >
         <Paper className={cx(classes.container, className)} elevation={2}>
           {!isNil(onResize) && (
-            <div className={classes.dragger} role="none" onMouseDown={resize} />
+            <div className={classes.dragger} onMouseDown={resize} />
           )}
           {header && (
             <>
@@ -224,7 +226,7 @@ const Panel = React.forwardRef(
             </AppBar>
             <div
               className={classes.contentContainer}
-              ref={ref as React.RefObject<HTMLDivElement>}
+              ref={ref as RefObject<HTMLDivElement>}
             >
               <div className={classes.content} id="panel-content">
                 {selectedTab}