@centreon/ui 24.7.2 → 24.7.4

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 };

package/src/Listing/Row/EmptyRow.tsx

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-
-import { TableRow } from '@mui/material';
-
-import Cell from '../Cell';
-
-import { useStyles } from './EmptyRow.styles';
-
-interface EmptyRowProps {
-  children: ReactNode;
-}
-
-const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
-      <Cell
-        align="center"
-        className={classes.emptyDataCell}
-        disableRowCondition={(): boolean => false}
-        isRowHovered={false}
-      >
-        {children}
-      </Cell>
-    </TableRow>
-  );
-};
-
-export { EmptyRow };

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import LoadingSkeleton from '../../LoadingSkeleton';
-
-import { EmptyRow } from './EmptyRow';
-
-interface SkeletonLoaderProps {
-  rows?: number;
-}
-
-const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
-  <>
-    {[...Array(rows)].map((_v, i) => (
-      <EmptyRow
-        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
-      >
-        <LoadingSkeleton variant="text" width="100%" />
-      </EmptyRow>
-    ))}
-  </>
-);
-
-export { SkeletonLoader };

package/src/Module/Module.cypress.spec.tsx

@@ -1,129 +0,0 @@
-import { createStore } from 'jotai';
-
-import { Method } from '..';
-
-import LicensedModule from './LicensedModule';
-
-import Module from '.';
-
-const initializeModule = (): void => {
-  cy.mount({
-    Component: (
-      <Module seedName="seed" store={createStore()}>
-        <p>Module</p>
-      </Module>
-    )
-  });
-};
-
-const initializeModuleWithValidLicense = (
-  isFederatedComponent = false
-): void => {
-  cy.interceptAPIRequest({
-    alias: 'getValidLicense',
-    method: Method.GET,
-    path: './api/internal.php?object=centreon_license_manager&action=licenseValid&productName=valid',
-    response: {
-      success: true
-    }
-  });
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <LicensedModule
-          isFederatedComponent={isFederatedComponent}
-          moduleName="valid"
-          seedName="seed"
-          store={createStore()}
-        >
-          <p>Module</p>
-        </LicensedModule>
-      </div>
-    )
-  });
-};
-
-const initializeModuleWithInvalidLicense = (
-  isFederatedComponent = false
-): void => {
-  cy.interceptAPIRequest({
-    alias: 'getInvalidLicense',
-    method: Method.GET,
-    path: './api/internal.php?object=centreon_license_manager&action=licenseValid&productName=invalid',
-    response: {
-      success: false
-    }
-  });
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <LicensedModule
-          isFederatedComponent={isFederatedComponent}
-          moduleName="invalid"
-          seedName="seed"
-          store={createStore()}
-        >
-          <p>Module</p>
-        </LicensedModule>
-      </div>
-    )
-  });
-};
-
-describe('Module', () => {
-  beforeEach(() => {
-    initializeModule();
-  });
-
-  it('displays the content of the module', () => {
-    cy.contains('Module').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});
-
-describe('Valid license module', () => {
-  it('displays the content of the page when the license is valid license', () => {
-    initializeModuleWithValidLicense();
-    cy.waitForRequest('@getValidLicense');
-
-    cy.contains('Module').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the content of the component when the license is valid license', () => {
-    initializeModuleWithValidLicense(true);
-
-    cy.contains('Module').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});
-
-describe('Invalid license module', () => {
-  it('displays the content of the page when the license is invalid license', () => {
-    initializeModuleWithInvalidLicense();
-    cy.waitForRequest('@getInvalidLicense');
-
-    cy.contains('Module').should('not.exist');
-
-    cy.contains('Oops').should('be.visible');
-    cy.contains('License invalid or expired').should('be.visible');
-    cy.contains('Please contact your administrator.').should('be.visible');
-    cy.get('img[alt="License invalid or expired !"]').should('be.visible');
-    cy.get('img[alt="Centreon Logo"]').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the content of the module when the license is invalid license', () => {
-    initializeModuleWithInvalidLicense(true);
-
-    cy.contains('Module').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/ParentSize/ParentSize.tsx

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Responsive } from '@visx/visx';
-
-type ParentSizeState = {
-  height: number;
-  left: number;
-  top: number;
-  width: number;
-};
-
-type Props = {
-  children: (args: ParentSizeState) => ReactElement;
-};
-
-const ParentSize = ({ children, ...props }: Props): JSX.Element => {
-  return (
-    <Responsive.ParentSize {...props} debounceTime={0}>
-      {children}
-    </Responsive.ParentSize>
-  );
-};
-
-export default ParentSize;

package/src/ParentSize/index.ts

@@ -1 +0,0 @@
-export { default as ParentSize } from './ParentSize';