@centreon/ui 24.9.4 → 24.9.6

package/src/Listing/models.ts

@@ -15,12 +15,10 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
-  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
-  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;

package/src/Listing/tableAtoms.ts

@@ -32,19 +32,14 @@ export const tableStyleAtom = atom<TableStyleAtom>({
   }
 });
 
-export const tableStyleDerivedAtom = atom(
-  null,
-  (get, set, { listingVariant }) => {
-    const tableStyle = get(tableStyleAtom);
-
-    const isExtendedMode = equals(listingVariant, ListingVariant.extended);
-
-    set(tableStyleAtom, {
-      ...tableStyle,
-      body: isExtendedMode ? extendedTableBody : compactTableBody,
-      header: isExtendedMode ? extendedTableHeader : compactTableHeader
-    });
-  }
-);
+export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
+  const tableStyle = get(tableStyleAtom);
+
+  const isExtendedMode = equals(viewMode, ListingVariant.extended);
 
-export const subItemsPivotsAtom = atom<Array<number | string>>([]);
+  set(tableStyleAtom, {
+    ...tableStyle,
+    body: isExtendedMode ? extendedTableBody : compactTableBody,
+    header: isExtendedMode ? extendedTableHeader : compactTableHeader
+  });
+});

package/src/Listing/useResizeObserver.ts

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

package/src/Listing/useStyleTable.ts

@@ -14,7 +14,7 @@ import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 interface TableStyle {
   checkable?: boolean;
   currentVisibleColumns?: Array<Column>;
-  listingVariant?: ListingVariant;
+  viewMode?: ListingVariant;
 }
 
 interface TableStyleState {
@@ -27,33 +27,32 @@ const isCompactMode = equals<ListingVariant | undefined>(
 );
 
 interface GetTextStyleProps {
-  listingVariant?: ListingVariant;
   theme: Theme;
+  viewMode?: ListingVariant;
 }
 
 export const getTextStyleByViewMode = ({
-  listingVariant,
+  viewMode,
   theme
 }: GetTextStyleProps): CSSObject =>
   pick(
     ['color', 'fontSize', 'lineHeight'],
-    theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
+    theme.typography[isCompactMode(viewMode) ? 'body2' : 'body1']
   );
 
 const useStyleTable = ({
   checkable,
   currentVisibleColumns,
-  listingVariant
+  viewMode
 }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
   const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
+    const checkbox = checkable ? '50px ' : '';
 
     const columnTemplate = currentVisibleColumns
-      ?.filter((column) => column)
       ?.map(({ width, shortLabel }) => {
         if (!isNil(shortLabel)) {
           return 'min-content';
@@ -70,10 +69,10 @@ const useStyleTable = ({
   };
 
   useEffect(() => {
-    if (listingVariant) {
-      updateStyleTable({ listingVariant });
+    if (viewMode) {
+      updateStyleTable({ viewMode });
     }
-  }, [listingVariant]);
+  }, [viewMode]);
 
   return {
     dataStyle,

package/src/ListingPage/Filter.tsx

@@ -1,8 +1,9 @@
+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) => ({
@@ -13,22 +14,24 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 export interface FilterProps {
-  content?: ReactElement;
+  content?: React.ReactElement;
 }
 
-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>
-  );
-});
+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>
+    );
+  }
+);
 
 interface MemoizedFilterProps extends FilterProps {
   memoProps?: Array<unknown>;

package/src/ListingPage/index.stories.tsx

@@ -14,7 +14,7 @@ import Panel from '../Panel';
 
 import Filter from './Filter';
 
-import ListingPage, { ListingPageProps } from '.';
+import ListingPage from '.';
 
 export default { title: 'Listing Page' };
 
@@ -59,9 +59,6 @@ const useStyles = makeStyles()((theme) => ({
     gridGap: theme.spacing(2),
     gridTemplateColumns: 'auto auto 1fr'
   },
-  page: {
-    height: '100vh'
-  },
   title: {
     alignItems: 'center',
     gridArea: 'title',
@@ -254,18 +251,8 @@ const DetailsPanelWithTabs = (): JSX.Element => (
   />
 );
 
-const Template = (args: ListingPageProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.page}>
-      <ListingPage {...args} />
-    </div>
-  );
-};
-
 export const normal = (): JSX.Element => (
-  <Template
+  <ListingPage
     filter={<FilterWithContent />}
     listing={listing}
     panelOpen={false}
@@ -273,7 +260,7 @@ export const normal = (): JSX.Element => (
 );
 
 export const withOpenPanel = (): JSX.Element => (
-  <Template
+  <ListingPage
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -282,7 +269,7 @@ export const withOpenPanel = (): JSX.Element => (
 );
 
 export const withOpenPanelAndTabs = (): JSX.Element => (
-  <Template
+  <ListingPage
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -291,7 +278,7 @@ export const withOpenPanelAndTabs = (): JSX.Element => (
 );
 
 export const withFilterDetailsAndOpenPanel = (): JSX.Element => (
-  <Template
+  <ListingPage
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -303,7 +290,7 @@ export const withFixedPanel = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <Template
+    <ListingPage
       panelFixed
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={listing}
@@ -317,7 +304,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <Template
+    <ListingPage
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={
         <Listing
@@ -339,7 +326,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
 };
 
 export const withALongContent = (): JSX.Element => (
-  <Template
+  <ListingPage
     filter={<FilterWithContent />}
     listing={
       <div>

package/src/ListingPage/index.tsx

@@ -1,12 +1,11 @@
-import { Suspense, useRef } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import { ParentSize } from '..';
+import useMemoComponent from '../utils/useMemoComponent';
 import WithPanel from '../Panel/WithPanel';
-import { useMemoComponent } from '../utils';
 
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';
@@ -31,7 +30,7 @@ const useStyles = makeStyles()((theme) => {
   };
 });
 
-export interface ListingPageProps {
+interface Props {
   filter: JSX.Element;
   fullHeight?: boolean;
   listing: JSX.Element;
@@ -53,10 +52,32 @@ const ListingPage = ({
   listingScrollOffset = 16,
   fullHeight = false,
   memoListingProps = []
-}: ListingPageProps): JSX.Element => {
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles();
+  const [listingHeight, setListingHeight] = useState(0);
+  const listingRef = useRef<HTMLDivElement | null>(null);
   const filtersRef = useRef<HTMLDivElement | null>(null);
 
+  const resize = (): void => {
+    setListingHeight(window.innerHeight);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+
+    setListingHeight(window.innerHeight);
+
+    return () => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  const listingContainerHeight =
+    listingHeight -
+    (filtersRef.current?.getBoundingClientRect().height || 0) -
+    (filtersRef.current?.getBoundingClientRect().top || 0) -
+    listingScrollOffset;
+
   const memoListingComponent = useMemoComponent({
     Component: listing,
     memoProps: [...memoListingProps]
@@ -69,21 +90,18 @@ const ListingPage = ({
       </div>
 
       <WithPanel fixed={panelFixed} open={panelOpen} panel={panel}>
-        <ParentSize>
-          {({ height }) => (
-            <Box
-              className={classes.listing}
-              sx={{
-                height: `calc(${height}px - ${listingScrollOffset}px)`,
-                ...(fullHeight && { height: '100%' })
-              }}
-            >
-              <Suspense fallback={<ListingSkeleton />}>
-                {memoListingComponent}
-              </Suspense>
-            </Box>
-          )}
-        </ParentSize>
+        <Box
+          className={classes.listing}
+          ref={listingRef}
+          sx={{
+            ...(fullHeight && { height: '100%' }),
+            maxHeight: listingContainerHeight
+          }}
+        >
+          <Suspense fallback={<ListingSkeleton />}>
+            {memoListingComponent}
+          </Suspense>
+        </Box>
       </WithPanel>
     </div>
   );

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/centreon-logo-one-line-light.svg';
+import CentreonLogoDark from '../../assets/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, alpha, useTheme } from '@mui/material';
+import { SkeletonProps, useTheme, alpha } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 

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

@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import withMock from 'storybook-addon-mock';
 import { makeStyles } from 'tss-react/mui';
 
 import { Alert, Container } from '@mui/material';
@@ -19,6 +20,7 @@ export default {
     moduleName: { control: 'text' }
   },
   component: LicenseCheck,
+  decorators: [withMock],
   title: 'LicenseCheck'
 } as ComponentMeta<typeof LicenseCheck>;
 

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

@@ -1,7 +1,10 @@
+import * as React from 'react';
+
+import { isNil } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
 import { FallbackPage } from '../../../FallbackPage/FallbackPage';
+import { PageSkeleton, useFetchQuery } from '../../..';
 import { getModuleLicenseCheckEndpoint } from '../api';
 
 import { licenseDecoder } from './decoder';
@@ -14,27 +17,17 @@ import {
 
 export interface LicenseCheckProps {
   children: React.ReactElement;
-  isFederatedComponent?: boolean;
   moduleName: string;
 }
 
 interface ContentProps {
   children: React.ReactElement;
-  isFederatedComponent?: boolean;
   isValid: boolean;
 }
 
-const Content = ({
-  children,
-  isValid,
-  isFederatedComponent
-}: ContentProps): JSX.Element | null => {
+const Content = ({ children, isValid }: ContentProps): JSX.Element => {
   const { t } = useTranslation();
 
-  if (isFederatedComponent && !isValid) {
-    return null;
-  }
-
   return isValid ? (
     children
   ) : (
@@ -47,11 +40,10 @@ const Content = ({
 };
 
 const LicenseCheck = ({
-  isFederatedComponent,
   children,
   moduleName
 }: LicenseCheckProps): JSX.Element | null => {
-  const { isError, data, isLoading } = useFetchQuery<License>({
+  const { isError, data } = useFetchQuery<License>({
     decoder: licenseDecoder,
     getEndpoint: () => getModuleLicenseCheckEndpoint(moduleName),
     getQueryKey: () => ['license', moduleName]
@@ -63,17 +55,10 @@ const LicenseCheck = ({
 
   const isValid = data?.success;
 
-  const skeleton = isFederatedComponent ? <MenuSkeleton /> : <PageSkeleton />;
-
-  return isLoading ? (
-    skeleton
+  return isNil(isValid) ? (
+    <PageSkeleton />
   ) : (
-    <Content
-      isFederatedComponent={isFederatedComponent}
-      isValid={isValid as boolean}
-    >
-      {children}
-    </Content>
+    <Content isValid={isValid as boolean}>{children}</Content>
   );
 };
 

package/src/Module/LicensedModule/index.tsx

@@ -5,19 +5,13 @@ import LicenseCheck, { LicenseCheckProps } from './LicenseCheck';
 type Props = ModuleProps & LicenseCheckProps;
 
 const LicensedModule = ({
-  isFederatedComponent,
   moduleName,
   children,
   ...props
 }: Props): JSX.Element => {
   return (
     <Module {...props}>
-      <LicenseCheck
-        isFederatedComponent={isFederatedComponent}
-        moduleName={moduleName}
-      >
-        {children}
-      </LicenseCheck>
+      <LicenseCheck moduleName={moduleName}>{children}</LicenseCheck>
     </Module>
   );
 };

package/src/Module/index.tsx

@@ -1,15 +1,15 @@
-import { QueryClient } from '@tanstack/react-query';
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
-import { StylesProvider, createGenerateClassName } from '@mui/styles';
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
 
-import { QueryProvider, ThemeProvider } from '..';
+import { ThemeProvider, QueryProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars?: number;
-  queryClient?: QueryClient;
+  maxSnackbars: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -17,16 +17,15 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars = 3,
-  store,
-  queryClient
+  maxSnackbars,
+  store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
   });
 
   return (
-    <QueryProvider queryClient={queryClient}>
+    <QueryProvider>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
           <ThemeProvider>

package/src/MultiSelectEntries/index.tsx

@@ -2,8 +2,8 @@
 
 import { Ref } from 'react';
 
-import { CxArg } from 'tss-react';
 import { makeStyles } from 'tss-react/mui';
+import { CxArg } from 'tss-react';
 
 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 { Ref, useEffect, useRef, useState } from 'react';
+import { useRef, useState, useEffect, Ref } from 'react';
 
 const useHover = (): Array<Ref<Node> | boolean> => {
   const [value, setValue] = useState<boolean>(false);

package/src/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/ExpandableSection.tsx

@@ -1,15 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  Accordion,
+  Typography,
+  AccordionSummary,
   AccordionDetails,
+  Accordion,
+  styled,
   AccordionProps,
-  AccordionSummary,
-  AccordionSummaryProps,
-  Typography,
-  styled
+  AccordionSummaryProps
 } 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 { fireEvent, render } from '../../../test/testRenderer';
+import { render, fireEvent } from '../../testRenderer';
 
 import SectionPanel from '.';
 

package/src/Panel/Section/index.tsx

@@ -1,12 +1,12 @@
 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';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 
 import ExpandableSection from './ExpandableSection';