@centreon/ui 24.8.5 → 24.8.6

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -104,7 +104,8 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: theme.spacing(0.5, 1.5, 1.5)
+      padding: theme.spacing(0.5, 1.5, 1.5),
+      position: 'relative'
     }
   })
 );

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -25,10 +25,12 @@ interface Props {
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
+  locale?: string;
   maxDate?: Date;
   minDate?: Date;
   minDateTime?: Date;
   property: CustomTimePeriodProperty | string;
+  timezone?: string;
 }
 
 const DateTimePickerInput = ({
@@ -40,14 +42,16 @@ const DateTimePickerInput = ({
   changeDate,
   disabled = false,
   desktopMediaQuery,
+  locale,
+  timezone,
   ...rest
 }: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
   const desktopPickerMediaQuery =
     '@media (min-width: 1024px) or (pointer: fine)';
 
-  const { timezone, locale } = useAtomValue(userAtom);
+  const user = useAtomValue(userAtom);
 
-  const isUTC = equals(timezone, 'UTC');
+  const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
@@ -55,14 +59,20 @@ const DateTimePickerInput = ({
 
   const formatDate = useCallback(
     (currentDate: Date | null): Dayjs => {
-      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
+      if (timezone) {
+        return dayjs(currentDate).tz(timezone);
+      }
+
+      return isUTC
+        ? dayjs.utc(currentDate)
+        : dayjs.tz(currentDate, user.timezone);
     },
-    [isUTC, timezone]
+    [isUTC, timezone, user.timezone]
   );
 
   return (
     <LocalizationProvider
-      adapterLocale={locale.substring(0, 2)}
+      adapterLocale={(locale ?? user.locale).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/utils/index.ts

@@ -26,3 +26,4 @@ export * from './resourcesStatusURL';
 export * from '../Graph/Chart/helpers';
 export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
 export * from '../TimePeriods/helpers';
+export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';

package/src/utils/useLocaleTimezoneDate/LocaleTimezoneDate.cypress.spec.tsx

@@ -0,0 +1,98 @@
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import dayjs from 'dayjs';
+
+import 'dayjs/locale/de';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import 'dayjs/locale/pt';
+import { Props, useLocaleTimezoneDate } from './useLocaleTimezoneDate';
+
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+
+const date = dayjs(1602252661000);
+
+const Test = ({
+  locale,
+  timezone,
+  format
+}: Omit<Props, 'date'>): JSX.Element => {
+  const { formatDate } = useLocaleTimezoneDate();
+
+  return <p>{formatDate({ date, format, locale, timezone })}</p>;
+};
+
+const initialize = ({ timezone, locale, format }): void => {
+  cy.mount({
+    Component: <Test format={format} locale={locale} timezone={timezone} />
+  });
+};
+
+const locales = [undefined, 'en-GB', 'fr-FR', 'de-DE'];
+const timezones = [
+  'Europe/Paris',
+  'Europe/London',
+  'UTC',
+  'Africa/Casablanca',
+  'America/New_York'
+];
+const formats = ['L LT', 'LLLL'];
+
+const resultsEN = [
+  '10/09/2020 4:11 PM',
+  'Friday, October 9, 2020 4:11 PM',
+  '10/09/2020 3:11 PM',
+  'Friday, October 9, 2020 3:11 PM',
+  '10/09/2020 2:11 PM',
+  'Friday, October 9, 2020 2:11 PM',
+  '10/09/2020 3:11 PM',
+  'Friday, October 9, 2020 3:11 PM',
+  '10/09/2020 10:11 AM',
+  'Friday, October 9, 2020 10:11 AM'
+];
+
+const resultsFR = [
+  '09/10/2020 16:11',
+  'vendredi 9 octobre 2020 16:11',
+  '09/10/2020 15:11',
+  'vendredi 9 octobre 2020 15:11',
+  '09/10/2020 14:11',
+  'vendredi 9 octobre 2020 14:11',
+  '09/10/2020 15:11',
+  'vendredi 9 octobre 2020 15:11',
+  '09/10/2020 10:11',
+  'vendredi 9 octobre 2020 10:11'
+];
+
+const resultsDE = [
+  '09.10.2020 16:11',
+  'Freitag, 9. Oktober 2020 16:11',
+  '09.10.2020 15:11',
+  'Freitag, 9. Oktober 2020 15:11',
+  '09.10.2020 14:11',
+  'Freitag, 9. Oktober 2020 14:11',
+  '09.10.2020 15:11',
+  'Freitag, 9. Oktober 2020 15:11',
+  '09.10.2020 10:11',
+  'Freitag, 9. Oktober 2020 10:11'
+];
+
+const results = [...resultsEN, ...resultsEN, ...resultsFR, ...resultsDE];
+let index = 0;
+
+locales.forEach((locale) => {
+  timezones.forEach((timezone) => {
+    formats.forEach((format) => {
+      it(`displays the date with the locale ${locale}, the timezone ${timezone} and the format ${format}`, () => {
+        initialize({ format, locale, timezone });
+
+        cy.contains(results[index]).should('be.visible');
+        index += 1;
+      });
+    });
+  });
+});

package/src/utils/useLocaleTimezoneDate/useLocaleTimezoneDate.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { Dayjs } from 'dayjs';
+import { isNil } from 'ramda';
+
+export interface Props {
+  date: Dayjs;
+  format?: string;
+  locale?: string;
+  timezone?: string;
+}
+
+interface UseLocaleTimeZoneDate {
+  formatDate: (props: Props) => string;
+  toLocaleTimezoneDate: (props: Omit<Props, 'format'>) => Dayjs;
+}
+
+export const useLocaleTimezoneDate = (): UseLocaleTimeZoneDate => {
+  const toLocaleTimezoneDate = useCallback(
+    ({ date, locale = 'en', timezone }: Omit<Props, 'format'>): Dayjs => {
+      if (isNil(timezone)) {
+        return date.locale(locale);
+      }
+
+      return date.locale(locale).tz(timezone);
+    },
+    []
+  );
+
+  const formatDate = useCallback(
+    ({ date, locale = 'en', timezone, format = 'L LT' }: Props): string => {
+      return toLocaleTimezoneDate({ date, locale, timezone }).format(format);
+    },
+    []
+  );
+
+  return {
+    formatDate,
+    toLocaleTimezoneDate
+  };
+};