Merge pull request #3074 from glific/fix/collections

Added search functionality in collections dropdown
glific · Sep 9, 2024 · da575d1 · da575d1
2 parents d9dd531 + 5facf8b
commit da575d1
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 60 deletions.
diff --git a/src/containers/ContactManagement/ContactManagement.test.tsx b/src/containers/ContactManagement/ContactManagement.test.tsx
@@ -4,25 +4,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import ContactManagement from './ContactManagement';
-import { filterCollectionQuery } from 'mocks/Collection';
-import { CONTACTS_COLLECTION } from 'common/constants';
+import { getCollectionsList } from 'mocks/Collection';
 import userEvent from '@testing-library/user-event';
 import { importContacts, moveContacts } from 'mocks/Contact';
 
-const mocks = [
-  filterCollectionQuery({
-    filter: {
-      groupType: CONTACTS_COLLECTION,
-    },
-    opts: {
-      limit: null,
-      offset: 0,
-      order: 'ASC',
-    },
-  }),
-  importContacts,
-  moveContacts,
-];
+const mocks = [getCollectionsList(''), importContacts, moveContacts];
 
 const contactManagement = (
   <MockedProvider mocks={mocks} addTypename={false}>

diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx
@@ -1,26 +1,18 @@
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { getAllOrganizations } from 'mocks/Organization';
 
 import UploadContactsDialog from './UploadContactsDialog';
-import { filterCollectionQuery } from 'mocks/Collection';
-import { CONTACTS_COLLECTION } from 'common/constants';
+import { getCollectionsList } from 'mocks/Collection';
 
 const mocks = [
   ...getAllOrganizations,
-  filterCollectionQuery({
-    filter: {
-      groupType: CONTACTS_COLLECTION,
-    },
-    opts: {
-      limit: null,
-      offset: 0,
-      order: 'ASC',
-    },
-  }),
+  getCollectionsList(''),
+  getCollectionsList('Optin group'),
+  getCollectionsList(),
 ];
 
 const setDialogMock = vi.fn();
@@ -41,11 +33,16 @@ const dialogBox = (
   </MockedProvider>
 );
 
-test('Upload contact dialog renders correctly', async () => {
+test('Upload contact dialog renders correctly and search works for dropdown', async () => {
   const { getByText } = render(dialogBox);
 
-  expect(getByText('Loading...')).toBeInTheDocument();
   await waitFor(() => {
     expect(getByText('Upload Contacts')).toBeInTheDocument();
   });
+
+  fireEvent.change(screen.getByRole('combobox'), { target: { value: 'Optin group' } });
+
+  await waitFor(() => {
+    expect(screen.getByText('Optin group')).toBeInTheDocument();
+  });
 });
diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx
@@ -5,8 +5,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { useMutation, useQuery } from '@apollo/client';
 
 import { useTranslation } from 'react-i18next';
-import { FILTER_COLLECTIONS } from 'graphql/queries/Collection';
-import { Loading } from 'components/UI/Layout/Loading/Loading';
+import { GET_COLLECTIONS_LIST } from 'graphql/queries/Collection';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
 import { Field, Form, Formik } from 'formik';
 import { UPLOAD_CONTACTS_SAMPLE } from 'config';
@@ -23,6 +22,7 @@ export interface UploadContactsDialogProps {
 }
 
 export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContactsDialogProps) => {
+  const [searchTerm, setSearchTerm] = useState<string>('');
   const [fileName, setFileName] = useState<string>('');
   const [csvContent, setCsvContent] = useState<String | null | ArrayBuffer>('');
   const [uploadingContacts, setUploadingContacts] = useState(false);
@@ -32,13 +32,14 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
   const [collection] = useState();
   const [optedIn] = useState(false);
 
-  const { data: collections, loading } = useQuery(FILTER_COLLECTIONS, {
+  const { data: collections, loading } = useQuery(GET_COLLECTIONS_LIST, {
     variables: {
       filter: {
         groupType: 'WABA',
+        label: searchTerm,
       },
       opts: {
-        limit: null,
+        limit: 50,
         offset: 0,
         order: 'ASC',
       },
@@ -94,6 +95,8 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
       multiple: false,
       optionLabel: 'label',
       label: t('Collection'),
+      onInputChange: (event: any) => setSearchTerm(event?.target?.value),
+      noOptionsText: loading ? 'Loading...' : 'No options available',
     },
     {
       component: Checkbox,
@@ -133,32 +136,28 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
             alignButtons="left"
             disableOk={!csvContent}
           >
-            {loading ? (
-              <Loading />
-            ) : (
-              <>
-                <div className={styles.Fields}>
-                  {formFieldItems.map((field: any) => (
-                    <Field {...field} key={field.name} />
-                  ))}
-                </div>
+            <>
+              <div className={styles.Fields}>
+                {formFieldItems.map((field: any) => (
+                  <Field {...field} key={field.name} />
+                ))}
+              </div>
 
-                <div className={styles.ImportContainer}>
-                  <ImportButton
-                    id={'uploadcontacts'}
-                    title={fileName || 'Select file'}
-                    afterImport={(result: string, media: any) => {
-                      setFileName(media.name);
-                      setCsvContent(result);
-                    }}
-                    fileType=".csv"
-                  />
-                </div>
-                <div className={styles.Sample}>
-                  <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>
-                </div>
-              </>
-            )}
+              <div className={styles.ImportContainer}>
+                <ImportButton
+                  id={'uploadcontacts'}
+                  title={fileName || 'Select file'}
+                  afterImport={(result: string, media: any) => {
+                    setFileName(media.name);
+                    setCsvContent(result);
+                  }}
+                  fileType=".csv"
+                />
+              </div>
+              <div className={styles.Sample}>
+                <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>
+              </div>
+            </>
           </DialogBox>
         </Form>
       )}

diff --git a/src/graphql/queries/Collection.ts b/src/graphql/queries/Collection.ts
@@ -109,3 +109,12 @@ export const EXPORT_COLLECTION_DATA = gql`
     }
   }
 `;
+
+export const GET_COLLECTIONS_LIST = gql`
+  query groups($filter: GroupFilter!, $opts: Opts!) {
+    groups(filter: $filter, opts: $opts) {
+      id
+      label
+    }
+  }
+`;
diff --git a/src/mocks/Collection.tsx b/src/mocks/Collection.tsx
@@ -5,6 +5,7 @@ import {
   GET_COLLECTION,
   GET_COLLECTIONS,
   GET_COLLECTIONS_COUNT,
+  GET_COLLECTIONS_LIST,
   GET_COLLECTION_INFO,
   GET_COLLECTION_USERS,
   GET_ORGANIZATION_COLLECTIONS,
@@ -443,3 +444,38 @@ export const deleteContactFromCollection = {
     },
   },
 };
+
+export const getCollectionsList = (label?: string) => ({
+  request: {
+    query: GET_COLLECTIONS_LIST,
+    variables: {
+      filter: {
+        groupType: 'WABA',
+        label,
+      },
+      opts: {
+        limit: 50,
+        offset: 0,
+        order: 'ASC',
+      },
+    },
+  },
+  result: {
+    data: {
+      groups: [
+        {
+          id: '1',
+          label: 'Staff group',
+        },
+        {
+          id: '2',
+          label: 'Optin group',
+        },
+        {
+          id: '3',
+          label: 'Optout group',
+        },
+      ],
+    },
+  },
+});