@centreon/ui 24.5.8 → 24.5.9

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

@@ -1,32 +1,64 @@
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { equals, omit } from 'ramda';
 
 import { initialValuesAtom, valuesAtom } from '../atoms';
-import { AccessRightInitialValues, Labels } from '../models';
-import { formatValue, formatValueForSubmition } from '../utils';
+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])
+  };
+};
 
 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 = ({ submit, clear }: Props): UseActionsState => {
+export const useActions = ({
+  link,
+  labels,
+  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)
@@ -39,6 +71,7 @@ export const useActions = ({ submit, clear }: Props): UseActionsState => {
   };
 
   return {
+    copyLink,
     dirty,
     formattedValues,
     save

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

@@ -68,7 +68,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           data-testid="add"
           disabled={isNil(selectedContact)}
           icon={<AddCircleIcon />}
-          size="small"
           onClick={add}
         />
       </div>

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

@@ -16,6 +16,9 @@ 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,6 +105,9 @@ 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/Dashboard/DashboardForm.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DashboardForm } from './DashboardForm';
+
+const meta: Meta<typeof DashboardForm> = {
+  component: DashboardForm
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardForm>;
+
+export const Default: Story = {
+  args: {
+    labels: {
+      actions: {
+        cancel: 'Cancel',
+        submit: {
+          create: 'Create',
+          update: 'Update'
+        }
+      },
+      entity: {
+        description: 'Description',
+        name: 'Name'
+      }
+    }
+  }
+};
+
+export const AsUpdateVariant: Story = {
+  args: {
+    ...Default.args,
+    resource: {
+      description: 'Description 1',
+      name: 'Dashboard 1'
+    },
+    variant: 'update'
+  }
+};

package/src/components/Form/Dashboard/translatedLabels.ts

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

package/src/components/Modal/Modal.styles.ts

@@ -9,7 +9,7 @@ const useStyles = makeStyles<{
   modal: {
     '& .MuiDialog-paper': {
       gap: theme.spacing(2),
-      padding: theme.spacing(2.5)
+      padding: theme.spacing(2)
     },
     '&[data-size="fullscreen"]': {
       zIndex: 0
@@ -35,8 +35,8 @@ const useStyles = makeStyles<{
       transition: theme.transitions.create('left')
     },
     '&[data-size="large"] .MuiDialog-paper': {
-      maxWidth: '604px',
-      width: '604px'
+      maxWidth: '640px',
+      width: '640px'
     },
     '&[data-size="medium"] .MuiDialog-paper': {
       width: '520px'
@@ -52,7 +52,6 @@ const useStyles = makeStyles<{
   modalActions: {
     '&[data-fixed="true"]': {
       background: theme.palette.background.paper,
-      padding: theme.spacing(1, 2.5, 2.5, 0),
       position: 'fixed',
       width: '100%'
     },
@@ -61,7 +60,7 @@ const useStyles = makeStyles<{
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    padding: theme.spacing(1, 0, 0, 0),
+    padding: theme.spacing(1, 2.5, 2.5, 0),
     right: 0,
     zIndex: theme.zIndex.modal
   },
@@ -70,6 +69,7 @@ const useStyles = makeStyles<{
       '&:first-of-type': {
         margin: theme.spacing(0, 0, 1, 0)
       },
+      color: theme.palette.text.secondary,
       margin: theme.spacing(1, 0, 1, 0),
       width: '90%'
     }

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

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

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/Dashboard/Dashboard.cypress.spec.tsx

@@ -1,68 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { DashboardLayout } from '.';
-
-const dashboardLayout: Array<CustomLayout> = [
-  {
-    content: 'Panel 1',
-    h: 4,
-    i: 'a',
-    shouldUseFluidTypography: false,
-    w: 6,
-    x: 0,
-    y: 0
-  },
-  {
-    content: 'Panel 2',
-    h: 3,
-    i: 'b',
-    minW: 2,
-    w: 7,
-    x: 1,
-    y: 7
-  },
-  {
-    content: 'Panel 3',
-    h: 7,
-    i: 'c',
-    w: 6,
-    x: 6,
-    y: 6
-  },
-  {
-    content: 'Panel 4',
-    h: 3,
-    i: 'd',
-    minW: 2,
-    w: 5,
-    x: 4,
-    y: 10
-  }
-];
-
-const initialize = (): void => {
-  cy.mount({
-    Component: (
-      <DashboardLayout.Layout layout={dashboardLayout}>
-        {dashboardLayout.map(({ i, content }) => (
-          <DashboardLayout.Item header={<div>header</div>} id={i} key={i}>
-            <Typography>{content}</Typography>
-          </DashboardLayout.Item>
-        ))}
-      </DashboardLayout.Layout>
-    )
-  });
-};
-
-describe('Dashboard', () => {
-  it('displays placeholder when panels is out of viewport', () => {
-    initialize();
-
-    cy.get('[data-widget-skeleton="a"]').should('not.exist');
-    cy.get('[data-widget-skeleton="b"]').should('not.exist');
-    cy.get('[data-widget-skeleton="c"]').should('not.exist');
-    cy.get('[data-widget-skeleton="d"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-});