Ui/replay demo notes (#1180)

* close ws on open

* chech if json before parsing

* setting defualt tab reponse and missing dep

* remove redundant

* space

* PR fixes

* remove redundant

* changed order

* Revert "remove redundant"

This reverts commit 2f0bef5d33.

* revert order change

* changes

* change

* changes

Co-authored-by: Leon <>

ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx

@@ -126,7 +126,7 @@ export const formatRequest = (body: any, contentType: string, decodeBase64: bool
     try {
         if (jsonLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
             if (!isPretty) return bodyBuf;
-            return jsonBeautify(JSON.parse(bodyBuf), null, 2, 80);
+            return Utils.isJson(bodyBuf) ? jsonBeautify(JSON.parse(bodyBuf), null, 2, 80) : bodyBuf
         } else if (xmlLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
             if (!isPretty) return bodyBuf;
             return xmlBeautify(bodyBuf, {

ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useEffect, useMemo } from "react"
 import { useRecoilValue, useSetRecoilState } from "recoil"
 import entryDataAtom from "../../../recoil/entryData"
 import SectionsRepresentation from "./SectionsRepresentation";
@@ -9,49 +9,68 @@ import replayRequestModalOpenAtom from "../../../recoil/replayRequestModalOpen";
 
 const enabledProtocolsForReplay = ["http"]
 
-export const AutoRepresentation: React.FC<any> = ({ representation, color, isDisplayReplay = false }) => {
+export enum TabsEnum {
+    Request = 0,
+    Response = 1
+}
+
+export const AutoRepresentation: React.FC<any> = ({ representation, color, openedTab = TabsEnum.Request, isDisplayReplay = false }) => {
     const entryData = useRecoilValue(entryDataAtom)
     const setIsOpenRequestModal = useSetRecoilState(replayRequestModalOpenAtom)
     const isReplayDisplayed = useCallback(() => {
         return enabledProtocolsForReplay.find(x => x === entryData.protocol.name) && isDisplayReplay
     }, [entryData.protocol.name, isDisplayReplay])
 
-    const TABS = [
+    const { request, response } = JSON.parse(representation);
-        {
+
-            tab: 'Request',
+    const TABS = useMemo(() => {
-            badge: isReplayDisplayed() && <span title="Replay Request"><ReplayIcon fill={color} stroke={color} style={{ marginLeft: "10px", cursor: "pointer", height: "22px" }} onClick={() => setIsOpenRequestModal(true)} /></span>
+        const arr = [
+            {
+                tab: 'Request',
+                badge: isReplayDisplayed() && <span title="Replay Request"><ReplayIcon fill={color} stroke={color} style={{ marginLeft: "10px", cursor: "pointer", height: "22px" }} onClick={() => setIsOpenRequestModal(true)} /></span>
+            }]
+
+        if (response) {
+            arr.push(
+                {
+                    tab: 'Response',
+                    badge: null
+                }
+            );
         }
-    ];
+
+        return arr
+    }, [color, isReplayDisplayed, response, setIsOpenRequestModal]);
+
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
+    const getOpenedTabIndex = useCallback(() => {
+        const currentIndex = TABS.findIndex(current => current.tab === currentTab)
+        return currentIndex > -1 ? currentIndex : 0
+    }, [TABS, currentTab])
+
+    useEffect(() => {
+        if (openedTab) {
+            setCurrentTab(TABS[openedTab].tab)
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     // Don't fail even if `representation` is an empty string
     if (!representation) {
         return <React.Fragment></React.Fragment>;
     }
 
-    const { request, response } = JSON.parse(representation);
-
-    let responseTabIndex = 0;
-
-    if (response) {
-        TABS.push(
-            {
-                tab: 'Response',
-                badge: null
-            }
-        );
-        responseTabIndex = TABS.length - 1;
-    }
-
     return <div className={styles.Entry}>
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
                 <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned />
             </div>
-            {currentTab === TABS[0].tab && <React.Fragment>
+            {getOpenedTabIndex() === TabsEnum.Request && <React.Fragment>
                 <SectionsRepresentation data={request} color={color} requestRepresentation={request} />
             </React.Fragment>}
-            {response && currentTab === TABS[responseTabIndex].tab && <React.Fragment>
+            {response && getOpenedTabIndex() === TabsEnum.Response && <React.Fragment>
                 <SectionsRepresentation data={response} color={color} />
             </React.Fragment>}
         </div>}

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -21,6 +21,7 @@ import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';
 import ReplayRequestModalContainer from "../modals/ReplayRequestModal/ReplayRequestModal";
+import replayRequestModalOpenAtom from "../../recoil/replayRequestModalOpen";
 
 const useLayoutStyles = makeStyles(() => ({
   details: {
@@ -70,6 +71,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const [wsReadyState, setWsReadyState] = useState(0);
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
+  const isOpenReplayModal = useRecoilValue(replayRequestModalOpenAtom)
 
 
   const ws = useRef(null);
@@ -88,6 +90,10 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
     }
   }, [shouldCloseWebSocket, setShouldCloseWebSocket, closeWebSocket])
 
+  useEffect(() => {
+    isOpenReplayModal && setShouldCloseWebSocket(true)
+  }, [isOpenReplayModal, setShouldCloseWebSocket])
+
   const sendQueryWhenWsOpen = useCallback((leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => {
     setTimeout(() => {
       if (ws?.current?.readyState === WebSocket.OPEN) {

ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx

@@ -16,7 +16,7 @@ import spinnerImg from "assets/spinner.svg"
 import refreshImg from "assets/refresh.svg"
 import { formatRequest } from "../../EntryDetailed/EntrySections/EntrySections";
 import entryDataAtom from "../../../recoil/entryData";
-import { AutoRepresentation } from "../../EntryDetailed/EntryViewer/AutoRepresentation";
+import { AutoRepresentation, TabsEnum } from "../../EntryDetailed/EntryViewer/AutoRepresentation";
 import useDebounce from "../../../hooks/useDebounce"
 import replayRequestModalOpenAtom from "../../../recoil/replayRequestModalOpen";
 import { Utils } from "../../../helpers/Utils";
@@ -239,7 +239,7 @@ const ReplayRequestModal: React.FC<ReplayRequestModalProps> = ({ isOpen, onClose
                                 <span className={styles.sectionHeader}>RESPONSE</span>
                             </AccordionSummary>
                             <AccordionDetails>
-                                <AutoRepresentation representation={response} color={entryData.protocol.backgroundColor} />
+                                <AutoRepresentation representation={response} color={entryData.protocol.backgroundColor} openedTab={TabsEnum.Response} />
                             </AccordionDetails>
                         </Accordion>)}
                     </div>