@centreon/ui 23.10.30 → 23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.30",
+  "version": "23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import { equals, isEmpty, path, split } from 'ramda';
@@ -11,7 +11,12 @@ import {
 } from '../..';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
 
-import { InputPropsWithoutGroup, InputType } from './models';
+import {
+  AutoCompleteChangeData,
+  InputPropsWithoutGroup,
+  InputType,
+  Reason
+} from './models';
 
 const defaultFilterKey = 'name';
 
@@ -29,6 +34,8 @@ const ConnectedAutocomplete = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
+  const [autocompleteChangeData, setAutocompleteChangeData] =
+    useState<AutoCompleteChangeData>();
   const { values, touched, errors, setFieldValue, setFieldTouched } =
     useFormikContext<FormikValues>();
 
@@ -55,7 +62,9 @@ const ConnectedAutocomplete = ({
   const fieldNamePath = split('.', fieldName);
 
   const changeAutocomplete = useCallback(
-    (_, value): void => {
+    (_, value, reason: Reason): void => {
+      setAutocompleteChangeData({ reason, value });
+
       if (change) {
         change({ setFieldValue, value });
 
@@ -104,6 +113,7 @@ const ConnectedAutocomplete = ({
   return useMemoComponent({
     Component: (
       <AutocompleteField
+        autocompleteChangeData={autocompleteChangeData}
         dataTestId={dataTestId}
         disableClearable={false}
         disabled={disabled}

package/src/Form/Inputs/models.ts

@@ -103,3 +103,16 @@ export interface Group {
   name: string;
   order: number;
 }
+
+export enum Reason {
+  blur = 'blur',
+  clear = 'clear',
+  createOption = 'createOption',
+  removeOption = 'removeOption',
+  selectOption = 'selectOption'
+}
+
+export interface AutoCompleteChangeData {
+  reason: Reason;
+  value: string;
+}

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

@@ -28,8 +28,10 @@ import {
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import { AutoCompleteChangeData } from '../../../../Form/Inputs/models';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
+  autocompleteChangeData?: AutoCompleteChangeData;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -55,6 +57,7 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    autocompleteChangeData,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -274,6 +277,13 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
+    useEffect(() => {
+      if (!autocompleteChangeData) {
+        return;
+      }
+      setSearchParameter(undefined);
+    }, [autocompleteChangeData?.reason, autocompleteChangeData?.value]);
+
     useEffect(() => {
       if (!optionsOpen) {
         return;

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -10,6 +10,7 @@ import { Button } from '../../Button';
 import { useStyles } from './DataTableEmptyState.styles';
 
 type ListEmptyStateProps = {
+  canCreate?: boolean;
   labels: {
     actions: {
       create: string;
@@ -21,7 +22,8 @@ type ListEmptyStateProps = {
 
 const DataTableEmptyState = ({
   labels,
-  onCreate
+  onCreate,
+  canCreate = true
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -30,14 +32,16 @@ const DataTableEmptyState = ({
     <div className={classes.dataTableEmptyState}>
       <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
       <div className={classes.actions}>
-        <Button
-          aria-label="create"
-          icon={<AddIcon />}
-          iconVariant="start"
-          onClick={() => onCreate?.()}
-        >
-          {t(labels.actions.create)}
-        </Button>
+        {canCreate && (
+          <Button
+            aria-label="create"
+            icon={<AddIcon />}
+            iconVariant="start"
+            onClick={() => onCreate?.()}
+          >
+            {t(labels.actions.create)}
+          </Button>
+        )}
       </div>
     </div>
   );

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -46,6 +46,7 @@ const DataTableItem = forwardRef(
     return (
       <MuiCard
         className={classes.dataTableItem}
+        data-item-title={title}
         ref={ref as RefObject<HTMLDivElement>}
         variant="outlined"
       >