Merge pull request #2915 from glific/enhancement/hsm-templates

HSM template new UI

.github/workflows/cypress-testing.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master, test_cases_wa_group]
+    branches: [master]
 
 jobs:
   glific:
@@ -96,7 +96,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
-          git checkout main
+          git checkout hsm-templates
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add [email protected]

src/App.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { waitFor, render, screen } from '@testing-library/react';

src/common/RichEditor.tsx

@@ -40,6 +40,7 @@ export const setDefaultValue = (editor: any, initialValue: any) => {
     const paragraph = $createParagraphNode();
     paragraph.append($createTextNode(initialValue || ''));
     root.append(paragraph);
+    paragraph.selectEnd();
   });
 };
 

src/components/UI/Form/AutoComplete/AutoComplete.tsx

@@ -117,7 +117,7 @@ export const AutoComplete = ({
   })();
 
   const getLabel = (option: any) => {
-    if (option[optionLabel]) {
+    if (option[optionLabel] || option[optionLabel] === '') {
       return option[optionLabel];
     }
     if (additionalOptionLabel) {

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

@@ -3,6 +3,10 @@ import { backspace } from 'common/test-utils';
 import { Calendar } from './Calendar';
 import dayjs from 'dayjs';
 
+afterEach(() => {
+  (window as any).matchMedia = null;
+});
+
 const setFieldValueMock = vi.fn();
 describe('<Calendar />', () => {
   const getProps = () => ({

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

@@ -4,6 +4,10 @@ import { DateTimePicker } from './DateTimePicker';
 import dayjs from 'dayjs';
 import { userEvent } from '@testing-library/user-event';
 
+afterEach(() => {
+  (window as any).matchMedia = null;
+});
+
 describe('<DateTimePicker />', () => {
   const onChangeMock = vi.fn();
   const setFieldMock = vi.fn();

src/components/UI/Form/EmojiInput/Editor.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { render } from '@testing-library/react';
 import { Editor } from './Editor';
 import { LexicalWrapper } from 'common/LexicalWrapper';
@@ -10,7 +9,7 @@ const mockIntersectionObserver = class {
   disconnect() {}
 };
 
-const handleChange = vi.fn;
+const handleChange = vi.fn();
 
 (window as any).IntersectionObserver = mockIntersectionObserver;
 

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

@@ -1,8 +1,8 @@
-import 'mocks/matchMediaMock';
 import { render, screen } from '@testing-library/react';
 import { EmojiInput } from './EmojiInput';
 
 import userEvent from '@testing-library/user-event';
+import { LexicalWrapper } from 'common/LexicalWrapper';
 
 const setFieldValueMock = vi.fn();
 
@@ -16,18 +16,20 @@ const mockIntersectionObserver = class {
 (window as any).IntersectionObserver = mockIntersectionObserver;
 
 const wrapper = (
-  <EmojiInput
-    form={{
-      touched: false,
-      errors: {},
-      values: { input: '' },
-      setFieldValue: setFieldValueMock,
-    }}
-    field={{ name: 'input', value: '', onChange: vi.fn() }}
-    label="Title"
-    placeholder="Title"
-    rows={10}
-  />
+  <LexicalWrapper>
+    <EmojiInput
+      form={{
+        touched: false,
+        errors: {},
+        values: { input: '' },
+        setFieldValue: setFieldValueMock,
+      }}
+      field={{ name: 'input', value: '', onChange: vi.fn() }}
+      label="Title"
+      placeholder="Title"
+      rows={10}
+    />
+  </LexicalWrapper>
 );
 
 vi.mock('components/UI/EmojiPicker/EmojiPicker', async (importOriginal) => {

src/components/UI/Form/EmojiInput/EmojiInput.tsx

@@ -6,7 +6,6 @@ import { Editor } from './Editor';
 import Styles from './EmojiInput.module.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $createTextNode, $getSelection, $isRangeSelection } from 'lexical';
-import { LexicalWrapper } from 'common/LexicalWrapper';
 
 export interface EmojiInputProps {
   field: { name: string; onChange?: any; value: any; onBlur?: any };
@@ -32,6 +31,7 @@ export const EmojiInput = ({
   handleChange,
   handleBlur,
   translation,
+  form,
   ...props
 }: EmojiInputProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -49,9 +49,13 @@ export const EmojiInput = ({
   );
 
   const input = (
-    <LexicalWrapper>
-      <Editor field={{ name, value, onBlur }} picker={picker} onChange={handleChange} {...props} />
-    </LexicalWrapper>
+    <Editor
+      field={{ name, value, onBlur }}
+      picker={picker}
+      onChange={handleChange}
+      form={form}
+      {...props}
+    />
   );
 
   return (

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

@@ -3,6 +3,10 @@ import UserEvent from '@testing-library/user-event';
 
 import { TimePicker } from './TimePicker';
 
+afterEach(() => {
+  (window as any).matchMedia = null;
+});
+
 const setFieldValueMock = vi.fn();
 const timePickerProps: any = (disabled: boolean) => {
   return {

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

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 

src/components/UI/MessageDialog/MessageDialog.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { fireEvent, render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 

src/containers/Chat/Chat.test.tsx

@@ -1,5 +1,5 @@
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
-import 'mocks/matchMediaMock';
+
 import { MockedProvider } from '@apollo/client/testing';
 
 import { setUserSession } from 'services/AuthService';

src/containers/Chat/ChatConversations/ConversationList/ConversationList.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { MemoryRouter, BrowserRouter as Router } from 'react-router-dom';
 import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

src/containers/Chat/ChatInterface/ChatInterface.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { MemoryRouter } from 'react-router-dom';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';

src/containers/Chat/ChatMessages/ChatMessages.test.tsx

@@ -1,4 +1,3 @@
-import 'mocks/matchMediaMock';
 import { InMemoryCache } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';

src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.test.tsx

@@ -8,6 +8,10 @@ import { getAllOrganizations } from 'mocks/Organization';
 import { getOrganizationList, exportConsulting as exportConsultingMock } from 'mocks/Consulting';
 import * as utils from 'common/utils';
 
+afterEach(() => {
+  (window as any).matchMedia = null;
+});
+
 const mocks = [...getAllOrganizations, getOrganizationList, exportConsultingMock];
 setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
 

src/containers/Form/FormLayout.tsx

@@ -22,6 +22,7 @@ import { organizationHasDynamicRole } from 'common/utils';
 import { getUserRole } from 'context/role';
 import styles from './FormLayout.module.css';
 import { HelpDataProps } from 'common/HelpData';
+import { LexicalWrapper } from 'common/LexicalWrapper';
 
 export interface FormLayoutProps {
   deleteItemQuery: DocumentNode;
@@ -536,67 +537,69 @@ export const FormLayout = ({
   };
 
   const form = (
-    <form onSubmit={formik.handleSubmit}>
-      <div className={[styles.Form, customStyles].join(' ')} data-testid="formLayout">
-        {formFieldItems.map((field, index) => {
-          const key = index;
-
-          if (field.skip) {
-            return null;
-          }
-
-          return (
-            <Fragment key={key}>
-              {field.label && (
-                <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
-                  {field.label}
-                </Typography>
-              )}
-              <Field key={key} {...field} onSubmit={formik.submitForm} />
-            </Fragment>
-          );
-        })}
-        <div className={styles.Buttons}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              onSaveButtonClick(formik.errors);
-              formik.submitForm();
-            }}
-            className={styles.Button}
-            data-testid="submitActionButton"
-            loading={saveClick}
-            disabled={buttonState.status}
-          >
-            {buttonState.status ? buttonState.text : button}
-          </Button>
-          {additionalAction ? (
+    <LexicalWrapper>
+      <form onSubmit={formik.handleSubmit}>
+        <div className={[styles.Form, customStyles].join(' ')} data-testid="formLayout">
+          {formFieldItems.map((field, index) => {
+            const key = index;
+
+            if (field.skip) {
+              return null;
+            }
+
+            return (
+              <Fragment key={key}>
+                {field.label && (
+                  <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
+                    {field.label}
+                  </Typography>
+                )}
+                <Field key={key} {...field} onSubmit={formik.submitForm} />
+              </Fragment>
+            );
+          })}
+          <div className={styles.Buttons}>
             <Button
-              variant="outlined"
+              variant="contained"
               color="primary"
               onClick={() => {
+                onSaveButtonClick(formik.errors);
                 formik.submitForm();
-                setAction(true);
               }}
-              data-testid="additionalActionButton"
+              className={styles.Button}
+              data-testid="submitActionButton"
+              loading={saveClick}
+              disabled={buttonState.status}
+            >
+              {buttonState.status ? buttonState.text : button}
+            </Button>
+            {additionalAction ? (
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={() => {
+                  formik.submitForm();
+                  setAction(true);
+                }}
+                data-testid="additionalActionButton"
+              >
+                {additionalAction.label}
+              </Button>
+            ) : null}
+            <Button
+              variant="outlined"
+              color="secondary"
+              onClick={cancelHandler}
+              data-testid="cancelActionButton"
             >
-              {additionalAction.label}
+              {t('Cancel')}
             </Button>
-          ) : null}
-          <Button
-            variant="outlined"
-            color="secondary"
-            onClick={cancelHandler}
-            data-testid="cancelActionButton"
-          >
-            {t('Cancel')}
-          </Button>
-
-          {deleteButton}
+
+            {deleteButton}
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </LexicalWrapper>
   );
 
   const handleDeleteItem = () => {

src/containers/InteractiveMessage/InteractiveMessage.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import 'mocks/matchMediaMock';
 import { MockedProvider } from '@apollo/client/testing';
 import axios from 'axios';
 import { Route, MemoryRouter, Routes } from 'react-router-dom';
@@ -471,7 +470,7 @@ describe('translates the template', () => {
     });
   });
 
-  test('it translates an already exisiting template', async () => {
+  test('it shows error on translating an already exisiting template', async () => {
     render(renderInteractiveMessage('1', [translateInteractiveTemplateMock(true)]));
 
     await waitFor(() => {

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -83,6 +83,7 @@ export const InteractiveMessage = () => {
   const [language, setLanguage] = useState<any>({});
   const [languageOptions, setLanguageOptions] = useState<any>([]);
   const [editorState, setEditorState] = useState<any>('');
+
   const [dynamicMedia, setDynamicMedia] = useState<boolean>(false);
   const [saveClicked, setSaveClicked] = useState<boolean>(false);
 

src/containers/Template/Form/HSM/HSM.module.css

@@ -3,7 +3,7 @@
   height: 29px;
 }
 
-.IsActive {
+.Checkbox {
   color: #555555;
   font-weight: 400;
   line-height: 18px;