From 4eaa3bb270147598d64c148191c2444e31108f4d Mon Sep 17 00:00:00 2001
From: NelyDavtyan <ndavtyan@provectus.com>
Date: Thu, 30 Jun 2022 16:11:03 +0400
Subject: [PATCH 1/2] fix entity add bug

---
 .../SearchSuggestionsAutocomplete.tsx         | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx b/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
index c78510d40..9c808571a 100644
--- a/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
+++ b/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Autocomplete, Grid, Typography } from '@mui/material';
 import {
   DataEntityRef,
@@ -54,6 +54,9 @@ const SearchSuggestionsAutocomplete: React.FC<
   );
   const [selectedOption, setSelectedOption] =
     React.useState<DataEntityRef | null>(null);
+  const [selectedOptionArray, setSelectedOptionArray] = useState<
+    DataEntityRef[]
+  >([]);
   const [autocompleteOpen, setAutocompleteOpen] =
     React.useState<boolean>(false);
 
@@ -103,14 +106,24 @@ const SearchSuggestionsAutocomplete: React.FC<
         value: Partial<DataEntityRef> | string | null
       ) => {
         setSelectedOption(value as DataEntityRef);
+        if (value !== null) {
+          setSelectedOptionArray((prev: DataEntityRef[]) => [
+            ...prev,
+            value as DataEntityRef,
+          ]);
+        }
+
         onChange(value as DataEntityRef);
       },
     []
   );
-
   const handleAddEntity = () => {
     if (append) {
-      append(selectedOption as DataEntityRef);
+      const ids = selectedOptionArray.map(entity => entity.id);
+      const filtredSelectionOptionArray = selectedOptionArray.filter(
+        ({ id }, index) => !ids.includes(id, index + 1)
+      );
+      append(filtredSelectionOptionArray as DataEntityRef[]);
     }
     setSearchText('');
     setSelectedOption(null);

From 930cbc26bd6513643aadb29cb901231e2f9493de Mon Sep 17 00:00:00 2001
From: alexeykozyurov <akozyurov@provectus.com>
Date: Wed, 6 Jul 2022 16:50:46 +0300
Subject: [PATCH 2/2] Cleanup

---
 .../DataEntityGroupForm.tsx                   | 21 +++-----
 .../EntityItem/EntityItem.tsx                 |  4 +-
 .../AddDataEntityToGroupForm.tsx              |  4 +-
 .../SearchSuggestionsAutocomplete.tsx         | 49 ++++++-------------
 4 files changed, 25 insertions(+), 53 deletions(-)

diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm.tsx b/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm.tsx
index dc38c4731..3f13ea7a9 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm.tsx
@@ -80,7 +80,7 @@ const DataEntityGroupForm: React.FC<DataEntityGroupFormProps> = ({
     [dataEntityGroupDetails]
   );
 
-  const { handleSubmit, control, reset, formState, setValue } =
+  const { handleSubmit, control, reset, formState, setValue, register } =
     useForm<DataEntityGroupFormData>({
       mode: 'onChange',
       reValidateMode: 'onChange',
@@ -205,19 +205,12 @@ const DataEntityGroupForm: React.FC<DataEntityGroupFormProps> = ({
           </AppTextField>
         )}
       />
-      <Controller
-        control={control}
-        name="entities"
-        rules={{ required: true, validate: () => fields.length > 0 }}
-        render={({ field }) => (
-          <SearchSuggestionsAutocomplete
-            placeholder="Search entities"
-            label="Entities"
-            controllerProps={field}
-            append={append}
-            addEntities
-          />
-        )}
+      <SearchSuggestionsAutocomplete
+        placeholder="Search entities"
+        label="Entities"
+        formOnChange={register('entities').onChange}
+        append={append}
+        addEntities
       />
       <EntityItemsContainer sx={{ mt: 1.25 }}>
         {fields?.map((entity, index) => (
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/EntityItem/EntityItem.tsx b/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/EntityItem/EntityItem.tsx
index e36de56f3..0f5619a36 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/EntityItem/EntityItem.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/EntityItem/EntityItem.tsx
@@ -16,8 +16,8 @@ const EntityItem: React.FC<TagItemProps> = ({
   entity,
 }) => (
   <Container container>
-    <Grid container>
-      <Typography variant="body1" sx={{ mr: 1 }}>
+    <Grid container flexWrap="nowrap" sx={{ width: 'calc(100% - 24px)' }}>
+      <Typography variant="body1" sx={{ mr: 1 }} noWrap>
         {entity.internalName || entity.externalName}
       </Typography>
       {entity.entityClasses?.map(entityClass => (
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm.tsx
index 93e0b7482..b2c1a1db8 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm.tsx
@@ -9,8 +9,8 @@ import {
   getDataEntityAddToGroupStatuses,
   getDataEntityClassesList,
 } from 'redux/selectors';
-import SearchSuggestionsAutocomplete from 'components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete';
 import { addDataEntityToGroup } from 'redux/thunks';
+import SearchSuggestionsAutocomplete from 'components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete';
 
 interface AddDataEntityToGroupFormProps {
   btnCreateEl: JSX.Element;
@@ -95,7 +95,7 @@ const AddDataEntityToGroupForm: React.FC<
           <SearchSuggestionsAutocomplete
             placeholder="Search groups"
             label="Group name"
-            controllerProps={field}
+            formOnChange={field.onChange}
             searchParams={{
               entityClassId: dataEntityGroupClassId,
               manuallyCreated: true,
diff --git a/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx b/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
index 9c808571a..9f5d56cc8 100644
--- a/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
+++ b/odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Autocomplete, Grid, Typography } from '@mui/material';
 import {
   DataEntityRef,
@@ -8,27 +8,22 @@ import EntityClassItem from 'components/shared/EntityClassItem/EntityClassItem';
 import { useDebouncedCallback } from 'use-debounce';
 import AppTextField from 'components/shared/AppTextField/AppTextField';
 import ClearIcon from 'components/shared/Icons/ClearIcon';
-import { ControllerRenderProps } from 'react-hook-form';
 import AppButton from 'components/shared/AppButton/AppButton';
-import { UseFieldArrayAppend } from 'react-hook-form/dist/types/fieldArray';
 import { useAppDispatch, useAppSelector } from 'lib/redux/hooks';
 import { fetchSearchSuggestions } from 'redux/thunks';
 import {
   getSearchSuggestions,
   getSearchSuggestionsFetchingStatuses,
 } from 'redux/selectors';
-import { DataEntityGroupFormData } from 'components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm';
-import { AddDataEntityToGroupFormData } from 'components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm';
+import { UseFieldArrayReturn } from 'react-hook-form';
 
 interface SearchSuggestionsAutocompleteProps {
   placeholder: string;
   label?: string;
   addEntities?: boolean;
-  append?: UseFieldArrayAppend<DataEntityGroupFormData['entities']>;
+  append?: UseFieldArrayReturn['append'];
   searchParams?: SearchApiGetSearchSuggestionsRequest;
-  controllerProps:
-    | ControllerRenderProps<DataEntityGroupFormData, 'entities'>
-    | ControllerRenderProps<AddDataEntityToGroupFormData, 'group'>;
+  formOnChange: (val: any) => void;
 }
 
 const SearchSuggestionsAutocomplete: React.FC<
@@ -38,8 +33,8 @@ const SearchSuggestionsAutocomplete: React.FC<
   label,
   addEntities,
   append,
-  controllerProps,
   searchParams,
+  formOnChange,
 }) => {
   const dispatch = useAppDispatch();
 
@@ -54,9 +49,6 @@ const SearchSuggestionsAutocomplete: React.FC<
   );
   const [selectedOption, setSelectedOption] =
     React.useState<DataEntityRef | null>(null);
-  const [selectedOptionArray, setSelectedOptionArray] = useState<
-    DataEntityRef[]
-  >([]);
   const [autocompleteOpen, setAutocompleteOpen] =
     React.useState<boolean>(false);
 
@@ -100,30 +92,18 @@ const SearchSuggestionsAutocomplete: React.FC<
   };
 
   const handleOptionChange = React.useCallback(
-    (onChange: (val?: DataEntityRef) => void) =>
-      (
-        _: React.ChangeEvent<unknown>,
-        value: Partial<DataEntityRef> | string | null
-      ) => {
-        setSelectedOption(value as DataEntityRef);
-        if (value !== null) {
-          setSelectedOptionArray((prev: DataEntityRef[]) => [
-            ...prev,
-            value as DataEntityRef,
-          ]);
-        }
-
-        onChange(value as DataEntityRef);
-      },
+    (
+      _: React.ChangeEvent<unknown>,
+      value: Partial<DataEntityRef> | string | null
+    ) => {
+      setSelectedOption(value as DataEntityRef);
+      formOnChange(value);
+    },
     []
   );
   const handleAddEntity = () => {
     if (append) {
-      const ids = selectedOptionArray.map(entity => entity.id);
-      const filtredSelectionOptionArray = selectedOptionArray.filter(
-        ({ id }, index) => !ids.includes(id, index + 1)
-      );
-      append(filtredSelectionOptionArray as DataEntityRef[]);
+      append(selectedOption as DataEntityRef);
     }
     setSearchText('');
     setSelectedOption(null);
@@ -157,7 +137,6 @@ const SearchSuggestionsAutocomplete: React.FC<
 
   return (
     <Autocomplete
-      {...controllerProps}
       fullWidth
       value={{ externalName: searchText }}
       open={autocompleteOpen}
@@ -168,7 +147,7 @@ const SearchSuggestionsAutocomplete: React.FC<
         setAutocompleteOpen(false);
       }}
       onInputChange={handleInputChange}
-      onChange={handleOptionChange(controllerProps.onChange)}
+      onChange={handleOptionChange}
       getOptionLabel={getOptionLabel}
       options={options}
       loading={isSearchSuggestionsLoading}