@centreon/ui 23.10.1-MON-20803-RS-add-basic-filter.26 → 23.10.1-MON-20803-RS-add-basic-filter.27

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/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/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
+
+import { IconButton } from '../..';
+
+import { ConfirmationTooltip } from './ConfirmationTooltip';
+
+const meta: Meta<typeof ConfirmationTooltip> = {
+  component: ConfirmationTooltip
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationTooltip>;
+
+export const Default: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
+    ),
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Save'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithConfirmVariant: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithSecondaryLabel: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete',
+        secondaryLabel: 'This action will delete the current item'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -0,0 +1,19 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+export const useStyles = makeStyles()((theme) => ({
+  list: {
+    padding: 0
+  },
+  paper: {
+    backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
+      ? theme.palette.background.widget
+      : theme.palette.background.default,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    marginLeft: theme.spacing(2),
+    maxWidth: '350px'
+  }
+}));

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -0,0 +1,67 @@
+import { MouseEvent, useState } from 'react';
+
+import { ClickAwayListener, Box, Popper } from '@mui/material';
+
+import TooltipContent from './TooltipContent';
+import { Props } from './models';
+import { useStyles } from './ConfirmationTooltip.styles';
+
+export const ConfirmationTooltip = ({
+  children,
+  labels,
+  onConfirm,
+  confirmVariant
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const [anchorElement, setAnchorElement] = useState<
+    HTMLButtonElement | undefined
+  >(undefined);
+
+  const close = (): void => {
+    setAnchorElement(undefined);
+  };
+
+  const open = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorElement(event.currentTarget);
+  };
+
+  const confirm = (): void => {
+    close();
+    onConfirm();
+  };
+
+  const actions = [
+    {
+      action: close,
+      label: labels.cancel
+    },
+    {
+      action: confirm,
+      label: labels.confirm.label,
+      secondaryLabel: labels.confirm.secondaryLabel,
+      variant: confirmVariant
+    }
+  ];
+
+  const isOpen = Boolean(anchorElement);
+
+  return (
+    <ClickAwayListener onClickAway={close}>
+      <div>
+        {children(isOpen ? close : open)}
+        <Popper
+          anchorEl={anchorElement}
+          open={isOpen}
+          popperOptions={{
+            placement: 'bottom-start'
+          }}
+        >
+          <Box className={classes.paper}>
+            <TooltipContent actions={actions} />
+          </Box>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  );
+};

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -0,0 +1,31 @@
+import { ActionVariants } from '../../../ActionsList/models';
+import { ActionsList } from '../../..';
+
+import { useStyles } from './ConfirmationTooltip.styles';
+
+interface Props {
+  actions: Array<{
+    action: () => void;
+    label: string;
+    secondaryLabel?: string;
+    variant?: ActionVariants;
+  }>;
+}
+
+const TooltipContent = ({ actions }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <ActionsList
+      actions={actions.map(({ label, action, variant, secondaryLabel }) => ({
+        label,
+        onClick: action,
+        secondaryLabel,
+        variant
+      }))}
+      className={classes.list}
+    />
+  );
+};
+
+export default TooltipContent;

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+
+import { ActionVariants } from '../../../ActionsList/models';
+
+interface Labels {
+  cancel: string;
+  confirm: {
+    label: string;
+    secondaryLabel?: string;
+  };
+}
+
+export interface Props {
+  children: (toggleTooltip) => ReactElement;
+  confirmVariant?: ActionVariants;
+  labels: Labels;
+  onConfirm: () => void;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,21 +1,35 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { Tooltip as MuiTooltip } from '@mui/material';
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
 
-import { useStyles } from './Tooltip.styles';
-
 export type TooltipProps = {
   children: ReactElement;
   followCursor?: boolean;
   hasCaret?: boolean;
   isOpen?: boolean;
   label: ReactNode;
-  position?: 'top' | 'bottom' | 'left' | 'right';
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start';
 } & AriaLabelingAttributes &
-  DataTestAttributes;
+  DataTestAttributes &
+  Omit<MuiTooltipProps, 'title'>;
 
 const Tooltip = ({
   children,
@@ -26,12 +40,9 @@ const Tooltip = ({
   hasCaret = false,
   ...attr
 }: TooltipProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <MuiTooltip
       arrow={hasCaret}
-      className={classes.tooltip}
       followCursor={followCursor}
       open={isOpen}
       placement={position}

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(() => ({
-  tooltip: {}
-}));