@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-test-code-coverage.1

package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx

@@ -0,0 +1,27 @@
+import FluidTypography from '.';
+
+const initialize = ({ width, min, max, pref }): void => {
+  cy.viewport(width, 590);
+
+  cy.mount({
+    Component: (
+      <FluidTypography max={max} min={min} pref={pref} text="Unreachable" />
+    )
+  });
+};
+
+describe('FluidTypography', () => {
+  [500, 300, 150].forEach((width) => {
+    Object.entries({ max: '80px', min: '30px', pref: 10 }).forEach(
+      ([key, value]) => {
+        it(`displays the text when the viewport is ${width}px and the ${key} is ${value}`, () => {
+          initialize({ [key]: value, width });
+
+          cy.contains('Unreachable').should('be.visible');
+
+          cy.matchImageSnapshot();
+        });
+      }
+    );
+  });
+});

package/src/Typography/FluidTypography/index.stories.tsx

@@ -40,9 +40,9 @@ basic.args = {
 
 export const with200pxWidth = FluidTypographyTemplate.bind({});
 with200pxWidth.args = {
-  height: '200px',
+  height: '50%',
   text: 'Hello world',
-  width: '200px'
+  width: '50%'
 };
 
 export const with20pxHeight = FluidTypographyTemplate.bind({});

package/src/Typography/FluidTypography/index.tsx

@@ -1,49 +1,42 @@
-import { useRef } from 'react';
-
 import { Typography, TypographyProps } from '@mui/material';
 
-import useFluidResizeObserver from './useFluidResizeObserver';
-
 type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
   text: string;
 }
 
 const FluidTypography = ({
   text,
   variant = 'body1',
-  className
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19
 }: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
   return (
     <div
-      ref={parentRef}
+      className={containerClassName}
       style={{
-        height: `${parentSize.height}px`,
+        containerType: 'inline-size',
+        height: `100%`,
         width: `100%`
       }}
     >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
     </div>
   );
 };

package/src/api/index.ts

@@ -30,7 +30,7 @@ const patchData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .patch(endpoint, data, {
+      .patch(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -40,7 +40,7 @@ const postData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .post(endpoint, data, {
+      .post(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -50,7 +50,7 @@ const putData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .put(endpoint, data, {
+      .put(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })

package/src/api/useGraphQuery/index.ts

@@ -1,11 +1,20 @@
 import { useRef } from 'react';
 
-import { equals, has, isEmpty, pluck } from 'ramda';
+import {
+  equals,
+  flatten,
+  has,
+  includes,
+  isEmpty,
+  not,
+  pipe,
+  pluck
+} from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
 
-import { Resource, WidgetResourceType } from './models';
+import { Metric, Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -14,7 +23,9 @@ interface CustomTimePeriod {
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
-  metrics: Array<string>;
+  bypassMetricsExclusion?: boolean;
+  includeAllResources?: boolean;
+  metrics: Array<Metric>;
   refreshCount?: number;
   refreshInterval?: number | false;
   resources?: Array<Resource>;
@@ -71,6 +82,7 @@ const areResourcesFullfilled = (value: Array<Resource>): boolean =>
   );
 
 const useGraphQuery = ({
+  bypassMetricsExclusion,
   metrics,
   resources = [],
   baseEndpoint,
@@ -93,7 +105,7 @@ const useGraphQuery = ({
 
   const definedMetrics = metrics.filter((metric) => metric);
   const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric)
+    encodeURIComponent(metric.name)
   );
 
   const {
@@ -145,7 +157,16 @@ const useGraphQuery = ({
           base: data.current.base,
           title: ''
         },
-        metrics: data.current.metrics,
+        metrics: bypassMetricsExclusion
+          ? data.current.metrics
+          : data.current.metrics.filter(({ metric_id }) => {
+              return pipe(
+                pluck('excludedMetrics'),
+                flatten,
+                includes(metric_id),
+                not
+              )(metrics);
+            }),
         times: data.current.times
       }
     : undefined;

package/src/api/useGraphQuery/models.ts

@@ -13,3 +13,8 @@ export enum WidgetResourceType {
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }
+
+export interface Metric {
+  excludedMetrics: Array<number>;
+  name: string;
+}

package/src/api/useMutationQuery/index.test.ts

@@ -48,7 +48,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(false);
@@ -64,7 +64,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -85,7 +85,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -109,7 +109,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();

package/src/api/useMutationQuery/index.ts

@@ -22,6 +22,11 @@ export enum Method {
   PUT = 'PUT'
 }
 
+interface Variables<TMeta, T> {
+  _meta?: TMeta;
+  payload?: T;
+}
+
 export type UseMutationQueryProps<T, TMeta> = {
   baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
@@ -33,30 +38,36 @@ export type UseMutationQueryProps<T, TMeta> = {
   method: Method;
   onError?: (
     error: ResponseError,
-    variables: T & { _meta: TMeta },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
+  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
   onSuccess?: (
     data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
 } & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
+  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
 >;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
+export type UseMutationQueryState<T, TMeta> = Omit<
   UseMutationResult<T | ResponseError>,
-  'isError'
+  'isError' | 'mutate' | 'mutateAsync'
 > & {
   isError: boolean;
   isMutating: boolean;
+  mutate: (variables: Variables<TMeta, T>) => ResponseError | T;
+  mutateAsync: (
+    variables: Variables<TMeta, T>,
+    rest?: Pick<
+      UseMutationQueryProps<T, TMeta>,
+      'onError' | 'onMutate' | 'onSettled' | 'onSuccess'
+    >
+  ) => Promise<ResponseError | T>;
 };
 
 const useMutationQuery = <T extends object, TMeta>({
@@ -72,18 +83,18 @@ const useMutationQuery = <T extends object, TMeta>({
   onSuccess,
   onSettled,
   baseEndpoint
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
-    T & { _meta: TMeta }
+    Variables<TMeta, T>
   >({
     mutationFn: (
-      _payload: T & { _meta: TMeta }
+      variables: Variables<TMeta, T>
     ): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
+      const { _meta, payload } = variables || {};
 
       return customFetch<T>({
         baseEndpoint,

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

@@ -0,0 +1,76 @@
+import { CollapsibleItem, Props } from './CollapsibleItem';
+
+const title = 'Title';
+
+const customizedTitle = <div>Customized title</div>;
+
+const initialize = (props: Omit<Props, 'children'>): void => {
+  cy.mount({
+    Component: <CollapsibleItem {...props}>Content</CollapsibleItem>
+  });
+};
+
+describe('CollapsibleItem', () => {
+  it('displays the component collapsed by default', () => {
+    initialize({ title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('not.be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component expanded when the corresponding prop is set to true', () => {
+    initialize({ defaultExpanded: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('be.visible');
+    cy.get('div[aria-expanded="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a customized title', () => {
+    initialize({ title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and expanded when the icon is clicked', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.get('div[aria-expanded="false"]').click();
+
+    cy.get('div[aria-expanded="true"]').should('exist');
+    cy.contains('Content').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and a customized title', () => {
+    initialize({ compact: true, title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Checkbox, Typography } from '@mui/material';
+
 import { CollapsibleItem } from './CollapsibleItem';
 
 const meta: Meta<typeof CollapsibleItem> = {
@@ -23,3 +25,27 @@ export const ExpandedByDefault: Story = {
     title: 'Title'
   }
 };
+
+export const customizedTitle: Story = {
+  args: {
+    children: 'Label',
+    defaultExpanded: false,
+    title: <Typography>Title</Typography>
+  }
+};
+
+export const customizedTitleAndCompact: Story = {
+  args: {
+    children: 'Label',
+    compact: true,
+    defaultExpanded: false,
+    title: (
+      <div
+        style={{ alignItems: 'center', display: 'flex', flexDirection: 'row' }}
+      >
+        <Checkbox size="small" />
+        <Typography>Title compact</Typography>
+      </div>
+    )
+  }
+};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import { equals, type } from 'ramda';
+
 import {
   AccordionDetails,
   AccordionSummary,
@@ -10,36 +12,63 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
 
-interface Props {
+export interface Props {
   children: ReactNode;
+  compact?: boolean;
+  dataTestId?: string;
   defaultExpanded?: boolean;
-  title: string;
+  title: string | JSX.Element;
 }
 
 export const CollapsibleItem = ({
   title,
   children,
-  defaultExpanded
+  defaultExpanded,
+  compact = false,
+  dataTestId = ''
 }: Props): JSX.Element => {
-  const { classes } = useCollapsibleItemStyles();
+  const { classes, cx } = useCollapsibleItemStyles();
+
+  const isStringTitle = equals(type(title), 'String');
 
   return (
     <Accordion
       disableGutters
       className={classes.accordion}
+      data-compact={compact}
+      data-testid={`${dataTestId}-accordion`}
       defaultExpanded={defaultExpanded}
     >
-      <AccordionSummary
-        classes={{
-          content: classes.accordionSummary
-        }}
-        expandIcon={<ExpandMoreIcon color="primary" />}
+      <div className={classes.summaryContainer}>
+        <div className={classes.customTitle}>{!isStringTitle && title}</div>
+        <AccordionSummary
+          classes={{
+            content: cx(
+              compact
+                ? classes.accordionSummaryCompactContent
+                : classes.accordionSummary
+            ),
+            root: cx(
+              compact
+                ? classes.accordionSummaryCompactRoot
+                : classes.accordionSummaryRoot
+            )
+          }}
+          data-testid={`${dataTestId}-summary`}
+          expandIcon={<ExpandMoreIcon color="primary" />}
+        >
+          {isStringTitle && (
+            <Typography color="primary" variant="h6">
+              {title}
+            </Typography>
+          )}
+        </AccordionSummary>
+      </div>
+      <AccordionDetails
+        className={cx(
+          compact ? classes.accordionDetailsCompact : classes.accordionDetails
+        )}
       >
-        <Typography color="primary" variant="h6">
-          {title}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails className={classes.accordionDetails}>
         {children}
       </AccordionDetails>
     </Accordion>

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -4,12 +4,35 @@ export const useCollapsibleItemStyles = makeStyles()((theme) => ({
   accordion: {
     backgroundColor: 'transparent',
     border: 'none',
-    borderBottom: `1px solid ${theme.palette.divider}`
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    width: '100%'
   },
   accordionDetails: {
     padding: theme.spacing(0, 2, 2)
   },
+  accordionDetailsCompact: {
+    padding: theme.spacing(0)
+  },
   accordionSummary: {
     margin: theme.spacing(1.5, 0)
+  },
+  accordionSummaryCompactContent: {
+    margin: theme.spacing(0, 0, 0.5)
+  },
+  accordionSummaryCompactRoot: {
+    minHeight: theme.spacing(1),
+    width: '100%'
+  },
+  accordionSummaryRoot: {
+    width: '100%'
+  },
+  customTitle: {
+    whiteSpace: 'nowrap'
+  },
+  summaryContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%'
   }
 }));

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

@@ -1,5 +1,7 @@
 import { Box } from '@mui/material';
+import Delete from '@mui/icons-material/Delete';
 
+import { IconButton } from '../..';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from '.';
@@ -12,29 +14,27 @@ const data = Array(5)
     title: `Entity ${idx}`
   }));
 
-const initializeDataTableGrid = ({
-  hasActions,
-  hasCardAction,
-  canDelete
-}): void => {
+const CardActions = (): JSX.Element => {
+  return (
+    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
+      <Delete fontSize="small" />
+    </IconButton>
+  );
+};
+
+const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
   cy.viewport(1200, 590);
   cy.mount({
     Component: (
       <DataTable variant="grid">
         {data.map(({ title, description }) => (
           <DataTable.Item
+            Actions={<CardActions />}
             description={description}
             hasActions={hasActions}
             hasCardAction={hasCardAction}
             key={title}
-            labelsDelete={{
-              cancel: 'Cancel',
-              confirm: {
-                label: 'Delete'
-              }
-            }}
             title={title}
-            onDelete={canDelete ? cy.stub() : undefined}
           />
         ))}
       </DataTable>
@@ -94,7 +94,6 @@ const initializeDataTableListing = (): void => {
 describe('DataTable: Grid', () => {
   it('displays items with title and description only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: false
     });
@@ -109,32 +108,17 @@ describe('DataTable: Grid', () => {
 
   it('displays items with actions', () => {
     initializeDataTableGrid({
-      canDelete: false,
-      hasActions: true,
-      hasCardAction: false
-    });
-
-    cy.findAllByLabelText('edit access rights').should('have.length', 5);
-    cy.findAllByLabelText('edit').should('have.length', 5);
-
-    cy.makeSnapshot();
-  });
-
-  it('displays items with delete action', () => {
-    initializeDataTableGrid({
-      canDelete: true,
       hasActions: true,
       hasCardAction: false
     });
 
-    cy.findAllByLabelText('delete').should('have.length', 5);
+    cy.findAllByLabelText('Delete').should('have.length', 5);
 
     cy.makeSnapshot();
   });
 
   it('displays items with card action only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: true
     });
@@ -146,15 +130,12 @@ describe('DataTable: Grid', () => {
 
   it('displays items with card action and bottom actions', () => {
     initializeDataTableGrid({
-      canDelete: true,
       hasActions: true,
       hasCardAction: true
     });
 
     cy.findAllByLabelText('view').should('have.length', 5);
-    cy.findAllByLabelText('delete').should('have.length', 5);
-    cy.findAllByLabelText('edit access rights').should('have.length', 5);
-    cy.findAllByLabelText('edit').should('have.length', 5);
+    cy.findAllByLabelText('Delete').should('have.length', 5);
 
     cy.makeSnapshot();
   });