@centreon/ui 23.10.47 → 23.10.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.47",
+  "version": "23.10.48",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -71,6 +71,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/cypress": "^1.1.3",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",

package/src/ActionsList/index.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
@@ -15,14 +13,15 @@ import {
 } from '@mui/material';
 
 interface ActionsType {
-  Icon: (props: SvgIconProps) => JSX.Element;
+  Icon?: (props: SvgIconProps) => JSX.Element;
   label: string;
-  onClick?: () => void;
+  onClick?: (e?) => void;
 }
 
 interface Props {
   actions: Array<ActionsType | 'divider'>;
   className?: string;
+  listItemClassName?: string;
 }
 
 const useStyles = makeStyles()({
@@ -31,7 +30,11 @@ const useStyles = makeStyles()({
   }
 });
 
-const ActionsList = ({ className, actions }: Props): JSX.Element => {
+const ActionsList = ({
+  className,
+  listItemClassName,
+  actions
+}: Props): JSX.Element => {
   const { cx, classes } = useStyles();
   const { t } = useTranslation();
 
@@ -45,11 +48,15 @@ const ActionsList = ({ className, actions }: Props): JSX.Element => {
         const { label, Icon, onClick } = action as ActionsType;
 
         return (
-          <MenuItem aria-label={label} key={label} onClick={onClick}>
-            <ListItemIcon>
-              <Icon fontSize="small" />
-            </ListItemIcon>
-            <ListItemText>{t(label)}</ListItemText>
+          <MenuItem aria-label={label} id={label} key={label} onClick={onClick}>
+            {Icon && (
+              <ListItemIcon>
+                <Icon fontSize="small" />
+              </ListItemIcon>
+            )}
+            <ListItemText className={listItemClassName}>
+              {t(label)}
+            </ListItemText>
           </MenuItem>
         );
       })}

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

@@ -1,4 +1,5 @@
 import RichTextEditor from './RichTextEditor';
+import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
 
 interface CheckElementStyleOnRichTextEditorProps {
   check: boolean;
@@ -201,4 +202,32 @@ describe('Rich Text Editor', () => {
       );
     });
   });
+
+  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);
+      });
+    });
+  });
 });

package/src/RichTextEditor/RichTextEditor.tsx

@@ -18,6 +18,7 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
   contentClassName?: string;
+  displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
   error?: string;
@@ -92,7 +93,8 @@ const RichTextEditor = ({
   toolbarPositions = 'start',
   error,
   onBlur,
-  contentClassName
+  contentClassName,
+  displayMacrosButton = false
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -122,7 +124,11 @@ const RichTextEditor = ({
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
         <div className={classes.toolbar}>
-          <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
+          <ToolbarPlugin
+            displayMacrosButton={displayMacrosButton}
+            editable={editable}
+            getEditorState={getEditorState}
+          />
         </div>
         <div>
           <RichTextPlugin

package/src/RichTextEditor/index.stories.tsx

@@ -56,6 +56,11 @@ withCustomPlaceholder.args = {
   placeholder: 'Custom placeholder...'
 };
 
+export const withMacrosPlugin = Template.bind({});
+withMacrosPlugin.args = {
+  displayMacrosButton: true
+};
+
 export const withEditableFalse = Template.bind({});
 withEditableFalse.args = {
   editable: false,

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

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createCommand, LexicalCommand } from 'lexical';
+
+import MacrosIcon from '@mui/icons-material/TerminalOutlined';
+
+import { ActionsList, IconButton, PopoverMenu } from '../../..';
+
+import { useStyles } from '.';
+
+const LowPriority = 1;
+
+export const standardMacros = [
+  '{{SHORTDATETIME}}',
+  '{{LONGDATETIME}}',
+  '{{ALIAS}}',
+  '{{ID}}',
+  '{{NAME}}',
+  '{{OUTPUT}}',
+  '{{STATE}}',
+  '{{STATETYPE}}'
+];
+
+const MacrosButton = (): JSX.Element => {
+  const { classes } = useStyles();
+  const [arMacrosDiplayed, setAreMacrosDiplayed] = useState(false);
+
+  const [editor] = useLexicalComposerContext();
+
+  const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
+
+  const onClick = (e): void => {
+    const macro = e.target.id || e.target.textContent.trim();
+
+    editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
+  };
+
+  editor.registerCommand(
+    INSERT_MACROS_COMMAND,
+    (payload: string) => {
+      if (!editor) {
+        return false;
+      }
+
+      document.execCommand('insertText', false, payload);
+
+      return true;
+    },
+    LowPriority
+  );
+
+  const displayMacros = (): void => {
+    setAreMacrosDiplayed(true);
+  };
+
+  const actions = standardMacros.map((macro) => ({
+    label: macro,
+    onClick
+  }));
+
+  return (
+    <PopoverMenu
+      icon={
+        <IconButton
+          ariaLabel="Macros"
+          className={classes.macrosButton}
+          title="Macros"
+          tooltipPlacement="top"
+          onClick={displayMacros}
+        >
+          <MacrosIcon />
+        </IconButton>
+      }
+    >
+      {(): JSX.Element => (
+        <div>
+          {arMacrosDiplayed && (
+            <ActionsList actions={actions} listItemClassName={classes.macros} />
+          )}
+        </div>
+      )}
+    </PopoverMenu>
+  );
+};
+
+export default MacrosButton;

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

@@ -5,23 +5,35 @@ import { Divider } from '@mui/material';
 
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
+import MacrosButton from './MacrosButton';
 
 interface Props {
+  displayMacrosButton?: boolean;
   editable: boolean;
   getEditorState?: (editorState: EditorState) => void;
 }
 
-const useStyles = makeStyles()((theme) => ({
+export const useStyles = makeStyles()((theme) => ({
   container: {
+    alignItems: 'center',
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
+  },
+  macros: {
+    '& span': {
+      fontSize: theme.typography.caption.fontSize
+    }
+  },
+  macrosButton: {
+    marginBottom: theme.spacing(0.5)
   }
 }));
 
 const ToolbarPlugin = ({
   getEditorState,
-  editable
+  editable,
+  displayMacrosButton
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
 
@@ -30,6 +42,12 @@ const ToolbarPlugin = ({
       <UndoRedoButtons />
       <Divider flexItem orientation="vertical" />
       <FormatButtons getEditorState={getEditorState} />
+      {displayMacrosButton && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <MacrosButton />
+        </>
+      )}
     </div>
   ) : null;
 };