@centreon/ui 23.10.117 → 23.10.119

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

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

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -94,9 +92,9 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
       lineHeight: theme.typography.h5.lineHeight
     },
     h6: {
-      fontSize: theme.typography.body2.fontSize,
-      fontWeight: theme.typography.body2.fontWeight,
-      lineHeight: theme.typography.body2.lineHeight
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: theme.typography.h6.fontWeight,
+      lineHeight: theme.typography.h6.lineHeight
     },
     italic: {
       fontStyle: 'italic'
@@ -104,11 +102,6 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
     link: {
       color: theme.palette.primary.main
     },
-    paragraph: {
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: theme.typography.body1.fontWeight,
-      lineHeight: theme.typography.body1.lineHeight
-    },
     strikethrough: {
       textDecoration: 'line-through'
     },
@@ -145,7 +138,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -170,7 +162,6 @@ const RichTextEditor = ({
         h6: classes.h6
       },
       link: classes.link,
-      paragraph: classes.paragraph,
       text: {
         bold: classes.bold,
         italic: classes.italic,
@@ -181,13 +172,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -228,7 +212,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

package/src/RichTextEditor/plugins/ToolbarPlugin/AlignPicker.tsx

@@ -18,9 +18,8 @@ import { SvgIconTypeMap } from '@mui/material';
 
 import { Menu } from '../../../components';
 import { getSelectedNode } from '../../utils/getSelectedNode';
-import { labelAlignPicker } from '../../translatedLabels';
 
-import { useStyles } from './ToolbarPlugin.styles';
+import { useAlignPickerStyles } from './ToolbarPlugin.styles';
 
 const formatOptions: Array<{
   Icon: OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
@@ -49,7 +48,7 @@ interface Props {
 }
 
 const AlignPicker = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useAlignPickerStyles();
 
   const [elementFormat, setElementFormat] = useState<ElementFormatType>('left');
 
@@ -89,25 +88,25 @@ const AlignPicker = ({ disabled }: Props): JSX.Element => {
 
   return (
     <Menu>
-      <Menu.Button
-        ariaLabel={labelAlignPicker}
-        className={classes.button}
-        disabled={disabled}
-      >
-        {selectedFormat && <selectedFormat.Icon />}
+      <Menu.Button ariaLabel={elementFormat} disabled={disabled}>
+        {selectedFormat && (
+          <div className={classes.button}>
+            <selectedFormat.Icon /> {selectedFormat.label}
+          </div>
+        )}
       </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        <div className={classes.menu}>
-          {formatOptions.map(({ Icon, value, label }) => (
-            <Menu.Item
-              isActive={equals(value, elementFormat)}
-              key={value}
-              onClick={dispatchAlignment(value)}
-            >
-              <Icon aria-label={label} />
-            </Menu.Item>
-          ))}
-        </div>
+      <Menu.Items>
+        {formatOptions.map(({ Icon, label, value }) => (
+          <Menu.Item
+            isActive={equals(value, elementFormat)}
+            key={value}
+            onClick={dispatchAlignment(value)}
+          >
+            <div className={classes.option}>
+              <Icon /> {label}
+            </div>
+          </Menu.Item>
+        ))}
       </Menu.Items>
     </Menu>
   );

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -1,6 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND
+} from '@lexical/list';
 import {
   $createParagraphNode,
   $getSelection,
@@ -16,27 +23,43 @@ import {
 } from '@lexical/rich-text';
 import { $setBlocksType } from '@lexical/selection';
 import { T, always, cond, equals, isNil } from 'ramda';
-import { $findMatchingParent, mergeRegister } from '@lexical/utils';
-import { useTranslation } from 'react-i18next';
-
-import TextSizeIcon from '@mui/icons-material/TextFields';
+import {
+  $findMatchingParent,
+  $getNearestNodeOfType,
+  mergeRegister
+} from '@lexical/utils';
 
-import { Menu } from '../../../components';
+import { SingleAutocompleteField } from '../../..';
 
-import { useStyles } from './ToolbarPlugin.styles';
+import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
 
 interface Props {
   disabled: boolean;
 }
 
 const blockTypeToBlockName = {
-  h3: 'Huge',
-  h5: 'Large',
-  h6: 'Small',
+  bullet: 'Bullet List',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+  number: 'Number List',
   paragraph: 'Normal'
 };
 
-const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
+const blockTypes = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'bullet',
+  'number',
+  'paragraph'
+];
 
 const blockTypeOptions = blockTypes.map((blockType) => ({
   id: blockType,
@@ -44,8 +67,7 @@ const blockTypeOptions = blockTypes.map((blockType) => ({
 }));
 
 const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
+  const { classes } = useBlockButtonsStyles();
 
   const [blockType, setBlockType] =
     useState<keyof typeof blockTypeToBlockName>('paragraph');
@@ -59,6 +81,22 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
     });
   };
 
+  const formatBulletList = (): void => {
+    if (blockType !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (): void => {
+    if (blockType !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
   const formatHeading = (headingSize: HeadingTagType): void => {
     if (blockType !== headingSize) {
       editor.update(() => {
@@ -70,13 +108,18 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
     }
   };
 
-  const changeBlockType = (newBlockType): void => {
+  const changeBlockType = (_, newBlockType): void => {
     const formatFunction = cond<Array<string>, (value?) => void>([
+      [equals('bullet'), always(formatBulletList)],
+      [equals('number'), always(formatNumberedList)],
+      [equals('h1'), always(() => formatHeading('h1'))],
+      [equals('h2'), always(() => formatHeading('h2'))],
       [equals('h3'), always(() => formatHeading('h3'))],
+      [equals('h4'), always(() => formatHeading('h4'))],
       [equals('h5'), always(() => formatHeading('h5'))],
       [equals('h6'), always(() => formatHeading('h6'))],
       [T, always(formatParagraph)]
-    ])(newBlockType || '');
+    ])(newBlockType?.id || '');
 
     formatFunction();
   };
@@ -99,13 +142,23 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
       return;
     }
 
-    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+    if ($isListNode(element)) {
+      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+      const type = parentList
+        ? parentList.getListType()
+        : element.getListType();
+      setBlockType(type);
 
+      return;
+    }
+    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
     if (type in blockTypeToBlockName) {
       setBlockType(type as keyof typeof blockTypeToBlockName);
     }
   }, [editor]);
 
+  const value = blockTypeOptions.find((option) => option.id === blockType);
+
   useEffect(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -129,26 +182,15 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
   }, [editor, updateToolbar]);
 
   return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="block"
-        className={classes.button}
-        disabled={disabled}
-      >
-        <TextSizeIcon />
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        {blockTypeOptions.map(({ id, name }) => (
-          <Menu.Item
-            isActive={equals(id, blockType)}
-            key={name}
-            onClick={() => changeBlockType(id)}
-          >
-            {t(name)}
-          </Menu.Item>
-        ))}
-      </Menu.Items>
-    </Menu>
+    <SingleAutocompleteField
+      className={classes.autocomplete}
+      dataTestId="Block type"
+      disabled={disabled}
+      label=""
+      options={blockTypeOptions}
+      value={value}
+      onChange={changeBlockType}
+    />
   );
 };