diff --git a/src/containers/ContactManagement/ContactManagement.test.tsx b/src/containers/ContactManagement/ContactManagement.test.tsx index f7631b457..a8e7f6219 100644 --- 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 = ( diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx index 959c47a88..110575b1a 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,21 +6,13 @@ 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 = ( ); -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 index 751bb75f3..5476ad8c6 100644 --- 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(''); const [fileName, setFileName] = useState(''); const [csvContent, setCsvContent] = useState(''); 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 ? ( - - ) : ( - <> -
- {formFieldItems.map((field: any) => ( - - ))} -
+ <> +
+ {formFieldItems.map((field: any) => ( + + ))} +
-
- { - setFileName(media.name); - setCsvContent(result); - }} - fileType=".csv" - /> -
-
- Download Sample -
- - )} +
+ { + setFileName(media.name); + setCsvContent(result); + }} + fileType=".csv" + /> +
+
+ Download Sample +
+ )} diff --git a/src/graphql/queries/Collection.ts b/src/graphql/queries/Collection.ts index d36d6bf93..d521456ba 100644 --- 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 index f99f918d9..fa4689bfc 100644 --- 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', + }, + ], + }, + }, +});