Contact import automation

.github/workflows/cypress-testing.yml

@@ -65,6 +65,7 @@ jobs:
           git clone https://github.com/glific/glific.git
           echo done. go to dir.
           cd glific
+          git checkout importContact
           echo done. start dev.secret.exs config
           cd priv
           mkdir cert
@@ -96,7 +97,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
-          git checkout main
+          git checkout feat/contacts-import
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add cypress@13.6.2

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

@@ -5,7 +5,7 @@
 .Checkbox {
   margin-bottom: -10px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
 }
 
 .Label {
@@ -33,3 +33,12 @@
 .Disabled {
   opacity: 60%;
 }
+
+.DangerText {
+  margin-left: 30px;
+  font-size: 12px;
+  margin-top: -12px;
+  line-height: 18px;
+  font-weight: 400;
+  color: #fb5c5c;
+}

src/components/UI/Form/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { Checkbox as CheckboxElement, FormControlLabel } from '@mui/material';
+import { Checkbox as CheckboxElement, FormControlLabel, FormHelperText } from '@mui/material';
 import InfoIcon from 'assets/images/icons/Info.svg?react';
 import Tooltip from 'components/UI/Tooltip/Tooltip';
 import styles from './Checkbox.module.css';
@@ -38,37 +38,42 @@ export const Checkbox = ({
 
   return (
     <div className={`${styles.Checkbox} ${className} ${disabled && styles.Disabled}`}>
-      <FormControlLabel
-        control={
-          <CheckboxElement
-            data-testid="checkboxLabel"
-            classes={darkCheckbox ? { colorPrimary: styles.CheckboxColor } : null}
-            {...field}
-            color="primary"
-            checked={field.value ? field.value : false}
-            onChange={handleChangeCallback}
-            disabled={disabled}
-          />
-        }
-        labelPlacement="end"
-        label={title}
-        classes={{
-          label: addLabelStyle ? styles.Label : undefined,
-          root: styles.Root,
-        }}
-      />
-      {info?.title && infoType === 'tooltip' && (
-        <Tooltip tooltipClass={styles.Tooltip} title={info.title} placement="right">
-          <InfoIcon className={styles.InfoIcon} />
-        </Tooltip>
-      )}
-      {info && infoType === 'dialog' && (
-        <InfoIcon
-          className={styles.InfoIcon}
-          data-testid="info-icon"
-          onClick={() => handleInfoClick()}
+      <div>
+        <FormControlLabel
+          control={
+            <CheckboxElement
+              data-testid="checkboxLabel"
+              classes={darkCheckbox ? { colorPrimary: styles.CheckboxColor } : null}
+              {...field}
+              color="primary"
+              checked={field.value ? field.value : false}
+              onChange={handleChangeCallback}
+              disabled={disabled}
+            />
+          }
+          labelPlacement="end"
+          label={title}
+          classes={{
+            label: addLabelStyle ? styles.Label : undefined,
+            root: styles.Root,
+          }}
         />
-      )}
+        {info?.title && infoType === 'tooltip' && (
+          <Tooltip tooltipClass={styles.Tooltip} title={info.title} placement="right">
+            <InfoIcon className={styles.InfoIcon} />
+          </Tooltip>
+        )}
+        {info && infoType === 'dialog' && (
+          <InfoIcon
+            className={styles.InfoIcon}
+            data-testid="info-icon"
+            onClick={() => handleInfoClick()}
+          />
+        )}
+      </div>
+      {form && form.errors[field.name] && form.touched[field.name] ? (
+        <FormHelperText className={styles.DangerText}>{form.errors[field.name]}</FormHelperText>
+      ) : null}
     </div>
   );
 };

src/components/UI/ImportButton/ImportButton.tsx

@@ -7,9 +7,10 @@ export interface ImportButtonProps {
   title: string;
   onImport: any;
   afterImport: any;
+  id?: string;
 }
 
-export const ImportButton = ({ title, onImport, afterImport }: ImportButtonProps) => {
+export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const changeHandler = (event: any) => {
     const media = event.target.files[0];
@@ -29,6 +30,7 @@ export const ImportButton = ({ title, onImport, afterImport }: ImportButtonProps
         name="file"
         onChange={changeHandler}
         data-testid="import"
+        id={id}
       />
       <Button
         onClick={() => {

src/containers/Collection/CollectionList/CollectionList.test.tsx

@@ -25,16 +25,28 @@ import {
   updateCollectionWaGroupQuery,
 } from 'mocks/Groups';
 import { setNotification } from 'common/notification';
-import { setVariables } from 'common/constants';
+import { CONTACTS_COLLECTION, setVariables } from 'common/constants';
 import { setUserRolePermissions } from 'context/role';
 
+const variables = {
+  filter: {
+    groupType: CONTACTS_COLLECTION,
+  },
+  opts: {
+    limit: 50,
+    offset: 0,
+    order: 'ASC',
+    orderWith: 'label',
+  },
+};
+
 const mocks = [
   countCollectionQuery,
   countCollectionQuery,
   countCollectionQuery,
-  filterCollectionQuery,
-  filterCollectionQuery,
-  filterCollectionQuery,
+  filterCollectionQuery(variables),
+  filterCollectionQuery(variables),
+  filterCollectionQuery(variables),
   getPublishedFlowQuery,
   getPublishedFlowQuery,
   getCollectionContactsQuery,

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css

@@ -1,11 +1,16 @@
 .Container {
-  padding-left: 40px;
-  margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 50%;
+  max-height: 65%;
+  background-color: #fff;
+  border-radius: 15px;
+  padding: 1rem 2rem;
 }
 
 .Instructions {
   max-width: 500px;
-  color: #93a29b;
   font-size: 16px;
 }
 
@@ -105,3 +110,8 @@
   position: absolute;
   right: 12px;
 }
+
+.Buttons button {
+  border-radius: 8px;
+  width: 30%;
+}

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx

@@ -1,34 +1,29 @@
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';
-
 import { CONTACT_MANAGE_HELP_LINK, UPLOAD_CONTACTS_ADMIN_SAMPLE } from 'config';
 import { Button } from 'components/UI/Form/Button/Button';
-import { Heading } from 'components/UI/Heading/Heading';
 import UploadIcon from 'assets/images/icons/UploadLight.svg?react';
 import FileIcon from 'assets/images/icons/Document/Light.svg?react';
 import CrossIcon from 'assets/images/icons/Cross.svg?react';
 import { MOVE_CONTACTS } from 'graphql/mutations/Contact';
-import { exportCsvFile, slicedString } from 'common/utils';
+import { slicedString } from 'common/utils';
 import { setNotification } from 'common/notification';
 import styles from './AdminContactManagement.module.css';
-import { contactVariablesInfo } from 'common/HelpData';
 
 export const AdminContactManagement = () => {
   const [fileName, setFileName] = useState<string>('');
   const [errors, setErrors] = useState<any>([]);
   const [csvContent, setCsvContent] = useState<String | null | ArrayBuffer>('');
   const [uploadingContacts, setUploadingContacts] = useState(false);
-  const { t } = useTranslation();
 
   const [moveContacts] = useMutation(MOVE_CONTACTS, {
-    onCompleted: (data: any) => {
-      if (data.errors) {
-        setErrors(data.errors);
+    onCompleted: ({ moveContacts }) => {
+      const { errors, status } = moveContacts;
+      if (errors) {
+        setErrors(errors);
       } else {
-        exportCsvFile(data.moveContacts.csvRows, 'results');
         setUploadingContacts(false);
-        setNotification(t('Contacts have been updated'));
+        setNotification(status);
       }
       setFileName('');
     },
@@ -58,13 +53,10 @@
   };
 
   return (
-    <div>
-      <Heading
-        formTitle="Contact Management"
-        showHeaderHelp={false}
-        helpData={contactVariablesInfo}
-      />
-      <div className={styles.Container}>
+    <div className={styles.Container}>
+      <div>
+        <h2>Move contacts</h2>
+
         <div className={styles.Instructions}>
           You can move contacts to collections in bulk or update their contact information. Please
           create csv file that exactly matches the sample. Here are the &nbsp;
@@ -85,6 +77,7 @@
                 <>
                   <span>{fileName}</span>
                   <CrossIcon
+                    data-testid="cross-icon"
                     className={styles.CrossIcon}
                     onClick={(event: any) => {
                       event.preventDefault();
@@ -121,6 +114,9 @@
               </div>
             ))}
         </div>
+      </div>
+
+      <div className={styles.Buttons}>
         <Button
           data-testid="uploadButton"
           variant="contained"

src/containers/ContactManagement/ContactManagement.module.css

@@ -0,0 +1,30 @@
+.MainContainer {
+  display: flex;
+  column-gap: 1rem;
+  width: 100% !important;
+  height: 100vh !important;
+  background-color: #f8faf5;
+  padding: 1rem;
+  color: #000;
+}
+
+.MainContainer h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.Container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 50%;
+  max-height: 65%;
+  background-color: #fff;
+  border-radius: 15px;
+  padding: 1.5rem 2rem;
+}
+
+.Buttons button {
+  border-radius: 8px;
+  width: 30%;
+}

src/containers/ContactManagement/ContactManagement.test.tsx

@@ -1,13 +1,24 @@
-import { render, screen } 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 { setUserSession } from 'services/AuthService';
 import ContactManagement from './ContactManagement';
+import { filterCollectionQuery } from 'mocks/Collection';
+import { CONTACTS_COLLECTION } from 'common/constants';
 
-const mocks = getAllOrganizations;
+const mocks = [
+  filterCollectionQuery({
+    filter: {
+      groupType: CONTACTS_COLLECTION,
+    },
+    opts: {
+      limit: 50,
+      offset: 0,
+      order: 'ASC',
+    },
+  }),
+];
 
 const contactManagement = (
   <MockedProvider mocks={mocks} addTypename={false}>
@@ -17,9 +28,16 @@ const contactManagement = (
   </MockedProvider>
 );
 
-setUserSession(JSON.stringify({ roles: [{ label: 'Staff' }], organization: { id: '1' } }));
-
-test('Show unauthorized access for staff user', async () => {
+test('it opens contact upload dialog', async () => {
   render(contactManagement);
-  expect(screen.getByText('Unauthorized access')).toBeInTheDocument();
+
+  await waitFor(() => {
+    expect(screen.getByText('Contact Management')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByTestId('uploadContactsBtn'));
+
+  await waitFor(() => {
+    expect(screen.getByText('Upload Contacts')).toBeInTheDocument();
+  });
 });