@centreon/ui 23.10.35 → 23.10.37

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

@@ -16,18 +16,16 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import {
-  useDebounce,
-  useIntersectionObserver,
-  useDeepCompare
-} from '../../../../utils';
+import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
+import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   conditionField?: keyof SelectEntry;
@@ -65,9 +63,6 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
-
-    const [autocompleteChangedValue, setAutocompleteChangedValue] =
-      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -277,13 +272,6 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
-    useEffect(() => {
-      if (!autocompleteChangedValue && !props?.value) {
-        return;
-      }
-      setSearchParameter(undefined);
-    }, [autocompleteChangedValue, props?.value]);
-
     useEffect(() => {
       if (!optionsOpen) {
         return;
@@ -299,7 +287,6 @@ const ConnectedAutocompleteField = (
         open={optionsOpen}
         options={options}
         renderOption={renderOptions}
-        onChange={(_, value) => setAutocompleteChangedValue(value)}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
+import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -14,6 +15,7 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
+  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

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

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState(autoSizeOptions[1]);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,3 +108,12 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
+
+export const autoSizeWithCustomPadding = (): JSX.Element => {
+  return (
+    <AutoSizeAutocompleteField
+      customPadding={5}
+      endAdornment={<EndAdornment />}
+    />
+  );
+};

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

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import { getNormalizedId } from '../../../utils';
+import getNormalizedId from '../../../utils/getNormalizedId';
 
 export type Props = {
   autoFocus?: boolean;

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import Option from './Option';
 

package/src/InputField/Text/index.tsx

@@ -12,7 +12,7 @@ import {
   Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import useAutoSize from './useAutoSize';
 
@@ -84,7 +84,6 @@ export type Props = {
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
-  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -109,7 +108,6 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
-      required = false,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -166,6 +164,7 @@ const TextField = forwardRef(
                 },
                 className
               ),
+              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -183,7 +182,6 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
-            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx

package/src/Listing/ActionBar/index.tsx

@@ -11,7 +11,7 @@ import { userAtom, ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';

package/src/Listing/Cell/DataCell.tsx

@@ -1,11 +1,13 @@
 import { memo } from 'react';
 
 import { equals, props } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import { Tooltip } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
+import DraggableIcon from '../Header/SortableCell/DraggableIcon';
 import {
   Column,
   ColumnType,
@@ -15,11 +17,11 @@ import {
 import useStyleTable from '../useStyleTable';
 
 import EllipsisTypography from './EllipsisTypography';
-import { useStyles } from './DataCell.styles';
 
 import Cell from '.';
 
 interface Props {
+  areColumnsEditable: boolean;
   column: Column;
   disableRowCondition: (row) => boolean;
   getHighlightRowCondition?: (row) => boolean;
@@ -30,6 +32,31 @@ interface Props {
   viewMode?: ListingVariant;
 }
 
+const useStyles = makeStyles()((theme) => ({
+  cell: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  componentColumn: {
+    width: theme.spacing(2.75)
+  },
+  headerCell: {
+    padding: theme.spacing(0, 0, 0, 1)
+  },
+  rowNotHovered: {
+    color: theme.palette.text.secondary
+  },
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
 const DataCell = ({
   row,
   column,
@@ -38,12 +65,14 @@ const DataCell = ({
   rowColorConditions,
   disableRowCondition,
   viewMode,
-  getHighlightRowCondition
+  getHighlightRowCondition,
+  areColumnsEditable
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
   const { dataStyle } = useStyleTable({ viewMode });
+  const { classes } = useStyles();
 
   const commonCellProps = {
+    align: 'left' as const,
     disableRowCondition,
     isRowHovered,
     row,
@@ -73,7 +102,6 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
           style={{
             gridColumn
@@ -84,7 +112,10 @@ const DataCell = ({
           {isTruncated && (
             <Tooltip title={formattedString}>{typography}</Tooltip>
           )}
-          {!isTruncated && typography}
+          <>
+            {areColumnsEditable && <DraggableIcon />}
+            {!isTruncated && typography}
+          </>
         </Cell>
       );
     },
@@ -102,7 +133,6 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
           viewMode={viewMode}
           onClick={(e): void => {
@@ -114,25 +144,31 @@ const DataCell = ({
           }}
           {...commonCellProps}
         >
-          <Component
-            isHovered={isRowHovered}
-            isSelected={isRowSelected}
-            renderEllipsisTypography={({
-              className,
-              formattedString
-            }): JSX.Element => {
-              return (
-                <EllipsisTypography
-                  className={className}
-                  dataStyle={dataStyle}
-                  disableRowCondition={disableRowCondition(row)}
-                  formattedString={formattedString}
-                  isRowHovered={isRowHovered}
-                />
-              );
-            }}
-            row={row}
-          />
+          <>
+            {areColumnsEditable && (
+              <DraggableIcon className={classes.componentColumn} />
+            )}
+
+            <Component
+              isHovered={isRowHovered}
+              isSelected={isRowSelected}
+              renderEllipsisTypography={({
+                className,
+                formattedString
+              }): JSX.Element => {
+                return (
+                  <EllipsisTypography
+                    className={className}
+                    dataStyle={dataStyle}
+                    disableRowCondition={disableRowCondition(row)}
+                    formattedString={formattedString}
+                    isRowHovered={isRowHovered}
+                  />
+                );
+              }}
+              row={row}
+            />
+          </>
         </Cell>
       );
     }
@@ -244,7 +280,8 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) // &&
+      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable)
     );
   }
 );

package/src/Listing/Cell/index.tsx

@@ -99,7 +99,7 @@ const useStyles = makeStyles<StylesProps>()(
       overflow: 'hidden',
       ...getTextStyleByViewMode({ theme, viewMode }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
-      padding: theme.spacing(0, 1),
+      padding: 0,
       whiteSpace: 'nowrap'
     }
   })

package/src/Listing/Header/{_internals/PredefinedSelectionList.tsx → PredefinedSelectionList.tsx}

@@ -1,6 +1,6 @@
 import { List, ListItem, ListItemText } from '@mui/material';
 
-import { PredefinedRowSelection } from '../../models';
+import { PredefinedRowSelection } from '../models';
 
 interface Props {
   close: () => void;

package/src/Listing/Header/{Cell/ListingHeaderCell.tsx → SortableCell/Content.tsx}

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { always, and, equals, ifElse, isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import {
   TableCell,
@@ -9,12 +10,61 @@ import {
   Tooltip
 } from '@mui/material';
 
+import { ListingVariant } from '@centreon/ui-context';
+
 import { Props as ListingProps } from '../..';
 import { Column } from '../../models';
-import HeaderLabel from '../_internals/Label';
-import { DraggableIconButton } from '../_internals/DraggableIconButton';
+import HeaderLabel from '../Label';
+import { getTextStyleByViewMode } from '../../useStyleTable';
+
+import DraggableIcon from './DraggableIcon';
+
+type StylesProps = Pick<Props, 'isDragging' | 'isInDragOverlay' | 'viewMode'>;
 
-import { StylesProps, useStyles } from './ListingHeaderCell.styles';
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
+    active: {
+      '&.Mui-active': {
+        '& .MuiTableSortLabel-icon': {
+          color: theme.palette.common.white
+        },
+        color: theme.palette.common.white
+      },
+      '&:hover': {
+        '& .MuiTableSortLabel-icon': {
+          opacity: 1
+        },
+        color: theme.palette.common.white
+      }
+    },
+    content: {
+      alignItems: 'center',
+      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
+      color: theme.palette.common.white,
+      display: 'flex',
+      minHeight: theme.spacing(3)
+    },
+    dragHandle: {
+      alignSelf: 'center',
+      cursor: isDragging ? 'grabbing' : 'grab',
+      display: 'flex',
+      outline: 'none'
+    },
+    simpleHeaderCellContent: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      marginRight: theme.spacing(2)
+    },
+    tableCell: {
+      backgroundColor: isInDragOverlay
+        ? 'transparent'
+        : theme.palette.background.listingHeader,
+      borderBottom: 'none',
+      padding: 0,
+      ...getTextStyleByViewMode({ theme, viewMode })
+    }
+  })
+);
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -23,11 +73,14 @@ type Props = Pick<
   areColumnsEditable: boolean;
   className: string;
   column: Column;
+  isDragging?: boolean;
+  isInDragOverlay?: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   style;
-} & StylesProps;
+  viewMode?: ListingVariant;
+};
 
-const ListingHeaderCell = ({
+const SortableHeaderCellContent = ({
   column,
   columnConfiguration,
   sortField,
@@ -46,6 +99,8 @@ const ListingHeaderCell = ({
     isInDragOverlay,
     viewMode
   });
+  const [cellHovered, setCellHovered] = React.useState(false);
+
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -64,6 +119,14 @@ const ListingHeaderCell = ({
     });
   };
 
+  const mouseOver = (): void => {
+    setCellHovered(true);
+  };
+
+  const mouseOut = (): void => {
+    setCellHovered(false);
+  };
+
   const headerContent = (
     <Tooltip placement="top" title={getTooltipLabel(column.shortLabel)}>
       <HeaderLabel>{columnLabel}</HeaderLabel>
@@ -74,12 +137,22 @@ const ListingHeaderCell = ({
     <TableCell
       className={classes.tableCell}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-      data-isdragging={isDragging}
-      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
       style={style}
+      onMouseOut={mouseOut}
+      onMouseOver={mouseOver}
     >
       <div className={classes.content}>
+        {columnConfiguration?.sortable && areColumnsEditable && (
+          <DraggableIcon
+            visible={cellHovered}
+            {...props}
+            isInteractive
+            className={cx({ [classes.dragHandle]: cellHovered })}
+            columnLabel={columnLabel}
+          />
+        )}
+
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
@@ -93,17 +166,9 @@ const ListingHeaderCell = ({
         ) : (
           <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
         )}
-
-        {columnConfiguration?.sortable && areColumnsEditable && (
-          <DraggableIconButton
-            {...props}
-            className={cx(classes.dragHandle, 'dragHandle')}
-            columnLabel={columnLabel}
-          />
-        )}
       </div>
     </TableCell>
   );
 };
 
-export default ListingHeaderCell;
+export default SortableHeaderCellContent;

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import SvgIcon from '@mui/material/SvgIcon';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface Icon {
+  className?: string;
+  columnLabel?: string;
+  isInteractive?: boolean;
+  visible?: boolean;
+}
+
+const DraggableIcon = ({
+  visible = false,
+  columnLabel,
+  className,
+  isInteractive = false,
+  ...rest
+}: Icon): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <SvgIcon
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+      fontSize="medium"
+      {...rest}
+      className={className}
+      role={isInteractive ? 'button' : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+    >
+      {visible && (
+        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
+      )}
+    </SvgIcon>
+  );
+};
+
+export default DraggableIcon;