Search by label added in template Screen

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

@@ -1,8 +1,8 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor } from '@testing-library/react';
-import { AddAutoComplete } from './AddAutoComplete';
+import { CreateAutoComplete } from './CreateAutoComplete';
 import { CREATE_LABEL } from 'graphql/mutations/Tags';
-describe('<AddAutoComplete />', () => {
+describe('<CreateAutoComplete />', () => {
   const mocks = [
     {
       request: {
@@ -39,10 +39,10 @@ describe('<AddAutoComplete />', () => {
     form: { dirty: false, touched: false, errors: false, setFieldValue: mockHandleChange },
   };
 
-  it('renders <AddAutoComplete /> component', () => {
+  it('renders <CreateAutoComplete /> component', () => {
     const container = render(
       <MockedProvider mocks={mocks}>
-        <AddAutoComplete {...defaultProps} />
+        <CreateAutoComplete {...defaultProps} />
       </MockedProvider>
     );
     waitFor(() => {

src/components/UI/Form/AddAutoComplete/AddAutoComplete.tsx → src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.tsx

@@ -2,8 +2,9 @@ import { useMutation } from '@apollo/client';
 import { AutoComplete, AutocompleteProps } from '../AutoComplete/AutoComplete';
 import { CREATE_LABEL } from 'graphql/mutations/Tags';
 
-export interface AddAutoCompleteProp extends AutocompleteProps {}
-export const AddAutoComplete = ({ ...rest }: AddAutoCompleteProp) => {
+export interface CreateAutoCompleteProp extends AutocompleteProps {}
+
+export const CreateAutoComplete = ({ ...rest }: CreateAutoCompleteProp) => {
   const [createTag] = useMutation(CREATE_LABEL);
 
   const handleCreateItem = async (value: string) => {

src/containers/Flow/Flow.tsx

@@ -151,7 +151,7 @@ export const Flow = () => {
       multiple: false,
       textFieldProps: {
         variant: 'outlined',
-        label: t('Label'),
+        label: t('Tag'),
       },
     },
     {

src/containers/Flow/FlowList/FlowList.tsx

@@ -233,7 +233,7 @@ export const FlowList = () => {
   const tagFilter = (
     <AutoComplete
       isFilterType
-      placeholder="Select label"
+      placeholder="Select tag"
       options={tag ? tag.tags : []}
       optionLabel="label"
       disabled={false}

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -36,7 +36,7 @@ import {
   validator,
 } from './InteractiveMessage.helper';
 import { GET_TAGS } from 'graphql/queries/Tags';
-import { AddAutoComplete } from 'components/UI/Form/AddAutoComplete/AddAutoComplete';
+import { CreateAutoComplete } from 'components/UI/Form/CreateAutoComplete/CreateAutoComplete';
 
 const interactiveMessageIcon = (
   <InteractiveMessageIcon className={styles.Icon} data-testid="interactive-icon" />
@@ -535,22 +535,6 @@ export const InteractiveMessage = () => {
       },
       onGlobalButtonInputChange: (value: string) => setGlobalButton(value),
     },
-    {
-      component: AddAutoComplete,
-      name: 'tagId',
-      options: tag ? tag.tags : [],
-      optionLabel: 'label',
-      disabled: false,
-      hasCreateOption: true,
-      multiple: false,
-      onChange: (value: any) => {
-        setTagId(value);
-      },
-      textFieldProps: {
-        variant: 'outlined',
-        label: t('Label'),
-      },
-    },
   ];
 
   const getTemplateButtonPayload = (typeVal: string, buttons: Array<any>) => {
@@ -718,7 +702,26 @@ export const InteractiveMessage = () => {
     },
   ];
 
-  const formFields = templateType === LIST ? [...fields] : [...fields, ...attachmentInputs];
+  let formFields: any = templateType === LIST ? [...fields] : [...fields, ...attachmentInputs];
+  formFields = [
+    ...formFields,
+    {
+      component: CreateAutoComplete,
+      name: 'tagId',
+      options: tag ? tag.tags : [],
+      optionLabel: 'label',
+      disabled: false,
+      hasCreateOption: true,
+      multiple: false,
+      onChange: (value: any) => {
+        setTagId(value);
+      },
+      textFieldProps: {
+        variant: 'outlined',
+        label: t('Tag'),
+      },
+    },
+  ];
 
   const validation = validator(templateType, t);
   const validationScheme = Yup.object().shape(validation, [['type', 'attachmentURL']]);

src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx

@@ -138,7 +138,7 @@ export const InteractiveMessageList = () => {
   const tagFilter = (
     <AutoComplete
       isFilterType
-      placeholder="Select label"
+      placeholder="Select tag"
       options={tag ? tag.tags : []}
       optionLabel="label"
       disabled={false}

src/containers/Template/Form/HSM/HSM.tsx

@@ -26,6 +26,7 @@ export const HSM = () => {
     media: {},
     body: '',
   });
+
   const [shortcode, setShortcode] = useState('');
   const [example, setExample] = useState(EditorState.createEmpty());
   const [category, setCategory] = useState<any>({ label: '', id: '' });

src/containers/Template/Form/Template.tsx

@@ -16,10 +16,12 @@ import { LanguageBar } from 'components/UI/LanguageBar/LanguageBar';
 import { GET_TEMPLATE, FILTER_TEMPLATES } from 'graphql/queries/Template';
 import { CREATE_MEDIA_MESSAGE } from 'graphql/mutations/Chat';
 import { USER_LANGUAGES } from 'graphql/queries/Organization';
+import { GET_TAGS } from 'graphql/queries/Tags';
 import { CREATE_TEMPLATE, UPDATE_TEMPLATE, DELETE_TEMPLATE } from 'graphql/mutations/Template';
 import { MEDIA_MESSAGE_TYPES, CALL_TO_ACTION, QUICK_REPLY } from 'common/constants';
 import { getPlainTextFromEditor, getEditorFromContent } from 'common/RichEditor';
 import Loading from 'components/UI/Layout/Loading/Loading';
+import { CreateAutoComplete } from 'components/UI/Form/CreateAutoComplete/CreateAutoComplete';
 import { validateMedia } from 'common/utils';
 import styles from './Template.module.css';
 
@@ -171,6 +173,7 @@ const Template = ({
       ? options.filter(({ label }) => label !== 'AUDIO' && label !== 'STICKER')
       : options;
 
+  const [tagId, setTagId] = useState<any>(null);
   const [label, setLabel] = useState('');
   const [body, setBody] = useState(EditorState.createEmpty());
   const [example, setExample] = useState(EditorState.createEmpty());
@@ -196,6 +199,11 @@ const Template = ({
   const location: any = useLocation();
   const params = useParams();
 
+  const { data: tag } = useQuery(GET_TAGS, {
+    variables: {},
+    fetchPolicy: 'network-only',
+  });
+
   const states = {
     language,
     label,
@@ -205,6 +213,7 @@ const Template = ({
     shortcode,
     example,
     category,
+    tagId,
     isActive,
     templateButtons,
     isAddButtonChecked,
@@ -221,6 +230,7 @@ const Template = ({
     MessageMedia: MessageMediaValue,
     shortcode: shortcodeValue,
     category: categoryValue,
+    tag: tagIdValue,
     buttonType: templateButtonType,
     buttons,
     hasButtons,
@@ -302,6 +312,9 @@ const Template = ({
     if (categoryValue) {
       setCategory({ label: categoryValue, id: categoryValue });
     }
+    if (tagIdValue) {
+      setTagId(tagIdValue);
+    }
   };
 
   const updateStates = ({
@@ -731,14 +744,31 @@ const Template = ({
     },
   ];
 
+  const tags = {
+    component: CreateAutoComplete,
+    name: 'tagId',
+    options: tag ? tag.tags : [],
+    optionLabel: 'label',
+    disabled: false,
+    hasCreateOption: true,
+    multiple: false,
+    onChange: (value: any) => {
+      setTagId(value);
+    },
+    textFieldProps: {
+      variant: 'outlined',
+      label: t('Tag'),
+    },
+  };
+
   const hsmFields = formField && [
     ...formField.slice(0, 1),
     ...templateRadioOptions,
     ...formField.slice(1),
   ];
 
   const fields = defaultAttribute.isHsm
-    ? [formIsActive, ...formFields, ...hsmFields, ...attachmentField]
+    ? [formIsActive, ...formFields, ...hsmFields, ...attachmentField, tags]
     : [...formFields, ...attachmentField];
 
   // Creating payload for button template
@@ -849,7 +879,7 @@ const Template = ({
       }
       if (payloadCopy.isHsm) {
         payloadCopy.category = payloadCopy.category.label;
-
+        payloadCopy.tagId = payload.tagId.id;
         if (isAddButtonChecked && templateType) {
           const templateButtonData = getButtonTemplatePayload();
           Object.assign(payloadCopy, { ...templateButtonData });

src/containers/Template/List/SpeedSendList/SpeedSendList.test.tsx

@@ -7,7 +7,7 @@ import { setUserSession } from 'services/AuthService';
 import { SpeedSendList } from './SpeedSendList';
 
 afterEach(cleanup);
-const mocks = TEMPLATE_MOCKS;
+const mocks = [...TEMPLATE_MOCKS, ...TEMPLATE_MOCKS];
 
 const speedSend = (
   <MockedProvider mocks={mocks} addTypename={false}>

src/containers/Template/List/Template.test.tsx

@@ -76,7 +76,7 @@ const hsmProps: any = {
 };
 
 describe('HSM templates', () => {
-  const hsmMocks = [...HSM_LIST, bulkApplyMutation];
+  const hsmMocks = [...HSM_LIST, ...HSM_LIST, bulkApplyMutation];
   const hsmComponent = (
     <Router>
       <MockedProvider mocks={hsmMocks} addTypename={false}>
@@ -142,6 +142,7 @@ describe('HSM templates', () => {
 
 describe('Provider: Gupshup enterprise', () => {
   const hsmMocks = [
+    ...HSM_LIST,
     ...HSM_LIST,
     getOrganizationBSP,
     importTemplateMutation,

src/containers/Template/List/Template.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Checkbox, FormControlLabel } from '@mui/material';
 
 import { List } from 'containers/List/List';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { WhatsAppToJsx } from 'common/RichEditor';
 import { DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants';
 import {
@@ -29,6 +29,8 @@ import { setNotification } from 'common/notification';
 import { BULK_APPLY_SAMPLE_LINK } from 'config';
 import styles from './Template.module.css';
 import { CopyAllOutlined } from '@mui/icons-material';
+import { GET_TAGS } from 'graphql/queries/Tags';
+import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 
 const getLabel = (label: string) => <div className={styles.LabelText}>{label}</div>;
 
@@ -80,11 +82,16 @@ export const Template = ({
   const { t } = useTranslation();
 
   const { provider } = useContext(ProviderContext);
-
+  const [selectedTag, setSelectedTag] = useState<any>(null);
   const [importing, setImporting] = useState(false);
 
   const [filters, setFilters] = useState<any>({ ...statusFilter, APPROVED: true });
 
+  const { data: tag } = useQuery(GET_TAGS, {
+    variables: {},
+    fetchPolicy: 'network-only',
+  });
+
   const [importTemplatesMutation] = useMutation(IMPORT_TEMPLATES, {
     onCompleted: (data: any) => {
       setImporting(false);
@@ -344,6 +351,36 @@ export const Template = ({
     button.show = false;
   }
 
+  // OnChange handler for the dropdown
+  const handleDropdownChange = (event: any) => {
+    setSelectedTag(event.target.value);
+  };
+
+  const tagFilter = (
+    <AutoComplete
+      isFilterType
+      placeholder="Select tag"
+      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,
+      }}
+    />
+  );
+
+  appliedFilters = {
+    ...appliedFilters,
+    ...(selectedTag?.id && { tagIds: [parseInt(selectedTag?.id)] }),
+  };
+
   return (
     <List
       secondaryButton={secondaryButton}
@@ -362,6 +399,7 @@ export const Template = ({
       filterList={isHSM && filterTemplateStatus}
       collapseOpen={open}
       collapseRow={Id}
+      filterDropdowm={isHSM && tagFilter}
     />
   );
 };

src/containers/Template/Template.test.helper.ts

@@ -14,6 +14,7 @@ import {
 } from 'mocks/Organization';
 import { templateCountQuery } from 'mocks/Template';
 import { CREATE_MEDIA_MESSAGE } from 'graphql/mutations/Chat';
+import { GET_TAGS } from 'graphql/queries/Tags';
 
 const count = templateCountQuery(false, 2);
 
@@ -268,6 +269,28 @@ const getTemplateData = {
 };
 
 export const TEMPLATE_MOCKS = [
+  {
+    request: {
+      query: GET_TAGS,
+      variables: {},
+    },
+    result: {
+      data: {
+        tags: [
+          {
+            __typename: 'Tag',
+            id: '1',
+            label: 'Messages',
+          },
+          {
+            __typename: 'Tag',
+            id: '2',
+            label: 'Contacts',
+          },
+        ],
+      },
+    },
+  },
   {
     request: {
       query: CREATE_TEMPLATE,

src/graphql/queries/Template.ts

@@ -60,6 +60,10 @@ export const GET_TEMPLATE = gql`
           caption
           sourceUrl
         }
+        tag {
+          id
+          label
+        }
         category
         shortcode
         example

src/i18n/en/en.json

@@ -414,10 +414,11 @@
   "Opened by": "Opened by",
   "Change assignee": "Change assignee",
   "Select Tag": "Select Tag",
-  "Select Label": "Select Label",
+  "Select tag": "Select tag",
   "View profile": "View profile",
   "Copy UUID": "Copy UUID",
   "Org Id": "Org Id",
+  "Tag": "Tag",
   "Export collection": "Export collection",
   "Sheet type": "Sheet type"
 }