Merge branch 'fix/test-cases' of github.com:glific/glific-frontend in…

…to fix/test-cases

package.json

@@ -1,6 +1,6 @@
 {
   "name": "glific-frontend",
-  "version": "6.1.7",
+  "version": "6.1.9",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -25,7 +25,6 @@
     "@nyaruka/temba-components": "^0.108.1",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.5.0",
-    "@types/jest": "^29.5.13",
     "@vitejs/plugin-react": "^4.3.1",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.7.0",
@@ -103,7 +102,6 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/draft-js": "^0.11.18",
     "@types/emoji-mart": "^3.0.14",
     "@types/node": "^22.7.2",
     "@types/react": "^18.3.9",
@@ -127,7 +125,6 @@
     "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
     "typescript": "^5.6.2",
-    "vite-plugin-eslint": "^1.8.1",
     "vitest": "^2.1.1",
     "yarn-upgrade-all": "^0.7.4"
   }

src/components/floweditor/FlowEditor.test.tsx

@@ -14,6 +14,7 @@ import {
   getFreeFlow,
   resetFlowCount,
   getFlowTranslations,
+  getTemplateFlow,
 } from 'mocks/Flow';
 import { conversationQuery } from 'mocks/Chat';
 import {
@@ -38,6 +39,10 @@ vi.mock('react-router-dom', async () => {
 vi.mock('axios');
 const mockedAxios = axios as any;
 
+vi.mock('../simulator/Simulator', () => ({
+  default: ({ message }: { message: string }) => <div data-testid="simulator">{message}</div>, // Mocking the component's behavior
+}));
+
 const mocks = [
   messageReceivedSubscription({ organizationId: null }),
   messageSendSubscription({ organizationId: null }),
@@ -58,6 +63,7 @@ const mocks = [
 const activeFlowMocks = [...mocks, getActiveFlow];
 const inActiveFlowMocks = [...mocks, getInactiveFlow];
 const noKeywordMocks = [...mocks, getFlowWithoutKeyword, resetFlowCount];
+const templateFlowMocks = [...mocks, getTemplateFlow, resetFlowCount];
 
 const wrapperFunction = (mocks: any) => (
   <MockedProvider mocks={mocks} addTypename={false}>
@@ -197,12 +203,12 @@ test('start with a keyword message if the simulator opens in floweditor screen',
   await waitFor(() => {
     expect(screen.findByText('help workflow'));
   });
+
   fireEvent.click(screen.getByTestId('previewButton'));
+
   await waitFor(() => {
-    expect(screen.getByTestId('simulator-container'));
+    expect(screen.getByTestId('simulator')).toHaveTextContent('draft:help');
   });
-
-  // need some assertion
 });
 
 test('if the flow the inactive', async () => {
@@ -217,7 +223,9 @@ test('if the flow the inactive', async () => {
     expect(screen.findByTestId('beneficiaryName'));
   });
 
-  // need some assertion
+  await waitFor(() => {
+    expect(screen.getByTestId('simulator')).toHaveTextContent('Sorry, the flow is not active');
+  });
 });
 
 test('flow with no keywords', async () => {
@@ -228,11 +236,10 @@ test('flow with no keywords', async () => {
     expect(screen.findByText('help workflow'));
   });
   fireEvent.click(screen.getByTestId('previewButton'));
+
   await waitFor(() => {
-    expect(screen.findByTestId('beneficiaryName'));
+    expect(screen.getByTestId('simulator')).toHaveTextContent('No keyword found');
   });
-
-  // need some assertion
 });
 
 test('reset flow counts', async () => {
@@ -293,3 +300,17 @@ test('it translates the flow', async () => {
     expect(notificationSpy).toHaveBeenCalled();
   });
 });
+
+test('template words should have template: prefix', async () => {
+  mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} }));
+  render(wrapperFunction(templateFlowMocks));
+
+  await waitFor(() => {
+    expect(screen.findByText('help workflow'));
+  });
+  fireEvent.click(screen.getByTestId('previewButton'));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('simulator')).toHaveTextContent('template:help workflow');
+  });
+});

src/components/floweditor/FlowEditor.tsx

@@ -9,7 +9,7 @@ import TranslateIcon from 'assets/images/icons/LanguageTranslation.svg?react';
 import PublishIcon from 'assets/images/icons/PublishIcon.svg?react';
 import { Button } from 'components/UI/Form/Button/Button';
 import { APP_NAME } from 'config/index';
-import { Simulator } from 'components/simulator/Simulator';
+import Simulator from 'components/simulator/Simulator';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setErrorMessage, setNotification } from 'common/notification';
 import { PUBLISH_FLOW, RESET_FLOW_COUNT } from 'graphql/mutations/Flow';
@@ -332,9 +332,9 @@ export const FlowEditor = () => {
   const getFlowKeyword = () => {
     const flows = flowName ? flowName.flows : null;
     if (flows && flows.length > 0) {
-      const { isActive, keywords, isTemplate } = flows[0];
+      const { isActive, keywords, isTemplate, name } = flows[0];
       if (isTemplate) {
-        return 'temp:';
+        return `template:${name}`;
       } else if (isActive && keywords.length > 0) {
         return `draft:${keywords[0]}`;
       } else if (keywords.length === 0) {
@@ -450,7 +450,6 @@ export const FlowEditor = () => {
           hasResetButton
           flowSimulator
           message={getFlowKeyword()}
-          flowId={flowId}
         />
       )}
       {modal}

src/components/simulator/Simulator.test.tsx

@@ -12,7 +12,7 @@ import {
   simulatorReleaseSubscription,
   simulatorSearchQuery,
 } from 'mocks/Simulator';
-import { Simulator } from './Simulator';
+import Simulator from './Simulator';
 import { setUserSession } from 'services/AuthService';
 
 vi.mock('axios');

src/components/simulator/Simulator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useApolloClient, useLazyQuery, useMutation, useSubscription } from '@apollo/client';
+import { useApolloClient, useLazyQuery, useSubscription } from '@apollo/client';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { Button, ClickAwayListener } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -56,7 +56,6 @@ import styles from './Simulator.module.css';
 import { LocationRequestTemplate } from 'containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate';
 import { BackdropLoader } from 'containers/Flow/FlowTranslation';
 import { SIMULATOR_RELEASE_SUBSCRIPTION } from 'graphql/subscriptions/PeriodicInfo';
-import { ADD_FLOW_TO_CONTACT } from 'graphql/mutations/Flow';
 
 export interface SimulatorProps {
   setShowSimulator?: any;
@@ -68,7 +67,6 @@ export interface SimulatorProps {
   interactiveMessage?: any;
   showHeader?: boolean;
   hasResetButton?: boolean;
-  flowId?: string;
 }
 
 interface Sender {
@@ -126,15 +124,14 @@ const getSimulatorVariables = (id: any) => ({
   },
 });
 
-export const Simulator = ({
+const Simulator = ({
   setShowSimulator = () => {},
   message,
   isPreviewMessage,
   getSimulatorId = () => {},
   interactiveMessage,
   showHeader = true,
   hasResetButton = false,
-  flowId = '',
 }: SimulatorProps) => {
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
@@ -158,8 +155,6 @@ export const Simulator = ({
   // chat messages will be shown on simulator
   const isSimulatedMessage = true;
 
-  const [addFlow] = useMutation(ADD_FLOW_TO_CONTACT);
-
   const sendMessage = (senderDetails: Sender, interactivePayload?: any, templateValue?: any) => {
     const sendMessageText = inputMessage === '' && message ? message : inputMessage;
 
@@ -182,15 +177,6 @@ export const Simulator = ({
     } else {
       payload.text = sendMessageText;
     }
-    if (sendMessageText.startsWith('temp:')) {
-      addFlow({
-        variables: {
-          flowId: flowId,
-          contactId: senderDetails.id,
-        },
-      });
-      return;
-    }
 
     axios
       .post(GUPSHUP_CALLBACK_URL, {
@@ -639,3 +625,5 @@ export const Simulator = ({
     <BackdropLoader text="Please wait while the simulator is loading" />
   );
 };
+
+export default Simulator;

src/config/apolloclient.ts

@@ -105,7 +105,7 @@ const gqlClient = (navigate: any) => {
       // @ts-ignore
       switch (networkError.statusCode) {
         case 401:
-          setLogs(`Error 401: logging user out`, 'error');
+          setLogs(`Error 401: logging user out,  ${JSON.stringify(networkError)}`, 'error');
           navigate('/logout/session');
           break;
         default:

src/config/logs.ts

@@ -1,8 +1,12 @@
 import pino from 'pino';
 import { createPinoBrowserSend, createWriteStream } from 'pino-logflare';
 import { LOGFLARE_API, LOGFLARE_SOURCE } from '.';
+import { getUserSession } from 'services/AuthService';
 
 const setLogs = (message: any, type: string) => {
+  const orgId = getUserSession('organizationId');
+  const userId = getUserSession('id');
+
   let logger: any;
 
   if (LOGFLARE_API && LOGFLARE_SOURCE) {
@@ -33,11 +37,13 @@ const setLogs = (message: any, type: string) => {
       stream
     );
 
-    let logMessage = message;
+    let logMessage;
     if (typeof message === 'object') {
-      logMessage = JSON.stringify(message);
+      message = JSON.stringify(message);
     }
 
+    logMessage = `org_id: ${orgId} user_id: ${userId} [${type}] ${message}`;
+
     // log some events
     switch (type) {
       case 'info':

src/containers/Chat/ChatInterface/ChatInterface.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@apollo/client';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Simulator } from 'components/simulator/Simulator';
+import Simulator from 'components/simulator/Simulator';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
 import { SEARCH_QUERY } from 'graphql/queries/Search';
 import { getUserRole } from 'context/role';

src/containers/Chat/ChatMessages/ConversationHeader/ConversationHeader.tsx

@@ -473,8 +473,8 @@ export const ConversationHeader = ({
     options = (
       <>
         {viewDetails}
-        {addMember}
         {flowButton}
+        {addMember}
       </>
     );
   } else {