@centreon/ui 23.10.1-MON-20803-RS-add-basic-filter.21 → 23.10.1-MON-22436-cloud-notification-fix-wording.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-20803-RS-add-basic-filter.21",
+  "version": "23.10.1-MON-22436-cloud-notification-fix-wording.2",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Checkbox/Checkbox.tsx

@@ -2,13 +2,16 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import Typography, { TypographyTypeMap } from '@mui/material/Typography';
-import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  Box,
+  Typography
+} from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 interface StyleProps {
-  disabled: boolean;
   hasIcon: boolean;
   labelPlacement: LabelPlacement;
 }
@@ -22,7 +25,13 @@ const getLabelSpacing = (labelPlacement, theme): string => {
 };
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { disabled, hasIcon, labelPlacement }) => ({
+  (theme, { hasIcon, labelPlacement }) => ({
+    checkbox: {
+      '&.Mui-checked': {
+        color: theme.palette.primary.main
+      },
+      color: theme.palette.primary.main
+    },
     container: hasIcon
       ? {
           alignItems: 'center',
@@ -36,13 +45,8 @@ const useStyles = makeStyles<StyleProps>()(
       fontSize: theme.spacing(10)
     },
     label: {
-      color: disabled
-        ? theme.palette.action.disabled
-        : theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: equals(labelPlacement, 'top')
-        ? theme.typography.fontWeightBold
-        : theme.typography.fontWeightMedium,
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: getLabelSpacing(labelPlacement, theme)
     }
   })
@@ -56,7 +60,6 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 
@@ -68,11 +71,9 @@ const Checkbox = ({
   className,
   disabled = false,
   labelPlacement = 'end',
-  dataTestId,
-  labelProps
+  dataTestId
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
-    disabled,
     hasIcon: !!Icon,
     labelPlacement
   });
@@ -84,6 +85,7 @@ const Checkbox = ({
         control={
           <MuiCheckbox
             checked={checked}
+            className={classes.checkbox}
             color="primary"
             disabled={disabled}
             id={label}
@@ -94,11 +96,7 @@ const Checkbox = ({
         }
         data-testid={dataTestId || ''}
         key={label}
-        label={
-          <Typography classes={{ root: classes.label }} {...labelProps}>
-            {label}
-          </Typography>
-        }
+        label={<Typography className={classes.label}>{label}</Typography>}
         labelPlacement={labelPlacement}
         sx={{ margin: 0, padding: 0 }}
       />

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,19 +1,15 @@
 import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
-import { TypographyTypeMap } from '@mui/material/Typography';
+import { FormGroup } from '@mui/material';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
 interface Props {
-  className?: string;
   dataTestId?: string;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
-  formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;
@@ -38,32 +34,27 @@ const CheckboxGroup = ({
   onChange,
   labelPlacement = 'end',
   disabled = false,
-  dataTestId,
-  className,
-  labelProps,
-  formGroupProps
+  dataTestId
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   const row = !equals(direction, 'vertical');
 
   return (
     <FormGroup
-      classes={{ root: classes.container }}
+      className={classes.container}
       data-testid={dataTestId || ''}
       row={row}
-      {...formGroupProps}
     >
       {options.map((value) => {
         return (
           <Checkbox
             checked={includes(value, values)}
-            className={cx(classes.checkbox, className)}
+            className={classes.checkbox}
             disabled={disabled}
             key={value}
             label={value}
             labelPlacement={labelPlacement}
-            labelProps={labelProps}
             onChange={onChange}
           />
         );

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,7 +9,6 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -20,22 +19,15 @@ const useStyles = makeStyles()(() => ({
   }
 }));
 
-interface PopoverData {
-  anchorEl: HTMLElement | undefined;
-  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
-}
-
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
-  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
-  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -48,21 +40,20 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId,
-  getPopoverData,
-  popperProps
+  dataTestId
 }: Props): JSX.Element => {
   const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
+
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
+
     if (isClosedByInputClick) {
       return;
     }
-
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -84,10 +75,6 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
-  useEffect(() => {
-    getPopoverData?.({ anchorEl, setAnchorEl });
-  }, [anchorEl]);
-
   return (
     <>
       <IconButton
@@ -110,7 +97,6 @@ const PopoverMenu = ({
             style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
-            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

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

@@ -331,6 +331,29 @@ describe('Rich Text Editor', () => {
         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/index.stories.tsx

@@ -63,7 +63,8 @@ withMacrosPlugin.args = {
 
 export const withEditableFalse = Template.bind({});
 withEditableFalse.args = {
-  editable: false,
+  editable: true,
+  editorState: JSON.stringify(initialEditorState),
   initialEditorState: JSON.stringify(initialEditorState)
 };
 
@@ -71,7 +72,8 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
   editable: false,
-  editorState: JSON.stringify(initialEditorState)
+  editorState: JSON.stringify(initialEditorState),
+  initialEditorState: JSON.stringify(initialEditorState)
 };
 
 const StoryWithEditableFalseLikePreview = (): JSX.Element => {

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

@@ -0,0 +1,115 @@
+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/ToolbarPlugin.styles.ts

@@ -5,3 +5,18 @@ export const useBlockButtonsStyles = makeStyles()((theme) => ({
     width: theme.spacing(17)
   }
 }));
+
+export const useAlignPickerStyles = makeStyles()((theme) => ({
+  button: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  },
+  option: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

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

@@ -6,6 +6,7 @@ import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
 import BlockButtons from './BlockButtons';
+import AlignPicker from './AlignPicker';
 
 interface Props {
   disabled: boolean;
@@ -56,6 +57,7 @@ const ToolbarPlugin = ({
           <MacrosButton disabled={disabled} />
         </>
       )}
+      <AlignPicker disabled={disabled} />
     </div>
   ) : null;
 };

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -21,7 +21,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-export const getFoundFields = ({
+const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -108,7 +108,7 @@ const getConditionsSearchQueryParameterValue = (
   };
 };
 
-export const getSearchQueryParameterValue = (
+const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,3 +134,5 @@ export const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
+
+export default getSearchQueryParameterValue;

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
+import getSearchQueryParameterValue from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/components/Menu/Button/MenuButton.tsx

@@ -13,6 +13,7 @@ import { useMenu } from '../useMenu';
 import { useStyles } from './MenuButton.styles';
 
 type MenuButtonProps = {
+  ariaLabel?: string;
   children?: ReactNode;
   hasArrow?: boolean;
   isOpen?: boolean;
@@ -27,6 +28,7 @@ const MenuButton = ({
   hasArrow = true,
   size = 'small',
   variant = 'ghost',
+  ariaLabel,
   ...attr
 }: MenuButtonProps): ReactElement => {
   const { classes } = useStyles();
@@ -47,6 +49,7 @@ const MenuButton = ({
   return (
     <Button
       {...attr}
+      aria-label={ariaLabel}
       className={classes.menuButton}
       data-is-active={isMenuOpen}
       size={size}

package/src/index.ts

@@ -75,10 +75,7 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export {
-  getSearchQueryParameterValue,
-  getFoundFields
-} from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -12,11 +12,6 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
-  const ref = useRef();
-
-  useEffect(() => {
-    ref.current = functionToDebounce;
-  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -24,7 +19,7 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      ref.current?.(...args);
+      functionToDebounce(...args);
     }, wait);
   }, memoProps);
 };