@centreon/ui 24.7.2 → 24.7.4

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/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/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 { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 import WithPanel from '../Panel/WithPanel';
-import { ParentSize } from '..';
 
 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

@@ -6,8 +6,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Image, ImageVariant } from '..';
 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 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/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 { FallbackPage } from '../../../FallbackPage/FallbackPage';
-import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
+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,5 +1,6 @@
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
-import { QueryClient } from '@tanstack/react-query';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
 
@@ -8,8 +9,7 @@ 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/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/index.test.tsx

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

package/src/Panel/Section/index.tsx

@@ -6,7 +6,7 @@ import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import { IconButton } from '..';
+import IconButton from '../Button/Icon';
 
 import { minTabHeight } from './Tab';
 
@@ -33,7 +33,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.panel,
+      backgroundColor: theme.palette.background.default,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,8 +85,7 @@ export interface Tab {
 }
 
 export interface Props {
-  className?: string;
-  header?: React.ReactElement;
+  header: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
@@ -112,12 +111,11 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize,
-      className
+      onResize
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
+    const { classes } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -181,7 +179,7 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={cx(classes.container, className)} elevation={2}>
+        <Paper className={classes.container} elevation={2}>
           {!isNil(onResize) && (
             <div className={classes.dragger} role="none" onMouseDown={resize} />
           )}
@@ -226,9 +224,7 @@ const Panel = React.forwardRef(
               className={classes.contentContainer}
               ref={ref as React.RefObject<HTMLDivElement>}
             >
-              <div className={classes.content} id="panel-content">
-                {selectedTab}
-              </div>
+              <div className={classes.content}>{selectedTab}</div>
             </div>
           </div>
         </Paper>

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,38 +6,28 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType
+  PopperPlacementType,
+  useTheme
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()((theme) => ({
-  popover: {
-    zIndex: theme.zIndex.tooltip
-  },
+const useStyles = makeStyles()(() => ({
   popoverIconButton: {
     padding: 0,
     width: '100%'
   }
 }));
 
-interface PopoverData {
-  anchorEl: HTMLElement | undefined;
-  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
-}
-
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
-  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
-  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -50,20 +40,20 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId,
-  getPopoverData,
-  popperProps
+  dataTestId
 }: Props): JSX.Element => {
+  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
+
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
+
     if (isClosedByInputClick) {
       return;
     }
-
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -85,10 +75,6 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
-  useEffect(() => {
-    getPopoverData?.({ anchorEl, setAnchorEl });
-  }, [anchorEl]);
-
   return (
     <>
       <IconButton
@@ -106,12 +92,11 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
-            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
+            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
-            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>