@centreon/ui 24.5.2 → 24.5.4

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, 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,307 +0,0 @@
-import { useState } from 'react';
-
-import { Button, Typography } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-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 LargeText = (): JSX.Element => (
-  <Typography sx={{ whiteSpace: 'normal' }}>
-    This is a large text that fills the content
-  </Typography>
-);
-
-const tenElements = new Array(10).fill(0);
-
-const generateSubItems = (): Array<unknown> => {
-  return tenElements.map((__, subIndex) => ({
-    active: false,
-    description: `Sub item ${subIndex * 10} description`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: subIndex * 10,
-    name: `Sub Item ${subIndex * 10}`,
-    selected: false
-  }));
-};
-
-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() : undefined
-}));
-
-const listingWithSubItems3Rows = Array(3)
-  .fill(0)
-  .map((_, index) => ({
-    active: false,
-    description: `Entity ${index}`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: index,
-    name: `E${index}`,
-    selected: false,
-    subItems: index % 2 === 0 ? generateSubItems() : 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,
-    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 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>
-    )
-  });
-};
-
-interface TestComponentProps {
-  canCheckSubItems?: boolean;
-  isSmallListing?: boolean;
-}
-
-const TestComponent = ({
-  isSmallListing = false,
-  canCheckSubItems = false
-}: TestComponentProps): JSX.Element => {
-  const [selectedRows, setSelectedRows] = useState([]);
-
-  return (
-    <Listing
-      checkable
-      columns={columnsWithSubItems}
-      currentPage={1}
-      limit={10}
-      rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
-      selectedRows={selectedRows}
-      subItems={{
-        canCheckSubItems,
-        enable: true,
-        getRowProperty: () => 'subItems',
-        labelCollapse: 'Collapse',
-        labelExpand: 'Expand'
-      }}
-      totalRows={10}
-      onSelectRows={setSelectedRows}
-    />
-  );
-};
-
-const mountListingForSubItems = ({
-  isSmallListing = false,
-  canCheckSubItems = false
-}: TestComponentProps): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <TestComponent
-          canCheckSubItems={canCheckSubItems}
-          isSmallListing={isSmallListing}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Listing', () => {
-  describe('Sub items', () => {
-    it('expands the row when the corresponding icon is clicked', () => {
-      mountListingForSubItems({});
-
-      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.findByLabelText(`Collapse ${index}`).click();
-      });
-
-      cy.makeSnapshot();
-    });
-
-    it('collapses the row when the corresponding icon is clicked', () => {
-      mountListingForSubItems({});
-
-      cy.findByLabelText(`Expand 0`).click();
-
-      cy.contains('Sub item 10').should('be.visible');
-
-      cy.findByLabelText('Collapse 0').click();
-
-      cy.contains('Sub item 10').should('not.exist');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays only one row as hovered when mutilple rows are expanded and a sub item row is hovered', () => {
-      mountListingForSubItems({ isSmallListing: true });
-
-      cy.findByLabelText('Expand 2').click();
-      cy.findByLabelText('Expand 0').click();
-
-      cy.findByLabelText('Collapse 0').should('be.visible');
-      cy.findByLabelText('Collapse 2').should('be.visible');
-
-      cy.contains('Sub Item 0').realHover();
-
-      cy.get('[data-isHovered="true"]').should('have.length', 1);
-      cy.get('[data-isHovered="true"]').contains('Sub Item 0').should('exist');
-
-      cy.findByLabelText('Collapse 0').click();
-      cy.findByLabelText('Collapse 2').click();
-    });
-
-    it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
-      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
-
-      cy.findByLabelText('Expand 0').click();
-
-      cy.findByLabelText('Collapse 0').should('be.visible');
-
-      cy.findAllByLabelText('Select row 0').eq(0).click();
-      cy.get('body').type('{shift}', { release: false });
-      cy.findByLabelText('Select row 50').eq(0).click();
-
-      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
-      cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
-      cy.findByLabelText('Select row 10').should('be.checked');
-      cy.findByLabelText('Select row 20').should('be.checked');
-      cy.findByLabelText('Select row 30').should('be.checked');
-      cy.findByLabelText('Select row 40').should('be.checked');
-      cy.findByLabelText('Select row 50').should('be.checked');
-
-      cy.findByLabelText('Collapse 0').click();
-    });
-
-    it('selects displayed rows when the corresponding checkbox is clicked', () => {
-      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
-
-      cy.findByLabelText('Expand 0').click();
-
-      cy.findByLabelText('Collapse 0').should('be.visible');
-
-      cy.findAllByLabelText('Select all').eq(0).click();
-
-      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
-      tenElements.forEach((_, index) => {
-        if (index === 0) {
-          cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
-
-          return;
-        }
-        cy.findByLabelText(`Select row ${index * 10}`).should('be.checked');
-      });
-      cy.findByLabelText('Select row 1').should('be.checked');
-      cy.findByLabelText('Select row 2').should('be.checked');
-
-      cy.findByLabelText('Collapse 0').click();
-    });
-  });
-
-  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,78 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { TableStyleAtom as TableStyle } from './models';
-
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  isResponsive: string;
-  rows: Array<unknown>;
-}
-
-const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    listingContainer: {
-      height: '100%',
-      overflow: 'hidden',
-      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 || 1
-      }, ${isResponsive ? 'auto' : `${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 };

package/src/Listing/ListingDocs.mdx

@@ -1,61 +0,0 @@
-{/* ListingDocs.mdx */}
-
-import { Meta, Story } from '@storybook/blocks';
-import * as ListingStories from './index.stories';
-
-<Meta of={ListingStories} />
-
-# Listing
-
-## Expand/collapse rows
-
-The listing supports rows expanding and collapsing.
-
-In order to use this feature, please follow the instructions:
-- (pre-requisite): Your data should have a child property that contains sub-items.
-```javascript
-[
-  {
-    "id": 1,
-    "festival": "Test",
-    "name": "Tom",
-    "counter": 3,
-    "description": "My description of Tom"
-  },
-  {
-    "id": 2,
-    "name": "Jane's group",
-    "festival": "fest",
-    "counter": 5,
-    "description": "My description of Jane's group",
-    "subItems": [
-      {
-        "id": 3,
-        "name": "Jane",
-        "counter": 0,
-        "description": "My description of Jane"
-      },
-    ]
-  }
-]
-```
-- Use the `subItems` property to configure how the component will handle your sub-items
-```javascript
-subItems={{
-  canCheckSubItems: false, // Display checkbox on sub items. Default: false
-  enable: true, // It enables or disable the row expand/collapse feature. Default: false
-  rowProperty: 'subItems' // Which property should be used to detect sub-items. Default: ''
-  labelExpand: 'Expand',
-  labelCollapse: 'Collapse'
-}}
-```
-- Finally, update the column configuration in order to display the expand/collapse caret
-```javascript
-{
-  Component: ButtonColumn,
-  displaySubItemsCaret: true, // Add this property
-  id: '#',
-  label: 'Custom',
-  type: ColumnType.component
-}
-```

package/src/Listing/Row/EmptyRow.styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  emptyDataCell: {
-    flexDirection: 'column',
-    gridColumn: 'auto / -1',
-    justifyContent: 'center'
-  },
-  emptyDataRow: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };