@centreon/ui 24.4.72 → 24.4.74

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),
-    width: '100%'
+    paddingTop: theme.spacing(1)
   },
   secondary: {
     alignItems: 'center',

package/src/components/Zoom/Minimap.tsx

@@ -16,7 +16,6 @@ interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
     left: number;
     top: number;
   };
-  id?: number | string;
   isDraggingFromContainer: boolean;
 }
 
@@ -27,8 +26,7 @@ const Minimap = ({
   width,
   contentClientRect,
   isDraggingFromContainer,
-  diffBetweenContentAndSvg,
-  id
+  diffBetweenContentAndSvg
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
@@ -84,7 +82,7 @@ const Minimap = ({
   );
 
   return (
-    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
+    <g className={classes.minimap} clipPath="url(#zoom-clip)">
       <rect
         className={classes.minimapBackground}
         height={finalHeight}

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

@@ -63,7 +63,7 @@ describe('Zoom', () => {
   it('displays the minimap when the prop is set', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -72,7 +72,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('zoom in').click();
     cy.findByTestId('zoom-content')
@@ -86,7 +86,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('zoom out').click();
 
@@ -101,7 +101,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: 20 });
 
@@ -116,7 +116,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -131,7 +131,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -150,7 +150,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: false });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('not.exist');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('not.exist');
 
     cy.makeSnapshot();
   });
@@ -158,7 +158,7 @@ describe('Zoom', () => {
   it('zooms in when the minimap is scrolled up', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: -20 });
 
@@ -172,7 +172,7 @@ describe('Zoom', () => {
   it('zooms out when the minimap is scrolled down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: 20 });
 
@@ -186,7 +186,7 @@ describe('Zoom', () => {
   it('moves the view when the mouse is hover the content with the corresponding button pressed down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('zoom-container')
@@ -205,7 +205,7 @@ describe('Zoom', () => {
   it('displays the minimap in the bottom right when the prop to the corresponding value', () => {
     initialize({ minimapPosition: 'bottom-right', showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.makeSnapshot();
@@ -214,7 +214,7 @@ describe('Zoom', () => {
   it('applies a scale down on the minimap when the content is higher than the original height', () => {
     initialize({ showMinimap: true, template: ContentWithMultipleShapes });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')
@@ -232,7 +232,7 @@ describe('Zoom', () => {
       template: ContentWithMultipleShapesWithNegativeTranslations
     });
 
-    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')

package/src/components/Zoom/Zoom.tsx

@@ -7,7 +7,6 @@ import { MinimapPosition } from './models';
 
 export interface ZoomProps {
   children: JSX.Element | (({ width, height }) => JSX.Element);
-  id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
@@ -28,8 +27,7 @@ const Zoom = ({
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
-  minimapPosition = 'top-left',
-  id = 0
+  minimapPosition = 'top-left'
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
@@ -46,7 +44,6 @@ const Zoom = ({
           {(zoom) => (
             <ZoomContent
               height={height}
-              id={id}
               minimapPosition={minimapPosition}
               showMinimap={showMinimap}
               width={width}

package/src/components/Zoom/ZoomContent.tsx

@@ -18,7 +18,6 @@ import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 export interface Props {
   children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
   height: number;
-  id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
   width: number;
@@ -31,8 +30,7 @@ const ZoomContent = ({
   height,
   children,
   showMinimap,
-  minimapPosition,
-  id
+  minimapPosition
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
   const contentRef = useRef<SVGGElement | null>(null);
@@ -94,7 +92,7 @@ const ZoomContent = ({
       >
         <RectClipPath
           height={Math.max(contentClientRect?.height || 0, height)}
-          id={`zoom-clip-${id}`}
+          id="zoom-clip"
           rx={radius}
           width={Math.max(contentClientRect?.width || 0, width)}
         />
@@ -126,7 +124,6 @@ const ZoomContent = ({
                 diffBetweenContentAndSvg || { left: 0, top: 0 }
               }
               height={height}
-              id={id}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}

package/src/components/index.ts

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

package/src/index.ts

@@ -168,3 +168,4 @@ export * from './ParentSize';
 export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { DowntimeIcon } from './Icon/DowntimeIcon';

package/src/utils/index.ts

@@ -1,25 +1,25 @@
-export * from './useLocaleDateTimeFormat';
-export * from './getNormalizedId';
-export * from './statuses';
-export * from './typedMemo';
-export * from './useCopyToClipboard';
-export * from './useDebounce';
-export * from './useDeepCallback';
-export * from './useDeepMemo';
-export * from './useIntersectionObserver';
-export * from './useKeyObserver';
-export * from './useLoadImage';
-export * from './useMemoComponent';
-export * from './useThemeMode';
-export * from './useViewportIntersection';
-export * from './panelSize';
-export * from './sanitizedHTML';
-export * from './docsURL';
-export * from './useInfiniteScrollListing';
-export * from './useLicenseExpirationWarning';
-export * from './useRefreshInterval';
-export * from './centreonBaseURL';
-export * from './usePluralizedTranslation';
-export * from './useResizeObserver';
-export * from './useFullscreen';
-export * from './resourcesStatusURL';
+export * from './useLocaleDateTimeFormat';
+export * from './getNormalizedId';
+export * from './statuses';
+export * from './typedMemo';
+export * from './useCopyToClipboard';
+export * from './useDebounce';
+export * from './useDeepCallback';
+export * from './useDeepMemo';
+export * from './useIntersectionObserver';
+export * from './useKeyObserver';
+export * from './useLoadImage';
+export * from './useMemoComponent';
+export * from './useThemeMode';
+export * from './useViewportIntersection';
+export * from './panelSize';
+export * from './sanitizedHTML';
+export * from './docsURL';
+export * from './useInfiniteScrollListing';
+export * from './useLicenseExpirationWarning';
+export * from './useRefreshInterval';
+export * from './centreonBaseURL';
+export * from './usePluralizedTranslation';
+export * from './useResizeObserver';
+export * from './useFullscreen';
+export * from './useLocale';

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -72,6 +72,9 @@ describe('Fullscreen', () => {
   it('exits fullscreen mode when the button is clicked', () => {
     initialize();
 
+    cy.contains(labelEnterFullscreen).click();
+    cy.contains(labelExitFullscreen).click();
+
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');

package/src/utils/useInfiniteScrollListing.ts

@@ -60,7 +60,12 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [queryKeyName, page],
+    getQueryKey: () => [
+      queryKeyName,
+      page,
+      JSON.stringify(parameters),
+      JSON.stringify(customQueryParameters)
+    ],
     isPaginated: true,
     queryOptions: {
       enabled,

package/src/utils/useLocale/index.ts

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

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

@@ -0,0 +1,40 @@
+import { Provider, createStore } from 'jotai';
+
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+
+import { useLocale } from '.';
+
+const TestComponent = (): JSX.Element => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+const initialize = ({ userLocale, browserLocale }): void => {
+  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({ browserLocale: 'en', userLocale: 'fi' });
+
+    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,8 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../useLocale';
+
 import shortLocales from './sortLocales';
 
 interface FormatParameters {
@@ -28,10 +30,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,5 @@
-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';
+import { useTranslation } from 'react-i18next';
 
 interface TProps {
   count: number;
@@ -16,21 +10,10 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
-  const { locale } = useAtomValue(userAtom);
 
-  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]
-  );
+  const pluralizedT = ({ label, count }: TProps): string => {
+    return pluralize(translation.t(label), count);
+  };
 
   return {
     pluralizedT

package/src/@assets/icons/downtime.icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{opacity:1;}</style></defs><g transform="translate(-94.852 -137.365)"><rect class="a" width="24" height="24" transform="translate(94.852 137.365)"/><g class="b" transform="translate(97.108 140.129)"><path d="M103.476,143.64a1.692,1.692,0,1,0-1.692-1.692A1.692,1.692,0,0,0,103.476,143.64Z" transform="translate(-97.132 -140.255)"/><path d="M114.266,150.2a1.05,1.05,0,0,0-.968-.647s-2.067-.275-2.68.125a2.464,2.464,0,0,0-.644.8l-3.454-.547c-.265-.874-1.4-4.183-1.4-4.183l-.846-1.353a1.743,1.743,0,0,0-1.438-.846,4.571,4.571,0,0,0-.677.084l-4.4,1.867v3.976H98l2.222.352-1.61,8.107h1.777l1.522-6.768,1.777,1.692v5.076h1.692v-6.345l-1.19-1.135,5.428.859-3.084,6.815,10.976-.11Zm-10.206-2.611s.577,1.356.88,2.089l-1.259-.2Zm-4.606,1.22v-2.212l1.522-.592-.586,2.952Z" transform="translate(-97.762 -139.74)"/></g></g></svg>

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

@@ -1,30 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/Tabs/Tab.styles.ts

@@ -1,25 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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();
-  });
-});