@centreon/ui 25.5.6 → 25.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.5.6",
+  "version": "25.5.8",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -7,6 +7,8 @@ import {
 import { Typography, useTheme } from '@mui/material';
 
 import dayjs from 'dayjs';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
 import { userAtom } from '@centreon/ui-context';
 import { Axis } from '@visx/visx';
@@ -22,6 +24,8 @@ import type { TimelineProps } from './models';
 import { useStyles } from './timeline.styles';
 import { useTimeline } from './useTimeline';
 
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
 interface Props extends TimelineProps {
   width: number;
   height: number;

package/src/Graph/Timeline/Timeline.tsx

@@ -1,14 +1,31 @@
+import type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
 import { ParentSize } from '../..';
 
 import ResponsiveTimeline from './ResponsiveTimeline';
 import type { TimelineProps } from './models';
 
-const Timeline = (props: TimelineProps): JSX.Element => (
-  <ParentSize>
+interface Props extends ParentSizeProps, TimelineProps {}
+
+const Timeline = ({
+  data,
+  startDate,
+  endDate,
+  TooltipContent,
+  tooltipClassName,
+  ...rest
+}: Props): JSX.Element => (
+  <ParentSize {...rest}>
     {({ width, height }) => (
-      <ResponsiveTimeline {...props} height={height} width={width} />
+      <ResponsiveTimeline
+        data={data}
+        startDate={startDate}
+        endDate={endDate}
+        TooltipContent={TooltipContent}
+        tooltipClassName={tooltipClassName}
+        height={height}
+        width={width}
+      />
     )}
   </ParentSize>
 );
-
 export default Timeline;

package/src/Graph/index.ts

@@ -1,3 +1,4 @@
+export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
 export { default as LineChart } from './Chart';
 export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
 export { default as useLineChartData } from './Chart/useChartData';

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

@@ -10,8 +10,6 @@ import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import { userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import { isInvalidDate } from '../../helpers';
 import {
@@ -20,6 +18,7 @@ import {
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
+import { useLocale } from '../../../utils';
 import ErrorText from './ErrorText';
 import {
   PickersStartEndDateDirection,
@@ -100,7 +99,7 @@ const PickersStartEndDate = ({
 }: PickersStartEndDateProps): JSX.Element => {
   const { classes } = useStyles();
 
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
 

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -13,6 +13,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../utils';
 import { CustomTimePeriodProperty } from './models';
 
 interface ChangeDateProps {
@@ -50,6 +51,7 @@ const DateTimePickerInput = ({
     '@media (min-width: 1024px) or (pointer: fine)';
 
   const user = useAtomValue(userAtom);
+  const localeToUse = useLocale();
 
   const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
@@ -72,7 +74,7 @@ const DateTimePickerInput = ({
 
   return (
     <LocalizationProvider
-      adapterLocale={(locale ?? user.locale).substring(0, 2)}
+      adapterLocale={(locale ?? localeToUse).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/api/useGraphQuery/index.ts

@@ -187,7 +187,6 @@ const useGraphQuery = ({
         });
   };
 
-
   const formatLegend = ({
     host = null,
     service = null,

package/src/utils/index.ts

@@ -28,3 +28,4 @@ export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZ
 export * from '../TimePeriods/helpers';
 export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
 export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';
+export * from './useLocale';

package/src/utils/useLocale/index.ts

@@ -0,0 +1,9 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { useAtomValue } from 'jotai';
+
+export const useLocale = () => {
+  const user = useAtomValue(userAtom);
+  const browserLocale = useAtomValue(browserLocaleAtom);
+
+  return user.locale || browserLocale;
+};

package/src/utils/useLocale/useLocale.cypress.spec.tsx

@@ -0,0 +1,38 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import { useLocale } from '.';
+
+const TestComponent = () => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+const initialize = ({ userLocale, browserLocale }) => {
+  const store = createStore();
+
+  store.set(userAtom, { locale: userLocale });
+  store.set(browserLocaleAtom, browserLocale);
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent />
+      </Provider>
+    )
+  });
+};
+
+describe('useLocale', () => {
+  it('displays the user locale when the corresponding atom is set', () => {
+    initialize({ userLocale: 'fi', browserLocale: 'en' });
+
+    cy.contains('fi').should('be.visible');
+  });
+
+  it('displays the browser locale when the user locale is not set', () => {
+    initialize({ browserLocale: 'de', userLocale: null });
+
+    cy.contains('de').should('be.visible');
+  });
+});

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -5,6 +5,7 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../useLocale';
 import shortLocales from './sortLocales';
 
 interface FormatParameters {
@@ -28,10 +29,11 @@ const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 
 const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
-  const { locale, timezone } = useAtomValue(userAtom);
+  const locale = useLocale();
+  const { timezone } = useAtomValue(userAtom);
 
   const format = ({ date, formatString }: FormatParameters): string => {
-    const normalizedLocale = locale.substring(0, 2);
+    const normalizedLocale = locale?.substring(0, 2);
 
     const timezoneDate = dayjs(
       new Date(date).toLocaleString('en', { timeZone: timezone })

package/src/utils/usePluralizedTranslation.ts

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 
-import { useAtomValue } from 'jotai';
 import pluralize from 'pluralize';
 import { equals, includes } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { userAtom } from '@centreon/ui-context';
+import { useLocale } from './useLocale';
 
 interface TProps {
   count: number;
@@ -16,7 +15,7 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
 
   const isNotPartitiveLocale = includes('fr', locale);