@centreon/ui 26.3.4 → 26.3.6

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import Avatar from './Avatar';
 import '../../ThemeProvider/tailwindcss.css';

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { type AvatarProps, Avatar as MUIAvatar } from '@mui/material';
 
-import { AvatarProps, Avatar as MUIAvatar } from '@mui/material';
+import type { ReactNode } from 'react';
 
 import { useAvatarStyles } from './Avatar.styles';
 

package/src/components/Button/Button.stories.tsx

@@ -1,8 +1,9 @@
 import '../../ThemeProvider/tailwindcss.css';
-import { Meta, StoryObj } from '@storybook/react';
 
 import { Add as AddIcon } from '@mui/icons-material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
@@ -44,16 +45,16 @@ export const small: Story = {
 export const smallWithIcon: Story = {
   args: {
     ...Default.args,
-    size: 'small',
     icon: <AddIcon />,
-    iconVariant: 'start'
+    iconVariant: 'start',
+    size: 'small'
   }
 };
 
 export const smallDanger: Story = {
   args: {
     ...Default.args,
-    size: 'small',
-    isDanger: true
+    isDanger: true,
+    size: 'small'
   }
 };

package/src/components/Button/Button.tsx

@@ -1,12 +1,12 @@
-import { ReactElement, ReactNode, useMemo } from 'react';
-
 import {
   Button as MuiButton,
-  ButtonProps as MuiButtonProps
+  type ButtonProps as MuiButtonProps
 } from '@mui/material';
 
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { DataTestAttributes } from '../../@types/data-attributes';
+import { type ReactElement, type ReactNode, useMemo } from 'react';
+
+import type { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import type { DataTestAttributes } from '../../@types/data-attributes';
 import { button } from './Button.module.css';
 
 const muiVariantMap: Record<
@@ -64,10 +64,10 @@ const Button = ({
       data-size={size}
       data-variant={variant}
       disabled={disabled}
+      onClick={(e) => onClick?.(e)}
       size={size}
       type={type}
       variant={muiVariantMap[variant]}
-      onClick={(e) => onClick?.(e)}
       {...MuiOverrideProps}
       {...attr}
     >

package/src/components/Button/Icon/IconButton.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Add as AddIcon } from '@mui/icons-material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { IconButton } from './IconButton';
 
 const meta: Meta<typeof IconButton> = {

package/src/components/Button/Icon/IconButton.tsx

@@ -1,13 +1,12 @@
-import { ReactElement, ReactNode, forwardRef } from 'react';
-
 import {
   IconButton as MuiIconButton,
-  IconButtonProps as MuiIconButtonProps
+  type IconButtonProps as MuiIconButtonProps
 } from '@mui/material';
 
-import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
-import { DataTestAttributes } from '../../../@types/data-attributes';
+import { forwardRef, type ReactElement, type ReactNode } from 'react';
 
+import type { AriaLabelingAttributes } from '../../../@types/aria-attributes';
+import type { DataTestAttributes } from '../../../@types/data-attributes';
 import { useStyles } from './IconButton.styles';
 
 const muiColorMap: Record<
@@ -48,13 +47,13 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
     return (
       <MuiIconButton
-        ref={ref}
         className={classes.iconButton}
         data-size={size}
         data-variant={variant}
         disabled={disabled}
-        size={size}
         onClick={(e) => onClick?.(e)}
+        ref={ref}
+        size={size}
         {...attr}
         // Mui overrides
         color={muiColorMap[variant]}

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

@@ -1,4 +1,4 @@
-import { CollapsibleItem, Props } from './CollapsibleItem';
+import { CollapsibleItem, type Props } from './CollapsibleItem';
 
 const title = 'Title';
 

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Checkbox, Typography } from '@mui/material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { CollapsibleItem } from './CollapsibleItem';
 
 const meta: Meta<typeof CollapsibleItem> = {

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -1,17 +1,16 @@
-import { ReactNode } from 'react';
-
-import { equals, type } from 'ramda';
-
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  AccordionSummaryProps,
+  type AccordionSummaryProps,
   Typography,
-  TypographyProps
+  type TypographyProps
 } from '@mui/material';
 
+import { equals, type } from 'ramda';
+import type { ReactNode } from 'react';
+
 import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
 
 export interface Props {
@@ -38,11 +37,11 @@ export const CollapsibleItem = ({
 
   return (
     <Accordion
-      disableGutters
       className={classes.accordion}
       data-compact={compact}
       data-testid={`${dataTestId}-accordion`}
       defaultExpanded={defaultExpanded}
+      disableGutters
     >
       <div className={classes.summaryContainer}>
         <div className={classes.customTitle}>{!isStringTitle && title}</div>

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

@@ -1,8 +1,10 @@
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import { Provider, createStore } from 'jotai';
+
+import { createStore, Provider } from 'jotai';
+
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
 import ThemeProvider from '../../ThemeProvider';
-import CopyCommand, { CopyCommandProps } from './CopyCommand';
+import CopyCommand, { type CopyCommandProps } from './CopyCommand';
 
 const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
   const store = createStore();
@@ -23,10 +25,10 @@ const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
 describe('CopyCommand', () => {
   it('displays bash code when props are set', () => {
     initialize({
-      text: `# a simple command
-echo "hello" | grep "hel"`,
+      commandToCopy: 'echo "hello" | grep "hel"',
       language: 'bash',
-      commandToCopy: 'echo "hello" | grep "hel"'
+      text: `# a simple command
+echo "hello" | grep "hel"`
     });
 
     cy.contains('# a simple command').should('be.visible');
@@ -39,11 +41,11 @@ echo "hello" | grep "hel"`,
 
   it('displays yaml code when props are set', () => {
     initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'yaml',
       text: `key:
   with:
-    input: "input"`,
-      language: 'yaml',
-      commandToCopy: 'echo "hello" | grep "hel"'
+    input: "input"`
     });
 
     cy.contains('key').should('be.visible');
@@ -55,11 +57,11 @@ echo "hello" | grep "hel"`,
 
   it('displays php code when props are set', () => {
     initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'php',
       text: `<?php
 echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
-?>`,
-      language: 'php',
-      commandToCopy: 'echo "hello" | grep "hel"'
+?>`
     });
 
     cy.contains('echo').should('be.visible');
@@ -71,6 +73,8 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
 
   it('displays json code when props are set', () => {
     initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'json',
       text: `{
   "number": 1,
   "boolean": true,
@@ -79,9 +83,7 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
       "string": "text"
     }
   ]
-}`,
-      language: 'json',
-      commandToCopy: 'echo "hello" | grep "hel"'
+}`
     });
 
     cy.contains('"number"').should('be.visible');
@@ -93,6 +95,7 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
 
   it('does not display the copy button when the corresponding prop is not passed', () => {
     initialize({
+      language: 'json',
       text: `{
   "number": 1,
   "boolean": true,
@@ -101,8 +104,7 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
       "string": "text"
     }
   ]
-}`,
-      language: 'json'
+}`
     });
 
     cy.findByTestId('Copy command').should('not.exist');
@@ -112,6 +114,7 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
 
   it('displays the highlighted code in dark mode when the theme is changed', () => {
     initialize({
+      language: 'json',
       text: `{
   "number": 1,
   "boolean": true,
@@ -121,7 +124,6 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
     }
   ]
 }`,
-      language: 'json',
       theme: ThemeMode.dark
     });
 
@@ -135,8 +137,8 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
       Cypress.automation('remote:debugger:protocol', {
         command: 'Browser.grantPermissions',
         params: {
-          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
-          origin: window.location.origin
+          origin: window.location.origin,
+          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite']
         }
       })
     );
@@ -147,10 +149,10 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
       });
 
     initialize({
-      text: `# a simple command
-echo "hello" | grep "hel"`,
+      commandToCopy: 'echo "hello" | grep "hel"',
       language: 'bash',
-      commandToCopy: 'echo "hello" | grep "hel"'
+      text: `# a simple command
+echo "hello" | grep "hel"`
     });
 
     cy.findByTestId('Copy command').click();

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

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

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

@@ -1,5 +1,7 @@
+import type { Theme } from '@mui/material';
+
 import { ThemeMode } from '@centreon/ui-context';
-import { Theme } from '@mui/material';
+
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -10,84 +12,84 @@ const isDarkMode = (theme: Theme): boolean => {
 export const useCopyCommandStyle = makeStyles()((theme) => ({
   code: {
     background: theme.palette.background.default,
-    padding: theme.spacing(1.5),
-    borderRadius: theme.shape.borderRadius
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1.5)
   },
   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
-    }
+    },
+    opacity: 0.8,
+    position: 'absolute',
+    right: theme.spacing(6),
+    top: theme.spacing(0.5)
   },
   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-addition': {
+      color: isDarkMode(theme) ? '#aff5b4' : '#22863a'
+    },
     '.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-bullet': {
+      color: isDarkMode(theme) ? '#f2cc60' : '#735c0f'
+    },
+    '.hljs-char.escape_, .hljs-link, .hljs-params, .hljs-property, .hljs-punctuation, .hljs-tag':
+      {},
     '.hljs-code, .hljs-comment, .hljs-formula': {
       color: isDarkMode(theme) ? '#8b949e' : '#6a737d'
     },
+    '.hljs-deletion': {
+      color: isDarkMode(theme) ? '#ffdcd7' : '#b31d28'
+    },
+    '.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-emphasis': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e',
+      fontStyle: 'italic'
+    },
     '.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo': {
       color: isDarkMode(theme) ? '#7ee787' : '#22863a'
     },
-    '.hljs-subst': {
-      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
+    '.hljs-regexp, .hljs-string, .hljs-meta, .hljs-string': {
+      color: isDarkMode(theme) ? '#a5d6ff' : '#032f62'
     },
     '.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-subst': {
+      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
     },
-    '.hljs-char.escape_, .hljs-link, .hljs-params, .hljs-property, .hljs-punctuation, .hljs-tag':
-      {}
+    '.hljs-title, .hljs-title.class,_ .hljs-title.class_.inherited,__ .hljs-title.function_':
+      {
+        color: isDarkMode(theme) ? '#d2a8ff' : '#6f42c1'
+      }
+  },
+  languageChip: {
+    background: theme.palette.background.listingHeader,
+    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+    color: theme.palette.common.white,
+    fontSize: theme.typography.body2.fontSize,
+    padding: `0px ${theme.spacing(0.5)}`,
+    position: 'absolute',
+    right: 0,
+    top: 0
   }
 }));

package/src/components/CopyCommand/CopyCommand.tsx

@@ -1,13 +1,13 @@
-import hljs from 'highlight.js/lib/core';
+import ContentCopy from '@mui/icons-material/ContentCopy';
 
+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';
@@ -48,8 +48,8 @@ const CopyCommand = ({ text, commandToCopy, language }: CopyCommandProps) => {
   const { classes, cx } = useCopyCommandStyle();
 
   const { copy } = useCopyToClipboard({
-    successMessage: t(labelCommandCopied),
-    errorMessage: t(labelFailedToCopyCommand)
+    errorMessage: t(labelFailedToCopyCommand),
+    successMessage: t(labelCommandCopied)
   });
 
   const copyCommand = (): Promise<void> | undefined | '' =>
@@ -65,12 +65,12 @@ const CopyCommand = ({ text, commandToCopy, language }: CopyCommandProps) => {
       <div className={classes.languageChip}>{language}</div>
       {commandToCopy && (
         <IconButton
-          data-testid="Copy command"
-          variant="ghost"
           className={classes.copyButton}
+          data-testid="Copy command"
           icon={<ContentCopy fontSize="small" />}
-          size="small"
           onClick={copyCommand}
+          size="small"
+          variant="ghost"
         />
       )}
     </div>

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

@@ -1,30 +1,30 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
-  search: {
-    maxWidth: theme.spacing(60),
-    minWidth: theme.spacing(20),
-    width: '100%'
-  },
-  filters: {
-    width: '100%',
-    paddingInline: theme.spacing(1),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
   actions: {
     display: 'grid',
-    gridTemplateColumns: 'min-content auto',
-    gap: theme.spacing(1)
+    gap: theme.spacing(1),
+    gridTemplateColumns: 'min-content auto'
   },
   clearButton: {
     alignSelf: 'flex-start'
   },
+  filters: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    paddingInline: theme.spacing(1),
+    width: '100%'
+  },
+  search: {
+    maxWidth: theme.spacing(60),
+    minWidth: theme.spacing(20),
+    width: '100%'
+  },
   tooltipFilters: {
-    padding: theme.spacing(2, 3),
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(2)
+    gap: theme.spacing(2),
+    padding: theme.spacing(2, 3)
   }
 }));

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

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+
 import { useActionsStyles } from './Actions.styles';
 import AddButton from './AddButton';
 import Search from './Search';
@@ -18,7 +19,7 @@ const Actions = ({ labels, filters }: Props): JSX.Element => {
     <Box className={classes.actions}>
       <AddButton label={labels.add} />
       <div className={classes.filters}>
-        <Search label={labels.search} filters={filters} />
+        <Search filters={filters} label={labels.search} />
       </div>
     </Box>
   );

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

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

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

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