@centreon/ui 23.10.47 → 23.10.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.47",
+  "version": "23.10.49",
   "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",
@@ -100,10 +101,10 @@
     "vite-plugin-turbosnap": "^1.0.2"
   },
   "dependencies": {
-    "@lexical/link": "0.8.0",
-    "@lexical/react": "0.8.0",
-    "@lexical/selection": "0.8.0",
-    "@lexical/utils": "0.8.0",
+    "@lexical/link": "0.11.3",
+    "@lexical/react": "0.11.3",
+    "@lexical/selection": "0.11.3",
+    "@lexical/utils": "0.11.3",
     "@visx/curve": "^2.1.0",
     "@visx/pattern": "^3.0.0",
     "@visx/scale": "^3.0.0",
@@ -113,7 +114,7 @@
     "anylogger": "^1.0.11",
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
-    "lexical": "0.8.0",
+    "lexical": "0.11.3",
     "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",

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/Dashboard/Dashboard.styles.ts

@@ -66,22 +66,25 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
   })
 );
 
-export const useDashboardItemStyles = makeStyles()((theme) => ({
-  widgetContainer: {
-    height: '100%',
-    width: '100%'
-  },
-  widgetContent: {
-    height: '100%'
-  },
-  widgetHeader: {
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover
+export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
+  (theme, { hasHeader }) => ({
+    widgetContainer: {
+      height: '100%',
+      width: '100%'
     },
-    cursor: 'move',
-    padding: theme.spacing(0.5, 2)
-  },
-  widgetPadding: {
-    padding: theme.spacing(1, 2)
-  }
-}));
+    widgetContent: {
+      height: '100%'
+    },
+    widgetHeader: {
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover
+      },
+      cursor: 'move',
+      padding: theme.spacing(0.5, 2)
+    },
+    widgetPadding: {
+      overflowX: 'auto',
+      padding: hasHeader ? theme.spacing(1, 2, 2) : theme.spacing(1, 2)
+    }
+  })
+);

package/src/Dashboard/Item.tsx

@@ -41,10 +41,10 @@ const Item = forwardRef(
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
-    const { classes, cx } = useDashboardItemStyles();
-
     const hasHeader = !isNil(header);
 
+    const { classes, cx } = useDashboardItemStyles({ hasHeader });
+
     const listeners = {
       onMouseDown,
       onMouseUp,

package/src/RichTextEditor/ContentEditable.tsx

@@ -152,7 +152,7 @@ const ContentEditable = ({
       <div
         aria-label={namespace}
         className={cx(
-          isTextEmpty && classes.emptyInput,
+          editable && isTextEmpty && classes.emptyInput,
           classes.input,
           inputClassname
         )}

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;
@@ -120,7 +121,7 @@ describe('Rich Text Editor', () => {
 
           cy.wrap(element)
             .should('have.attr', 'rel')
-            .and('match', /^noopener/);
+            .and('match', /^noreferrer/);
 
           cy.wrap(element)
             .should('have.attr', 'target')
@@ -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/FloatingLinkEditorPlugin.tsx

@@ -106,7 +106,12 @@ const FloatingLinkEditor = ({
   const yOffset = tooltipPosition.y - rootElementY + 30;
 
   return (
-    <Popper open anchorEl={rootElement} placement="top-start">
+    <Popper
+      open
+      anchorEl={rootElement}
+      placement="top-start"
+      sx={{ zIndex: 'tooltip' }}
+    >
       <Paper
         sx={{
           transform: `translate3d(${xOffset}px, ${

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;
 };