@centreon/ui 23.10.44 → 23.10.46

package/src/Home.stories.mdx

@@ -1,8 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
-import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Typography, Link, Stack } from '@mui/material'
 
-import { MdxThemeProvider } from './StoryBookThemeProvider'
 
 <Meta title="Home" />
 
@@ -39,84 +37,3 @@ import { MdxThemeProvider } from './StoryBookThemeProvider'
     <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/index.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentStory } from '@storybook/react';
 
 import LoadingSkeleton from '../LoadingSkeleton';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
-import NotAuthorized from '../../assets/not-authorized-template-background-light.svg';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../@assets/images/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 '../testRenderer';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import { render } from '../../test/testRenderer';
+import CentreonLogoLight from '../@assets/brand/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,7 +10,8 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5)
+    right: theme.spacing(0.5),
+    top: '40%'
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
@@ -72,7 +73,11 @@ const PersistentTooltip = ({
   );
 
   return (
-    <Tooltip classes={{ tooltip: classes.tooltip }} open={open} title={title}>
+    <Tooltip
+      classes={{ tooltip: classes.tooltip }}
+      open={openTooltip || open}
+      title={title}
+    >
       <IconButton
         aria-label={labelSearchHelp}
         size="small"

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -0,0 +1,161 @@
+import {
+  Method,
+  MultiConnectedAutocompleteField,
+  TestQueryProvider
+} from '@centreon/ui';
+
+import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
+
+const optionOne = 'My Option 1';
+
+describe('Multi connected autocomplete', () => {
+  beforeEach(() => {
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.interceptAPIRequest({
+        alias: 'getListOptions',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        response: optionsData
+      });
+    });
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.interceptAPIRequest({
+        alias: 'getSearchedOption',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        query: {
+          name: 'search',
+          value: JSON.stringify({
+            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
+          })
+        },
+        response: optionData
+      });
+    });
+
+    cy.mount({
+      Component: (
+        <TestQueryProvider>
+          <div style={{ paddingTop: 20 }}>
+            <MultiConnectedAutocompleteField
+              field="host.name"
+              getEndpoint={getEndpoint}
+              label={label}
+              placeholder={placeholder}
+            />
+          </div>
+        </TestQueryProvider>
+      )
+    });
+  });
+
+  it('displays and hides the list when the user double-clicks on the input', () => {
+    cy.contains(label).should('be.visible');
+
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+
+    cy.matchImageSnapshot(
+      'displays the list when the user clicks on the input'
+    );
+
+    cy.get('@input').click();
+
+    cy.get('@listOptions').should('not.exist');
+
+    cy.matchImageSnapshot('hides the list when the user clicks on the input');
+  });
+
+  it('displays exactly one option on the list when the user types that option', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.get('@input').type(optionOne);
+
+    cy.waitForRequest('@getSearchedOption');
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionData.result.length);
+    });
+
+    cy.get('@listOptions').within(() => {
+      cy.contains(optionOne).should('be.visible');
+    });
+
+    cy.matchImageSnapshot();
+  });
+
+  it('displays all options on the list when the user searches for and selects an option', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.get('@input').type(optionOne);
+
+    cy.waitForRequest('@getSearchedOption');
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionData.result.length);
+    });
+
+    cy.get('[type="checkbox"]').check();
+    cy.get('@input')
+      .parent()
+      .within(() => {
+        cy.contains(optionOne).should('be.visible');
+
+        cy.get('[data-testid="CancelIcon"]').should('be.visible');
+      });
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionsData.result.length);
+
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+
+    cy.matchImageSnapshot();
+  });
+});

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

@@ -6,31 +6,12 @@ import {
   RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../testRenderer';
-import { buildListingEndpoint } from '../../../../..';
+} from '../../../../../../test/testRenderer';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import MultiConnectedAutocompleteField from '.';
-
-const baseEndpoint = 'endpoint';
-
-const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
+import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
-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' }
-  ]
-};
+import MultiConnectedAutocompleteField from '.';
 
 const renderMultiAutocompleteField = (): RenderResult =>
   render(

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -0,0 +1,22 @@
+import { buildListingEndpoint } from '../../../../../..';
+
+export const baseEndpoint = './endpoint';
+
+export const getEndpoint = (parameters): string => {
+  return buildListingEndpoint({ baseEndpoint, parameters });
+};
+
+export const label = 'Multi Connected Autocomplete';
+export const placeholder = 'Type here...';
+
+export const optionsData = {
+  meta: {
+    limit: 2,
+    page: 1,
+    total: 20
+  },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' }
+  ]
+};

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

@@ -1,5 +1,3 @@
-import withMock from 'storybook-addon-mock';
-
 import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
 import { Listing } from '../../../../api/models';
@@ -8,7 +6,6 @@ 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 '../../../../testRenderer';
+} from '../../../../../test/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,16 +16,18 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
+import {
+  useDebounce,
+  useIntersectionObserver,
+  useDeepCompare
+} from '../../../../utils';
 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;
@@ -63,6 +65,9 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
+
+    const [autocompleteChangedValue, setAutocompleteChangedValue] =
+      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -272,6 +277,13 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
+    useEffect(() => {
+      if (!autocompleteChangedValue && !props?.value) {
+        return;
+      }
+      setSearchParameter(undefined);
+    }, [autocompleteChangedValue, props?.value]);
+
     useEffect(() => {
       if (!optionsOpen) {
         return;
@@ -287,6 +299,7 @@ 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,7 +1,6 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
-import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -15,7 +14,6 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

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

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(autoSizeOptions[1]);
+  const [value, setValue] = React.useState(null);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,12 +108,3 @@ 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/getNormalizedId';
+import { getNormalizedId } from '../../../utils';
 
 export type Props = {
   autoFocus?: boolean;

package/src/InputField/Select/index.tsx

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

package/src/InputField/Text/index.tsx

@@ -12,7 +12,7 @@ import {
   Typography
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
@@ -84,6 +84,7 @@ export type Props = {
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
+  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -108,6 +109,7 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
+      required = false,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -164,7 +166,6 @@ const TextField = forwardRef(
                 },
                 className
               ),
-              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -182,6 +183,7 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
+            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx

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/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';

package/src/Listing/Cell/DataCell.styles.ts

@@ -0,0 +1,24 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  cell: {
+    alignItems: 'center',
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  componentColumn: {
+    width: theme.spacing(2.75)
+  },
+  rowNotHovered: {
+    color: theme.palette.text.secondary
+  },
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
+export { useStyles };