@centreon/ui 23.10.43 → 23.10.44

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -1,161 +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.matchImageSnapshot(
-      'displays the list when the user clicks on the input'
-    );
-
-    cy.get('@input').click();
-
-    cy.get('@listOptions').should('not.exist');
-
-    cy.matchImageSnapshot('hides the list when the user clicks on the input');
-  });
-
-  it('displays exactly one option on the list when the user types that 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((optionData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionData.result.length);
-    });
-
-    cy.get('@listOptions').within(() => {
-      cy.contains(optionOne).should('be.visible');
-    });
-
-    cy.matchImageSnapshot();
-  });
-
-  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((optionData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionData.result.length);
-    });
-
-    cy.get('[type="checkbox"]').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);
-        });
-      });
-    });
-
-    cy.matchImageSnapshot();
-  });
-});

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,24 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  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,13 +0,0 @@
-import React from 'react';
-
-import { EmptyRow } from '../Row/EmptyRow';
-
-interface EmptyResultProps {
-  label: string;
-}
-
-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;
-  viewMode?: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
-    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({ theme, viewMode }),
-      '&:hover, &:focus-within, &[data-isdragging=true]': {
-        '& .dragHandle': {
-          opacity: 1
-        }
-      },
-      '&[data-isindragoverlay=true]': {
-        display: 'block',
-        opacity: 0.7
-      }
-    }
-  })
-);
-
-export { useStyles, 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,70 +0,0 @@
-import React from 'react';
-
-import { equals, isEmpty, not } from 'ramda';
-
-import { TableCell, TableCellBaseProps } from '@mui/material';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-
-import Checkbox from '../../Checkbox';
-import PopoverMenu from '../../../PopoverMenu';
-import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
-import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
-import { PredefinedRowSelection } from '../../models';
-
-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/_internals/DraggableIconButton.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-
-import { labelDragHandle } from '../../translatedLabels';
-
-interface DraggableIconButtonProps {
-  className?: string;
-  columnLabel?: string;
-}
-
-const DraggableIconButton = ({
-  columnLabel,
-  className,
-  ...props
-}: DraggableIconButtonProps): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <MuiIconButton
-      className={className}
-      {...props}
-      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
-    >
-      <SvgIcon fontSize="small">
-        <DragIndicatorIcon />
-      </SvgIcon>
-    </MuiIconButton>
-  );
-};
-
-export { DraggableIconButton };

package/src/Listing/Header/index.ts

@@ -1 +0,0 @@
-export * from './ListingHeader';

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

@@ -1,120 +0,0 @@
-import { Button } from '@mui/material';
-
-import { ColumnType } from './models';
-
-import Listing from '.';
-
-interface Props {
-  row: { name: string };
-}
-
-const ButtonColumn = ({ row }: Props): JSX.Element => (
-  <Button size="small">Click to reveal details about {row.name}</Button>
-);
-
-const generateSubItems = (parentIndex: number): Array<unknown> => {
-  return tenElements.map((__, subIndex) => ({
-    active: false,
-    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: subIndex + (parentIndex + 10) * 10,
-    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
-    selected: false
-  }));
-};
-
-const tenElements = new Array(10).fill(0);
-
-const listingWithSubItems = tenElements.map((_, index) => ({
-  active: false,
-  description: `Entity ${index}`,
-  disableCheckbox: false,
-  disableRow: false,
-  id: index,
-  name: `E${index}`,
-  selected: false,
-  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
-}));
-
-const columnsWithSubItems = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: ButtonColumn,
-    displaySubItemsCaret: true,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '350px'
-  }
-];
-
-const expandedItems = [0, 8];
-
-const mountListing = (): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <Listing
-        checkable
-        columns={columnsWithSubItems}
-        currentPage={1}
-        limit={10}
-        rows={listingWithSubItems}
-        subItems={{
-          canCheckSubItems: false,
-          enable: true,
-          labelCollapse: 'Collapse',
-          labelExpand: 'Expand',
-          rowProperty: 'subItems'
-        }}
-        totalRows={10}
-      />
-    )
-  });
-};
-
-describe('Listing', () => {
-  beforeEach(mountListing);
-
-  it('expands the row when the corresponding icon si clicked', () => {
-    cy.contains('E0').should('be.visible');
-
-    expandedItems.forEach((index) => {
-      const subItems = generateSubItems(index);
-
-      cy.findByLabelText(`Expand ${index}`).click();
-
-      cy.findByLabelText(`Collapse ${index}`).should('exist');
-
-      subItems.forEach(({ name, description }) => {
-        cy.contains(name).should('exist');
-        cy.contains(description).should('exist');
-      });
-    });
-
-    cy.matchImageSnapshot();
-  });
-
-  it('collapses the row when the corresponding icon si clicked', () => {
-    cy.contains('Sub item 100').should('be.visible');
-
-    cy.findByLabelText('Collapse 0').click();
-
-    cy.contains('Sub item 100').should('not.exist');
-
-    cy.matchImageSnapshot();
-  });
-});

package/src/Listing/Listing.styles.ts

@@ -1,76 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { TableStyleAtom as TableStyle } from './models';
-
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  limit: number;
-  rows: Array<unknown>;
-  viewMode: ListingVariant;
-}
-
-const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader': {
-        backgroundColor: theme.palette.background.listingHeader,
-        padding: theme.spacing(0, 1)
-      },
-      '.listingHeader > div > div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        height: theme.spacing(dataStyle.header.height / 8)
-      },
-      '.listingHeader > div > div:first-of-type': {
-        height: '100%',
-        padding: theme.spacing(0, 0.5, 0, 1.5)
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || limit
-      }, ${dataStyle.body.height}px)`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
-export { useListingStyles, loadingIndicatorHeight };