@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,54 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

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

package/src/components/CrudPage/Actions/Actions.styles.ts

@@ -1,16 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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;