@centreon/ui 24.5.2 → 24.5.3

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/Form/Dashboard/translatedLabels.ts

@@ -1,4 +1,3 @@
-// TODO use i18n conventions for translation (interpolation, plurals, etc.) and setup for storybook (only works in FE atm.)
 export const labelMustBeMost = '{{label}} can be at most {{max}} characters';
 export const labelMustBeAtLeast =
   '{{label}} should be at least {{min}} characters long';

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/Zoom/Minimap.tsx

@@ -16,6 +16,7 @@ interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
     left: number;
     top: number;
   };
+  id?: number | string;
   isDraggingFromContainer: boolean;
 }
 
@@ -26,7 +27,8 @@ const Minimap = ({
   width,
   contentClientRect,
   isDraggingFromContainer,
-  diffBetweenContentAndSvg
+  diffBetweenContentAndSvg,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
@@ -82,7 +84,7 @@ const Minimap = ({
   );
 
   return (
-    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
       <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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('not.exist');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').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)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')

package/src/components/Zoom/Zoom.tsx

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

package/src/components/Zoom/ZoomContent.tsx

@@ -18,6 +18,7 @@ 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;
@@ -30,7 +31,8 @@ const ZoomContent = ({
   height,
   children,
   showMinimap,
-  minimapPosition
+  minimapPosition,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
   const contentRef = useRef<SVGGElement | null>(null);
@@ -92,7 +94,7 @@ const ZoomContent = ({
       >
         <RectClipPath
           height={Math.max(contentClientRect?.height || 0, height)}
-          id="zoom-clip"
+          id={`zoom-clip-${id}`}
           rx={radius}
           width={Math.max(contentClientRect?.width || 0, width)}
         />
@@ -124,6 +126,7 @@ const ZoomContent = ({
                 diffBetweenContentAndSvg || { left: 0, top: 0 }
               }
               height={height}
+              id={id}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}

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

@@ -131,7 +131,7 @@ export {
   default as useGraphQuery,
   resourceTypeQueryParameter
 } from './api/useGraphQuery';
-export { default as QueryProvider } from './api/QueryProvider';
+export { default as QueryProvider, client } from './api/QueryProvider';
 export {
   default as FileDropZone,
   transformFileListToArray

package/src/utils/index.ts

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