@centreon/ui 24.5.0 → 24.5.2

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/utils/index.ts

@@ -22,4 +22,3 @@ export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';
-export * from './resourcesStatusURL';

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';
 
 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/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();
-  });
-});

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

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

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

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