@centreon/ui 23.10.117 → 23.10.119

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

@@ -1,38 +1,76 @@
 import { useState, useCallback, useEffect, useMemo } from 'react';
 
+import { makeStyles } from 'tss-react/mui';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $getSelection,
   $isRangeSelection,
   FORMAT_TEXT_COMMAND,
+  RangeSelection,
   SELECTION_CHANGE_COMMAND,
-  TextFormatType
+  TextFormatType,
+  ElementNode,
+  TextNode
 } from 'lexical';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isAtNodeEnd } from '@lexical/selection';
 import { mergeRegister } from '@lexical/utils';
+import { useAtom } from 'jotai';
 
-import FormatTextIcon from '@mui/icons-material/FormatColorText';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import FormatItalicIcon from '@mui/icons-material/FormatItalic';
 import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
 import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
+import LinkIcon from '@mui/icons-material/Link';
+import { alpha } from '@mui/material';
 
-import { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
+import { IconButton } from '../../..';
+import { isInsertingLinkAtom } from '../../atoms';
 
 const LowPriority = 1;
 
+const useStyles = makeStyles()((theme) => ({
+  buttonSelected: {
+    backgroundColor: alpha(
+      theme.palette.primary.main,
+      theme.palette.action.activatedOpacity
+    )
+  },
+  container: {
+    columnGap: theme.spacing(1),
+    display: 'flex',
+    marginBottom: theme.spacing(1)
+  }
+}));
+
+const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
+  const { anchor } = selection;
+  const { focus } = selection;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+
+  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+};
+
 interface Props {
   disabled: boolean;
 }
 
 const FormatButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const [isBold, setIsBold] = useState(false);
   const [isItalic, setIsItalic] = useState(false);
   const [isUnderline, setIsUnderline] = useState(false);
   const [isStrikeThrough, setIsStrikeThrough] = useState(false);
+  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
 
   const [editor] = useLexicalComposerContext();
 
@@ -45,8 +83,24 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
     setIsItalic(selection.hasFormat('italic'));
     setIsUnderline(selection.hasFormat('underline'));
     setIsStrikeThrough(selection.hasFormat('strikethrough'));
+
+    const node = getSelectedNode(selection);
+    const parent = node.getParent();
+    if ($isLinkNode(parent) || $isLinkNode(node)) {
+      setIsLink(true);
+    } else {
+      setIsLink(false);
+    }
   }, [editor]);
 
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
   useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
@@ -90,34 +144,34 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
         isSelected: isStrikeThrough,
         onClickFunction: toggleTextFormat('strikethrough'),
         type: 'strikethrough'
+      },
+      {
+        Icon: LinkIcon,
+        isSelected: isLink,
+        onClickFunction: insertLink,
+        type: 'link'
       }
     ],
-    [isBold, isItalic, isUnderline, isStrikeThrough]
+    [isBold, isItalic, isUnderline, isStrikeThrough, isLink]
   );
 
   return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="format"
-        className={classes.button}
-        disabled={disabled}
-      >
-        <FormatTextIcon />
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        <div className={classes.menu}>
-          {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
-            <Menu.Item
-              isActive={isSelected}
-              key={type}
-              onClick={onClickFunction}
-            >
-              <Icon aria-label={type} />
-            </Menu.Item>
-          ))}
-        </div>
-      </Menu.Items>
-    </Menu>
+    <>
+      {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
+        <IconButton
+          ariaLabel={type}
+          className={cx(isSelected && classes.buttonSelected)}
+          disabled={disabled}
+          key={type}
+          size="medium"
+          title={type}
+          tooltipPlacement="top"
+          onClick={onClickFunction}
+        >
+          <Icon />
+        </IconButton>
+      ))}
+    </>
   );
 };
 

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

@@ -1,11 +1,13 @@
+import { useState } from 'react';
+
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { createCommand, LexicalCommand } from 'lexical';
 
 import MacrosIcon from '@mui/icons-material/TerminalOutlined';
 
-import { Menu } from '../../../components';
+import { ActionsList, IconButton, PopoverMenu } from '../../..';
 
-import { useStyles } from './ToolbarPlugin.styles';
+import { useStyles } from '.';
 
 const LowPriority = 1;
 
@@ -25,12 +27,15 @@ export const standardMacros = [
 
 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 = (macro): void => {
+  const onClick = (e): void => {
+    const macro = e.target.id || e.target.textContent.trim();
+
     editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
   };
 
@@ -48,27 +53,38 @@ const MacrosButton = ({ disabled }: Props): JSX.Element => {
     LowPriority
   );
 
+  const displayMacros = (): void => {
+    setAreMacrosDiplayed(true);
+  };
+
+  const actions = standardMacros.map((macro) => ({
+    label: macro,
+    onClick
+  }));
+
   return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="Macros"
-        className={classes.button}
-        disabled={disabled}
-      >
-        <MacrosIcon />
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        {standardMacros.map((name) => (
-          <Menu.Item
-            className={classes.menuItem}
-            key={name}
-            onClick={(): void => onClick(name)}
-          >
-            {name}
-          </Menu.Item>
-        ))}
-      </Menu.Items>
-    </Menu>
+    <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>
   );
 };
 

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -1,32 +1,22 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { alpha } from '@mui/system';
+export const useBlockButtonsStyles = makeStyles()((theme) => ({
+  autocomplete: {
+    width: theme.spacing(17)
+  }
+}));
 
-export const useStyles = makeStyles()((theme) => ({
+export const useAlignPickerStyles = makeStyles()((theme) => ({
   button: {
-    color: theme.palette.text.primary
-  },
-  buttonSelected: {
-    backgroundColor: alpha(
-      theme.palette.primary.main,
-      theme.palette.action.activatedOpacity
-    )
-  },
-  menu: {
+    alignItems: 'center',
     display: 'flex',
-    flexDirection: 'row'
-  },
-  menuItem: {
-    '&, &.MuiMenuItem-root': {
-      fontSize: theme.typography.body2.fontSize
-    }
+    flexDirection: 'row',
+    gap: theme.spacing(1)
   },
-  menuItems: {
-    '& > .MuiPaper-root.MuiMenu-paper': {
-      minWidth: 0
-    },
-    '& ul, & ul.MuiMenu-list': {
-      padding: 0
-    }
+  option: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
   }
 }));

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

@@ -16,8 +16,6 @@ import RedoIcon from '@mui/icons-material/Redo';
 import { IconButton } from '../../..';
 import { labelRedo, labelUndo } from '../../translatedLabels';
 
-import { useStyles } from './ToolbarPlugin.styles';
-
 const LowPriority = 1;
 
 interface Props {
@@ -25,8 +23,6 @@ interface Props {
 }
 
 const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -72,7 +68,6 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        className={classes.button}
         disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
@@ -82,7 +77,6 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        className={classes.button}
         disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"

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

@@ -5,10 +5,8 @@ import { Divider } from '@mui/material';
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
-import AlignPicker from './AlignPicker';
-import ListButton from './ListButton';
-import LinkButton from './LinkButton';
 import BlockButtons from './BlockButtons';
+import AlignPicker from './AlignPicker';
 
 interface Props {
   className?: string;
@@ -24,6 +22,14 @@ export const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
+  },
+  macros: {
+    '& span': {
+      fontSize: theme.typography.caption.fontSize
+    }
+  },
+  macrosButton: {
+    marginBottom: theme.spacing(0.5)
   }
 }));
 
@@ -45,10 +51,9 @@ const ToolbarPlugin = ({
           <BlockButtons disabled={disabled} />
         </>
       )}
+      <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
       <AlignPicker disabled={disabled} />
-      <ListButton disabled={disabled} />
-      <LinkButton disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />

package/src/RichTextEditor/translatedLabels.ts

@@ -3,6 +3,3 @@ export const labelRedo = 'Redo';
 export const labelInputLink = 'Insert link';
 export const labelSavedLink = 'Saved link';
 export const labelEditLink = 'Edit link';
-export const labelAlignPicker = 'align picker';
-export const labelUnorderedList = 'Unordered List';
-export const labelOrderedList = 'Ordered List';

package/src/SortableItems/index.tsx

@@ -15,7 +15,11 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  SortingStrategy
+} from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -113,6 +117,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -164,7 +169,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(id, propertyToFilterItemsOn), items);
+    find(propEq(propertyToFilterItemsOn, id), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 

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

@@ -2,15 +2,12 @@ import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
 
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 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 {
@@ -23,9 +20,6 @@ import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
 import { PickersStartEndDateModel } from './usePickersStartEndDate';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
 const useStyles = makeStyles()((theme) => ({
   error: {
     textAlign: 'center'
@@ -110,6 +104,7 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
+  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -131,7 +126,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
+      dateAdapter={Adapter}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -18,6 +18,8 @@ export interface PickersData {
   getError?: (value: boolean) => void;
   isDisabledEndPicker?: boolean;
   isDisabledStartPicker?: boolean;
+  onCloseEndPicker?: (isClosed: boolean) => void;
+  onCloseStartPicker?: (isClosed: boolean) => void;
   rangeEndDate?: RangeDate;
   rangeStartDate?: RangeDate;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,29 +1,19 @@
-import { useCallback } from 'react';
+import dayjs from 'dayjs';
 
-import dayjs, { Dayjs } from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { DateTimePicker } from '@mui/x-date-pickers';
 
-import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import { userAtom } from '@centreon/ui-context';
+import { useDateTimePickerAdapter } from '@centreon/ui';
 
 import { CustomTimePeriodProperty } from './models';
 
-interface ChangeDateProps {
-  date: Date;
-  property: CustomTimePeriodProperty | string;
-}
-
 interface Props {
-  changeDate: (props: ChangeDateProps) => void;
+  changeDate: (props) => void;
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  property: CustomTimePeriodProperty | string;
+  property: CustomTimePeriodProperty;
 }
 
 const DateTimePickerInput = ({
@@ -35,42 +25,24 @@ const DateTimePickerInput = ({
   disabled = false,
   desktopMediaQuery
 }: Props): JSX.Element => {
-  const desktopPickerMediaQuery =
-    '@media (min-width: 1024px) or (pointer: fine)';
-
-  const { timezone, locale } = useAtomValue(userAtom);
-
-  const isUTC = equals(timezone, 'UTC');
+  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
   };
 
-  const formatDate = useCallback(
-    (currentDate: Date | null): Dayjs => {
-      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
-    },
-    [isUTC, timezone]
-  );
-
   return (
-    <LocalizationProvider
-      adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
-      dateLibInstance={dayjs}
-    >
-      <DateTimePicker<dayjs.Dayjs>
-        dayOfWeekFormatter={(dayOfWeek) =>
-          dayOfWeek.substring(0, 2).toLocaleUpperCase()
-        }
-        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
-        disabled={disabled}
-        maxDate={maxDate && formatDate(maxDate)}
-        minDate={minDate && formatDate(minDate)}
-        value={formatDate(date)}
-        onChange={changeTime}
-      />
-    </LocalizationProvider>
+    <DateTimePicker<dayjs.Dayjs>
+      dayOfWeekFormatter={(day: string): string =>
+        day.substring(0, 2).toUpperCase()
+      }
+      desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+      disabled={disabled}
+      maxDate={maxDate && dayjs(maxDate)}
+      minDate={minDate && dayjs(minDate)}
+      value={dayjs(date)}
+      onChange={changeTime}
+    />
   );
 };
 

package/src/TimePeriods/TimePeriods.cypress.spec.tsx

@@ -3,10 +3,15 @@ import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { Provider, createStore } from 'jotai';
-import { equals } from 'ramda';
+import { equals, inc } from 'ramda';
 import { renderHook } from '@testing-library/react';
 
-import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+import {
+  useLocaleDateTimeFormat,
+  useDateTimePickerAdapter
+} from '@centreon/ui';
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
 import { CustomTimePeriodProperty } from './models';
@@ -292,6 +297,10 @@ testData.forEach((item) =>
     beforeEach(() => {
       cy.viewport('macbook-13');
 
+      const { result } = renderHook(() => useDateTimePickerAdapter());
+
+      const { Adapter } = result.current;
+
       const store = createStore();
       store.set(userAtom, {
         ...retrievedUser,
@@ -302,16 +311,31 @@ testData.forEach((item) =>
       cy.mount({
         Component: (
           <Provider store={store}>
-            <DateTimePickerInput
-              changeDate={cy.stub()}
-              date={new Date(item.initialDate)}
-              property={CustomTimePeriodProperty.start}
-            />
+            <LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
+              <DateTimePickerInput
+                changeDate={cy.stub()}
+                date={new Date(item.initialDate)}
+                desktopMediaQuery="@media (min-width: 1024px)"
+                property={CustomTimePeriodProperty.start}
+              />
+            </LocalizationProvider>
           </Provider>
         )
       });
     });
 
+    it('checks input calendar value contains correct date', () => {
+      const { result } = renderHook(() => useLocaleDateTimeFormat());
+      const { format } = result.current;
+
+      const dateInput = format({
+        date: dayjs(item.initialDate).tz(item.timezone),
+        formatString: 'L hh:mm A'
+      });
+
+      cy.get('input').should('have.value', dateInput);
+    });
+
     it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
       cy.get('button').click();
       item.data.forEach((element) => {
@@ -365,7 +389,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', numberWeeks);
+        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
         cy.get('@listWeeks').eq(0).as('firstWeek');
         cy.get('@firstWeek').children().as('listDaysInFirstWeek');
 
@@ -392,7 +416,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', numberWeeks);
+        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
 
         cy.get('@listWeeks')
           .eq(numberWeeks - 1)

package/src/TimePeriods/helpers/index.ts

@@ -23,4 +23,4 @@ export const getTimePeriodById = ({
   id,
   timePeriods
 }: TimePeriodById): TimePeriod =>
-  find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;
+  find<TimePeriod>(propEq('id', id))(timePeriods) as TimePeriod;

package/src/api/QueryProvider.tsx

@@ -7,7 +7,7 @@ const defaultCacheTime = 5 * 1_000;
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: defaultCacheTime,
+      cacheTime: defaultCacheTime,
       refetchOnWindowFocus: false,
       staleTime: defaultCacheTime,
       suspense: true

package/src/api/TestQueryProvider.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 0,
+      cacheTime: 0,
       retry: false
     }
   }