@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,66 +0,0 @@
-/* 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

@@ -1,75 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-
-import { T, always, clamp, cond, isEmpty } 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(
-          clamp(
-            inputProps?.min || Number.NEGATIVE_INFINITY,
-            inputProps?.max || Number.POSITIVE_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/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -1,127 +0,0 @@
-import {
-  Method,
-  MultiConnectedAutocompleteField,
-  TestQueryProvider
-} from '@centreon/ui';
-
-import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
-
-const optionOne = 'My Option 1';
-
-describe('Multi connected autocomplete', () => {
-  beforeEach(() => {
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.interceptAPIRequest({
-        alias: 'getListOptions',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        response: optionsData
-      });
-    });
-
-    cy.fixture('inputField/searchedOption').then((optionData) => {
-      cy.interceptAPIRequest({
-        alias: 'getSearchedOption',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        query: {
-          name: 'search',
-          value: JSON.stringify({
-            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
-          })
-        },
-        response: optionData
-      });
-    });
-
-    cy.mount({
-      Component: (
-        <TestQueryProvider>
-          <div style={{ paddingTop: 20 }}>
-            <MultiConnectedAutocompleteField
-              field="host.name"
-              getEndpoint={getEndpoint}
-              label={label}
-              placeholder={placeholder}
-            />
-          </div>
-        </TestQueryProvider>
-      )
-    });
-  });
-
-  it('displays and hides the list when the user double-clicks on the input', () => {
-    cy.contains(label).should('be.visible');
-
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-
-    cy.makeSnapshot('displays the list when the user clicks on the input');
-
-    cy.get('@input').click();
-
-    cy.get('@listOptions').should('not.exist');
-
-    cy.makeSnapshot('hides the list when the user clicks on the input');
-  });
-
-  it('displays all options on the list when the user searches for and selects an option', () => {
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.get('@input').type(optionOne);
-
-    cy.waitForRequest('@getSearchedOption');
-
-    cy.fixture('inputField/searchedOption').then(() => {
-      cy.get('@listOptions').find('li').should('have.length', 5);
-    });
-
-    cy.get('[type="checkbox"]').eq(0).check();
-    cy.get('@input')
-      .parent()
-      .within(() => {
-        cy.contains(optionOne).should('be.visible');
-
-        cy.get('[data-testid="CancelIcon"]').should('be.visible');
-      });
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionsData.result.length);
-
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-  });
-});

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -1,22 +0,0 @@
-import { buildListingEndpoint } from '../../../../../..';
-
-export const baseEndpoint = './endpoint';
-
-export const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
-
-export const label = 'Multi Connected Autocomplete';
-export const placeholder = 'Type here...';
-
-export const optionsData = {
-  meta: {
-    limit: 2,
-    page: 1,
-    total: 20
-  },
-  result: [
-    { id: 0, name: 'My Option 1' },
-    { id: 1, name: 'My Option 2' }
-  ]
-};

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

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  clickable: {
-    cursor: 'default'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
-export { useStyles };

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -1,11 +0,0 @@
-import { EmptyRow } from '../Row/EmptyRow';
-
-interface EmptyResultProps {
-  label: string | JSX.Element;
-}
-
-const EmptyResult = ({ label }: EmptyResultProps): JSX.Element => (
-  <EmptyRow>{label}</EmptyRow>
-);
-
-export { EmptyResult };

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -1,71 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-interface StylesProps {
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
-    active: {
-      '&, &:hover, &:focus': {
-        color: theme.palette.common.white
-      },
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    dragHandle: {
-      '&, &.Mui-focus, &:focus': {
-        color: theme.palette.common.white
-      },
-      color: theme.palette.common.white,
-
-      cursor: isDragging ? 'grabbing' : 'grab',
-      opacity: 0,
-      padding: 0
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2),
-      userSelect: 'none'
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      height: 'inherit',
-      padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      '&:hover, &:focus-within, &[data-isdragging=true]': {
-        '& .dragHandle': {
-          opacity: 1
-        }
-      },
-      '&[data-isindragoverlay=true]': {
-        display: 'block',
-        opacity: 0.7
-      }
-    }
-  })
-);
-
-export { useStyles, type StylesProps };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -1,68 +0,0 @@
-import { equals, isEmpty, not } from 'ramda';
-
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { TableCell, TableCellBaseProps } from '@mui/material';
-
-import PopoverMenu from '../../../PopoverMenu';
-import Checkbox from '../../Checkbox';
-import { PredefinedRowSelection } from '../../models';
-import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
-import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
-
-import { useStyles } from './SelectActionListingHeaderCell.styles';
-
-export interface SelectActionListingHeaderCellProps {
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
-  rowCount: number;
-  selectedRowCount: number;
-}
-
-const SelectActionListingHeaderCell = ({
-  rowCount,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
-}: SelectActionListingHeaderCellProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  const hasRows = not(equals(rowCount, 0));
-
-  return (
-    <TableCell
-      className={classes.checkboxHeaderCell}
-      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-    >
-      <Checkbox
-        checked={hasRows && selectedRowCount === rowCount}
-        className={classes.checkbox}
-        indeterminate={
-          hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-        }
-        inputProps={{ 'aria-label': 'Select all' }}
-        onChange={onSelectAllClick}
-      />
-      {not(isEmpty(predefinedRowsSelection)) ? (
-        <PopoverMenu
-          className={classes.predefinedRowsMenu}
-          icon={<ArrowDropDownIcon />}
-          title={labelPredefinedRowsSelectionMenu}
-        >
-          {({ close }): JSX.Element => (
-            <PredefinedSelectionList
-              close={close}
-              predefinedRowsSelection={predefinedRowsSelection}
-              onSelectRowsWithCondition={onSelectRowsWithCondition}
-            />
-          )}
-        </PopoverMenu>
-      ) : (
-        <div className={classes.predefinedRowsMenu} />
-      )}
-    </TableCell>
-  );
-};
-
-export { SelectActionListingHeaderCell };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/ListingHeader.tsx

@@ -1,165 +0,0 @@
-import { DraggableSyntheticListeners, closestCenter } from '@dnd-kit/core';
-import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, map, pick, propEq } from 'ramda';
-
-import { TableHead, TableRow } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { Props as ListingProps, getVisibleColumns } from '..';
-import SortableItems from '../../SortableItems';
-import { Column } from '../models';
-
-import { memo, useCallback } from 'react';
-import ListingHeaderCell from './Cell/ListingHeaderCell';
-import {
-  SelectActionListingHeaderCell,
-  SelectActionListingHeaderCellProps
-} from './Cell/SelectActionListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
-
-type Props = Pick<
-  ListingProps<unknown>,
-  | 'sortField'
-  | 'sortOrder'
-  | 'onSort'
-  | 'columns'
-  | 'checkable'
-  | 'onSelectColumns'
-  | 'columnConfiguration'
-  | 'totalRows'
-> & {
-  areColumnsEditable: boolean;
-  listingVariant?: ListingVariant;
-  memoProps: Array<unknown>;
-  rowCount: number;
-} & SelectActionListingHeaderCellProps;
-
-interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
-  attributes;
-  id: string;
-  isDragging: boolean;
-  isInDragOverlay?: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
-  listeners: DraggableSyntheticListeners;
-  style;
-}
-
-const ListingHeader = ({
-  sortOrder,
-  sortField,
-  rowCount,
-  columns,
-  columnConfiguration,
-  onSort,
-  onSelectColumns,
-  checkable,
-  memoProps,
-  areColumnsEditable,
-  listingVariant,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  const visibleColumns = getVisibleColumns({
-    columnConfiguration,
-    columns
-  });
-
-  const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
-  };
-
-  const Content = useCallback(
-    ({
-      isInDragOverlay,
-      listeners,
-      attributes,
-      style,
-      isDragging,
-      itemRef,
-      id
-    }: ContentProps): JSX.Element => {
-      return (
-        <ListingHeaderCell
-          areColumnsEditable={areColumnsEditable}
-          column={getColumnById(id)}
-          columnConfiguration={columnConfiguration}
-          isDragging={isDragging}
-          isInDragOverlay={isInDragOverlay}
-          itemRef={itemRef}
-          listingVariant={listingVariant}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          style={style}
-          onSort={onSort}
-          {...listeners}
-          {...attributes}
-        />
-      );
-    },
-    [columnConfiguration, columns, sortField, sortOrder]
-  );
-
-  return (
-    <TableHead className={cx(classes.row, 'listingHeader')} component="div">
-      <TableRow className={classes.row} component="div">
-        {checkable && (
-          <SelectActionListingHeaderCell
-            predefinedRowsSelection={predefinedRowsSelection}
-            rowCount={rowCount}
-            selectedRowCount={selectedRowCount}
-            onSelectAllClick={onSelectAllClick}
-            onSelectRowsWithCondition={onSelectRowsWithCondition}
-          />
-        )}
-        <SortableItems
-          updateSortableItemsOnItemsChange
-          Content={Content}
-          additionalProps={[sortField, sortOrder]}
-          collisionDetection={closestCenter}
-          itemProps={['id']}
-          items={visibleColumns}
-          memoProps={memoProps}
-          sortingStrategy={horizontalListSortingStrategy}
-          onDragEnd={({ items }): void => {
-            onSelectColumns?.(items);
-          }}
-        />
-      </TableRow>
-    </TableHead>
-  );
-};
-
-const columnMemoProps = [
-  'id',
-  'label',
-  'rowMemoProps',
-  'sortField',
-  'sortOrder',
-  'sortable',
-  'type'
-];
-
-const MemoizedListingHeader = memo<Props>(
-  ListingHeader,
-  (prevProps, nextProps) =>
-    equals(prevProps.sortOrder, nextProps.sortOrder) &&
-    equals(prevProps.sortField, nextProps.sortField) &&
-    equals(prevProps.selectedRowCount, nextProps.selectedRowCount) &&
-    equals(prevProps.rowCount, nextProps.rowCount) &&
-    equals(
-      map(pick(columnMemoProps), prevProps.columns),
-      map(pick(columnMemoProps), nextProps.columns)
-    ) &&
-    equals(prevProps.checkable, nextProps.checkable) &&
-    equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
-    equals(prevProps.memoProps, nextProps.memoProps) &&
-    equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.listingVariant, nextProps.listingVariant)
-);
-
-export { MemoizedListingHeader as ListingHeader };