@centreon/ui 23.10.121 → 24.4.0

package/src/RichTextEditor/ContentEditable.tsx

@@ -1,195 +1,195 @@
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { makeStyles } from 'tss-react/mui';
-import { isEmpty, isNil } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-interface StyleProps {
-  editable: boolean;
-  error?: string;
-  minInputHeight: number;
-}
-
-const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable, error }) => ({
-    container: {
-      backgroundColor: theme.palette.background.paper,
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : '1px solid transparent',
-      borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(0.5, 1)
-    },
-    emptyInput: {
-      marginTop: '-22px'
-    },
-    input: {
-      minHeight: editable ? minInputHeight : 'min-content',
-      outline: '0px solid transparent'
-    },
-    inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
-    },
-    notEditable: {
-      backgroundColor: 'transparent'
-    },
-    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,
-  placeholder,
-  hasInitialTextContent,
-  editable,
-  editorState,
-  namespace,
-  resetEditorToInitialStateCondition,
-  initialEditorState,
-  error,
-  onBlur,
-  className,
-  disabled,
-  initialize
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, error, minInputHeight });
-  const { t } = useTranslation();
-
-  const [editor] = useLexicalComposerContext();
-  const [isFocused, setFocused] = useState(false);
-  const [root, setRoot] = useState('');
-
-  const ref = useCallback(
-    (rootElement: null | HTMLElement) => {
-      editor.setRootElement(rootElement);
-    },
-    [editor]
-  );
-
-  useLayoutEffect(() => {
-    if (!editable) {
-      const newEditorState = editor.parseEditorState(
-        editorState || defaultState
-      );
-
-      editor.setEditorState(newEditorState);
-    }
-  }, [editor, editorState]);
-
-  useEffect(() => {
-    editor.registerTextContentListener((currentRoot) => {
-      setRoot(currentRoot);
-    });
-
-    if (!hasInitialTextContent) {
-      return;
-    }
-
-    setRoot(' ');
-  }, [editor]);
-
-  useEffect(() => {
-    const shouldResetEditorToInitialState =
-      resetEditorToInitialStateCondition?.();
-
-    if (!shouldResetEditorToInitialState) {
-      return;
-    }
-
-    const newEditorState = editor.parseEditorState(
-      initialEditorState || defaultState
-    );
-
-    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);
-  }, []);
-
-  return (
-    <div
-      className={cx(
-        classes.root,
-        editable && classes.container,
-        !isEditable && !disabled && classes.notEditable,
-        className,
-        isFocused && classes.inputFocused
-      )}
-    >
-      {editable && isTextEmpty && (
-        <Typography className={classes.placeholder}>
-          {t(placeholder)}
-        </Typography>
-      )}
-      <div
-        aria-label={namespace}
-        className={cx(
-          editable && isTextEmpty && classes.emptyInput,
-          classes.input,
-          inputClassname
-        )}
-        contentEditable={isEditable}
-        data-testid={namespace}
-        ref={ref}
-        onBlur={handleBlur}
-        onFocus={(): void => setFocused(true)}
-      />
-    </div>
-  );
-};
-
-export default ContentEditable;
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { isEmpty, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { Typography } from '@mui/material';
+
+interface StyleProps {
+  editable: boolean;
+  error?: string;
+  minInputHeight: number;
+}
+
+const useStyles = makeStyles<StyleProps>()(
+  (theme, { minInputHeight, editable, error }) => ({
+    container: {
+      backgroundColor: theme.palette.background.paper,
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : '1px solid transparent',
+      borderRadius: theme.shape.borderRadius,
+      padding: theme.spacing(0.5, 1)
+    },
+    emptyInput: {
+      marginTop: '-22px'
+    },
+    input: {
+      minHeight: editable ? minInputHeight : 'min-content',
+      outline: '0px solid transparent'
+    },
+    inputFocused: {
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : `1px solid ${theme.palette.primary.main}`
+    },
+    notEditable: {
+      backgroundColor: 'transparent'
+    },
+    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,
+  placeholder,
+  hasInitialTextContent,
+  editable,
+  editorState,
+  namespace,
+  resetEditorToInitialStateCondition,
+  initialEditorState,
+  error,
+  onBlur,
+  className,
+  disabled,
+  initialize
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
+  const { t } = useTranslation();
+
+  const [editor] = useLexicalComposerContext();
+  const [isFocused, setFocused] = useState(false);
+  const [root, setRoot] = useState('');
+
+  const ref = useCallback(
+    (rootElement: null | HTMLElement) => {
+      editor.setRootElement(rootElement);
+    },
+    [editor]
+  );
+
+  useLayoutEffect(() => {
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
+
+      editor.setEditorState(newEditorState);
+    }
+  }, [editor, editorState]);
+
+  useEffect(() => {
+    editor.registerTextContentListener((currentRoot) => {
+      setRoot(currentRoot);
+    });
+
+    if (!hasInitialTextContent) {
+      return;
+    }
+
+    setRoot(' ');
+  }, [editor]);
+
+  useEffect(() => {
+    const shouldResetEditorToInitialState =
+      resetEditorToInitialStateCondition?.();
+
+    if (!shouldResetEditorToInitialState) {
+      return;
+    }
+
+    const newEditorState = editor.parseEditorState(
+      initialEditorState || defaultState
+    );
+
+    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);
+  }, []);
+
+  return (
+    <div
+      className={cx(
+        classes.root,
+        editable && classes.container,
+        !isEditable && !disabled && classes.notEditable,
+        className,
+        !disabled && isFocused && classes.inputFocused
+      )}
+    >
+      {editable && isTextEmpty && (
+        <Typography className={classes.placeholder}>
+          {t(placeholder)}
+        </Typography>
+      )}
+      <div
+        aria-label={namespace}
+        className={cx(
+          editable && isTextEmpty && classes.emptyInput,
+          classes.input,
+          inputClassname
+        )}
+        contentEditable={isEditable}
+        data-testid={namespace}
+        ref={ref}
+        onBlur={handleBlur}
+        onFocus={(): void => setFocused(true)}
+      />
+    </div>
+  );
+};
+
+export default ContentEditable;

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

@@ -1,5 +1,6 @@
 import RichTextEditor from './RichTextEditor';
 import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
+import { labelAlignPicker } from './translatedLabels';
 
 interface CheckElementStyleOnRichTextEditorProps {
   check: boolean;
@@ -47,16 +48,30 @@ describe('Rich Text Editor', () => {
     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('align picker').should('be.visible');
+      cy.findByLabelText('block').should('be.visible');
+      cy.findByLabelText('format').should('be.visible');
       cy.findByLabelText('link').should('be.visible');
+      cy.findByLabelText('list').should('be.visible');
+
       cy.findByLabelText('RichTextEditor')
         .should('be.visible')
         .and('have.value', '');
 
       cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays all format actions when the format button is clicked', () => {
+      cy.findByLabelText('format').click();
+
+      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.makeSnapshot();
     });
 
     it('displays changes with undo redo buttons', () => {
@@ -80,21 +95,36 @@ describe('Rich Text Editor', () => {
 
     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.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('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.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('strikethrough').click();
 
       cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
         checkElementStyleOnRichTextEditor({ check: false, element });
@@ -105,7 +135,7 @@ describe('Rich Text Editor', () => {
       cy.get('[data-testid="RichTextEditor"]').type('cypress');
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click();
+      cy.findByLabelText('link').click();
 
       cy.findByLabelText('Saved link').should('have.text', 'https://');
 
@@ -130,7 +160,7 @@ describe('Rich Text Editor', () => {
 
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click({ force: true });
+      cy.findByLabelText('link').click();
 
       cy.findByText('cypress')
         .parent()
@@ -153,7 +183,7 @@ describe('Rich Text Editor', () => {
       cy.get('[data-testid="RichTextEditor"]').type('cypress');
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click();
+      cy.findByLabelText('link').click();
 
       cy.findByLabelText('Saved link').should('have.text', 'https://');
 
@@ -189,11 +219,11 @@ describe('Rich Text Editor', () => {
     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(labelAlignPicker).should('not.exist');
+      cy.findByLabelText('block').should('not.exist');
+      cy.findByLabelText('format').should('not.exist');
       cy.findByLabelText('link').should('not.exist');
+      cy.findByLabelText('list').should('not.exist');
     });
   });
 
@@ -213,11 +243,11 @@ describe('Rich Text Editor', () => {
     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(labelAlignPicker).should('be.disabled');
+      cy.findByLabelText('block').should('be.disabled');
+      cy.findByLabelText('format').should('be.disabled');
       cy.findByLabelText('link').should('be.disabled');
+      cy.findByLabelText('list').should('be.disabled');
     });
   });
 
@@ -262,7 +292,6 @@ describe('Rich Text Editor', () => {
     });
 
     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) => {
@@ -273,10 +302,10 @@ describe('Rich Text Editor', () => {
     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.findByLabelText('Macros').click();
+        cy.findByText(macro).click();
+
         cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
       });
     });
@@ -291,44 +320,59 @@ describe('Rich Text Editor', () => {
 
     const testCases = [
       {
-        blockType: 'Heading 1',
-        tag: 'h1'
-      },
-      {
-        blockType: 'Heading 2',
-        tag: 'h2'
-      },
-      {
-        blockType: 'Heading 3',
+        blockType: 'Huge',
         tag: 'h3'
       },
       {
-        blockType: 'Heading 4',
-        tag: 'h4'
+        blockType: 'Large',
+        tag: 'h5'
       },
       {
-        blockType: 'Heading 5',
-        tag: 'h5'
+        blockType: 'Normal',
+        tag: 'p'
       },
       {
-        blockType: 'Heading 6',
+        blockType: 'Small',
         tag: 'h6'
-      },
+      }
+    ];
+
+    testCases.forEach(({ blockType, tag }) => {
+      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByLabelText('block').click();
+        cy.findByText(blockType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+
+        cy.makeSnapshot();
+      });
+    });
+  });
+
+  describe('List type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
       {
-        blockType: 'Bullet List',
+        listType: 'Unordered List',
         tag: 'ul'
       },
       {
-        blockType: 'Number List',
+        listType: 'Ordered List',
         tag: 'ol'
       }
     ];
 
-    testCases.forEach(({ blockType, tag }) => {
-      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+    testCases.forEach(({ listType, tag }) => {
+      it(`displays ${listType} when the corresponding list type button is selected`, () => {
         cy.get('[data-testid="RichTextEditor"]').type('Example');
-        cy.findByTestId('Block type').click();
-        cy.findByText(blockType).click();
+        cy.findByLabelText('list').click();
+        cy.findByLabelText(listType).click();
 
         cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
 
@@ -344,14 +388,18 @@ describe('Rich Text Editor', () => {
       });
     });
 
-    const testCases = ['Center', 'Right'];
+    const testCases = ['Center', 'Right', 'Left'];
 
     testCases.forEach((label) => {
-      it(`aligns the text to the ${label} when the corresponding button is clicked`, () => {
+      it(`aligns the text to the ${label} when the corresponding button was clicked`, () => {
         cy.get('[data-testid="RichTextEditor"]').type('Example');
 
-        cy.findByLabelText('left').click();
-        cy.contains(label).click();
+        cy.findByLabelText(labelAlignPicker).click();
+        cy.findByLabelText(label).click();
+
+        cy.findByText('Example')
+          .parent()
+          .should('have.css', 'text-align', label.toLowerCase());
 
         cy.makeSnapshot();
       });