@centreon/ui 23.10.68 → 23.10.69

package/src/Home.stories.mdx

@@ -1,6 +1,8 @@
 import { Meta } from '@storybook/addon-docs'
-import { Typography, Link, Stack } from '@mui/material'
+import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
+import { MdxThemeProvider } from './StoryBookThemeProvider'
 
 <Meta title="Home" />
 
@@ -37,3 +39,84 @@ import { Typography, Link, Stack } from '@mui/material'
     <Typography>20.04</Typography>
   </Link>
 </Stack>
+<br />
+
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Add stories</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <ul>
+      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
+      <li>
+        <Typography>Add a title, the component and argTypes</Typography>
+        <Typography>Example: </Typography>
+
+        ```typescript
+        export default {
+          title: 'MyComponent',
+          Component: MyComponent,
+          argTypes: {
+            propA: { control: 'text' },
+            propB: { control: 'number' },
+          },
+        };
+        ```
+
+      </li>
+      <li>
+        <Typography>Create a playground for your component</Typography>
+
+        ```typescript
+          const Template: ComponentStory<typeof MyComponent> = (args) => (
+            <MyComponent {...args} />
+          );
+
+          export const Playground = Template.bind({});
+        ```
+
+      </li> 
+      <li>
+        <Typography>Then add your story</Typography>
+
+        ```typescript
+          export const basic = Template.bind({});
+          basic.args = { propA: 'test', propB: 0 };
+        ```
+
+      </li>
+    </ul>
+  </AccordionDetails>
+</Accordion>
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Run tests</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <Typography>There are two kinds of tests in Centreon UI.</Typography>
+    <Typography>Jest + RTL: Component testing</Typography>
+    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
+    <br />
+
+    <Typography>Run all the test (Jest + Storyshots)</Typography>
+    `pnpm build:storybook && pnpm t`
+    <br />
+
+    <Typography>Run storyshots following one or more story title</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
+    <br />
+
+    <Typography>Update snapshots</Typography>
+    `pnpm build:storybook && pnpm t -- -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
+  </AccordionDetails>
+</Accordion>

package/src/Image/Image.tsx

@@ -22,10 +22,6 @@ interface Props {
 
 const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
   (_, { width, height, variant }) => ({
-    fallbackContainer: {
-      height: '100%',
-      width: '100%'
-    },
     imageContent: {
       height,
       objectFit: variant,
@@ -45,20 +41,14 @@ const ImageContent = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ height, variant, width });
   const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
-
   if (!isImageLoaded) {
-    return (
-      <div className={classes.fallbackContainer} data-testid={alt}>
-        {fallback}
-      </div>
-    );
+    return fallback;
   }
 
   return (
     <img
       alt={alt}
       className={cx(classes.imageContent, className)}
-      data-testid={alt}
       src={imagePath}
     />
   );

package/src/Image/index.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentStory } from '@storybook/react';
 
 import LoadingSkeleton from '../LoadingSkeleton';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
-import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
+import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../../assets/not-authorized-template-background-light.svg';
 
 import Image, { ImageVariant } from './Image';
 

package/src/Image/index.test.tsx

@@ -1,12 +1,12 @@
 import { RenderResult, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'jotai';
 
-import { render } from '../../test/testRenderer';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import { render } from '../testRenderer';
+import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
 
 import Image from './Image';
 
-jest.mock('../../@assets/centreon-logo-one-line-light.svg');
+jest.mock('../../assets/centreon-logo-one-line-light.svg');
 
 const renderImage = (): RenderResult =>
   render(

package/src/InputField/Search/PersistentTooltip.tsx

@@ -10,8 +10,7 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5),
-    top: '40%'
+    right: theme.spacing(0.5)
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
@@ -73,11 +72,7 @@ const PersistentTooltip = ({
   );
 
   return (
-    <Tooltip
-      classes={{ tooltip: classes.tooltip }}
-      open={openTooltip || open}
-      title={title}
-    >
+    <Tooltip classes={{ tooltip: classes.tooltip }} open={open} title={title}>
       <IconButton
         aria-label={labelSearchHelp}
         size="small"

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -6,13 +6,32 @@ import {
   RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../../test/testRenderer';
+} from '../../../../../testRenderer';
+import { buildListingEndpoint } from '../../../../..';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
-
 import MultiConnectedAutocompleteField from '.';
 
+const baseEndpoint = 'endpoint';
+
+const getEndpoint = (parameters): string => {
+  return buildListingEndpoint({ baseEndpoint, parameters });
+};
+
+const label = 'Multi Connected Autocomplete';
+
+const optionsData = {
+  meta: {
+    limit: 2,
+    page: 1,
+    total: 20
+  },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' }
+  ]
+};
+
 const renderMultiAutocompleteField = (): RenderResult =>
   render(
     <TestQueryProvider>

package/src/InputField/Select/Autocomplete/Connected/index.stories.tsx

@@ -1,3 +1,5 @@
+import withMock from 'storybook-addon-mock';
+
 import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
 import { Listing } from '../../../../api/models';
@@ -6,6 +8,7 @@ import SingleConnectedAutocompleteField from './Single';
 import MultiConnectedAutocompleteField from './Multi';
 
 export default {
+  decorators: [withMock],
   title: 'InputField/Autocomplete/Connected'
 };
 

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -7,7 +7,7 @@ import {
   resetMocks,
   mockResponse,
   getFetchCall
-} from '../../../../../test/testRenderer';
+} from '../../../../testRenderer';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
 import TestQueryProvider from '../../../../api/TestQueryProvider';

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -16,18 +16,16 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import {
-  useDebounce,
-  useIntersectionObserver,
-  useDeepCompare
-} from '../../../../utils';
+import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
+import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   conditionField?: keyof SelectEntry;
@@ -37,7 +35,6 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
-  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -56,7 +53,6 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
-    queryKey,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -67,9 +63,6 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
-
-    const [autocompleteChangedValue, setAutocompleteChangedValue] =
-      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -91,16 +84,10 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [
-        `autocomplete-${queryKey || props.label}`,
-        page,
-        searchParameter
-      ],
+      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
       isPaginated: true,
       queryOptions: {
-        cacheTime: 0,
         enabled: false,
-        staleTime: 0,
         suspense: false
       }
     });
@@ -285,13 +272,6 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
-    useEffect(() => {
-      if (!autocompleteChangedValue && !props?.value) {
-        return;
-      }
-      setSearchParameter(undefined);
-    }, [autocompleteChangedValue, props?.value]);
-
     useEffect(() => {
       if (!optionsOpen) {
         return;
@@ -307,7 +287,6 @@ const ConnectedAutocompleteField = (
         open={optionsOpen}
         options={options}
         renderOption={renderOptions}
-        onChange={(_, value) => setAutocompleteChangedValue(value)}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

package/src/InputField/Select/Autocomplete/Draggable/index.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
+import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -14,6 +15,7 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
+  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps } from '@mui/material';
+import { Chip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,6 +18,7 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
+    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -32,20 +33,13 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
-  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
-  getTagLabel?: (option) => string;
-  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
-  optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
-  getTagLabel = (option): string => option[optionProperty],
-  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -58,10 +52,9 @@ const MultiAutocompleteField = ({
           root: classes.tag
         }}
         key={option.id}
-        label={getTagLabel(option)}
+        label={option.name}
         size="medium"
         {...getTagProps({ index })}
-        {...chipProps}
       />
     ));
 
@@ -91,7 +84,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
+          <Option checkboxSelected={selected}>{option.name}</Option>
         </li>
       )}
       renderTags={renderTags}

package/src/InputField/Select/Autocomplete/index.stories.tsx

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState(autoSizeOptions[1]);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,3 +108,12 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
+
+export const autoSizeWithCustomPadding = (): JSX.Element => {
+  return (
+    <AutoSizeAutocompleteField
+      customPadding={5}
+      endAdornment={<EndAdornment />}
+    />
+  );
+};

package/src/InputField/Select/Autocomplete/index.tsx

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import { getNormalizedId } from '../../../utils';
+import getNormalizedId from '../../../utils/getNormalizedId';
 
 export type Props = {
   autoFocus?: boolean;
@@ -32,7 +32,6 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: React.ReactElement;
   error?: string;
-  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -159,7 +158,6 @@ const AutocompleteField = ({
   autoSize = false,
   autoSizeDefaultWidth = 0,
   autoSizeCustomPadding,
-  getOptionItemLabel = (option) => option.name,
   ...autocompleteProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ hideInput });
@@ -195,7 +193,6 @@ const AutocompleteField = ({
           </>
         ),
         style: {
-          background: 'transparent',
           paddingRight: theme.spacing(5)
         }
       }}
@@ -252,7 +249,7 @@ const AutocompleteField = ({
             <Option
               thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              {getOptionItemLabel(option)}
+              {option.name}
             </Option>
           </li>
         );

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import Option from './Option';
 

package/src/InputField/Text/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback } from 'react';
 
-import { equals, isNil } from 'ramda';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -9,19 +9,17 @@ import {
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import useAutoSize from './useAutoSize';
 
 const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
   (theme: Theme, { displayAsBlock }) => ({
-    autoSizeCompact: {
-      paddingRight: theme.spacing(1),
-      paddingTop: theme.spacing(0.6)
+    compact: {
+      fontSize: 'x-small'
     },
     hiddenText: {
       display: 'table',
@@ -86,7 +84,6 @@ export type Props = {
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
-  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -111,7 +108,6 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
-      required = false,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -142,7 +138,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
+      <>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -164,11 +160,11 @@ const TextField = forwardRef(
               className: cx(
                 classes.inputBase,
                 {
-                  [classes.transparent]: transparent,
-                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
+                  [classes.transparent]: transparent
                 },
                 className
               ),
+              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -186,7 +182,6 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
-            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx
@@ -198,7 +193,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </Box>
+      </>
     );
   }
 );

package/src/Listing/ActionBar/index.tsx

@@ -11,7 +11,7 @@ import { userAtom, ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
@@ -86,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'listingVariant'
+  | 'viewMode'
   | 'viewerModeConfiguration'
 >;
 
@@ -107,8 +107,7 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant,
-  visualizationActions
+  viewMode
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -137,7 +136,6 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
-        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -161,10 +159,7 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(
-                        listingVariant,
-                        ListingVariant.extended
-                      )
+                      [classes.mode]: equals(viewMode, ListingVariant.extended)
                     }
                   )}
                 >
@@ -215,7 +210,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      listingVariant,
+      viewMode,
       themeMode,
       limit,
       pick(
@@ -245,9 +240,8 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  listingVariant,
-  viewerModeConfiguration,
-  visualizationActions
+  viewMode,
+  viewerModeConfiguration
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -266,12 +260,11 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
-      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
+      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
-      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}