@centreon/ui 23.10.68 → 23.10.69

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

@@ -1,197 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $isListNode,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  ListNode,
-  REMOVE_LIST_COMMAND
-} from '@lexical/list';
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_CRITICAL,
-  SELECTION_CHANGE_COMMAND
-} from 'lexical';
-import {
-  $createHeadingNode,
-  $isHeadingNode,
-  HeadingTagType
-} from '@lexical/rich-text';
-import { $setBlocksType } from '@lexical/selection';
-import { T, always, cond, equals, isNil } from 'ramda';
-import {
-  $findMatchingParent,
-  $getNearestNodeOfType,
-  mergeRegister
-} from '@lexical/utils';
-
-import { SingleAutocompleteField } from '../../..';
-
-import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
-
-interface Props {
-  disabled: boolean;
-}
-
-const blockTypeToBlockName = {
-  bullet: 'Bullet List',
-  h1: 'Heading 1',
-  h2: 'Heading 2',
-  h3: 'Heading 3',
-  h4: 'Heading 4',
-  h5: 'Heading 5',
-  h6: 'Heading 6',
-  number: 'Number List',
-  paragraph: 'Normal'
-};
-
-const blockTypes = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'bullet',
-  'number',
-  'paragraph'
-];
-
-const blockTypeOptions = blockTypes.map((blockType) => ({
-  id: blockType,
-  name: blockTypeToBlockName[blockType]
-}));
-
-const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useBlockButtonsStyles();
-
-  const [blockType, setBlockType] =
-    useState<keyof typeof blockTypeToBlockName>('paragraph');
-
-  const [editor] = useLexicalComposerContext();
-
-  const formatParagraph = (): void => {
-    editor.update(() => {
-      const selection = $getSelection();
-      $setBlocksType(selection, () => $createParagraphNode());
-    });
-  };
-
-  const formatBulletList = (): void => {
-    if (blockType !== 'bullet') {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-
-  const formatNumberedList = (): void => {
-    if (blockType !== 'number') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-
-  const formatHeading = (headingSize: HeadingTagType): void => {
-    if (blockType !== headingSize) {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        }
-      });
-    }
-  };
-
-  const changeBlockType = (_, newBlockType): void => {
-    const formatFunction = cond<Array<string>, (value?) => void>([
-      [equals('bullet'), always(formatBulletList)],
-      [equals('number'), always(formatNumberedList)],
-      [equals('h1'), always(() => formatHeading('h1'))],
-      [equals('h2'), always(() => formatHeading('h2'))],
-      [equals('h3'), always(() => formatHeading('h3'))],
-      [equals('h4'), always(() => formatHeading('h4'))],
-      [equals('h5'), always(() => formatHeading('h5'))],
-      [equals('h6'), always(() => formatHeading('h6'))],
-      [T, always(formatParagraph)]
-    ])(newBlockType?.id || '');
-
-    formatFunction();
-  };
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const anchorNode = selection?.anchor.getNode();
-    const element = equals(anchorNode?.getKey(), 'root')
-      ? anchorNode
-      : $findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-
-          return parent !== null && $isRootOrShadowRoot(parent);
-        }) || anchorNode?.getTopLevelElementOrThrow();
-
-    const elementKey = element?.getKey();
-    const elementDOM = editor.getElementByKey(elementKey);
-
-    if (isNil(elementDOM)) {
-      return;
-    }
-
-    if ($isListNode(element)) {
-      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-      const type = parentList
-        ? parentList.getListType()
-        : element.getListType();
-      setBlockType(type);
-
-      return;
-    }
-    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
-    if (type in blockTypeToBlockName) {
-      setBlockType(type as keyof typeof blockTypeToBlockName);
-    }
-  }, [editor]);
-
-  const value = blockTypeOptions.find((option) => option.id === blockType);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      () => {
-        updateToolbar();
-
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      })
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <SingleAutocompleteField
-      className={classes.autocomplete}
-      dataTestId="Block type"
-      disabled={disabled}
-      label=""
-      options={blockTypeOptions}
-      value={value}
-      onChange={changeBlockType}
-    />
-  );
-};
-
-export default BlockButtons;

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

@@ -1,92 +0,0 @@
-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;
-
-interface Props {
-  disabled: boolean;
-}
-
-export const standardMacros = [
-  '{{SHORTDATETIME}}',
-  '{{LONGDATETIME}}',
-  '{{ALIAS}}',
-  '{{ID}}',
-  '{{NAME}}',
-  '{{OUTPUT}}',
-  '{{STATE}}',
-  '{{STATETYPE}}'
-];
-
-const MacrosButton = ({ disabled }: Props): 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}
-          disabled={disabled}
-          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/ToolbarPlugin.styles.ts

@@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useBlockButtonsStyles = makeStyles()((theme) => ({
-  autocomplete: {
-    width: theme.spacing(17)
-  }
-}));

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -1,51 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    height: '100%',
-    padding: theme.spacing(0, 0.5)
-  },
-  buttonContent: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex'
-  },
-  containerDates: {
-    display: 'flex',
-    gap: theme.spacing(0.5),
-    [theme.breakpoints.down('sm')]: {
-      columnGap: theme.spacing(0.5),
-      flexDirection: 'column'
-    }
-  },
-  date: {
-    minWidth: theme.spacing(12.5),
-    textAlign: 'start'
-  },
-  error: {
-    textAlign: 'center'
-  },
-  label: {
-    minWidth: theme.spacing(3),
-    textAlign: 'start'
-  },
-
-  picker: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  },
-  timeContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('sm')]: {
-      alignItems: 'flex-start'
-    }
-  }
-}));
-
-export default useStyles;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,95 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { useTranslation } from 'react-i18next';
-
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Button, Typography } from '@mui/material';
-
-import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { customTimePeriodAtom } from '../timePeriodsAtoms';
-import {
-  labelCompactTimePeriod,
-  labelFrom,
-  labelTo
-} from '../translatedLabels';
-
-import useStyles from './CompactCustomTimePeriod.styles';
-
-interface Props {
-  disabled?: boolean;
-  onClick: (event) => void;
-}
-
-const CompactCustomTimePeriod = ({
-  onClick,
-  disabled = false
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const { format } = useLocaleDateTimeFormat();
-
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-
-  return (
-    <div>
-      <Button
-        aria-label={t(labelCompactTimePeriod) as string}
-        className={classes.button}
-        color="primary"
-        data-testid={labelCompactTimePeriod}
-        disabled={disabled}
-        variant="outlined"
-        onClick={onClick}
-      >
-        <div className={classes.buttonContent}>
-          <AccessTimeIcon />
-          <div className={classes.containerDates}>
-            <div className={classes.timeContainer}>
-              <Typography
-                className={classes.label}
-                component="div"
-                variant="caption"
-              >
-                {t(labelFrom)}:
-              </Typography>
-
-              <Typography
-                className={classes.date}
-                component="div"
-                variant="caption"
-              >
-                {format({
-                  date: customTimePeriod.start,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
-            <div className={classes.timeContainer}>
-              <Typography
-                className={classes.label}
-                component="div"
-                variant="caption"
-              >
-                {t(labelTo)}:
-              </Typography>
-
-              <Typography
-                className={classes.date}
-                component="div"
-                variant="caption"
-              >
-                {format({
-                  date: customTimePeriod.end,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
-          </div>
-        </div>
-      </Button>
-    </div>
-  );
-};
-
-export default CompactCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx

@@ -1,14 +0,0 @@
-import { FormHelperText } from '@mui/material';
-
-interface Props {
-  message: string;
-  style: string;
-}
-
-const ErrorText = ({ message, style }: Props): JSX.Element => (
-  <FormHelperText error className={style}>
-    {message}
-  </FormHelperText>
-);
-
-export default ErrorText;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -1,163 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
-import { equals } from 'ramda';
-
-import { Typography } from '@mui/material';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-
-import { userAtom } from '@centreon/ui-context';
-import { useDateTimePickerAdapter } from '@centreon/ui';
-
-import DateTimePickerInput from '../../DateTimePickerInput';
-import {
-  CustomTimePeriodProperty,
-  DateTimePickerInputModel
-} from '../../models';
-import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-
-import ErrorText from './ErrorText';
-import { PickersData, PickersStartEndDateDirection } from './models';
-import { PickersStartEndDateModel } from './usePickersStartEndDate';
-
-const useStyles = makeStyles()((theme) => ({
-  error: {
-    textAlign: 'center'
-  },
-  horizontalDirection: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: 0
-  },
-  horizontalError: {
-    textAlign: 'left'
-  },
-  row: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
-  },
-  verticalDirection: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  }
-}));
-
-interface PropsPickersDateWithLabel extends DateTimePickerInputModel {
-  direction?: PickersStartEndDateDirection;
-  label: string;
-}
-
-const PickerDateWithLabel = ({
-  label,
-  changeDate,
-  maxDate,
-  minDate,
-  property,
-  disabled,
-  date,
-  direction = PickersStartEndDateDirection.column
-}: PropsPickersDateWithLabel): JSX.Element => {
-  const { classes, cx } = useStyles();
-  const isRow = equals(direction, PickersStartEndDateDirection.row);
-
-  return (
-    <div aria-label={label} className={cx({ [classes.row]: isRow })}>
-      <Typography component={isRow ? 'div' : 'p'}>{label}</Typography>
-      <DateTimePickerInput
-        changeDate={changeDate}
-        date={date}
-        disabled={disabled}
-        maxDate={maxDate}
-        minDate={minDate}
-        property={property}
-      />
-    </div>
-  );
-};
-
-interface DisabledPicker {
-  isDisabledEndPicker?: boolean;
-  isDisabledStartPicker?: boolean;
-}
-type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
-
-interface Props extends PickersDate, PickersStartEndDateModel {
-  direction?: PickersStartEndDateDirection;
-  disabled?: DisabledPicker;
-}
-
-const PickersStartEndDate = ({
-  startDate,
-  endDate,
-  disabled,
-  changeDate,
-  rangeStartDate,
-  rangeEndDate,
-  direction = PickersStartEndDateDirection.column
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-  const { Adapter } = useDateTimePickerAdapter();
-
-  const { locale } = useAtomValue(userAtom);
-  const error = useAtomValue(errorTimePeriodAtom);
-
-  const maxStart = rangeStartDate?.max;
-  const minStart = rangeStartDate?.min;
-  const maxEnd = rangeEndDate?.max;
-  const minEnd = rangeEndDate?.min;
-
-  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
-    ? classes.verticalDirection
-    : classes.horizontalDirection;
-
-  const isHorizontalDirection = equals(
-    direction,
-    PickersStartEndDateDirection.row
-  );
-
-  return (
-    <LocalizationProvider
-      adapterLocale={locale.substring(0, 2)}
-      dateAdapter={Adapter}
-    >
-      <div className={styleContainer}>
-        <PickerDateWithLabel
-          changeDate={changeDate}
-          date={startDate}
-          direction={direction}
-          disabled={disabled?.isDisabledStartPicker}
-          label="From"
-          maxDate={maxStart}
-          minDate={minStart}
-          property={CustomTimePeriodProperty.start}
-        />
-        <PickerDateWithLabel
-          changeDate={changeDate}
-          date={endDate}
-          direction={direction}
-          disabled={disabled?.isDisabledEndPicker}
-          label="To"
-          maxDate={maxEnd}
-          minDate={minEnd}
-          property={CustomTimePeriodProperty.end}
-        />
-      </div>
-
-      {error && (
-        <ErrorText
-          message="The end date must be greater than the start date"
-          style={cx(classes.error, {
-            [classes.horizontalError]: isHorizontalDirection
-          })}
-        />
-      )}
-    </LocalizationProvider>
-  );
-};
-
-export default PickersStartEndDate;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx

@@ -1,76 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Popover } from '@mui/material';
-
-import {
-  PickersData,
-  PopoverData,
-  defaultAnchorOrigin,
-  defaultTransformOrigin
-} from './models';
-import usePickersStartEndDate from './usePickersStartEndDate';
-import PickersStartEndDate from './PickersStartEndDate';
-
-const useStyles = makeStyles()((theme) => ({
-  paper: {
-    '& .MuiPopover-paper': {
-      minWidth: 250,
-      padding: theme.spacing(1)
-    }
-  }
-}));
-
-interface Props {
-  pickersData: PickersData;
-  popoverData: PopoverData;
-}
-
-const PopoverCustomTimePeriod = ({
-  popoverData,
-  pickersData
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { open, onClose } = popoverData;
-  const { acceptDate, customTimePeriod } = pickersData;
-
-  const { startDate, endDate, changeDate } = usePickersStartEndDate({
-    acceptDate,
-    customTimePeriod
-  });
-
-  const anchorEl = popoverData?.anchorEl;
-  const anchorPosition = popoverData?.anchorPosition;
-  const anchorOrigin = popoverData?.anchorOrigin;
-  const transformOrigin = popoverData?.transformOrigin;
-  const anchorReference = anchorPosition ? 'anchorPosition' : 'anchorEl';
-
-  const disabled = {
-    isDisabledEndPicker: pickersData?.isDisabledEndPicker,
-    isDisabledStartPicker: pickersData?.isDisabledStartPicker
-  };
-
-  return (
-    <Popover
-      anchorEl={anchorEl}
-      anchorOrigin={anchorOrigin ?? defaultAnchorOrigin}
-      anchorPosition={anchorPosition}
-      anchorReference={anchorReference}
-      className={classes.paper}
-      open={open}
-      transformOrigin={transformOrigin ?? defaultTransformOrigin}
-      onClose={onClose}
-    >
-      <PickersStartEndDate
-        changeDate={changeDate}
-        disabled={disabled}
-        endDate={endDate}
-        rangeEndDate={pickersData?.rangeEndDate}
-        rangeStartDate={pickersData?.rangeStartDate}
-        startDate={startDate}
-      />
-    </Popover>
-  );
-};
-
-export default PopoverCustomTimePeriod;