@centreon/ui 24.4.13 → 24.4.14

package/src/Form/{Form.tsx → index.tsx}

@@ -1,29 +1,19 @@
-import {
-  Formik,
-  FormikHelpers,
-  FormikSharedConfig,
-  FormikValues
-} from 'formik';
+import { Formik, FormikHelpers, FormikValues } from 'formik';
 import * as Yup from 'yup';
 
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
 import { Group, InputProps } from './Inputs/models';
-import { useStyles } from './Form.styles';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-export type FormProps<T> = {
+interface Props<T> {
   Buttons?: React.ComponentType;
-  areGroupsOpen?: boolean;
-  children?: JSX.Element;
-  className?: string;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
-  groupsClassName?: string;
   initialValues: T;
   inputs: Array<InputProps>;
   isCollapsible?: boolean;
@@ -31,13 +21,9 @@ export type FormProps<T> = {
   submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
   validate?: (values: FormikValues) => void;
   validationSchema: Yup.SchemaOf<T>;
-} & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
+}
 
 const Form = <T extends object>({
-  children,
-  className,
-  groupsClassName,
-  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -47,18 +33,13 @@ const Form = <T extends object>({
   Buttons = FormButtons,
   isLoading = false,
   isCollapsible = false,
-  groupDirection = GroupDirection.Vertical,
-  ...formikSharedConfig
-}: FormProps<T>): JSX.Element => {
-  const { cx, classes } = useStyles();
-
+  groupDirection = GroupDirection.Vertical
+}: Props<T>): JSX.Element => {
   if (isLoading) {
     return (
       <Inputs
         isLoading
-        areGroupsOpen={areGroupsOpen}
         groups={groups}
-        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -67,28 +48,25 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
+      enableReinitialize
+      validateOnBlur
+      validateOnMount
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}
       onSubmit={submit}
-      {...formikSharedConfig}
     >
       <div>
-        {children}
-        <div className={cx(className, classes.form)}>
-          <Inputs
-            areGroupsOpen={areGroupsOpen}
-            groupDirection={groupDirection}
-            groups={groups}
-            groupsClassName={groupsClassName}
-            inputs={inputs}
-            isCollapsible={isCollapsible}
-          />
-          <Buttons />
-        </div>
+        <Inputs
+          groupDirection={groupDirection}
+          groups={groups}
+          inputs={inputs}
+          isCollapsible={isCollapsible}
+        />
+        <Buttons />
       </div>
     </Formik>
   );
 };
 
-export { Form };
+export default Form;

package/src/Form/storiesData.tsx

@@ -4,7 +4,6 @@ import { equals, prop } from 'ramda';
 
 import { Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import MailIcon from '@mui/icons-material/MailOutline';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
@@ -82,7 +81,9 @@ export const basicFormValidationSchema = Yup.object().shape({
   scopes: Yup.array().of(
     Yup.string().min(3, '3 characters min').required('Required')
   ),
-  sports: Yup.array().of(selectEntryValidationSchema.required('Required'))
+  sports: Yup.array()
+    .of(selectEntryValidationSchema.required('Required'))
+    .min(2, 'Choose at least 2 sports')
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -114,11 +115,6 @@ export const basicFormInitialValues = {
   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: [
     {
@@ -161,10 +157,6 @@ export const basicFormGroups: Array<Group> = [
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Second group',
     order: 2
-  },
-  {
-    name: 'Third group',
-    order: 3
   }
 ];
 
@@ -179,10 +171,6 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
-    text: {
-      endAdornment: <MailIcon />,
-      placeholder: 'Your email here'
-    },
     type: InputType.Text
   },
   {
@@ -217,41 +205,6 @@ export const basicFormInputs: Array<InputProps> = [
     },
     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',

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,15 +10,15 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(-0.5),
-    top: theme.spacing(-1)
+    right: theme.spacing(0.5)
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
     boxShadow: theme.shadows[3],
     color: theme.palette.text.primary,
     fontSize: theme.typography.pxToRem(12),
-    maxWidth: 500
+    maxWidth: 500,
+    padding: theme.spacing(1, 2, 1, 1)
   }
 }));
 
@@ -59,7 +59,7 @@ const PersistentTooltip = ({
   };
 
   const title = (
-    <div style={{ position: 'relative' }}>
+    <>
       <IconButton
         className={classes.buttonClose}
         size="small"
@@ -68,15 +68,11 @@ const PersistentTooltip = ({
         <IconClose fontSize="small" />
       </IconButton>
       {children}
-    </div>
+    </>
   );
 
   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,18 +6,36 @@ 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>
       <MultiConnectedAutocompleteField
-        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

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';
@@ -45,7 +45,6 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
-        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -96,7 +95,9 @@ describe(SingleConnectedAutocompleteField, () => {
 
     await waitFor(() => {
       expect(getFetchCall(2)).toEqual(
-        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22host.name%22%3A%7B%22%24lk%22%3A%22%25My%20Option%202%25%22%7D%7D%5D%7D%5D%7D`
+        `${baseEndpoint}?page=1&search=${encodeURIComponent(
+          '{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}'
+        )}`
       );
     });
   });
@@ -117,7 +118,9 @@ describe(SingleConnectedAutocompleteField, () => {
 
     await waitFor(() => {
       expect(getFetchCall(0)).toEqual(
-        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22parent_name%22%3A%7B%22%24eq%22%3A%22Centreon-Server%22%7D%7D%5D%7D%5D%7D`
+        `${baseEndpoint}?page=1&search=${encodeURIComponent(
+          '{"$and":[{"parent_name":{"$eq":"Centreon-Server"}}]}'
+        )}`
       );
     });
   });

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

@@ -10,29 +10,24 @@ import {
   pipe,
   not,
   has,
-  omit,
-  uniqBy
+  omit
 } from 'ramda';
 
 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> {
-  allowUniqOption?: boolean;
-  baseEndpoint?: string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -40,7 +35,6 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
-  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -59,9 +53,6 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
-    queryKey,
-    allowUniqOption,
-    baseEndpoint,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -72,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));
@@ -89,7 +77,6 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
       ListingModel<TData>
     >({
-      baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({
@@ -97,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
       }
     });
@@ -283,23 +264,13 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(
-      () => {
-        setSearchParameter(
-          !isEmpty(searchConditions)
-            ? { conditions: searchConditions }
-            : undefined
-        );
-      },
-      useDeepCompare([searchConditions])
-    );
-
     useEffect(() => {
-      if (!autocompleteChangedValue && !props?.value) {
-        return;
-      }
-      setSearchParameter(undefined);
-    }, [autocompleteChangedValue, props?.value]);
+      setSearchParameter(
+        !isEmpty(searchConditions)
+          ? { conditions: searchConditions }
+          : undefined
+      );
+    }, useDeepCompare([searchConditions]));
 
     useEffect(() => {
       if (!optionsOpen) {
@@ -314,11 +285,8 @@ const ConnectedAutocompleteField = (
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         open={optionsOpen}
-        options={
-          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
-        }
+        options={options}
         renderOption={renderOptions}
-        onChange={(_, value) => setAutocompleteChangedValue(value)}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq(item, 'id'), items),
+        (item) => find(propEq('id', item), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq(id, 'id'), items);
+      const itemIndex = findIndex(propEq('id', id), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

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/Draggable/index.tsx

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq(id, 'id'), values);
+        const index = findIndex(propEq('id', id), values);
 
         const newSelectedValues = remove(index, 1, values);