@centreon/ui 24.7.6 → 24.7.7

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -0,0 +1,174 @@
+import { Box } from '@mui/material';
+import Delete from '@mui/icons-material/Delete';
+
+import { IconButton } from '../..';
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from '.';
+
+const data = Array(5)
+  .fill(0)
+  .map((_, idx) => ({
+    description: `Description ${idx}`,
+    id: idx,
+    title: `Entity ${idx}`
+  }));
+
+const CardActions = (): JSX.Element => {
+  return (
+    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
+      <Delete fontSize="small" />
+    </IconButton>
+  );
+};
+
+const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable variant="grid">
+        {data.map(({ title, description }) => (
+          <DataTable.Item
+            Actions={<CardActions />}
+            description={description}
+            hasActions={hasActions}
+            hasCardAction={hasCardAction}
+            key={title}
+            title={title}
+          />
+        ))}
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableEmpty = (canCreate = false): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable isEmpty variant="grid">
+        <DataTable.EmptyState
+          canCreate={canCreate}
+          labels={{
+            actions: {
+              create: 'Create'
+            },
+            title: 'Welcome'
+          }}
+          onCreate={cy.stub()}
+        />
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableListing = (): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <Box sx={{ height: '100vh' }}>
+        <DataTable variant="listing">
+          <DataTable.Listing
+            columns={[
+              {
+                getFormattedString: (row) => row.title,
+                id: 'title',
+                label: 'Title',
+                type: ColumnType.string
+              },
+              {
+                getFormattedString: (row) => row.description,
+                id: 'description',
+                label: 'Description',
+                type: ColumnType.string
+              }
+            ]}
+            rows={data}
+          />
+        </DataTable>
+      </Box>
+    )
+  });
+};
+
+describe('DataTable: Grid', () => {
+  it('displays items with title and description only', () => {
+    initializeDataTableGrid({
+      hasActions: false,
+      hasCardAction: false
+    });
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with actions', () => {
+    initializeDataTableGrid({
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('Delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action only', () => {
+    initializeDataTableGrid({
+      hasActions: false,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action and bottom actions', () => {
+    initializeDataTableGrid({
+      hasActions: true,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+    cy.findAllByLabelText('Delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Empty', () => {
+  it('displays the title', () => {
+    initializeDataTableEmpty();
+
+    cy.contains('Welcome').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title and the action button', () => {
+    initializeDataTableEmpty(true);
+
+    cy.contains('Welcome').should('be.visible');
+    cy.contains('Create').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Listing', () => {
+  it('displays the listing', () => {
+    initializeDataTableListing();
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '@mui/material';
+
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from './index';
+
+const meta: Meta<typeof DataTable> = {
+  component: DataTable
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        {[...Array(5)].map((_, i) => (
+          <DataTable.Item
+            description={`Item description ${i}`}
+            key={`k-${i}`} // eslint-disable-line react/no-array-index-key
+            title={`Item ${i}`}
+          />
+        ))}
+      </>
+    )
+  }
+};
+
+export const AsEmptyState: Story = {
+  args: {
+    children: (
+      <DataTable.EmptyState
+        labels={{
+          actions: {
+            create: 'Create item'
+          },
+          title: 'No items found'
+        }}
+      />
+    ),
+    isEmpty: true
+  }
+};
+
+export const withFixedHeightContainer: Story = {
+  args: { ...Default.args },
+  render: (args) => (
+    <div style={{ height: '400px' }}>
+      <DataTable {...args} />
+    </div>
+  )
+};
+
+const ListingTemplate = (args): JSX.Element => (
+  <Box sx={{ height: '80vh' }}>
+    <DataTable {...args} />
+  </Box>
+);
+
+export const listing: Story = {
+  args: {
+    children: (
+      <DataTable.Listing
+        columns={[
+          {
+            getFormattedString: (row) => row.title,
+            id: 'title',
+            label: 'Title',
+            type: ColumnType.string
+          },
+          {
+            getFormattedString: (row) => row.description,
+            id: 'description',
+            label: 'Description',
+            type: ColumnType.string
+          }
+        ]}
+        rows={[...Array(5)].map((_, i) => ({
+          description: `Item description ${i}`,
+          id: i,
+          title: `Item ${i}`
+        }))}
+      />
+    ),
+    variant: 'listing'
+  },
+  render: ListingTemplate
+};

package/src/components/DataTable/DataTable.styles.ts

@@ -0,0 +1,30 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  dataTable: {
+    '&[data-variant="grid"]': {
+      '& > *': {
+        width: 'auto'
+      },
+      display: 'grid',
+      gridGap: theme.spacing(2.5),
+      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
+    },
+    '&[data-variant="listing"]': {
+      height: '100%'
+    },
+    '&[data-variant][data-is-empty="true"]': {
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%'
+    },
+    display: 'flex'
+  },
+  dataTableScrollContainer: {
+    // FIXME the global -webkit-scrollbar styles are not optimal for this component in grid variant
+    height: '100%',
+    overflowY: 'auto'
+  }
+}));
+
+export { useStyles };

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './DataTable.styles';
+
+type DataTableProps = {
+  children?: ReactNode | Array<ReactNode>;
+  isEmpty?: boolean;
+  variant: 'grid' | 'listing';
+};
+
+/** *
+ * @description DataTable component is used to display a list of items.
+ * It supports grids (as cards) and tables (as rows) with filtering, pagination, sorting, and other features
+ */
+const DataTable = ({
+  children,
+  variant = 'grid',
+  isEmpty = false
+}: DataTableProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.dataTableScrollContainer}>
+      <div
+        className={classes.dataTable}
+        data-is-empty={isEmpty}
+        data-variant={variant}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export { DataTable };

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DataTableEmptyState } from './DataTableEmptyState';
+
+const meta: Meta<typeof DataTableEmptyState> = {
+  component: DataTableEmptyState
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTableEmptyState>;
+
+export const Default: Story = {
+  args: {
+    labels: {
+      actions: {
+        create: 'Create item'
+      },
+      title: 'No items found'
+    }
+  }
+};

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  actions: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  dataTableEmptyState: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(4),
+
+    h2: {
+      color: theme.palette.text.primary,
+      font: 'normal normal 600 34px/36px Roboto',
+      margin: '0'
+    },
+    height: '100%',
+    justifyContent: 'center',
+    minHeight: '30vh',
+    width: '100%'
+  }
+}));
+
+export { useStyles };

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Add as AddIcon } from '@mui/icons-material';
+import { Typography as MuiTypography } from '@mui/material';
+
+import { Button } from '../../Button';
+
+import { useStyles } from './DataTableEmptyState.styles';
+
+type ListEmptyStateProps = {
+  canCreate?: boolean;
+  labels: {
+    actions?: {
+      create: string;
+    };
+    title: string;
+  };
+  onCreate?: () => void;
+};
+
+const DataTableEmptyState = ({
+  labels,
+  onCreate,
+  canCreate = true
+}: ListEmptyStateProps): ReactElement => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classes.dataTableEmptyState}
+      data-testid="data-table-empty-state"
+    >
+      <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
+      <div className={classes.actions}>
+        {canCreate && (
+          <Button
+            aria-label="create"
+            icon={<AddIcon />}
+            iconVariant="start"
+            onClick={() => onCreate?.()}
+          >
+            {t(labels.actions?.create || '')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { DataTableEmptyState };

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DataTableItem } from './DataTableItem';
+
+const meta: Meta<typeof DataTableItem> = {
+  component: DataTableItem
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTableItem>;
+
+export const Default: Story = {
+  args: {
+    description: 'DataTable item description',
+    title: 'DataTable item'
+  }
+};
+
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+    hasActions: true,
+    hasCardAction: true
+  }
+};

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -0,0 +1,38 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  actions: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  dataTableItem: {
+    '& .MuiCardActionArea-root': {
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      justifyContent: 'flex-start'
+    },
+    '& .MuiCardActions-root': {
+      '& > span': {
+        display: 'flex',
+        gap: theme.spacing(1)
+      },
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '186px',
+    justifyContent: 'space-between',
+    p: {
+      color: theme.palette.text.secondary,
+      letterSpacing: '0',
+      margin: '0'
+    }
+  }
+}));
+
+export { useStyles };

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
+
+import {
+  Card as MuiCard,
+  CardActionArea as MuiCardActionArea,
+  CardActions as MuiCardActions,
+  CardContent as MuiCardContent,
+  Typography as MuiTypography
+} from '@mui/material';
+
+import { useStyles } from './DataTableItem.styles';
+
+export interface DataTableItemProps {
+  Actions?: JSX.Element;
+  description?: string;
+  hasActions?: boolean;
+  hasCardAction?: boolean;
+  onClick?: () => void;
+  title: string;
+}
+
+const DataTableItem = forwardRef(
+  (
+    {
+      title,
+      description,
+      hasCardAction = false,
+      hasActions = false,
+      onClick,
+      Actions
+    }: DataTableItemProps,
+    ref
+  ): ReactElement => {
+    const { classes } = useStyles();
+
+    const ActionArea = useMemo(
+      () => (hasCardAction ? MuiCardActionArea : React.Fragment),
+      [hasCardAction]
+    );
+
+    return (
+      <MuiCard
+        className={classes.dataTableItem}
+        data-item-title={title}
+        ref={ref as RefObject<HTMLDivElement>}
+        variant="outlined"
+      >
+        <ActionArea aria-label="view" onClick={() => onClick?.()}>
+          <MuiCardContent>
+            <MuiTypography fontWeight={500} variant="h5">
+              {title}
+            </MuiTypography>
+            {description && <MuiTypography>{description}</MuiTypography>}
+          </MuiCardContent>
+        </ActionArea>
+        {hasActions && (
+          <MuiCardActions>
+            <span />
+            <span>{Actions}</span>
+          </MuiCardActions>
+        )}
+      </MuiCard>
+    );
+  }
+);
+
+export { DataTableItem };

package/src/components/DataTable/Item/DataTableItemSkeleton.tsx

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+import { LoadingSkeleton } from '../../..';
+
+import { useStyles } from './DataTableItem.styles';
+
+const DataTableItemSkeleton = (): ReactElement => {
+  const { classes } = useStyles();
+
+  return <LoadingSkeleton className={classes.dataTableItem} />;
+};
+
+export { DataTableItemSkeleton };

package/src/components/DataTable/index.ts

@@ -0,0 +1,12 @@
+import { DataTable as DataTableRoot } from './DataTable';
+import { DataTableItem } from './Item/DataTableItem';
+import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
+import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
+import { DataListing } from './DataListing';
+
+export const DataTable = Object.assign(DataTableRoot, {
+  EmptyState: DataTableEmptyState,
+  Item: DataTableItem,
+  ItemSkeleton: DataTableItemSkeleton,
+  Listing: DataListing
+});