@centreon/ui 24.4.4 → 24.4.6

package/src/InputField/Select/index.tsx

@@ -69,7 +69,7 @@ const SelectField = ({
   const { classes, cx } = useStyles();
 
   const getOption = (id): SelectEntry => {
-    return options.find(propEq(id, 'id')) as SelectEntry;
+    return options.find(propEq('id', id)) as SelectEntry;
   };
 
   const changeOption = (event): void => {

package/src/InputField/Text/index.tsx

@@ -80,7 +80,6 @@ export type Props = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
-  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
@@ -113,7 +112,6 @@ const TextField = forwardRef(
       autoSizeCustomPadding,
       defaultValue,
       required = false,
-      containerClassName,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -144,10 +142,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box
-        className={containerClassName}
-        sx={{ width: autoSize ? 'auto' : '100%' }}
-      >
+      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(

package/src/Listing/index.stories.tsx

@@ -366,16 +366,6 @@ const columnsWithSubItems = [
   }
 ];
 
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
-
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -392,6 +382,5 @@ export const ListingWithSubItems = {
       rowProperty: 'subItems'
     },
     totalRows: 10
-  },
-  render: TemplateSubItems
+  }
 };

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
+    columns.find(propEq('id', id))
   ) as Array<Column>;
 };
 

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -145,7 +143,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -181,13 +178,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -220,7 +210,6 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
-                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -229,7 +218,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

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/ThemeProvider/palettes.ts

@@ -143,7 +143,7 @@ declare module '@mui/material/Badge' {
 export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#DFD2B9',
+    acknowledgedBackground: '#F5F1E9',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -153,7 +153,7 @@ export const lightPalette: PaletteOptions = {
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#E5D8F3',
+    inDowntimeBackground: '#F0E9F8',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -283,7 +283,7 @@ export const lightPalette: PaletteOptions = {
 export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#745F35',
+    acknowledgedBackground: '#67532C',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -293,7 +293,7 @@ export const darkPalette: PaletteOptions = {
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#512980',
+    inDowntimeBackground: '#4B2352',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },

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/TimePeriods/index.stories.tsx

@@ -88,27 +88,20 @@ const args = {
   ]
 };
 
-const parameters = {
-  chromatic: { diffThreshold: 0.1 }
-};
-
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args,
-  parameters
+  args
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -116,6 +109,5 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  },
-  parameters
+  }
 };

package/src/TimePeriods/index.tsx

@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
 import {
   CustomTimePeriod as CustomTimePeriodModel,
   EndStartInterval,
-  TimePeriod as TimePeriodModel
+  TimePeriod
 } from './models';
 import useTimePeriod from './useTimePeriod';
 
@@ -34,7 +34,7 @@ interface Parameters extends EndStartInterval {
 export interface Props {
   adjustTimePeriodData?: Omit<CustomTimePeriodModel, 'timelineEventsLimit'>;
   disabled?: boolean;
-  extraTimePeriods?: Array<Omit<TimePeriodModel, 'timelineEventsLimit'>>;
+  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;

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
     }
   }

package/src/api/buildListingEndpoint/models.ts

@@ -52,8 +52,7 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni'
-  | '$rg';
+  | '$ni';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals, isNil, startsWith } from 'ramda';
+import { equals } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -22,7 +22,6 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -43,18 +42,10 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET',
-  baseEndpoint = './api/latest'
+  method = 'GET'
 }: CustomFetchProps<T>): Promise<T | ResponseError> => {
   const defaultOptions = { headers, method, signal };
 
-  const formattedEndpoint =
-    !isNil(baseEndpoint) &&
-    !startsWith(baseEndpoint, endpoint) &&
-    !startsWith('./api/internal.php', endpoint)
-      ? `${baseEndpoint}${endpoint}`
-      : endpoint;
-
   const options = isMutation
     ? {
         ...defaultOptions,
@@ -62,7 +53,7 @@ export const customFetch = <T>({
       }
     : defaultOptions;
 
-  return fetch(formattedEndpoint, options)
+  return fetch(endpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {