@centreon/ui 23.10.114 → 23.10.115

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

@@ -1,360 +0,0 @@
-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');
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-
-  describe('Aligns', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = ['Center', 'Right'];
-
-    testCases.forEach((label) => {
-      it(`aligns the text to the ${label} when the corresponding button is clicked`, () => {
-        cy.get('[data-testid="RichTextEditor"]').type('Example');
-
-        cy.findByLabelText('left').click();
-        cy.contains(label).click();
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-});

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

@@ -1,115 +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 { useAlignPickerStyles } 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 } = useAlignPickerStyles();
-
-  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={elementFormat} disabled={disabled}>
-        {selectedFormat && (
-          <div className={classes.button}>
-            <selectedFormat.Icon /> {selectedFormat.label}
-          </div>
-        )}
-      </Menu.Button>
-      <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>
-  );
-};
-
-export default AlignPicker;

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

@@ -1,197 +0,0 @@
-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,
-  $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,
-  $getNearestNodeOfType,
-  mergeRegister
-} from '@lexical/utils';
-
-import { SingleAutocompleteField } from '../../..';
-
-import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
-
-interface Props {
-  disabled: boolean;
-}
-
-const blockTypeToBlockName = {
-  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 = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'bullet',
-  'number',
-  'paragraph'
-];
-
-const blockTypeOptions = blockTypes.map((blockType) => ({
-  id: blockType,
-  name: blockTypeToBlockName[blockType]
-}));
-
-const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useBlockButtonsStyles();
-
-  const [blockType, setBlockType] =
-    useState<keyof typeof blockTypeToBlockName>('paragraph');
-
-  const [editor] = useLexicalComposerContext();
-
-  const formatParagraph = (): void => {
-    editor.update(() => {
-      const selection = $getSelection();
-      $setBlocksType(selection, () => $createParagraphNode());
-    });
-  };
-
-  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(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        }
-      });
-    }
-  };
-
-  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?.id || '');
-
-    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;
-    }
-
-    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,
-      () => {
-        updateToolbar();
-
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      })
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <SingleAutocompleteField
-      className={classes.autocomplete}
-      dataTestId="Block type"
-      disabled={disabled}
-      label=""
-      options={blockTypeOptions}
-      value={value}
-      onChange={changeBlockType}
-    />
-  );
-};
-
-export default BlockButtons;