@centreon/ui 23.10.44 → 23.10.46

package/src/Listing/models.ts

@@ -19,6 +19,7 @@ export interface Column {
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
+  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;

package/src/Listing/tableAtoms.ts

@@ -43,3 +43,5 @@ export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
     header: isExtendedMode ? extendedTableHeader : compactTableHeader
   });
 });
+
+export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Listing/useStyleTable.ts

@@ -50,7 +50,7 @@ const useStyleTable = ({
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
   const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? '50px ' : '';
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
 
     const columnTemplate = currentVisibleColumns
       ?.map(({ width, shortLabel }) => {

package/src/ListingPage/index.tsx

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

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/centreon-logo-one-line-light.svg';
-import CentreonLogoDark from '../../assets/centreon-logo-one-line-dark.svg';
+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/Module/LicensedModule/LicenseCheck/index.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import withMock from 'storybook-addon-mock';
 import { makeStyles } from 'tss-react/mui';
 
 import { Alert, Container } from '@mui/material';
@@ -20,7 +19,6 @@ 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/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Panel, { Props } from '.';
 

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

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../testRenderer';
+import { render, fireEvent } from '../../../test/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/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/Panel/index.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.default,
+      backgroundColor: theme.palette.background.panel,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,7 +85,8 @@ export interface Tab {
 }
 
 export interface Props {
-  header: React.ReactElement;
+  className?: string;
+  header?: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
@@ -111,11 +112,12 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize
+      onResize,
+      className
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes } = useStyles({
+    const { classes, cx } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -179,7 +181,7 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={classes.container} elevation={2}>
+        <Paper className={cx(classes.container, className)} elevation={2}>
           {!isNil(onResize) && (
             <div className={classes.dragger} role="none" onMouseDown={resize} />
           )}

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,17 +9,20 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
+  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable }) => ({
+  (theme, { minInputHeight, editable, error }) => ({
     container: {
       '& p': {
         margin: 0
       },
       backgroundColor: theme.palette.background.paper,
-      border: '1px solid transparent',
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -31,7 +34,9 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: `1px solid ${theme.palette.primary.main}`
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
@@ -41,13 +46,16 @@ const useStyles = makeStyles<StyleProps>()(
 );
 
 interface Props {
+  className?: string;
   editable: boolean;
   editorState?: string;
+  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
+  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
@@ -61,9 +69,12 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState
+  initialEditorState,
+  error,
+  onBlur,
+  className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, minInputHeight });
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
@@ -119,9 +130,18 @@ const ContentEditable = ({
 
   const isTextEmpty = isEmpty(root);
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
   return (
     <div
-      className={cx(classes.container, isFocused && classes.inputFocused)}
+      className={cx(
+        classes.container,
+        className,
+        isFocused && classes.inputFocused
+      )}
       id={namespace}
     >
       {editable && isTextEmpty && (
@@ -139,7 +159,7 @@ const ContentEditable = ({
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={(): void => setFocused(false)}
+        onBlur={handleBlur}
         onFocus={(): void => setFocused(true)}
       />
     </div>

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -0,0 +1,204 @@
+import RichTextEditor from './RichTextEditor';
+
+interface CheckElementStyleOnRichTextEditorProps {
+  check: boolean;
+  element: HTMLElement;
+}
+
+const mockInititalStateToEditor =
+  '{"root": {"children": [{"children": [{"detail": 0,"format": 0,"mode": "normal","style": "","text": "test Cypress","type": "text","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "paragraph","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "root","version": 1}}';
+
+const checkElementStyleOnRichTextEditor = ({
+  element,
+  check
+}: CheckElementStyleOnRichTextEditorProps): void => {
+  cy.wrap(element).should('be.visible');
+
+  if (check) {
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'font-style')
+      .and('match', /italic/);
+
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'text-decoration')
+      .and('match', /underline line-through/);
+  } else {
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'font-style')
+      .and('not.match', /italic/);
+
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'text-decoration')
+      .and('not.match', /underline line-through/);
+  }
+};
+
+describe('Rich Text Editor', () => {
+  describe('Editable Rich Text Editor', () => {
+    beforeEach(() => {
+      cy.mount({ Component: <RichTextEditor editable /> });
+    });
+
+    it('displays all elements when RichTextEditor is called with required props', () => {
+      cy.findByLabelText('Undo').should('be.visible');
+      cy.findByLabelText('Redo').should('be.visible');
+      cy.findByLabelText('bold').should('be.visible');
+      cy.findByLabelText('italic').should('be.visible');
+      cy.findByLabelText('underline').should('be.visible');
+      cy.findByLabelText('strikethrough').should('be.visible');
+      cy.findByLabelText('link').should('be.visible');
+      cy.findByLabelText('RichTextEditor')
+        .should('be.visible')
+        .and('have.value', '');
+
+      cy.get('#RichTextEditor').contains('Type here...');
+    });
+
+    it('displays changes with undo redo buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+
+      cy.findByLabelText('Undo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should('have.text', '');
+
+      cy.findByLabelText('Redo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+    });
+
+    it('displays changes with bold, italic, underline and strikethrough buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#bold').click();
+      cy.get('#italic').click();
+      cy.get('#underline').click();
+      cy.get('#strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: true, element });
+      });
+
+      cy.get('#bold').click();
+      cy.get('#italic').click();
+      cy.get('#underline').click();
+      cy.get('#strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: false, element });
+      });
+    });
+
+    it('adds link with an url when link button is clicked', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#link').click();
+
+      cy.findByLabelText('Saved link').should('have.text', 'https://');
+
+      cy.findByLabelText('Edit link').click();
+      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .should('have.attr', 'href')
+            .and('match', /^https:\/\/www.centreon.com/);
+
+          cy.wrap(element)
+            .should('have.attr', 'rel')
+            .and('match', /^noopener/);
+
+          cy.wrap(element)
+            .should('have.attr', 'target')
+            .and('match', /_blank/);
+        });
+
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#link').click({ force: true });
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .contains('p', 'cypress')
+            .should('not.have.attr', 'href');
+
+          cy.wrap(element).should('not.have.attr', 'rel');
+
+          cy.wrap(element).should('not.have.attr', 'target');
+        });
+    });
+  });
+
+  describe('Disabled Rich Text Editor', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable={false}
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.get('[data-testid="RichTextEditor"]')
+        .invoke('attr', 'contenteditable')
+        .should('eq', 'false');
+      cy.findByLabelText('Undo').should('not.exist');
+      cy.findByLabelText('Redo').should('not.exist');
+      cy.findByLabelText('bold').should('not.exist');
+      cy.findByLabelText('italic').should('not.exist');
+      cy.findByLabelText('underline').should('not.exist');
+      cy.findByLabelText('strikethrough').should('not.exist');
+      cy.findByLabelText('link').should('not.exist');
+    });
+  });
+
+  describe('Custom style editable rich text editor ', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable
+            minInputHeight={200}
+            namespace="CypressComponentTest"
+            placeholder="Type Cypress test..."
+          />
+        )
+      });
+    });
+    it('displays editor with custom namespace', () => {
+      cy.get('#CypressComponentTest > p').should('be.exist');
+      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
+    });
+
+    it('displays editor with custom placeholder', () => {
+      cy.get('#CypressComponentTest > p').contains('Type Cypress test...');
+    });
+
+    it('displays editor with custom minimum input height', () => {
+      cy.get('[data-testid="CypressComponentTest"]').should(
+        'have.css',
+        'min-height',
+        '200px'
+      );
+    });
+  });
+});

package/src/RichTextEditor/RichTextEditor.tsx

@@ -7,6 +7,9 @@ import anylogger from 'anylogger';
 import { makeStyles } from 'tss-react/mui';
 import { EditorState } from 'lexical';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { equals } from 'ramda';
+
+import { Typography } from '@mui/material';
 
 import ContentEditable from './ContentEditable';
 import ToolbarPlugin from './plugins/ToolbarPlugin/index';
@@ -14,15 +17,19 @@ import AutoCompleteLinkPlugin from './plugins/AutoLinkPlugin/index';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
+  contentClassName?: string;
   editable: boolean;
   editorState?: string;
+  error?: string;
   getEditorState?: (editorState: EditorState) => void;
   initialEditorState?: string;
   inputClassname?: string;
   minInputHeight?: number;
   namespace?: string;
+  onBlur?: (e: string) => void;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
+  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -31,26 +38,46 @@ const onError = (error: Error): void => {
   log.error(error.message);
 };
 
-const useStyles = makeStyles()((theme) => ({
-  bold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  italic: {
-    fontStyle: 'italic'
-  },
-  link: {
-    color: theme.palette.primary.main
-  },
-  strikethough: {
-    textDecoration: 'line-through'
-  },
-  underline: {
-    textDecoration: 'underline'
-  },
-  underlineStrikethrough: {
-    textDecoration: 'underline line-through'
-  }
-}));
+const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
+  (theme, { toolbarPositions }) => ({
+    bold: {
+      fontWeight: theme.typography.fontWeightBold
+    },
+    container: equals(toolbarPositions, 'end')
+      ? {
+          display: 'flex',
+          flexDirection: 'column-reverse'
+        }
+      : {},
+    error: {
+      color: theme.palette.error.main,
+      fontSize: theme.spacing(1.5),
+      fontWeight: '200',
+      paddingLeft: theme.spacing(1.5),
+      paddingTop: theme.spacing(0.5)
+    },
+    italic: {
+      fontStyle: 'italic'
+    },
+    link: {
+      color: theme.palette.primary.main
+    },
+    strikethrough: {
+      textDecoration: 'line-through'
+    },
+    toolbar: equals(toolbarPositions, 'end')
+      ? {
+          marginTop: theme.spacing(0.5)
+        }
+      : {},
+    underline: {
+      textDecoration: 'underline'
+    },
+    underlineStrikethrough: {
+      textDecoration: 'underline line-through'
+    }
+  })
+);
 
 const RichTextEditor = ({
   namespace = 'RichTextEditor',
@@ -61,9 +88,13 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition
+  resetEditorToInitialStateCondition,
+  toolbarPositions = 'start',
+  error,
+  onBlur,
+  contentClassName
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useStyles({ toolbarPositions });
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -80,7 +111,7 @@ const RichTextEditor = ({
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethough,
+        strikethrough: classes.strikethrough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
@@ -89,30 +120,40 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
-      <RichTextPlugin
-        ErrorBoundary={LexicalErrorBoundary}
-        contentEditable={
-          <ContentEditable
-            editable={editable}
-            editorState={editorState}
-            hasInitialTextContent={hasInitialTextContent}
-            initialEditorState={initialEditorState}
-            inputClassname={inputClassname}
-            minInputHeight={minInputHeight}
-            namespace={namespace}
-            placeholder={placeholder}
-            resetEditorToInitialStateCondition={
-              resetEditorToInitialStateCondition
+      <div className={classes.container}>
+        <div className={classes.toolbar}>
+          <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
+        </div>
+        <div>
+          <RichTextPlugin
+            ErrorBoundary={LexicalErrorBoundary}
+            contentEditable={
+              <ContentEditable
+                className={contentClassName || ''}
+                editable={editable}
+                editorState={editorState}
+                error={error}
+                hasInitialTextContent={hasInitialTextContent}
+                initialEditorState={initialEditorState}
+                inputClassname={inputClassname}
+                minInputHeight={minInputHeight}
+                namespace={namespace}
+                placeholder={placeholder}
+                resetEditorToInitialStateCondition={
+                  resetEditorToInitialStateCondition
+                }
+                onBlur={onBlur}
+              />
             }
+            placeholder={null}
           />
-        }
-        placeholder={null}
-      />
-      <HistoryPlugin />
-      <LinkPlugin />
-      <AutoCompleteLinkPlugin />
-      <FloatingLinkEditorPlugin editable={editable} />
+          <HistoryPlugin />
+          <LinkPlugin />
+          <AutoCompleteLinkPlugin />
+          <FloatingLinkEditorPlugin editable={editable} />
+          {error && <Typography className={classes.error}>{error}</Typography>}
+        </div>
+      </div>
     </LexicalComposer>
   );
 };

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -117,6 +117,7 @@ const FloatingLinkEditor = ({
         {editMode ? (
           <InputField
             autoFocus
+            dataTestId="InputLinkField"
             defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"

package/src/Snackbar/index.tsx

@@ -7,22 +7,28 @@ import { makeStyles } from 'tss-react/mui';
 import { IconButton, Alert } from '@mui/material';
 import IconClose from '@mui/icons-material/Close';
 
+import { sanitizedHTML } from '../utils';
+
 import Severity from './Severity';
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
   alertIcon: {
-    paddingTop: '10px'
+    paddingTop: theme.spacing(1.25)
   },
   closeIcon: {
     fontSize: 20,
     opacity: 0.9
   },
   message: {
+    '& a': {
+      color: theme.palette.primary.main,
+      textDecoration: 'none'
+    },
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   }
-});
+}));
 
 export interface SnackbarProps {
   id: string | number;
@@ -51,6 +57,10 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
+    const sanitizedMessage = sanitizedHTML({ initialContent: message });
+
+    const formatedMessage =
+      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -69,7 +79,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {message}
+          {formatedMessage}
         </Alert>
       </SnackbarContent>
     );