@centreon/ui 24.4.1-MON-24235-Filter-App-token.14 → 24.4.1-MON-develop-dashboard.0

package/src/Graph/Text/Text.tsx

@@ -11,7 +11,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { useTextStyles } from './Text.styles';
 
-interface Props {
+export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

package/src/Graph/common/testUtils.ts

@@ -0,0 +1,71 @@
+export const successThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};
+
+export const warningThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.4
+    }
+  ]
+};
+
+export const criticalThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.3
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.2
+    }
+  ]
+};
+
+export const rangedThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.55
+    },
+    {
+      label: 'Critical',
+      value: 0.65
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.13
+    },
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};

package/src/Graph/common/timeSeries/index.ts

@@ -476,15 +476,7 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
-const formatMetricValue = ({
-  value,
-  unit,
-  base = 1000
-}: FormatMetricValueProps): string | null => {
-  if (isNil(value)) {
-    return null;
-  }
-
+const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
     'bytes',
@@ -497,7 +489,19 @@ const formatMetricValue = ({
     'b'
   ];
 
-  const base1024 = base2Units.includes(unit) || Number(base) === 1024;
+  return base2Units.includes(unit) || Number(base) === 1024;
+};
+
+const formatMetricValue = ({
+  value,
+  unit,
+  base = 1000
+}: FormatMetricValueProps): string | null => {
+  if (isNil(value)) {
+    return null;
+  }
+
+  const base1024 = getBase1024({ base, unit });
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
@@ -525,6 +529,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -537,7 +543,9 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return formattedMetricValue;
+  return base1024 || !unit || equals(unit, 'ms')
+    ? formattedMetricValue
+    : `${formattedMetricValue} ${unit}`;
 };
 
 const getStackedYScale = ({

package/src/Graph/index.ts

@@ -2,4 +2,5 @@ export { default as LineChart } from './LineChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+
 export { HeatMap } from './HeatMap';

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
+import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,11 +85,9 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
-  const sortByName = sortBy(compose(toLower, prop('name')));
-
   const autocompleteOptions = disableSortedOptions
     ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
+    : [...values, ...reject(isOptionSelected, options)];
 
   return (
     <Autocomplete

package/src/InputField/Select/Autocomplete/index.tsx

@@ -216,8 +216,7 @@ const AutocompleteField = React.forwardRef(
           ...params.inputProps,
           'aria-label': label,
           'data-testid': dataTestId || label,
-          id: getNormalizedId(label || ''),
-          ...autocompleteProps?.inputProps
+          id: getNormalizedId(label || '')
         }}
         label={label}
         placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}

package/src/Listing/ActionBar/index.tsx

@@ -174,14 +174,15 @@ const MemoListingActionBar = ({
               </IconButton>
             )}
           <div className={classes.ModeViewer} />
-          {columnConfiguration?.selectedColumnIds && (
-            <ColumnMultiSelect
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              onResetColumns={onResetColumns}
-              onSelectColumns={onSelectColumns}
-            />
-          )}
+          {columnConfiguration?.selectedColumnIds &&
+            columnConfiguration?.sortable && (
+              <ColumnMultiSelect
+                columnConfiguration={columnConfiguration}
+                columns={columns}
+                onResetColumns={onResetColumns}
+                onSelectColumns={onSelectColumns}
+              />
+            )}
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}

package/src/Listing/Cell/DataCell.styles.ts

@@ -8,6 +8,9 @@ const useStyles = makeStyles()((theme) => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   },
+  clickable: {
+    cursor: 'default'
+  },
   componentColumn: {
     width: theme.spacing(2.75)
   },

package/src/Listing/Cell/DataCell.tsx

@@ -46,7 +46,7 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -64,7 +64,7 @@ const DataCell = ({
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan } = column;
+      const { getFormattedString, isTruncated, getColSpan, align } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -87,6 +87,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
+            alignItems: align,
             gridColumn
           }}
           {...commonCellProps}
@@ -99,7 +100,7 @@ const DataCell = ({
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable } = column;
+      const { getHiddenCondition, clickable, align } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -126,9 +127,12 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
+          className={cx(classes.cell, clickable && classes.clickable)}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
+          style={{
+            alignItems: align
+          }}
           onClick={(e): void => {
             if (!clickable) {
               return;

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,4 +1,6 @@
-import { Button } from '@mui/material';
+import { Button, Typography } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
 
 import { ColumnType } from './models';
 
@@ -12,6 +14,12 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
+const LargeText = (): JSX.Element => (
+  <Typography sx={{ whiteSpace: 'normal' }}>
+    This is a large text that fills the content
+  </Typography>
+);
+
 const generateSubItems = (parentIndex: number): Array<unknown> => {
   return tenElements.map((__, subIndex) => ({
     active: false,
@@ -37,6 +45,28 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   subItems: index % 2 === 0 ? generateSubItems(index) : undefined
 }));
 
+const defaultColumn = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: LargeText,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '100px'
+  }
+];
+
 const columnsWithSubItems = [
   {
     getFormattedString: ({ name }): string => name,
@@ -62,7 +92,27 @@ const columnsWithSubItems = [
 
 const expandedItems = [0, 8];
 
-const mountListing = (): void => {
+const mountListingResponsive = (listingVariant: ListingVariant): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <Listing
+          isResponsive
+          columns={defaultColumn}
+          currentPage={1}
+          limit={10}
+          listingVariant={listingVariant}
+          rows={listingWithSubItems}
+          totalRows={10}
+        />
+      </div>
+    )
+  });
+};
+
+const mountListingForSubItems = (): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
@@ -89,9 +139,9 @@ const mountListing = (): void => {
 };
 
 describe('Listing', () => {
-  beforeEach(mountListing);
-
   it('expands the row when the corresponding icon si clicked', () => {
+    mountListingForSubItems();
+
     cy.contains('E0').should('be.visible');
 
     expandedItems.forEach((index) => {
@@ -111,6 +161,8 @@ describe('Listing', () => {
   });
 
   it('collapses the row when the corresponding icon si clicked', () => {
+    mountListingForSubItems();
+
     cy.contains('Sub item 100').should('be.visible');
 
     cy.findByLabelText('Collapse 0').click();
@@ -119,4 +171,28 @@ describe('Listing', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.compact);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '30px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.extended);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '38px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
 });

package/src/Listing/Listing.styles.ts

@@ -1,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -9,12 +7,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  listingVariant: ListingVariant;
+  isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,7 +54,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
         rows?.length || 1
-      }, ${dataStyle.body.height}px)`,
+      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/index.stories.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
@@ -395,3 +395,26 @@ export const ListingWithSubItems = {
   },
   render: TemplateSubItems
 };
+
+export const ListingWithResponsive = {
+  args: {
+    checkable: true,
+    columns: [
+      ...defaultColumns,
+      {
+        Component: ComponentColumn,
+        id: '##',
+        label: 'Responsive',
+        type: ColumnType.component,
+        width: '140px'
+      }
+    ],
+    currentPage: 1,
+    isResponsive: true,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    totalRows: 10
+  },
+  render: TemplateSubItems
+};

package/src/Listing/index.test.tsx

@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: false
+          sortable: true
         }}
         columns={columns}
         rows={rows}

package/src/Listing/index.tsx

@@ -102,6 +102,7 @@ export interface Props<TRow> {
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
+  isResponsive?: boolean;
   limit?: number;
   listingVariant?: ListingVariant;
   loading?: boolean;
@@ -147,6 +148,7 @@ const Listing = <TRow extends { id: RowId }>({
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
+  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -233,7 +235,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
-    listingVariant,
+    isResponsive,
     rows: rowsToDisplay
   });
 

package/src/Listing/models.ts

@@ -15,6 +15,7 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
+  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;

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/Form/AccessRights/ShareInput/ContactSwitch.tsx

@@ -1,4 +1,4 @@
-import { useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
@@ -17,7 +17,7 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   const { classes } = useContactSwitchStyles();
   const { t } = useTranslation();
 
-  const setContactType = useSetAtom(contactTypeAtom);
+  const [contactType, setContactType] = useAtom(contactTypeAtom);
 
   const change = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setContactType(event.target.value as ContactType);
@@ -29,7 +29,7 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
       <RadioGroup
         row
         className={classes.inputs}
-        defaultValue={ContactType.Contact}
+        value={contactType}
         onChange={change}
       >
         <FormControlLabel

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

@@ -52,6 +52,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               ? t(labels.autocompleteContactGroup)
               : t(labels.autocompleteContact)
           )}
+          queryKey={isContactGroup ? labels.contactGroup : labels.contact}
           renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
+import { ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type Props = {
+type ListItemProps = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type Props = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: Props & ListItemProps,
+    { action, children, className, ...attr }: ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();