@centreon/ui 23.10.89 → 23.10.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.89",
+  "version": "23.10.91",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Item.tsx

@@ -6,7 +6,7 @@ import {
   ReactElement
 } from 'react';
 
-import { isNil } from 'ramda';
+import { isNil, prop } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 
@@ -59,10 +59,13 @@ const Item = forwardRef(
     return useMemoComponent({
       Component: (
         <div
+          {...cardContainerListeners}
           className={className}
           ref={ref}
-          style={style}
-          {...cardContainerListeners}
+          style={{
+            ...style,
+            width: `calc(${prop('width', style) || '0px'} - 12px)`
+          }}
         >
           <Card className={classes.widgetContainer}>
             {header && (

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/components/Header/PageHeader/PageHeader.styles.ts

@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
     borderBottom: `1px solid ${theme.palette.header.page.border}`,
     display: 'flex',
     gap: theme.spacing(4),
-    paddingBottom: theme.spacing(2)
+    paddingBottom: theme.spacing(1.5)
   },
   pageHeaderActions: {
     '& > button': {

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -25,18 +25,17 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'min-content',
     overflow: 'hidden',
-    padding: theme.spacing(2, 3, 5)
+    padding: theme.spacing(1.5, 3, 5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {
       backgroundColor: theme.palette.layout.header.background,
       borderBottom: `1px solid ${theme.palette.layout.header.border}`,
-      padding: theme.spacing(5, 4, 2),
+      padding: theme.spacing(3, 4, 2),
       position: 'sticky',
       top: 0,
       zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
     },
-
-    padding: theme.spacing(5, 3, 0)
+    padding: theme.spacing(3, 3, 0)
   }
 }));

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}