PR fixes

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

@@ -14,15 +14,14 @@ export enum TabsEnum {
     Response = 1
 }
 
-export const AutoRepresentation: React.FC<any> = ({ representation, color, defaultTab = TabsEnum.Request, isDisplayReplay = false }) => {
+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 tabSelectedRef = useRef(defaultTab)
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const TABS = [
         {
             tab: 'Request',
@@ -31,10 +30,17 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, defau
     ];
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
+    const getOpenedTabIndex = useCallback(() => {
+        const correntIndex = TABS.findIndex(current => current.tab === currentTab)
+        return correntIndex > -1 ? correntIndex : 0
+    }, [TABS, currentTab])
+
     useEffect(() => {
-        setCurrentTab(TABS[tabSelectedRef.current].tab)
+        if (openedTab) {
+            setCurrentTab(TABS[openedTab].tab)
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tabSelectedRef.current])
+    }, [])
 
     // Don't fail even if `representation` is an empty string
     if (!representation) {
@@ -43,8 +49,6 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, defau
 
     const { request, response } = JSON.parse(representation);
 
-    let responseTabIndex = 0;
-
     if (response) {
         TABS.push(
             {
@@ -52,23 +56,17 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, defau
                 badge: null
             }
         );
-        responseTabIndex = TABS.length - 1;
-    }
-
-    const onTabChange = (tab) => {
-        setCurrentTab(tab)
-        tabSelectedRef.current = TABS.findIndex(tabItem => tabItem.tab === tab)
     }
 
     return <div className={styles.Entry}>
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
-                <Tabs tabs={TABS} currentTab={TABS[tabSelectedRef.current].tab} color={color} onChange={onTabChange} leftAligned />
+                <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

@@ -71,7 +71,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const [wsReadyState, setWsReadyState] = useState(0);
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
-  const isOpenReplaytModal = useRecoilValue(replayRequestModalOpenAtom)
+  const isOpenReplayModal = useRecoilValue(replayRequestModalOpenAtom)
 
 
   const ws = useRef(null);
@@ -91,8 +91,8 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   }, [shouldCloseWebSocket, setShouldCloseWebSocket, closeWebSocket])
 
   useEffect(() => {
-    isOpenReplaytModal && setShouldCloseWebSocket(true)
-  }, [isOpenReplaytModal, setShouldCloseWebSocket])
+    isOpenReplayModal && setShouldCloseWebSocket(true)
+  }, [isOpenReplayModal, setShouldCloseWebSocket])
 
   const sendQueryWhenWsOpen = useCallback((leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => {
     setTimeout(() => {

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

@@ -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} defaultTab={TabsEnum.Response} />
+                                <AutoRepresentation representation={response} color={entryData.protocol.backgroundColor} openedTab={TabsEnum.Response} />
                             </AccordionDetails>
                         </Accordion>)}
                     </div>

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button } from "@mui/material";
 import Api, { MizuWebsocketURL } from "../../../helpers/api";
 import debounce from 'lodash/debounce';
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState } from "recoil";
 import { useCommonStyles } from "../../../helpers/commonStyle"
 import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
 import TrafficViewer from "@up9/mizu-common"
@@ -12,7 +12,6 @@ import serviceMap from "../../assets/serviceMap.svg";
 import services from "../../assets/services.svg";
 import trafficStatsIcon from "../../assets/trafficStats.svg";
 import trafficStatsModalOpenAtom from "../../../recoil/trafficStatsModalOpen";
-import replayModalOpenAtom from "../../../recoil/replayModalOpen"
 
 const api = Api.getInstance();
 
@@ -21,7 +20,6 @@ export const TrafficPage: React.FC = () => {
   const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
   const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
   const [trafficStatsModalOpen, setTrafficStatsModalOpen] = useRecoilState(trafficStatsModalOpenAtom);
-  const replayModalOpen = useRecoilValue(replayModalOpenAtom);
   const [shouldCloseWebSocket, setShouldCloseWebSocket] = useState(false);
 
   const trafficViewerApi = { ...api }
@@ -41,10 +39,6 @@ export const TrafficPage: React.FC = () => {
     setServiceMapModalOpen(true)
   }, 500);
 
-  useEffect(() => {
-    replayModalOpen && setShouldCloseWebSocket(true)
-  }, [replayModalOpen])
-
   const actionButtons = <div style={{ display: 'flex', height: "100%" }}>
       {window["isOasEnabled"] && <Button
         startIcon={<img className="custom" src={services} alt="services" />}

ui/src/recoil/replayModalOpen/atom.ts

@@ -1,8 +0,0 @@
-import { atom } from "recoil"
-
-const replayModalOpen = atom({
-    key: "replayModalOpen",
-    default: false
-})
-
-export default replayModalOpen;

ui/src/recoil/replayModalOpen/index.ts

@@ -1,2 +0,0 @@
-import atom from "./atom";
-export default atom;