@centreon/ui 23.10.69 → 23.10.70

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} />
           )}
@@ -224,7 +226,9 @@ const Panel = React.forwardRef(
               className={classes.contentContainer}
               ref={ref as React.RefObject<HTMLDivElement>}
             >
-              <div className={classes.content}>{selectedTab}</div>
+              <div className={classes.content} id="panel-content">
+                {selectedTab}
+              </div>
             </div>
           </div>
         </Paper>

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,17 +46,25 @@ const useStyles = makeStyles<StyleProps>()(
 );
 
 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,
@@ -61,13 +74,17 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState
+  initialEditorState,
+  error,
+  onBlur,
+  className,
+  disabled,
+  initialize
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, minInputHeight });
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -79,17 +96,13 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-
-    if (editorState && !editable) {
-      const newEditorState = editor.parseEditorState(editorState);
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
 
       editor.setEditorState(newEditorState);
     }
-
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -117,12 +130,36 @@ const ContentEditable = ({
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty = isEmpty(root);
+  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);
+  }, []);
 
   return (
     <div
-      className={cx(classes.container, isFocused && classes.inputFocused)}
-      id={namespace}
+      className={cx(
+        classes.container,
+        className,
+        isFocused && classes.inputFocused
+      )}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>
@@ -132,14 +169,14 @@ const ContentEditable = ({
       <div
         aria-label={namespace}
         className={cx(
-          isTextEmpty && classes.emptyInput,
+          editable && isTextEmpty && classes.emptyInput,
           classes.input,
           inputClassname
         )}
         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,337 @@
+import RichTextEditor from './RichTextEditor';
+import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
+
+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.findByLabelText('RichTextEditor').parent().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', /^noreferrer/);
+
+          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');
+        });
+    });
+
+    it('does not allow to open links in a new tab', () => {
+      cy.mount({
+        Component: <RichTextEditor editable openLinkInNewTab={false} />
+      });
+
+      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().should('not.have.attr', 'target');
+
+      cy.get('[data-testid="RichTextEditor"]').focus().clear();
+
+      cy.get('[data-testid="RichTextEditor"]')
+        .focus()
+        .type('https://centreon.com');
+
+      cy.findByText('https://centreon.com')
+        .parent()
+        .should('not.have.attr', 'target');
+    });
+  });
+
+  describe('Rich Text Editor not editable', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable={false}
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      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('Rich Text Editor is disabled', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            disabled
+            editable
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.findByLabelText('Undo').should('be.disabled');
+      cy.findByLabelText('Redo').should('be.disabled');
+      cy.findByLabelText('bold').should('be.disabled');
+      cy.findByLabelText('italic').should('be.disabled');
+      cy.findByLabelText('underline').should('be.disabled');
+      cy.findByLabelText('strikethrough').should('be.disabled');
+      cy.findByLabelText('link').should('be.disabled');
+    });
+  });
+
+  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('[data-testid="CypressComponentTest"] > p').should('be.exist');
+      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
+    });
+
+    it('displays editor with custom placeholder', () => {
+      cy.get('[data-testid="CypressComponentTest"]')
+        .parent()
+        .contains('Type Cypress test...');
+    });
+
+    it('displays editor with custom minimum input height', () => {
+      cy.get('[data-testid="CypressComponentTest"]').should(
+        'have.css',
+        'min-height',
+        '200px'
+      );
+    });
+  });
+
+  describe('Rich Text Editor with Macros Plugin', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor displayMacrosButton editable />
+      });
+    });
+
+    it('displays the Macros button when the "displayMacrosButton" prop is set to true', () => {
+      cy.findByLabelText('Macros').should('be.visible');
+      cy.findByLabelText('Macros').click();
+
+      standardMacros.forEach((macro) => {
+        cy.findByText(macro).should('be.visible');
+      });
+    });
+
+    it('ensures that the selected macro is inserted into the RichTextEditor', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('macro : ');
+
+      cy.findByLabelText('Macros').click({});
+
+      standardMacros.forEach((macro) => {
+        cy.findByText(macro).should('be.visible').click({ force: true });
+        cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
+      });
+    });
+  });
+
+  describe('Block type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
+      {
+        blockType: 'Heading 1',
+        tag: 'h1'
+      },
+      {
+        blockType: 'Heading 2',
+        tag: 'h2'
+      },
+      {
+        blockType: 'Heading 3',
+        tag: 'h3'
+      },
+      {
+        blockType: 'Heading 4',
+        tag: 'h4'
+      },
+      {
+        blockType: 'Heading 5',
+        tag: 'h5'
+      },
+      {
+        blockType: 'Heading 6',
+        tag: 'h6'
+      },
+      {
+        blockType: 'Bullet List',
+        tag: 'ul'
+      },
+      {
+        blockType: 'Number List',
+        tag: 'ol'
+      }
+    ];
+
+    testCases.forEach(({ blockType, tag }) => {
+      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByTestId('Block type').click();
+        cy.findByText(blockType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+      });
+    });
+  });
+});