@centreon/ui 24.9.2 → 24.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.9.2",
+  "version": "24.9.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -134,6 +134,7 @@
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.12",
+    "highlight.js": "^11.10.0",
     "humanize-duration": "^3.32.1",
     "lexical": "^0.17.0",
     "notistack": "^3.0.1",

package/src/Form/Inputs/Text.tsx

@@ -36,15 +36,21 @@ const Text = ({
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const { values, setFieldValue, touched, errors, handleBlur } =
-    useFormikContext<FormikValues>();
+  const {
+    values,
+    setFieldValue,
+    touched,
+    errors,
+    handleBlur,
+    setFieldTouched
+  } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
 
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value });
+      change({ setFieldValue, value, setFieldTouched });
 
       return;
     }
@@ -111,7 +117,7 @@ const Text = ({
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}
-        dataTestId={dataTestId || ''}
+        dataTestId={dataTestId || label}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
@@ -123,6 +129,11 @@ const Text = ({
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
+        inputProps={{
+          'data-testid': dataTestId || label,
+          'aria-label': label,
+          min: text?.min
+        }}
       />
     ),
     memoProps: [

package/src/Form/Inputs/models.ts

@@ -38,7 +38,7 @@ export interface InputProps {
     creatable?: boolean;
     options: Array<SelectEntry>;
   };
-  change?: ({ setFieldValue, value }) => void;
+  change?: ({ setFieldValue, value, setFieldTouched }) => void;
   checkbox?: {
     direction?: 'horizontal' | 'vertical';
     labelPlacement?: LabelPlacement;
@@ -102,6 +102,7 @@ export interface InputProps {
     multilineRows?: number;
     placeholder?: string;
     type?: string;
+    min?: number;
   };
   type: InputType;
 }

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,9 +6,9 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType
+  type PopperPlacementType
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
+import type { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -80,7 +80,7 @@ const PopoverMenu = ({
   };
 
   useEffect(() => {
-    if (!canOpen) {
+    if (!canOpen && isOpen) {
       close();
     }
   }, [canOpen]);

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

@@ -0,0 +1,155 @@
+import { ThemeMode, userAtom } from '@centreon/ui-context';
+import { mount } from 'cypress/react18';
+import { Provider, createStore } from 'jotai';
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import ThemeProvider from '../../ThemeProvider';
+import CopyCommand, { CopyCommandProps } from './CopyCommand';
+
+const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
+  const store = createStore();
+  store.set(userAtom, { themeMode: props.theme || ThemeMode.light });
+  mount(
+    <Provider store={store}>
+      <ThemeProvider>
+        <SnackbarProvider>
+          <CopyCommand {...props} />
+        </SnackbarProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+describe('CopyCommand', () => {
+  it('displays bash code when props are set', () => {
+    initialize({
+      text: `# a simple command
+echo "hello" | grep "hel"`,
+      language: 'bash',
+      commandToCopy: 'echo "hello" | grep "hel"'
+    });
+
+    cy.contains('# a simple command').should('be.visible');
+    cy.contains('echo').should('be.visible');
+    cy.contains('bash').should('be.visible');
+    cy.findByTestId('Copy command').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays yaml code when props are set', () => {
+    initialize({
+      text: `key:
+  with:
+    input: "input"`,
+      language: 'yaml',
+      commandToCopy: 'echo "hello" | grep "hel"'
+    });
+
+    cy.contains('key').should('be.visible');
+    cy.contains('"input"').should('be.visible');
+    cy.contains('yaml').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays php code when props are set', () => {
+    initialize({
+      text: `<?php
+echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
+?>`,
+      language: 'php',
+      commandToCopy: 'echo "hello" | grep "hel"'
+    });
+
+    cy.contains('echo').should('be.visible');
+    cy.contains('"name"').should('be.visible');
+    cy.contains('php').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays json code when props are set', () => {
+    initialize({
+      text: `{
+  "number": 1,
+  "boolean": true,
+  "array": [
+    {
+      "string": "text"
+    }
+  ]
+}`,
+      language: 'json',
+      commandToCopy: 'echo "hello" | grep "hel"'
+    });
+
+    cy.contains('"number"').should('be.visible');
+    cy.contains('true').should('be.visible');
+    cy.contains('json').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the copy button when the corresponding prop is not passed', () => {
+    initialize({
+      text: `{
+  "number": 1,
+  "boolean": true,
+  "array": [
+    {
+      "string": "text"
+    }
+  ]
+}`,
+      language: 'json'
+    });
+
+    cy.findByTestId('Copy command').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the highlighted code in dark mode when the theme is changed', () => {
+    initialize({
+      text: `{
+  "number": 1,
+  "boolean": true,
+  "array": [
+    {
+      "string": "text"
+    }
+  ]
+}`,
+      language: 'json',
+      theme: ThemeMode.dark
+    });
+
+    cy.get('.hljs-keyword').should('have.css', 'color', 'rgb(255, 123, 114)');
+
+    cy.makeSnapshot();
+  });
+
+  it('copies the command to the clipboard when the button is clicked', () => {
+    initialize({
+      text: `# a simple command
+echo "hello" | grep "hel"`,
+      language: 'bash',
+      commandToCopy: 'echo "hello" | grep "hel"'
+    });
+
+    cy.window()
+      .its('navigator.clipboard')
+      .then((clipboard) => {
+        cy.spy(clipboard, 'writeText').as('writeText');
+      });
+
+    cy.findByTestId('Copy command').click();
+
+    cy.get('@writeText').should(
+      'have.been.calledOnceWith',
+      'echo "hello" | grep "hel"'
+    );
+
+    cy.makeSnapshot();
+  });
+});

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/index.ts

@@ -13,3 +13,4 @@ export * from './CollapsibleItem';
 export * from './Inputs';
 export { default as Zoom } from './Zoom/Zoom';
 export * from './Tabs';
+export { default as CopyCommand } from './CopyCommand/CopyCommand';

package/src/Form/storiesData.tsx-E

@@ -1,481 +0,0 @@
-import { FormikValues, useFormikContext } from 'formik';
-import { equals, prop } from 'ramda';
-
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import MailIcon from '@mui/icons-material/MailOutline';
-import { Typography } from '@mui/material';
-
-import { SelectEntry } from '../InputField/Select';
-import { Listing } from '../api/models';
-
-import {
-  Group,
-  InputProps,
-  InputPropsWithoutGroup,
-  InputType
-} from './Inputs/models';
-import { object } from ';
-
-export interface BasicForm {
-  active: boolean;
-  activeSortableFieldsTable: boolean;
-  animals: Array<SelectEntry>;
-  anotherText: string;
-  certificate: string;
-  class: { id: number; name: string } | null;
-  custom: string;
-  email: string;
-  group: { id: number; name: string } | null;
-  inviteUsers: Array<{
-    role: SelectEntry;
-    user: string;
-  }>;
-  inviteUsers2: Array<string>;
-  isForced: boolean;
-  language: string;
-  name: string;
-  password: string;
-  roleMapping: Array<{
-    role: SelectEntry;
-    value: string;
-  }>;
-  scopes: Array<string>;
-  sports: Array<SelectEntry>;
-}
-
-const selectEntryValidationSchema = object().shape({
-  id: number().required('Required'),
-  name: string().required('Required')
-});
-
-export const basicFormValidationSchema = object().shape({
-  active: boolean().required('Active is required'),
-  activeSortableFieldsTable: boolean().required(
-    'Active Sortable FieldsTable is required'
-  ),
-  animals: array().of(selectEntryValidationSchema.required('Required')),
-  anotherText: string(),
-  certificate: string(),
-  class: selectEntryValidationSchema.nullable().required('Required'),
-  custom: string().required('Custom is required'),
-  email: string().email('Invalid email').required('Email is required'),
-  group: selectEntryValidationSchema.nullable().required('Required'),
-  inviteUsers: array().of(
-    object({
-      email: string()
-        .email('Invalid user email')
-        .required('Email is required'),
-      role: selectEntryValidationSchema
-    })
-  ),
-  inviteUsers2: array().of(string().email('Invalid user email')),
-  isForced: boolean().required('Is forced is required'),
-  language: string().required('Language is required'),
-  name: string().required('Name is required'),
-  password: string().required('Password is required'),
-  roleMapping: array().of(
-    object({
-      role: selectEntryValidationSchema,
-      value: string().required('Role value is required')
-    })
-  ),
-  scopes: array().of(
-    string().min(3, '3 characters min').required('Required')
-  ),
-  sports: Yup.array().of(selectEntryValidationSchema.required('Required'))
-});
-
-const roleEntries: Array<SelectEntry> = [
-  {
-    id: 1,
-    name: 'Administrator'
-  },
-  {
-    id: 2,
-    name: 'User'
-  },
-  {
-    id: 3,
-    name: 'Editor'
-  }
-];
-
-export const basicFormInitialValues = {
-  active: false,
-  activeSortableFieldsTable: false,
-  animals: [],
-  certificate: '',
-  class: { id: 0, name: 'Class 0' },
-  custom: '',
-  email: '',
-  group: null,
-  inviteUsers: [],
-  inviteUsers2: [],
-  isForced: false,
-  language: 'French',
-  name: '',
-  notifications: {
-    channels: { Icon: MailIcon, checked: true, label: 'mail' },
-    hostevents: ['ok', 'warning'],
-    includeServices: { checked: true, label: 'Include services for this host' }
-  },
-  password: '',
-  roleMapping: [
-    {
-      priority: 0,
-      role: roleEntries[0],
-      value: 'example'
-    },
-    {
-      priority: 1,
-      role: roleEntries[1],
-      value: 'example2'
-    },
-    {
-      priority: 2,
-      role: roleEntries[2],
-      value: 'example3'
-    }
-  ],
-  scopes: [],
-  sports: []
-};
-
-export const classOptions = [...Array(10).keys()].map((idx) => ({
-  id: idx,
-  name: `Class ${idx}`
-}));
-
-export const sportOptions = [...Array(10).keys()].map((idx) => ({
-  id: idx,
-  name: `Sport ${idx}`
-}));
-
-export const basicFormGroups: Array<Group> = [
-  {
-    name: 'First group',
-    order: 1
-  },
-  {
-    EndIcon: () => <HelpOutlineIcon />,
-    TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
-    name: 'Second group',
-    order: 2
-  },
-  {
-    name: 'Third group',
-    order: 3
-  }
-];
-
-export const basicFormInputs: Array<InputProps> = [
-  {
-    fieldName: 'name',
-    group: 'First group',
-    label: 'Name',
-    type: InputType.Text
-  },
-  {
-    fieldName: 'email',
-    group: 'First group',
-    label: 'Email',
-    text: {
-      endAdornment: <MailIcon />,
-      placeholder: 'Your email here'
-    },
-    type: InputType.Text
-  },
-  {
-    fieldName: 'active',
-    group: 'Second group',
-    label: 'Active',
-    type: InputType.Switch
-  },
-  {
-    additionalLabel: 'This a very special label',
-    fieldName: 'password',
-    group: 'First group',
-    hideInput: (values) => values.active,
-    label: 'Password',
-    type: InputType.Password
-  },
-  {
-    fieldName: 'language',
-    group: 'First group',
-    label: 'Language',
-    radio: {
-      options: [
-        {
-          label: 'French',
-          value: 'French'
-        },
-        {
-          label: 'English',
-          value: 'English'
-        }
-      ]
-    },
-    type: InputType.Radio
-  },
-  {
-    additionalLabel: 'Notifications',
-    fieldName: '',
-    grid: {
-      alignItems: 'center',
-      columns: [
-        {
-          checkbox: {
-            direction: 'horizontal'
-          },
-          fieldName: 'notifications.channels',
-          label: 'channels',
-          type: InputType.Checkbox
-        },
-        {
-          fieldName: 'notifications.includeServices',
-          label: 'Iclude services',
-          type: InputType.Checkbox
-        },
-        {
-          checkbox: {
-            direction: 'horizontal',
-            labelPlacement: 'top',
-            options: ['ok', 'warning', 'critical', 'unknown']
-          },
-          fieldName: 'notifications.hostevents',
-          label: 'host events',
-          type: InputType.CheckboxGroup
-        }
-      ]
-    },
-    group: 'Third group',
-    label: 'Notifications',
-    type: InputType.Grid
-  },
-  {
-    fieldName: 'anotherText',
-    group: 'First group',
-    hideInput: ({ language }) => equals(language, 'French'),
-    label: 'Another Text input',
-    type: InputType.Text
-  },
-  {
-    fieldName: 'isForced',
-    group: 'First group',
-    label: 'Is Forced?',
-    radio: {
-      options: [
-        {
-          label: 'Is not forced',
-          value: false
-        },
-        {
-          label: 'Is forced',
-          value: true
-        }
-      ]
-    },
-    type: InputType.Radio
-  },
-  {
-    fieldName: '',
-    grid: {
-      columns: [
-        {
-          autocomplete: {
-            options: classOptions
-          },
-          fieldName: 'class',
-          label: 'Class (Single autocomplete)',
-          type: InputType.SingleAutocomplete
-        },
-        {
-          autocomplete: {
-            options: sportOptions
-          },
-          fieldName: 'sports',
-          label: 'Sports (Multi autocomplete)',
-          type: InputType.MultiAutocomplete
-        }
-      ]
-    },
-    group: 'First group',
-    label: 'autocompletes',
-    type: InputType.Grid
-  },
-  {
-    autocomplete: {
-      creatable: true,
-      options: []
-    },
-    fieldName: 'scopes',
-    group: 'First group',
-    label: 'Scopes (Multi autocomplete that allows value creation)',
-    type: InputType.MultiAutocomplete
-  },
-  {
-    fieldName: '',
-    grid: {
-      columns: [
-        {
-          connectedAutocomplete: {
-            additionalConditionParameters: [],
-            endpoint: 'endpoint'
-          },
-          fieldName: 'group',
-          label: 'Group (Single connected autocomplete)',
-          type: InputType.SingleConnectedAutocomplete
-        },
-        {
-          connectedAutocomplete: {
-            additionalConditionParameters: [],
-            endpoint: 'endpoint'
-          },
-          fieldName: 'animals',
-          label: 'Animals (Multi connected autocomplete)',
-          type: InputType.MultiConnectedAutocomplete
-        }
-      ],
-      gridTemplateColumns: '400px 1fr'
-    },
-    group: 'First group',
-    label: 'connected autocompletes',
-    type: InputType.Grid
-  },
-  {
-    custom: {
-      Component: ({ label }: InputPropsWithoutGroup): JSX.Element => (
-        <Typography>This is a {label} component</Typography>
-      )
-    },
-    fieldName: 'custom',
-    group: 'Second group',
-    label: 'Custom',
-    type: InputType.Custom
-  },
-  {
-    fieldName: 'inviteUsers',
-    fieldsTable: {
-      columns: [
-        {
-          fieldName: 'email',
-          label: 'Email',
-          required: true,
-          type: InputType.Text
-        },
-        {
-          autocomplete: {
-            creatable: false,
-            options: roleEntries
-          },
-          fieldName: 'role',
-          label: 'Role',
-          type: InputType.SingleAutocomplete
-        }
-      ],
-      defaultRowValue: {
-        email: 'example@test.fr',
-        role: null
-      },
-      deleteLabel: 'Delete'
-    },
-    group: 'First group',
-    label: 'inviteUsers',
-    type: InputType.FieldsTable
-  },
-  {
-    fieldName: 'inviteUsers2',
-    fieldsTable: {
-      columns: [
-        {
-          fieldName: 'email',
-          label: 'Email',
-          required: true,
-          type: InputType.Text
-        }
-      ],
-      defaultRowValue: 'example',
-      deleteLabel: 'Delete',
-      hasSingleValue: true
-    },
-    group: 'First group',
-    label: 'inviteUsers2',
-    type: InputType.FieldsTable
-  },
-  {
-    fieldName: 'activeSortableFieldsTable',
-    group: 'First group',
-    label: 'Active Sortable Fields Table',
-    type: InputType.Switch
-  },
-  {
-    fieldName: 'roleMapping',
-    fieldsTable: {
-      columns: [
-        {
-          fieldName: 'value',
-          label: 'RoleValue',
-          required: true,
-          type: InputType.Text
-        },
-        {
-          autocomplete: {
-            creatable: false,
-            options: roleEntries
-          },
-          fieldName: 'role',
-          label: 'RoleAcl',
-          type: InputType.SingleAutocomplete
-        }
-      ],
-      defaultRowValue: {
-        role: null,
-        value: ''
-      },
-      deleteLabel: 'Delete',
-      getSortable: (values: FormikValues): boolean =>
-        prop('activeSortableFieldsTable', values)
-    },
-    group: 'First group',
-    label: 'roleMapping',
-    type: InputType.FieldsTable
-  },
-  {
-    fieldName: 'certificate',
-    group: 'First group',
-    label: 'Certificate',
-    text: {
-      multilineRows: 4
-    },
-    type: InputType.Text
-  }
-];
-
-export const CustomButton = (): JSX.Element => {
-  const { dirty, isValid } = useFormikContext();
-
-  return (
-    <div>
-      <Typography>Has form changed? {JSON.stringify(dirty)}</Typography>
-      <Typography>Is valid? {JSON.stringify(isValid)}</Typography>
-    </div>
-  );
-};
-
-const buildEntities = (from): Array<SelectEntry> => {
-  return Array(10)
-    .fill(0)
-    .map((_, index) => ({
-      id: from + index,
-      name: `Entity ${from + index}`
-    }));
-};
-
-export const buildResult = (page): Listing<SelectEntry> => ({
-  meta: {
-    limit: 10,
-    page,
-    total: 40
-  },
-  result: buildEntities((page - 1) * 10)
-});