@centreon/ui 25.5.7 → 25.6.0

package/package.json

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

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/components/CrudPage/CrudPageRoot.tsx

@@ -97,7 +97,7 @@ export const CrudPageRoot = <
             {isDataEmpty && !isLoading ? (
               <DataTable.EmptyState
                 aria-label="create"
-                data-testid="create-agent-configuration"
+                buttonCreateTestId="create-crudpage"
                 labels={{
                   title: labels.welcome.title,
                   description: labels.welcome.description,

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -19,12 +19,14 @@ type ListEmptyStateProps = {
     description?: string;
   };
   onCreate?: () => void;
+  buttonCreateTestId?: string;
 };
 
 const DataTableEmptyState = ({
   labels,
   onCreate,
-  canCreate = true
+  canCreate = true,
+  buttonCreateTestId
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -47,6 +49,7 @@ const DataTableEmptyState = ({
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
+            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

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);