@centreon/ui 24.4.1-sync-release-34022.0 → 24.4.1-test-code-coverage.0

package/src/InputField/Number/Number.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-console */
+import { Meta, StoryObj } from '@storybook/react';
+
+import NumberField from './Number';
+
+const meta: Meta<typeof NumberField> = {
+  argTypes: {
+    defaultValue: {
+      defaultValue: 0,
+      description:
+        'The initial value which will be used by the input for the first render',
+      type: 'number'
+    },
+    fallbackValue: {
+      defaultValue: 0,
+      description: 'This value will be used when the input is cleared',
+      type: 'number'
+    },
+    onChange: {
+      description:
+        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
+      type: 'function'
+    }
+  },
+  component: NumberField
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    onChange: console.log
+  }
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValue: Story = {
+  args: {
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValue: Story = {
+  args: {
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValueAutoSize: Story = {
+  args: {
+    autoSize: true,
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, cond, isEmpty, isNil } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          Math.max(
+            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { Props as TextFieldProps } from '../Text';
+import TextField, { TextProps } from '../Text';
 
-type Props = Omit<TextFieldProps, 'StartAdornment'>;
+type Props = Omit<TextProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { equals, isNil, pick } from 'ramda';
+import { equals, isEmpty, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
@@ -200,7 +200,13 @@ const AutocompleteField = React.forwardRef(
           ),
           style: {
             background: 'transparent',
-            paddingRight: theme.spacing(5)
+            minWidth: 0,
+            padding: theme.spacing(
+              0.75,
+              isEmpty(placeholder) ? 0 : 5,
+              0.75,
+              0.75
+            )
           }
         }}
         autoFocus={autoFocus}
@@ -216,7 +222,8 @@ const AutocompleteField = React.forwardRef(
           ...params.inputProps,
           'aria-label': label,
           'data-testid': dataTestId || label,
-          id: getNormalizedId(label || '')
+          id: getNormalizedId(label || ''),
+          ...autocompleteProps?.inputProps
         }}
         label={label}
         placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}

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

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import IconReset from '@mui/icons-material/RotateLeft';
 
-import IconButton from '../../../Button/Icon';
+import { IconButton } from '../../..';
 import Option from '../Option';
 import { SelectEntry } from '..';
 

package/src/InputField/Select/index.tsx

@@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   noLabelInput: {
     padding: theme.spacing(1)
+  },
+  select: {
+    '& .MuiInputLabel-shrink~.MuiInputBase-root fieldset legend': {
+      maxWidth: '100%'
+    },
+    '& fieldset legend': {
+      maxWidth: 0
+    }
   }
 }));
 
@@ -79,7 +87,12 @@ const SelectField = ({
   };
 
   return (
-    <FormControl error={!isNil(error)} fullWidth={fullWidth} size="small">
+    <FormControl
+      className={classes.select}
+      error={!isNil(error)}
+      fullWidth={fullWidth}
+      size="small"
+    >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
         displayEmpty

package/src/InputField/Text/index.tsx

@@ -17,38 +17,36 @@ import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
-  (theme: Theme, { displayAsBlock }) => ({
-    autoSizeCompact: {
-      paddingRight: theme.spacing(1),
-      paddingTop: theme.spacing(0.6)
-    },
-    hiddenText: {
-      display: 'table',
-      lineHeight: 0,
-      transform: 'scaleY(0)'
-    },
-    input: {
-      fontSize: theme.typography.body1.fontSize
-    },
-    inputBase: {
-      display: displayAsBlock ? 'block' : 'inline-flex',
-      justifyItems: 'start',
-      paddingRight: theme.spacing(1)
-    },
-    noLabelInput: {
-      padding: theme.spacing(1)
-    },
-    textField: {
-      transition: theme.transitions.create(['width'], {
-        duration: theme.transitions.duration.shortest
-      })
-    },
-    transparent: {
-      backgroundColor: 'transparent'
-    }
-  })
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  autoSizeCompact: {
+    paddingRight: theme.spacing(1),
+    paddingTop: theme.spacing(0.6)
+  },
+  hiddenText: {
+    display: 'table',
+    lineHeight: 0,
+    transform: 'scaleY(0)'
+  },
+  input: {
+    fontSize: theme.typography.body1.fontSize
+  },
+  inputBase: {
+    display: 'inline-flex',
+    justifyItems: 'start',
+    paddingRight: theme.spacing(1)
+  },
+  noLabelInput: {
+    padding: theme.spacing(1)
+  },
+  textField: {
+    transition: theme.transitions.create(['width'], {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  transparent: {
+    backgroundColor: 'transparent'
+  }
+}));
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -72,7 +70,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type Props = {
+export type TextProps = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -114,17 +112,18 @@ const TextField = forwardRef(
       defaultValue,
       required = false,
       containerClassName,
+      type,
       ...rest
-    }: Props,
+    }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
-      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
-    });
+    const { classes, cx } = useStyles();
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding,
+      autoSizeCustomPadding: equals(type, 'number')
+        ? Math.max(6, autoSizeCustomPadding || 0)
+        : autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -196,6 +195,7 @@ const TextField = forwardRef(
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
+            type={type}
           />
         </Tooltip>
         {autoSize && (

package/src/Listing/ActionBar/index.tsx

@@ -9,10 +9,9 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '../..';
+import { ListingProps, IconButton } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
 import { useMemoComponent } from '../../utils';
-import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
@@ -175,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;