@centreon/ui 24.9.6 → 24.10.0

package/src/components/CopyCommand/CopyCommand.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CopyCommand from './CopyCommand';
+
+const meta: Meta<typeof CopyCommand> = {
+  component: CopyCommand
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyCommand>;
+
+export const Default: Story = {
+  args: {
+    text: 'key:\n    with:\n        input: "heyyy"',
+    language: 'yaml'
+  }
+};
+
+export const OneLine: Story = {
+  args: {
+    text: 'echo "hello" | grep "hel"',
+    language: 'bash'
+  }
+};
+
+export const WithCopyCommandIcon: Story = {
+  args: {
+    text: `# a simple command
+echo "hello" | grep "hel"`,
+    language: 'bash',
+    commandToCopy: 'echo "hello" | grep "hel"'
+  }
+};
+
+export const UsingJson: Story = {
+  args: {
+    text: `{
+  "number": 1,
+  "boolean": true,
+  "array": [
+    {
+      "string": "text"
+    }
+  ]
+}`,
+    language: 'json'
+  }
+};
+
+export const UsingPhp: Story = {
+  args: {
+    text: "<?php echo '<p>Hello World</p>'; ?>",
+    language: 'php'
+  }
+};

package/src/components/CopyCommand/CopyCommand.styles.tsx

@@ -0,0 +1,93 @@
+import { ThemeMode } from '@centreon/ui-context';
+import { Theme } from '@mui/material';
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+const isDarkMode = (theme: Theme): boolean => {
+  return equals(theme.palette.mode, ThemeMode.dark);
+};
+
+export const useCopyCommandStyle = makeStyles()((theme) => ({
+  code: {
+    background: theme.palette.background.default,
+    padding: theme.spacing(1.5),
+    borderRadius: theme.shape.borderRadius
+  },
+  codeContainer: {
+    position: 'relative'
+  },
+  languageChip: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+    background: theme.palette.background.listingHeader,
+    color: theme.palette.common.white,
+    padding: `0px ${theme.spacing(0.5)}`,
+    fontSize: theme.typography.body2.fontSize
+  },
+  copyButton: {
+    position: 'absolute',
+    top: theme.spacing(0.5),
+    right: theme.spacing(6),
+    opacity: 0.8,
+    '&:hover': {
+      opacity: 1
+    }
+  },
+  highlight: {
+    '.hljs': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
+    },
+    '.hljs-doctag, .hljs-keyword, .hljs-meta, .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_':
+      {
+        color: isDarkMode(theme) ? '#ff7b72' : '#d73a49'
+      },
+    '.hljs-title, .hljs-title.class,_ .hljs-title.class_.inherited,__ .hljs-title.function_':
+      {
+        color: isDarkMode(theme) ? '#d2a8ff' : '#6f42c1'
+      },
+    '.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id':
+      {
+        color: isDarkMode(theme) ? '#79c0ff' : '#005cc5'
+      },
+    '.hljs-regexp, .hljs-string, .hljs-meta, .hljs-string': {
+      color: isDarkMode(theme) ? '#a5d6ff' : '#032f62'
+    },
+    '.hljs-built_in, .hljs-symbol': {
+      color: isDarkMode(theme) ? '#ffa657' : '#e36209'
+    },
+    '.hljs-code, .hljs-comment, .hljs-formula': {
+      color: isDarkMode(theme) ? '#8b949e' : '#6a737d'
+    },
+    '.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo': {
+      color: isDarkMode(theme) ? '#7ee787' : '#22863a'
+    },
+    '.hljs-subst': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
+    },
+    '.hljs-section': {
+      color: isDarkMode(theme) ? '#1f6feb' : '#005cc5',
+      fontWeight: theme.typography.fontWeightBold
+    },
+    '.hljs-bullet': {
+      color: isDarkMode(theme) ? '#f2cc60' : '#735c0f'
+    },
+    '.hljs-emphasis': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e',
+      fontStyle: 'italic'
+    },
+    '.hljs-strong': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e',
+      fontWeight: theme.typography.fontWeightBold
+    },
+    '.hljs-addition': {
+      color: isDarkMode(theme) ? '#aff5b4' : '#22863a'
+    },
+    '.hljs-deletion': {
+      color: isDarkMode(theme) ? '#ffdcd7' : '#b31d28'
+    },
+    '.hljs-char.escape_, .hljs-link, .hljs-params, .hljs-property, .hljs-punctuation, .hljs-tag':
+      {}
+  }
+}));

package/src/components/CopyCommand/CopyCommand.tsx

@@ -0,0 +1,80 @@
+import hljs from 'highlight.js/lib/core';
+
+import bash from 'highlight.js/lib/languages/bash';
+import json from 'highlight.js/lib/languages/json';
+import php from 'highlight.js/lib/languages/php';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import parse from 'html-react-parser';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from '../../utils';
+import { IconButton } from '../Button';
+import { useCopyCommandStyle } from './CopyCommand.styles';
+import {
+  labelCommandCopied,
+  labelFailedToCopyCommand
+} from './translatedLabels';
+
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', bash);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('php', php);
+
+hljs.addPlugin({
+  'after:highlight': (result) => {
+    const leadingSpaces = result.value.match(/\n\s+/g);
+
+    leadingSpaces?.forEach((leadingSpace) => {
+      const sanitizedLeadingSpace = leadingSpace.replace(/\s/g, ' ');
+      result.value = result.value.replace(
+        leadingSpace,
+        `\n${sanitizedLeadingSpace}`
+      );
+    });
+  }
+});
+
+export interface CopyCommandProps {
+  text: string;
+  commandToCopy?: string;
+  language: string;
+}
+
+const CopyCommand = ({ text, commandToCopy, language }: CopyCommandProps) => {
+  const { t } = useTranslation();
+  const { classes, cx } = useCopyCommandStyle();
+
+  const { copy } = useCopyToClipboard({
+    successMessage: t(labelCommandCopied),
+    errorMessage: t(labelFailedToCopyCommand)
+  });
+
+  const copyCommand = (): Promise<void> | undefined | '' =>
+    commandToCopy && copy(commandToCopy);
+
+  const highlightedText = hljs.highlight(text, { language }).value;
+
+  return (
+    <div className={classes.codeContainer}>
+      <pre className={cx(classes.code, classes.highlight)}>
+        {parse(`${highlightedText}`)}
+      </pre>
+      <div className={classes.languageChip}>{language}</div>
+      {commandToCopy && (
+        <IconButton
+          data-testid="Copy command"
+          variant="ghost"
+          className={classes.copyButton}
+          icon={<ContentCopy fontSize="small" />}
+          size="small"
+          onClick={copyCommand}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CopyCommand;

package/src/components/CopyCommand/translatedLabels.ts

@@ -0,0 +1,2 @@
+export const labelCommandCopied = 'Command copied';
+export const labelFailedToCopyCommand = 'Failed to copy command';

package/src/components/DataTable/DataListing.tsx

@@ -0,0 +1,6 @@
+import { Listing, ListingProps } from '../..';
+import { RowId } from '../../Listing/models';
+
+export const DataListing = <TRow extends { id: RowId }>(
+  props: ListingProps<TRow>
+): JSX.Element => <Listing<TRow> {...props} />;

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

@@ -0,0 +1,174 @@
+import Delete from '@mui/icons-material/Delete';
+import { Box } from '@mui/material';
+
+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,94 @@
+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-${
+              // biome-ignore lint/suspicious/noArrayIndexKey:
+              i
+            }`}
+            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 { 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
+  }
+};