@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,408 +0,0 @@
-import RichTextEditor from './RichTextEditor';
-import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
-import { labelAlignPicker } from './translatedLabels';
-
-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('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', () => {
-      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.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.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 });
-      });
-    });
-
-    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.findByLabelText('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.findByLabelText('link').click();
-
-      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.findByLabelText('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(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');
-    });
-  });
-
-  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(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');
-    });
-  });
-
-  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').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 : ');
-
-      standardMacros.forEach((macro) => {
-        cy.findByLabelText('Macros').click();
-        cy.findByText(macro).click();
-
-        cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
-      });
-    });
-  });
-
-  describe('Block type', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = [
-      {
-        blockType: 'Huge',
-        tag: 'h3'
-      },
-      {
-        blockType: 'Large',
-        tag: 'h5'
-      },
-      {
-        blockType: 'Normal',
-        tag: 'p'
-      },
-      {
-        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 = [
-      {
-        listType: 'Unordered List',
-        tag: 'ul'
-      },
-      {
-        listType: 'Ordered List',
-        tag: 'ol'
-      }
-    ];
-
-    testCases.forEach(({ listType, tag }) => {
-      it(`displays ${listType} when the corresponding list type button is selected`, () => {
-        cy.get('[data-testid="RichTextEditor"]').type('Example');
-        cy.findByLabelText('list').click();
-        cy.findByLabelText(listType).click();
-
-        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-
-  describe('Aligns', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = ['Center', 'Right', 'Left'];
-
-    testCases.forEach((label) => {
-      it(`aligns the text to the ${label} when the corresponding button was 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.makeSnapshot();
-      });
-    });
-  });
-});

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

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  ElementFormatType,
-  FORMAT_ELEMENT_COMMAND
-} from 'lexical';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { equals } from 'ramda';
-
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material';
-
-import { Menu } from '../../../components';
-import { getSelectedNode } from '../../utils/getSelectedNode';
-import { labelAlignPicker } from '../../translatedLabels';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const formatOptions: Array<{
-  Icon: OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
-  label: string;
-  value: ElementFormatType;
-}> = [
-  {
-    Icon: FormatAlignLeftIcon,
-    label: 'Left',
-    value: 'left'
-  },
-  {
-    Icon: FormatAlignCenterIcon,
-    label: 'Center',
-    value: 'center'
-  },
-  {
-    Icon: FormatAlignRightIcon,
-    label: 'Right',
-    value: 'right'
-  }
-];
-
-interface Props {
-  disabled: boolean;
-}
-
-const AlignPicker = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const [elementFormat, setElementFormat] = useState<ElementFormatType>('left');
-
-  const [editor] = useLexicalComposerContext();
-
-  const dispatchAlignment = (alignment: ElementFormatType) => () => {
-    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment);
-  };
-
-  const updateElementFormat = useCallback(() => {
-    const selection = $getSelection();
-
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-
-    const node = getSelectedNode(selection);
-    const parent = node.getParent();
-
-    setElementFormat(
-      ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) ||
-        'left'
-    );
-  }, [editor]);
-
-  const selectedFormat = formatOptions.find(({ value }) =>
-    equals(value, elementFormat)
-  );
-
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateElementFormat();
-      });
-    });
-  }, [editor, updateElementFormat]);
-
-  return (
-    <Menu>
-      <Menu.Button
-        ariaLabel={labelAlignPicker}
-        className={classes.button}
-        disabled={disabled}
-      >
-        {selectedFormat && <selectedFormat.Icon />}
-      </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>
-    </Menu>
-  );
-};
-
-export default AlignPicker;

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

@@ -1,155 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_CRITICAL,
-  SELECTION_CHANGE_COMMAND
-} from 'lexical';
-import {
-  $createHeadingNode,
-  $isHeadingNode,
-  HeadingTagType
-} 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 { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-interface Props {
-  disabled: boolean;
-}
-
-const blockTypeToBlockName = {
-  h3: 'Huge',
-  h5: 'Large',
-  h6: 'Small',
-  paragraph: 'Normal'
-};
-
-const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
-
-const blockTypeOptions = blockTypes.map((blockType) => ({
-  id: blockType,
-  name: blockTypeToBlockName[blockType]
-}));
-
-const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const [blockType, setBlockType] =
-    useState<keyof typeof blockTypeToBlockName>('paragraph');
-
-  const [editor] = useLexicalComposerContext();
-
-  const formatParagraph = (): void => {
-    editor.update(() => {
-      const selection = $getSelection();
-      $setBlocksType(selection, () => $createParagraphNode());
-    });
-  };
-
-  const formatHeading = (headingSize: HeadingTagType): void => {
-    if (blockType !== headingSize) {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        }
-      });
-    }
-  };
-
-  const changeBlockType = (newBlockType): void => {
-    const formatFunction = cond<Array<string>, (value?) => void>([
-      [equals('h3'), always(() => formatHeading('h3'))],
-      [equals('h5'), always(() => formatHeading('h5'))],
-      [equals('h6'), always(() => formatHeading('h6'))],
-      [T, always(formatParagraph)]
-    ])(newBlockType || '');
-
-    formatFunction();
-  };
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const anchorNode = selection?.anchor.getNode();
-    const element = equals(anchorNode?.getKey(), 'root')
-      ? anchorNode
-      : $findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-
-          return parent !== null && $isRootOrShadowRoot(parent);
-        }) || anchorNode?.getTopLevelElementOrThrow();
-
-    const elementKey = element?.getKey();
-    const elementDOM = editor.getElementByKey(elementKey);
-
-    if (isNil(elementDOM)) {
-      return;
-    }
-
-    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
-
-    if (type in blockTypeToBlockName) {
-      setBlockType(type as keyof typeof blockTypeToBlockName);
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      () => {
-        updateToolbar();
-
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      })
-    );
-  }, [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>
-  );
-};
-
-export default BlockButtons;