@centreon/ui 24.4.69 → 24.4.71

package/package.json

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

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -15,11 +15,11 @@ import {
 
 const initialize = ({
   initialValues = simpleAccessRights,
-  loading = false,
-  link = 'link'
+  loading = false
 }): unknown => {
   const cancel = cy.stub();
   const save = cy.stub();
+  const change = cy.stub();
 
   cy.interceptAPIRequest({
     alias: 'getContacts',
@@ -47,10 +47,10 @@ const initialize = ({
               }}
               initialValues={initialValues}
               labels={labels}
-              link={link}
               loading={loading}
               roles={roles}
               submit={save}
+              onChange={change}
             />
           </Provider>
         </TestQueryProvider>
@@ -60,6 +60,7 @@ const initialize = ({
 
   return {
     cancel,
+    change,
     save
   };
 };
@@ -74,21 +75,12 @@ describe('Access rights', () => {
     cy.findByLabelText('Add a contact').should('be.visible');
     cy.findByTestId('add_role').should('be.disabled');
     cy.findByTestId('add').should('be.disabled');
-    cy.findByLabelText('Copy link').should('be.visible');
     cy.findByLabelText('Cancel').should('be.visible');
     cy.findByLabelText('Save').should('be.visible');
 
     cy.makeSnapshot();
   });
 
-  it('displays the access rights without link', () => {
-    initialize({ link: null });
-
-    cy.findByLabelText('Copy link').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
   it('displays the access rights with an empty list', () => {
     initialize({ initialValues: emptyAccessRights });
 
@@ -97,7 +89,7 @@ describe('Access rights', () => {
     cy.makeSnapshot();
   });
 
-  it('displays the access rights with an empty list', () => {
+  it('displays the access rights list', () => {
     initialize({});
 
     simpleAccessRights.forEach(({ name, email, isContactGroup, role }) => {
@@ -370,4 +362,26 @@ describe('Access rights', () => {
 
     cy.makeSnapshot();
   });
+
+  it('calls the change function when the corresponding prop is set and the form is updated', () => {
+    const { change } = initialize({});
+
+    cy.contains(labels.add.contact).click();
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add').click();
+
+    cy.contains('Entity 10').should('be.visible');
+
+    cy.findByTestId('role-Entity 10').should('have.value', 'viewer');
+    cy.contains(labels.list.added)
+      .should('be.visible')
+      .then(() => {
+        expect(change).to.have.callCount(2);
+      });
+  });
 });

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -47,7 +47,6 @@ export const Default: Story = {
     },
     initialValues: defaultAccessRights,
     labels,
-    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -63,7 +62,6 @@ export const AccessRightsWithStates: Story = {
     },
     initialValues: accessRightsWithStates,
     labels,
-    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -79,22 +77,6 @@ export const withEmptyState: Story = {
     },
     initialValues: emptyAccessRights,
     labels,
-    link: 'link',
-    roles,
-    submit: () => undefined
-  },
-  render: Template
-};
-
-export const withoutLink: Story = {
-  args: {
-    cancel: () => undefined,
-    endpoints: {
-      contact: '/contact',
-      contactGroup: '/contactGroup'
-    },
-    initialValues: defaultAccessRights,
-    labels,
     roles,
     submit: () => undefined
   },
@@ -110,7 +92,6 @@ export const loading: Story = {
     },
     initialValues: emptyAccessRights,
     labels,
-    link: 'link',
     loading: true,
     roles,
     submit: () => undefined

package/src/components/Form/AccessRights/AccessRights.styles.ts

@@ -5,6 +5,6 @@ export const useAccessRightsStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
-    maxWidth: '520px'
+    width: '100%'
   }
 }));

package/src/components/Form/AccessRights/AccessRights.tsx

@@ -8,16 +8,17 @@ import Provider from './Provider';
 import ShareInput from './ShareInput/ShareInput';
 import Stats from './Stats/Stats';
 import { AccessRightInitialValues, Endpoints, Labels } from './models';
+import { useAccessRightsChange } from './useAccessRightsChange';
 import { useAccessRightsInitValues } from './useAccessRightsInitValues';
 
 interface Props {
-  cancel: ({ dirty, values }) => void;
+  cancel?: ({ dirty, values }) => void;
   endpoints: Endpoints;
   initialValues: Array<AccessRightInitialValues>;
   isSubmitting?: boolean;
   labels: Labels;
-  link?: string;
   loading?: boolean;
+  onChange?: (values: Array<AccessRightInitialValues>) => void;
   roles: Array<SelectEntry>;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
@@ -28,13 +29,14 @@ export const AccessRights = ({
   endpoints,
   submit,
   cancel,
-  link,
   loading,
   labels,
-  isSubmitting
+  isSubmitting,
+  onChange
 }: Props): JSX.Element => {
   const { classes } = useAccessRightsStyles();
   const clear = useAccessRightsInitValues({ initialValues });
+  useAccessRightsChange(onChange);
 
   return (
     <div className={classes.container}>
@@ -46,7 +48,6 @@ export const AccessRights = ({
         clear={clear}
         isSubmitting={isSubmitting}
         labels={labels.actions}
-        link={link}
         submit={submit}
       />
     </div>

package/src/components/Form/AccessRights/Actions/Actions.styles.ts

@@ -1,14 +1,10 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
-  actions: {
-    backgroundColor: theme.palette.background.paper,
-    display: 'flex',
-    justifyContent: 'space-between'
-  },
   cancelAndSave: {
     display: 'flex',
-    flex: 'row',
-    gap: theme.spacing(2)
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    justifyContent: 'flex-end'
   }
 }));

package/src/components/Form/AccessRights/Actions/Actions.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 
-import LinkIcon from '@mui/icons-material/Link';
 import { CircularProgress } from '@mui/material';
 
 import { Button } from '../../..';
@@ -10,11 +9,10 @@ import { useActions } from './useActions';
 import { useActionsStyles } from './Actions.styles';
 
 interface Props {
-  cancel: ({ dirty, values }) => void;
+  cancel?: ({ dirty, values }) => void;
   clear: () => void;
   isSubmitting?: boolean;
   labels: Labels['actions'];
-  link?: string;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
 
@@ -22,17 +20,15 @@ const Actions = ({
   labels,
   cancel,
   submit,
-  link,
   isSubmitting,
   clear
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useActionsStyles();
 
-  const { dirty, copyLink, save, formattedValues } = useActions({
+  const { dirty, save, formattedValues } = useActions({
     clear,
     labels,
-    link,
     submit
   });
 
@@ -41,21 +37,8 @@ const Actions = ({
   };
 
   return (
-    <div className={classes.actions}>
-      {link ? (
-        <Button
-          aria-label={t(labels.copyLink)}
-          icon={<LinkIcon />}
-          iconVariant="start"
-          variant="ghost"
-          onClick={copyLink}
-        >
-          {t(labels.copyLink)}
-        </Button>
-      ) : (
-        <div />
-      )}
-      <div className={classes.cancelAndSave}>
+    <div className={classes.cancelAndSave}>
+      {cancel && (
         <Button
           aria-label={t(labels.cancel)}
           variant="secondary"
@@ -63,17 +46,17 @@ const Actions = ({
         >
           {t(labels.cancel)}
         </Button>
-        <Button
-          aria-label={t(labels.save)}
-          disabled={isSubmitting || !dirty}
-          icon={isSubmitting ? <CircularProgress size={24} /> : null}
-          iconVariant={isSubmitting ? 'start' : 'none'}
-          variant="primary"
-          onClick={save}
-        >
-          {t(labels.save)}
-        </Button>
-      </div>
+      )}
+      <Button
+        aria-label={t(labels.save)}
+        disabled={isSubmitting || !dirty}
+        icon={isSubmitting ? <CircularProgress size={24} /> : null}
+        iconVariant={isSubmitting ? 'start' : 'none'}
+        variant="primary"
+        onClick={save}
+      >
+        {t(labels.save)}
+      </Button>
     </div>
   );
 };

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -1,64 +1,32 @@
 import { useAtomValue } from 'jotai';
-import { equals, omit } from 'ramda';
+import { equals } from 'ramda';
 
 import { initialValuesAtom, valuesAtom } from '../atoms';
-import { AccessRight, AccessRightInitialValues, Labels } from '../models';
-import { useCopyToClipboard } from '../../../..';
-
-const formatValue = (accessRight: AccessRight): AccessRightInitialValues => {
-  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
-};
-
-const formatValueForSubmition = (
-  accessRight: AccessRight
-): AccessRightInitialValues => {
-  return {
-    ...formatValue(accessRight),
-    id: Number((accessRight.id as string).split('_')[1])
-  };
-};
+import { AccessRightInitialValues, Labels } from '../models';
+import { formatValue, formatValueForSubmition } from '../utils';
 
 interface Props {
   clear: () => void;
   labels: Labels['actions'];
-  link?: string;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
 
 interface UseActionsState {
-  copyLink: () => void;
   dirty: boolean;
   formattedValues: Array<AccessRightInitialValues>;
   save: () => void;
 }
 
-export const useActions = ({
-  link,
-  labels,
-  submit,
-  clear
-}: Props): UseActionsState => {
+export const useActions = ({ submit, clear }: Props): UseActionsState => {
   const values = useAtomValue(valuesAtom);
   const initialValues = useAtomValue(initialValuesAtom);
 
-  const { copy } = useCopyToClipboard({
-    errorMessage: labels.copyError,
-    successMessage: labels.copySuccess
-  });
-
   const formattedValues = values
     .filter(({ isRemoved }) => !isRemoved)
     .map(formatValue);
 
   const dirty = !equals(initialValues, formattedValues);
 
-  const copyLink = (): void => {
-    if (!link) {
-      return;
-    }
-    copy(link);
-  };
-
   const save = (): void => {
     submit(
       values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
@@ -71,7 +39,6 @@ export const useActions = ({
   };
 
   return {
-    copyLink,
     dirty,
     formattedValues,
     save

package/src/components/Form/AccessRights/models.ts

@@ -16,9 +16,6 @@ export interface AccessRight extends AccessRightInitialValues {
 export interface Labels {
   actions: {
     cancel: string;
-    copyError: string;
-    copyLink: string;
-    copySuccess: string;
     save: string;
   };
   add: {

package/src/components/Form/AccessRights/storiesData.ts

@@ -105,9 +105,6 @@ export const buildResult = (isGroup): Listing<SelectEntry> => ({
 export const labels: Labels = {
   actions: {
     cancel: 'Cancel',
-    copyError: 'Failed to copy',
-    copyLink: 'Copy link',
-    copySuccess: 'Copied',
     save: 'Save'
   },
   add: {

package/src/components/Form/AccessRights/useAccessRightsChange.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useAtomValue } from 'jotai';
+
+import { useDeepCompare } from '../../../utils';
+
+import { valuesAtom } from './atoms';
+import { formatValueForSubmition } from './utils';
+import { AccessRightInitialValues } from './models';
+
+export const useAccessRightsChange = (
+  onChange?: (values: Array<AccessRightInitialValues>) => void
+): void => {
+  const values = useAtomValue(valuesAtom);
+
+  useEffect(
+    () => {
+      if (!onChange) {
+        return;
+      }
+
+      onChange(
+        values
+          .filter(({ isRemoved }) => !isRemoved)
+          .map(formatValueForSubmition)
+      );
+    },
+    useDeepCompare([values])
+  );
+};

package/src/components/Form/AccessRights/utils.ts

@@ -0,0 +1,18 @@
+import { omit } from 'ramda';
+
+import { AccessRight, AccessRightInitialValues } from './models';
+
+export const formatValue = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
+};
+
+export const formatValueForSubmition = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return {
+    ...formatValue(accessRight),
+    id: Number((accessRight.id as string).split('_')[1])
+  };
+};

package/src/components/List/Item/ListItem.styles.ts

@@ -18,10 +18,10 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexGrow: 1,
     gap: theme.spacing(2),
-    maxWidth: '520px',
     overflow: 'hidden',
     paddingBottom: theme.spacing(1),
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(1),
+    width: '100%'
   },
   secondary: {
     alignItems: 'center',

package/src/components/Tabs/Tab.styles.ts

@@ -0,0 +1,25 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTabsStyles = makeStyles()((theme) => ({
+  indicator: {
+    bottom: 'unset'
+  },
+  tab: {
+    '&[aria-selected="true"]': {
+      color: theme.palette.text.primary,
+      fontWeight: theme.typography.fontWeightBold
+    },
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightRegular,
+    marginRight: theme.spacing(2),
+    minHeight: 0,
+    minWidth: 0,
+    padding: theme.spacing(0.5, 0)
+  },
+  tabPanel: {
+    padding: theme.spacing(1, 0, 0)
+  },
+  tabs: {
+    minHeight: theme.spacing(4.5)
+  }
+}));

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,22 @@
+import { TabPanel as MuiTabPanel } from '@mui/lab';
+
+import { useTabsStyles } from './Tab.styles';
+
+type Props = {
+  children: JSX.Element;
+  value: string;
+};
+
+export const TabPanel = ({ children, value }: Props): JSX.Element => {
+  const { classes } = useTabsStyles();
+
+  return (
+    <MuiTabPanel
+      className={classes.tabPanel}
+      data-tabPanel={value}
+      value={value}
+    >
+      {children}
+    </MuiTabPanel>
+  );
+};

package/src/components/Tabs/Tabs.cypress.spec.tsx

@@ -0,0 +1,70 @@
+import { Typography } from '@mui/material';
+
+import { TabPanel } from './TabPanel';
+
+import { Tabs } from '.';
+
+const initialize = (withTabListProps = false): void => {
+  cy.mount({
+    Component: (
+      <Tabs
+        defaultTab="tab 0"
+        tabList={
+          withTabListProps
+            ? {
+                variant: 'fullWidth'
+              }
+            : undefined
+        }
+        tabs={[
+          { label: 'Tab 0', value: 'tab 0' },
+          { label: 'Tab 1', value: 'tab 1' }
+        ]}
+      >
+        <TabPanel value="tab 0">
+          <Typography>Tab 0</Typography>
+        </TabPanel>
+        <TabPanel value="tab 1">
+          <Typography>Tab 1</Typography>
+        </TabPanel>
+      </Tabs>
+    )
+  });
+};
+
+describe('Tabs', () => {
+  it('displays tabs and their content when a tab is selected', () => {
+    initialize();
+
+    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
+    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
+    cy.findByLabelText('Tab 0')
+      .should('have.attr', 'aria-selected')
+      .and('equals', 'true');
+    cy.findByLabelText('Tab 1')
+      .should('have.attr', 'aria-selected')
+      .and('equals', 'false');
+
+    cy.contains('Tab 1').click();
+
+    cy.get('[data-TabPanel="tab 0"]').should('have.attr', 'hidden');
+    cy.get('[data-TabPanel="tab 1"]').should('not.have.attr', 'hidden');
+    cy.findByLabelText('Tab 0')
+      .should('have.attr', 'aria-selected')
+      .and('equals', 'false');
+    cy.findByLabelText('Tab 1')
+      .should('have.attr', 'aria-selected')
+      .and('equals', 'true');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tabs when tabList props are set', () => {
+    initialize(true);
+
+    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
+    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+
+import { TabPanel } from './TabPanel';
+
+import { Tabs } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const generateTabs = (size: number): Array<{ label: string; value: string }> =>
+  Array(size)
+    .fill(0)
+    .map((_, index) => ({ label: `Tab ${index}`, value: `tab ${index}` }));
+
+export const Default: Story = {
+  args: {
+    defaultTab: 'tab 0',
+    tabs: generateTabs(2)
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      {generateTabs(2).map(({ value, label }) => (
+        <TabPanel key={value} value={value}>
+          <Typography>{label}</Typography>
+        </TabPanel>
+      ))}
+    </Tabs>
+  )
+};
+
+export const WithTabListProps: Story = {
+  args: {
+    defaultTab: 'tab 0',
+    tabList: {
+      textColor: 'inherit',
+      variant: 'fullWidth'
+    },
+    tabs: generateTabs(2)
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      {generateTabs(2).map(({ value, label }) => (
+        <TabPanel key={value} value={value}>
+          <Typography>{label}</Typography>
+        </TabPanel>
+      ))}
+    </Tabs>
+  )
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useState } from 'react';
+
+import { TabContext, TabList, TabListProps } from '@mui/lab';
+import { Tab } from '@mui/material';
+
+import { useTabsStyles } from './Tab.styles';
+
+type Props = {
+  children: Array<JSX.Element>;
+  defaultTab: string;
+  tabList?: TabListProps;
+  tabs: Array<{
+    label: string;
+    value: string;
+  }>;
+};
+
+export const Tabs = ({
+  children,
+  defaultTab,
+  tabs,
+  tabList
+}: Props): JSX.Element => {
+  const { classes } = useTabsStyles();
+
+  const [selectedTab, setSelectedTab] = useState(defaultTab);
+
+  const changeTab = useCallback((_, newValue: string): void => {
+    setSelectedTab(newValue);
+  }, []);
+
+  return (
+    <TabContext value={selectedTab}>
+      <TabList
+        classes={{
+          indicator: classes.indicator,
+          root: classes.tabs
+        }}
+        onChange={changeTab}
+        {...tabList}
+      >
+        {tabs.map(({ value, label }) => (
+          <Tab
+            aria-label={label}
+            className={classes.tab}
+            key={value}
+            label={label}
+            value={value}
+          />
+        ))}
+      </TabList>
+      {children}
+    </TabContext>
+  );
+};

package/src/components/Tabs/index.ts

@@ -0,0 +1,6 @@
+import { TabPanel } from './TabPanel';
+import { Tabs as TabsRoot } from './Tabs';
+
+export const Tabs = Object.assign(TabsRoot, {
+  TabPanel
+});

package/src/components/index.ts

@@ -12,3 +12,4 @@ export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
 export { default as Zoom } from './Zoom/Zoom';
+export * from './Tabs';

package/src/utils/usePluralizedTranslation.test.ts

@@ -0,0 +1,159 @@
+import { act, renderHook } from '@testing-library/react';
+import { useAtom } from 'jotai';
+
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
+import { usePluralizedTranslation } from './usePluralizedTranslation';
+
+const baseUser = {
+  alias: 'admin',
+  isExportButtonEnabled: false,
+  name: 'admin',
+  timezone: 'Europe/Paris',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};
+
+describe('usePluralizedTranslation', () => {
+  describe('English', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'House'
+        })
+      ).toEqual('House');
+    });
+
+    it('returns the plural of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+  });
+
+  describe('French', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'Maison'
+        })
+      ).toEqual('Maisons');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+
+    it('returns the singular of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+  });
+});

package/src/utils/usePluralizedTranslation.ts

@@ -1,5 +1,11 @@
+import { useCallback } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import pluralize from 'pluralize';
+import { useAtomValue } from 'jotai';
+import { equals, includes } from 'ramda';
+
+import { userAtom } from '@centreon/ui-context';
 
 interface TProps {
   count: number;
@@ -10,10 +16,21 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
+  const { locale } = useAtomValue(userAtom);
 
-  const pluralizedT = ({ label, count }: TProps): string => {
-    return pluralize(translation.t(label), count);
-  };
+  const isNotPartitiveLocale = includes('fr', locale);
+
+  const pluralizedT = useCallback(
+    ({ label, count }: TProps): string => {
+      const isZero = equals(count, 0);
+
+      return pluralize(
+        translation.t(label),
+        isZero && isNotPartitiveLocale ? 1 : count
+      );
+    },
+    [isNotPartitiveLocale]
+  );
 
   return {
     pluralizedT