@centreon/ui 23.10.51 → 23.10.53

package/src/Graph/index.tsx

@@ -1,6 +1,6 @@
 import { MutableRefObject, useRef } from 'react';
 
-import { Responsive } from '@visx/visx';
+import { Curve, Responsive } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -14,16 +14,19 @@ import Graph from './Graph';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, GraphData, GraphProps, LegendModel } from './models';
 import useGraphData from './useGraphData';
+import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<GraphProps> {
+  curve?: CurveType;
   data?: GraphData;
   end: string;
   legend: LegendModel;
   loading: boolean;
+  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
 }
@@ -43,7 +46,9 @@ const WrapperGraph = ({
   tooltip,
   annotationEvent,
   legend,
-  header
+  header,
+  curve = Curve.curveLinear,
+  marginBottom = 0
 }: Props): JSX.Element | null => {
   const { adjustedData } = useGraphData({ data, end, start });
   const graphRef = useRef<HTMLDivElement | null>(null);
@@ -52,36 +57,43 @@ const WrapperGraph = ({
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
-        graphHeight={height}
+        graphHeight={height || 200}
       />
     );
   }
 
   return (
-    <div ref={graphRef as MutableRefObject<HTMLDivElement>}>
+    <div
+      ref={graphRef as MutableRefObject<HTMLDivElement>}
+      style={{ height: '100%', width: '100%' }}
+    >
       <Responsive.ParentSize>
         {({
           height: responsiveHeight,
           width: responsiveWidth
-        }): JSX.Element => (
-          <Graph
-            annotationEvent={annotationEvent}
-            axis={axis}
-            displayAnchor={displayAnchor}
-            graphData={adjustedData}
-            graphInterval={{ end, start }}
-            graphRef={graphRef}
-            header={header}
-            height={height ?? responsiveHeight}
-            legend={legend}
-            loading={loading}
-            shapeLines={shapeLines}
-            timeShiftZones={timeShiftZones}
-            tooltip={tooltip}
-            width={width ?? responsiveWidth}
-            zoomPreview={zoomPreview}
-          />
-        )}
+        }): JSX.Element => {
+          return (
+            <Graph
+              annotationEvent={annotationEvent}
+              axis={axis}
+              curve={curve}
+              displayAnchor={displayAnchor}
+              graphData={adjustedData}
+              graphInterval={{ end, start }}
+              graphRef={graphRef}
+              header={header}
+              height={height || responsiveHeight}
+              legend={legend}
+              loading={loading}
+              marginBottom={marginBottom}
+              shapeLines={shapeLines}
+              timeShiftZones={timeShiftZones}
+              tooltip={tooltip}
+              width={width ?? responsiveWidth}
+              zoomPreview={zoomPreview}
+            />
+          );
+        }}
       </Responsive.ParentSize>
     </div>
   );

package/src/Graph/models.ts

@@ -91,7 +91,7 @@ export interface GraphProps {
   axis?: Axis;
   displayAnchor?: DisplayAnchor;
   header?: GraphHeader;
-  height?: number;
+  height?: number | null;
   loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -37,6 +37,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
+  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -55,6 +56,7 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    queryKey,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -89,10 +91,16 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
+      getQueryKey: () => [
+        `autocomplete-${queryKey || props.label}`,
+        page,
+        searchParameter
+      ],
       isPaginated: true,
       queryOptions: {
+        cacheTime: 0,
         enabled: false,
+        staleTime: 0,
         suspense: false
       }
     });

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -34,12 +34,17 @@ export interface Props
       'multiple'
     > {
   disableSortedOptions?: boolean;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -52,7 +57,7 @@ const MultiAutocompleteField = ({
           root: classes.tag
         }}
         key={option.id}
-        label={option.name}
+        label={getTagLabel(option)}
         size="medium"
         {...getTagProps({ index })}
       />
@@ -84,7 +89,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{option.name}</Option>
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
       renderTags={renderTags}

package/src/RichTextEditor/ContentEditable.tsx

@@ -47,6 +47,7 @@ const useStyles = makeStyles<StyleProps>()(
 
 interface Props {
   className?: string;
+  disabled: boolean;
   editable: boolean;
   editorState?: string;
   error?: string;
@@ -72,13 +73,13 @@ const ContentEditable = ({
   initialEditorState,
   error,
   onBlur,
-  className
+  className,
+  disabled
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -90,17 +91,11 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-
     if (editorState && !editable) {
       const newEditorState = editor.parseEditorState(editorState);
 
       editor.setEditorState(newEditorState);
     }
-
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -128,13 +123,21 @@ const ContentEditable = ({
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty = isEmpty(root);
+  const isTextEmpty =
+    isEmpty(root) &&
+    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
     setFocused(false);
     onBlur?.(event);
   };
 
+  const isEditable = editor.isEditable();
+
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled]);
+
   return (
     <div
       className={cx(

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

@@ -144,9 +144,37 @@ describe('Rich Text Editor', () => {
           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('Disabled Rich Text Editor', () => {
+  describe('Rich Text Editor not editable', () => {
     beforeEach(() => {
       cy.mount({
         Component: (
@@ -172,6 +200,33 @@ describe('Rich Text Editor', () => {
     });
   });
 
+  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.get('[data-testid="RichTextEditor"]')
+        .invoke('attr', 'contenteditable')
+        .should('eq', 'true');
+      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({
@@ -230,4 +285,57 @@ describe('Rich Text Editor', () => {
       });
     });
   });
+
+  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');
+      });
+    });
+  });
 });

package/src/RichTextEditor/RichTextEditor.tsx

@@ -3,11 +3,15 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { HeadingNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode } from '@lexical/list';
 import anylogger from 'anylogger';
 import { makeStyles } from 'tss-react/mui';
 import { EditorState } from 'lexical';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 
 import { Typography } from '@mui/material';
 
@@ -18,6 +22,7 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
   contentClassName?: string;
+  disabled?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
@@ -28,6 +33,7 @@ export interface RichTextEditorProps {
   minInputHeight?: number;
   namespace?: string;
   onBlur?: (e: string) => void;
+  openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
   toolbarPositions?: 'start' | 'end';
@@ -94,7 +100,9 @@ const RichTextEditor = ({
   error,
   onBlur,
   contentClassName,
-  displayMacrosButton = false
+  displayMacrosButton = false,
+  disabled = false,
+  openLinkInNewTab = true
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -106,7 +114,7 @@ const RichTextEditor = ({
     editable,
     editorState: initialEditorState,
     namespace,
-    nodes: [AutoLinkNode, LinkNode],
+    nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
     onError,
     theme: {
       link: classes.link,
@@ -125,9 +133,9 @@ const RichTextEditor = ({
       <div className={classes.container}>
         <div className={classes.toolbar}>
           <ToolbarPlugin
+            disabled={disabled}
             displayMacrosButton={displayMacrosButton}
             editable={editable}
-            getEditorState={getEditorState}
           />
         </div>
         <div>
@@ -136,6 +144,7 @@ const RichTextEditor = ({
             contentEditable={
               <ContentEditable
                 className={contentClassName || ''}
+                disabled={disabled}
                 editable={editable}
                 editorState={editorState}
                 error={error}
@@ -155,8 +164,13 @@ const RichTextEditor = ({
           />
           <HistoryPlugin />
           <LinkPlugin />
-          <AutoCompleteLinkPlugin />
-          <FloatingLinkEditorPlugin editable={editable} />
+          <ListPlugin />
+          <OnChangePlugin onChange={getEditorState} />
+          <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
+          <FloatingLinkEditorPlugin
+            editable={editable}
+            openLinkInNewTab={openLinkInNewTab}
+          />
           {error && <Typography className={classes.error}>{error}</Typography>}
         </div>
       </div>

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

@@ -1,4 +1,7 @@
-import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+import {
+  AutoLinkPlugin,
+  LinkMatcher
+} from '@lexical/react/LexicalAutoLinkPlugin';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -19,13 +22,15 @@ const URL_MATCHER =
 const EMAIL_MATCHER =
   /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
-const MATCHERS = [
+const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
   (text: string): LinkMatcherResult | null => {
     const match = URL_MATCHER.exec(text);
 
     return (
       match && {
-        attributes: { rel: 'noreferrer', target: '_blank' },
+        attributes: openLinkInNewTab
+          ? { rel: 'noreferrer', target: '_blank' }
+          : undefined,
         index: match.index,
         length: match[0].length,
         text: match[0],
@@ -47,8 +52,12 @@ const MATCHERS = [
   }
 ];
 
-const AutoCompleteLinkPlugin = (): JSX.Element => {
-  return <AutoLinkPlugin matchers={MATCHERS} />;
+const AutoCompleteLinkPlugin = ({
+  openLinkInNewTab
+}: {
+  openLinkInNewTab: boolean;
+}): JSX.Element => {
+  return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
 };
 
 export default AutoCompleteLinkPlugin;

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -28,6 +28,7 @@ import {
 
 interface FloatingLinkEditorPluginProps {
   editable: boolean;
+  openLinkInNewTab: boolean;
 }
 
 interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
@@ -36,6 +37,7 @@ interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
 
 interface FloatingLinkEditorProps {
   editor: LexicalEditor;
+  openLinkInNewTab: boolean;
 }
 
 interface TooltipPosition {
@@ -44,7 +46,8 @@ interface TooltipPosition {
 }
 
 const FloatingLinkEditor = ({
-  editor
+  editor,
+  openLinkInNewTab
 }: FloatingLinkEditorProps): JSX.Element | null => {
   const nativeSelection = window.getSelection();
   const rootElement = editor.getRootElement();
@@ -67,7 +70,7 @@ const FloatingLinkEditor = ({
 
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-            target: '_blank',
+            target: openLinkInNewTab ? '_blank' : undefined,
             url: value
           });
         }
@@ -144,7 +147,7 @@ const FloatingLinkEditor = ({
               aria-label={labelSavedLink}
               href={linkUrl}
               rel="noreferrer noopener"
-              target="_blank"
+              target={openLinkInNewTab ? '_blank' : undefined}
               variant="button"
             >
               {linkUrl}
@@ -166,7 +169,8 @@ const FloatingLinkEditor = ({
 
 const useFloatingTextFormatToolbar = ({
   editor,
-  editable
+  editable,
+  openLinkInNewTab
 }: UseFloatingLinkEditorProps): JSX.Element | null => {
   const [isText, setIsText] = useState(false);
   const isInsertingLink = useAtomValue(isInsertingLinkAtom);
@@ -241,15 +245,18 @@ const useFloatingTextFormatToolbar = ({
     return null;
   }
 
-  return <FloatingLinkEditor editor={editor} />;
+  return (
+    <FloatingLinkEditor editor={editor} openLinkInNewTab={openLinkInNewTab} />
+  );
 };
 
 const FloatingActionsToolbarPlugin = ({
-  editable
+  editable,
+  openLinkInNewTab
 }: FloatingLinkEditorPluginProps): JSX.Element | null => {
   const [editor] = useLexicalComposerContext();
 
-  return useFloatingTextFormatToolbar({ editable, editor });
+  return useFloatingTextFormatToolbar({ editable, editor, openLinkInNewTab });
 };
 
 export default FloatingActionsToolbarPlugin;