Reuse dropdown and add test for addautocomplete

src/components/UI/Form/AddAutoComplete/AddAutoComplete.test.tsx

@@ -0,0 +1,46 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import { AddAutoComplete } from './AddAutoComplete';
+import { CREATE_LABEL } from 'graphql/mutations/Tags';
+describe('<AddAutoComplete />', () => {
+  const mocks = [
+    {
+      request: {
+        query: CREATE_LABEL,
+      },
+      result: {
+        data: {
+          addAutoComplete: {
+            id: 1,
+          },
+        },
+      },
+    },
+  ];
+  const option: any[] = [
+    {
+      description: null,
+      id: '1',
+      label: 'Messages',
+    },
+  ];
+
+  const mockHandleChange = vi.fn();
+  const defaultProps = {
+    label: 'Example',
+    options: option,
+    optionLabel: 'label',
+    onChange: mockHandleChange,
+    field: { name: 'example', value: [] },
+    form: { dirty: false, touched: false, errors: false, setFieldValue: mockHandleChange },
+  };
+
+  it('renders <AddAutoComplete /> component', () => {
+    const wrapper = render(
+      <MockedProvider mocks={mocks}>
+        <AddAutoComplete {...defaultProps} />
+      </MockedProvider>
+    );
+    expect(wrapper).toBeTruthy();
+  });
+});

src/components/UI/Form/AutoComplete/AutoComplete.module.css

@@ -1,6 +1,7 @@
 .Input {
   display: flex;
   padding: 8px 0px;
+  min-width: 180px;
 }
 
 .Input label {

src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx

@@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
 import styles from './InteractiveMessageList.module.css';
 import { useQuery } from '@apollo/client';
 import { GET_TAGS } from 'graphql/queries/Tags';
-import { DropDown } from 'components/UI/Dropdown/DropDown';
+import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 
 const getLabel = (text: string) => (
   <p data-testid="label" className={styles.LabelText}>
@@ -130,8 +130,28 @@ export const InteractiveMessageList = () => {
     fetchPolicy: 'network-only',
   });
 
+  // OnChange handler for the dropdown
+  const handleDropdownChange = (event: any) => {
+    setSelectedTag(event.target.value);
+  };
+
   const tagFilter = (
-    <DropDown tag={tag} selectedtag={selectedtag} setSelectedTag={setSelectedTag} />
+    <AutoComplete
+      options={tag ? tag.tags : []}
+      optionLabel="label"
+      disabled={false}
+      hasCreateOption={false}
+      multiple={false}
+      onChange={(value: any) => {
+        setSelectedTag(value);
+      }}
+      form={{ setFieldValue: handleDropdownChange }}
+      field={{ value: selectedtag, onChange: handleDropdownChange }}
+      textFieldProps={{
+        variant: 'outlined',
+        label: t('Select Label'),
+      }}
+    />
   );
 
   return (

src/containers/List/List.tsx

@@ -236,7 +236,7 @@ export const List = ({
         orderWith: tableVals.sortCol,
       },
     };
-  }, [searchVal, tableVals, filters, filtersTag]);
+  }, [searchVal, tableVals, filters]);
 
   // Get the total number of items here
   const {

src/graphql/queries/InteractiveMessage.ts

@@ -37,6 +37,10 @@ export const GET_INTERACTIVE_MESSAGE = gql`
           id
           label
         }
+        tag {
+          id
+          label
+        }
       }
     }
   }

src/i18n/en/en.json

@@ -413,5 +413,6 @@
   "Update ticket": "Update ticket",
   "Opened by": "Opened by",
   "Change assignee": "Change assignee",
-  "Select Tag": "Select Tag"
+  "Select Tag": "Select Tag",
+  "Select Label": "Select Label"
 }