From b673bd85f07840f523cb82d541d0e530589ba0d7 Mon Sep 17 00:00:00 2001 From: Leon <> Date: Sun, 3 Jul 2022 14:35:43 +0300 Subject: [PATCH] PR fixes --- .../EntryViewer/AutoRepresentation.tsx | 30 +++++++++---------- .../TrafficViewer/TrafficViewer.tsx | 6 ++-- .../ReplayRequestModal/ReplayRequestModal.tsx | 2 +- .../Pages/TrafficPage/TrafficPage.tsx | 10 ++----- ui/src/recoil/replayModalOpen/atom.ts | 8 ----- ui/src/recoil/replayModalOpen/index.ts | 2 -- 6 files changed, 20 insertions(+), 38 deletions(-) delete mode 100644 ui/src/recoil/replayModalOpen/atom.ts delete mode 100644 ui/src/recoil/replayModalOpen/index.ts diff --git a/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx b/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx index 546d857e6..80fee09cf 100644 --- a/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx +++ b/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx @@ -14,15 +14,14 @@ export enum TabsEnum { Response = 1 } -export const AutoRepresentation: React.FC = ({ representation, color, defaultTab = TabsEnum.Request, isDisplayReplay = false }) => { +export const AutoRepresentation: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ representation, color, defau badge: null } ); - responseTabIndex = TABS.length - 1; - } - - const onTabChange = (tab) => { - setCurrentTab(tab) - tabSelectedRef.current = TABS.findIndex(tabItem => tabItem.tab === tab) } return
{
- +
- {currentTab === TABS[0].tab && + {getOpenedTabIndex() === TabsEnum.Request && } - {response && currentTab === TABS[responseTabIndex].tab && + {response && getOpenedTabIndex() === TabsEnum.Response && }
} diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx index 714d60ce1..56b299cee 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx @@ -71,7 +71,7 @@ export const TrafficViewer: React.FC = ({ 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 = ({ }, [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(() => { diff --git a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx b/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx index 30e0a73bd..d9846b4dd 100644 --- a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx +++ b/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx @@ -239,7 +239,7 @@ const ReplayRequestModal: React.FC = ({ isOpen, onClose RESPONSE - + )}
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index 2d239221b..f8f7108de 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/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 =
{window["isOasEnabled"] &&