@centreon/ui 24.4.13 → 24.4.14

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,30 +27,30 @@ 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
       ?.map(({ width, shortLabel }) => {
@@ -69,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/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

@@ -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';
 
@@ -9,7 +9,6 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -20,22 +19,15 @@ const useStyles = makeStyles()(() => ({
   }
 }));
 
-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;
 }
 
@@ -48,21 +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);
   };
@@ -84,10 +75,6 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
-  useEffect(() => {
-    getPopoverData?.({ anchorEl, setAnchorEl });
-  }, [anchorEl]);
-
   return (
     <>
       <IconButton
@@ -110,7 +97,6 @@ const PopoverMenu = ({
             style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
-            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,17 +9,17 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
-  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable, error }) => ({
+  (theme, { minInputHeight, editable }) => ({
     container: {
+      '& p': {
+        margin: 0
+      },
       backgroundColor: theme.palette.background.paper,
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : '1px solid transparent',
+      border: '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -31,45 +31,27 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
-    },
-    notEditable: {
-      backgroundColor: 'transparent'
+      border: `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
-    },
-    root: {
-      '& p,h1,h2,h3,h4,h5,h6,span': {
-        margin: 0
-      }
     }
   })
 );
 
 interface Props {
-  className?: string;
-  disabled?: boolean;
   editable: boolean;
   editorState?: string;
-  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
-  initialize?: (editor) => void;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
-  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
 
-const defaultState =
-  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
-
 const ContentEditable = ({
   minInputHeight,
   inputClassname,
@@ -79,17 +61,13 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState,
-  error,
-  onBlur,
-  className,
-  disabled,
-  initialize
+  initialEditorState
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, error, minInputHeight });
+  const { classes, cx } = useStyles({ editable, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
+  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -101,13 +79,17 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    if (!editable) {
-      const newEditorState = editor.parseEditorState(
-        editorState || defaultState
-      );
+    setEditable(editor.isEditable());
+
+    if (editorState && !editable) {
+      const newEditorState = editor.parseEditorState(editorState);
 
       editor.setEditorState(newEditorState);
     }
+
+    return editor.registerEditableListener((currentIsEditable) => {
+      setEditable(currentIsEditable);
+    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -126,49 +108,21 @@ const ContentEditable = ({
     const shouldResetEditorToInitialState =
       resetEditorToInitialStateCondition?.();
 
-    if (!shouldResetEditorToInitialState) {
+    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
       return;
     }
 
-    const newEditorState = editor.parseEditorState(
-      initialEditorState || defaultState
-    );
+    const newEditorState = editor.parseEditorState(initialEditorState);
 
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty =
-    isEmpty(root) &&
-    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-    setFocused(false);
-    onBlur?.(event);
-  };
-
-  const isEditable = editor.isEditable();
-
-  useEffect(() => {
-    if (isNil(disabled)) {
-      return;
-    }
-
-    editor.setEditable(!disabled);
-  }, [disabled]);
-
-  useEffect(() => {
-    initialize?.(editor);
-  }, []);
+  const isTextEmpty = isEmpty(root);
 
   return (
     <div
-      className={cx(
-        classes.root,
-        editable && classes.container,
-        !isEditable && !disabled && classes.notEditable,
-        className,
-        isFocused && classes.inputFocused
-      )}
+      className={cx(classes.container, isFocused && classes.inputFocused)}
+      id={namespace}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>
@@ -178,14 +132,14 @@ const ContentEditable = ({
       <div
         aria-label={namespace}
         className={cx(
-          editable && isTextEmpty && classes.emptyInput,
+          isTextEmpty && classes.emptyInput,
           classes.input,
           inputClassname
         )}
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={handleBlur}
+        onBlur={(): void => setFocused(false)}
         onFocus={(): void => setFocused(true)}
       />
     </div>