Add status when simulator disconnects (#3582)

* feat: add disconnection banner and handle online/offline events in simulator

* fix: correct disconnection banner logic in simulator component

* fix: update simulator connection tests for accurate banner display

* codacy fixes

* fix: adjust font size for error message and enhance simulator offline test

* fix: enhance disconnection banner tests to verify restoration of connection

Author: akanshaaa19

src/components/simulator/Simulator.module.css

@@ -237,7 +237,6 @@
 
 .Simulator .Screen .Controls div {
   border: none;
-
   border-radius: 999px;
   padding: 5px;
   padding-left: 10px;
@@ -247,7 +246,6 @@
   background-color: white;
   display: flex;
   box-shadow: 0 1px silver;
-
   line-height: 5px;
 }
 
@@ -367,3 +365,14 @@
   white-space: pre-wrap;
   font-weight: 600;
 }
+
+.DisconnectedBanner {
+  margin: 8px 12px;
+  padding: 4px 6px;
+  border-radius: 7px;
+  background-color: #fdd;
+  color: #a94442;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: center;
+}

src/components/simulator/Simulator.test.tsx

@@ -232,3 +232,68 @@ test('simulator should reset on clicking the reset button message', async () =>
     expect(mockedAxios.post).toHaveBeenCalledTimes(2);
   });
 });
+
+test('disconnection banner should not be displayed when simulator is connected', async () => {
+  const connectionProps = getDefaultProps();
+  connectionProps.showSimulator = true;
+
+  Object.defineProperty(window.navigator, 'onLine', {
+    writable: true,
+    value: true,
+  });
+
+  const { queryByText } = render(
+    <MockedProvider mocks={mocks}>
+      <Simulator {...connectionProps} />
+    </MockedProvider>
+  );
+
+  await waitFor(() => {
+    expect(queryByText('Simulator connection lost. Try to reload.')).not.toBeInTheDocument();
+  });
+});
+
+test('disconnection banner should be displayed when simulator connection is lost', async () => {
+  const disconnectionProps = getDefaultProps();
+  disconnectionProps.showSimulator = true;
+  mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} }));
+  const { getByTestId, getByText, queryByText } = render(
+    <MockedProvider mocks={mocks}>
+      <Simulator {...disconnectionProps} />
+    </MockedProvider>
+  );
+
+  await waitFor(() => {
+    expect(getByTestId('simulatorInput')).toBeInTheDocument();
+  });
+
+  fireEvent.change(getByTestId('simulatorInput'), { target: { value: 'something' } });
+
+  await waitFor(() => {
+    fireEvent.keyPress(getByTestId('simulatorInput'), { key: 'Enter', code: 13, charCode: 13 });
+  });
+
+  Object.defineProperty(window.navigator, 'onLine', {
+    writable: true,
+    value: false,
+  });
+
+  // Trigger offline event to simulate real browser behavior
+  window.dispatchEvent(new Event('offline'));
+
+  await waitFor(() => {
+    expect(getByText('Simulator connection lost. Try to reload.')).toBeInTheDocument();
+  });
+
+  // the banner should disappear when connection is restored
+  Object.defineProperty(window.navigator, 'onLine', {
+    writable: true,
+    value: true,
+  });
+
+  window.dispatchEvent(new Event('online'));
+
+  await waitFor(() => {
+    expect(queryByText('Simulator connection lost. Try to reload.')).not.toBeInTheDocument();
+  });
+});

src/components/simulator/Simulator.tsx

@@ -31,7 +31,6 @@ import { GUPSHUP_CALLBACK_URL } from 'config';
 import { ChatMessageType } from 'containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType';
 import { TemplateButtons } from 'containers/Chat/ChatMessages/TemplateButtons/TemplateButtons';
 import { GET_SIMULATOR, RELEASE_SIMULATOR, SIMULATOR_SEARCH_QUERY } from 'graphql/queries/Simulator';
-// import { SIMULATOR_RELEASE_SUBSCRIPTION } from 'graphql/subscriptions/PeriodicInfo';
 import { getUserSession } from 'services/AuthService';
 import { setNotification } from 'common/notification';
 import setLogs from 'config/logs';
@@ -132,6 +131,7 @@ const Simulator = ({
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
   const [isOpen, setIsOpen] = useState(false);
   const nodeRef = useRef<HTMLDivElement>(null!);
+  const [isDisconnected, setIsDisconnected] = useState(false);
 
   const client = useApolloClient();
   // Template listing
@@ -150,6 +150,33 @@ const Simulator = ({
   };
   // chat messages will be shown on simulator
   const isSimulatedMessage = true;
+
+  useEffect(() => {
+    if (isPreviewMessage) return;
+
+    const handleOnline = () => {
+      setIsDisconnected(false);
+    };
+
+    const handleOffline = () => {
+      setIsDisconnected(true);
+    };
+
+    if (!navigator.onLine) {
+      setIsDisconnected(true);
+    }
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      if (!isPreviewMessage) {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+      }
+    };
+  }, [isPreviewMessage]);
+
   const sendMessage = (senderDetails: Sender, interactivePayload?: any, templateValue?: any, messageUuid?: any) => {
     const sendMessageText = inputMessage === '' && message ? message : inputMessage;
 
@@ -189,6 +216,7 @@ const Simulator = ({
         // add log's
         setLogs(`sendMessageText:${sendMessageText} GUPSHUP_CALLBACK_URL:${GUPSHUP_CALLBACK_URL}`, 'info');
         setLogs(error, 'error', true);
+        setIsDisconnected(true);
       });
     setInputMessage('');
   };
@@ -210,13 +238,26 @@ const Simulator = ({
         }
       }
     },
+    onError: (error) => {
+      setLogs('SIMULATOR_RELEASE_SUBSCRIPTION error', 'error', true);
+      setLogs(error, 'error', true);
+      setIsDisconnected(true);
+    },
   });
 
   useSubscription(SIMULATOR_MESSAGE_SENT_SUBSCRIPTION, {
     variables,
     skip: isPreviewMessage,
     onData: ({ data: sentData }) => {
       setAllConversations(updateSimulatorConversations(allConversations, sentData, 'SENT'));
+      if (isDisconnected) {
+        setIsDisconnected(false);
+      }
+    },
+    onError: (error) => {
+      setLogs('SIMULATOR_MESSAGE_SENT_SUBSCRIPTION error', 'error', true);
+      setLogs(error, 'error', true);
+      setIsDisconnected(true);
     },
   });
 
@@ -225,6 +266,15 @@ const Simulator = ({
     skip: isPreviewMessage,
     onData: ({ data: receivedData }) => {
       setAllConversations(updateSimulatorConversations(allConversations, receivedData, 'RECEIVED'));
+      // Reset disconnected state on successful data
+      if (isDisconnected) {
+        setIsDisconnected(false);
+      }
+    },
+    onError: (error) => {
+      setLogs('SIMULATOR_MESSAGE_RECEIVED_SUBSCRIPTION error', 'error', true);
+      setLogs(error, 'error', true);
+      setIsDisconnected(true);
     },
   });
 
@@ -271,6 +321,7 @@ const Simulator = ({
         // add log's
         setLogs(`sendMediaMessage:${type} GUPSHUP_CALLBACK_URL:${GUPSHUP_CALLBACK_URL}`, 'info');
         setLogs(error, 'error', true);
+        setIsDisconnected(true);
       });
   };
 
@@ -494,6 +545,10 @@ const Simulator = ({
     </ClickAwayListener>
   );
 
+  const disconnectionBanner = isDisconnected && !isPreviewMessage && (
+    <div className={styles.DisconnectedBanner}>Simulator connection lost. Try to reload.</div>
+  );
+
   const simulator = (
     <Draggable nodeRef={nodeRef}>
       <div ref={nodeRef} data-testid="simulator-container" className={styles.SimContainer}>
@@ -532,6 +587,8 @@ const Simulator = ({
                   <MoreVertIcon />
                 </div>
               </div>
+              {disconnectionBanner}
+
               <div className={styles.Messages} ref={messageRef} data-testid="simulatedMessages">
                 {simulatedMessages}
               </div>
@@ -549,7 +606,7 @@ const Simulator = ({
                     }}
                     value={inputMessage}
                     placeholder="Type a message"
-                    disabled={isPreviewMessage}
+                    disabled={isPreviewMessage || isDisconnected}
                     onChange={(event) => setInputMessage(event.target.value)}
                   />
                   <AttachFileIcon
@@ -564,7 +621,7 @@ const Simulator = ({
                 <Button
                   variant="contained"
                   className={styles.SendButton}
-                  disabled={isPreviewMessage}
+                  disabled={isPreviewMessage || isDisconnected}
                   onClick={() => sendMessage(sender)}
                 >
                   <MicIcon />
@@ -607,6 +664,11 @@ const Simulator = ({
                   id: searchData.search[0].contact.id,
                 });
               }
+            })
+            .catch((error) => {
+              setLogs('SIMULATOR_SEARCH_QUERY error', 'error', true);
+              setLogs(error, 'error', true);
+              setIsDisconnected(true);
             });
         } else {
           setNotification(
@@ -615,10 +677,14 @@ const Simulator = ({
           );
         }
       })
-      .catch(() => {
+      .catch((error) => {
         setNotification('Sorry! Failed to get simulator', 'warning');
+        setLogs('GET_SIMULATOR error', 'error', true);
+        setLogs(error, 'error', true);
+        setIsDisconnected(true);
       });
   };
+
   return isPreviewMessage ? (
     simulator
   ) : simulatorId ? (