@centreon/ui 24.11.14 → 24.11.21

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/CrudPage/Actions/Actions.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useActionsStyles = makeStyles()((theme) => ({
+  search: {
+    maxWidth: theme.spacing(50)
+  },
+  clearButton: {
+    alignSelf: 'flex-start'
+  },
+  tooltipFilters: {
+    padding: theme.spacing(2, 3),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/CrudPage/Actions/Actions.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@mui/material';
+import AddButton from './AddButton';
+import Search from './Search';
+
+interface Props {
+  labels: {
+    search: string;
+    add: string;
+  };
+  filters: JSX.Element;
+}
+
+const Actions = ({ labels, filters }: Props): JSX.Element => {
+  return (
+    <Box
+      sx={{ display: 'grid', gridTemplateColumns: 'min-content auto', gap: 2 }}
+    >
+      <AddButton label={labels.add} />
+      <Search label={labels.search} filters={filters} />
+    </Box>
+  );
+};
+
+export default Actions;

package/src/components/CrudPage/Actions/AddButton.tsx

@@ -0,0 +1,23 @@
+import { Add } from '@mui/icons-material';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+import { Button } from '../../Button';
+import { openFormModalAtom } from '../atoms';
+
+interface Props {
+  label: string;
+}
+
+const AddButton = ({ label }: Props): JSX.Element => {
+  const setOpenFormModal = useSetAtom(openFormModalAtom);
+
+  const add = useCallback(() => setOpenFormModal('add'), []);
+
+  return (
+    <Button size="small" icon={<Add />} iconVariant="start" onClick={add}>
+      {label}
+    </Button>
+  );
+};
+
+export default AddButton;

package/src/components/CrudPage/Actions/Filters.tsx

@@ -0,0 +1,25 @@
+import { Tune } from '@mui/icons-material';
+import { isValidElement } from 'react';
+import PopoverMenu from '../../../PopoverMenu';
+import { useActionsStyles } from './Actions.styles';
+
+interface Props {
+  label: string;
+  filters: JSX.Element;
+}
+
+const Filters: React.FC<Props> = ({ label, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
+  return (
+    <PopoverMenu
+      title={label}
+      icon={<Tune />}
+      tooltipClassName={classes.tooltipFilters}
+    >
+      {isValidElement(filters) ? filters : <div />}
+    </PopoverMenu>
+  );
+};
+
+export default Filters;

package/src/components/CrudPage/Actions/Search.tsx

@@ -0,0 +1,31 @@
+import { SearchField } from '@centreon/ui';
+import { useActionsStyles } from './Actions.styles';
+import Filters from './Filters';
+import { useSearch } from './useSearch';
+
+interface Props {
+  label: string;
+  filters: JSX.Element;
+}
+
+const Search = ({ label, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
+  const { change } = useSearch();
+
+  return (
+    <SearchField
+      className={classes.search}
+      debounced
+      fullWidth
+      dataTestId={label}
+      placeholder={label}
+      onChange={change}
+      InputProps={{
+        endAdornment: <Filters label="filters" filters={filters} />
+      }}
+    />
+  );
+};
+
+export default Search;

package/src/components/CrudPage/Actions/useSearch.tsx

@@ -0,0 +1,24 @@
+import { useAtom } from 'jotai';
+import { ChangeEvent, useCallback, useRef } from 'react';
+import { searchAtom } from '../atoms';
+
+interface UseSearchState {
+  search: string;
+  change: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const useSearch = (): UseSearchState => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [search, setSearch] = useAtom(searchAtom);
+
+  const change = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => setSearch(event.target.value), 500);
+  }, []);
+
+  return { search, change };
+};

package/src/components/CrudPage/Columns/Actions.tsx

@@ -0,0 +1,88 @@
+import { EditOutlined } from '@mui/icons-material';
+import DeleteOutline from '@mui/icons-material/DeleteOutline';
+import { Box } from '@mui/material';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { isNil } from 'ramda';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../Button';
+import {
+  canDeleteSubItemsAtom,
+  itemToDeleteAtom,
+  openFormModalAtom
+} from '../atoms';
+
+interface Props<TData> {
+  row: TData & {
+    internalListingParentId?: number;
+    internalListingParentRow: TData;
+  };
+}
+
+const labelDelete = 'Delete';
+const labelUpdate = 'Update';
+
+const Actions = <TData extends { id: number; name: string }>({
+  row
+}: Props<TData>): JSX.Element => {
+  const { t } = useTranslation();
+  const canDeleteSubItems = useAtomValue(canDeleteSubItemsAtom);
+  const setItemToDelete = useSetAtom(itemToDeleteAtom);
+  const setOpenFormModal = useSetAtom(openFormModalAtom);
+
+  const askBeforeDelete = (): void => {
+    setItemToDelete({
+      id: row.id,
+      name: row.name,
+      parent: isNil(row.internalListingParentRow)
+        ? undefined
+        : {
+            id: row.internalListingParentRow.id,
+            name: row.internalListingParentRow.name
+          }
+    });
+  };
+
+  const updateRow = useCallback(() => setOpenFormModal(row.id), [row.id]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 1,
+        width: '100%',
+        justifyContent: 'flex-end'
+      }}
+    >
+      {isNil(row.internalListingParentRow) && (
+        <IconButton
+          size="small"
+          icon={<EditOutlined fontSize="small" color="primary" />}
+          onClick={updateRow}
+          title={t(labelUpdate)}
+          data-testid={
+            row.internalListingParentRow
+              ? `edit-${row.internalListingParentRow.id}-${row.id}`
+              : `edit-${row.id}`
+          }
+        />
+      )}
+      {(canDeleteSubItems || isNil(row.internalListingParentRow)) && (
+        <IconButton
+          size="small"
+          icon={<DeleteOutline fontSize="small" color="error" />}
+          onClick={askBeforeDelete}
+          title={t(labelDelete)}
+          data-testid={
+            row.internalListingParentRow
+              ? `delete-${row.internalListingParentRow.id}-${row.id}`
+              : `delete-${row.id}`
+          }
+        />
+      )}
+    </Box>
+  );
+};
+
+export default Actions;