From 57078517a40c6dbd8a9c78898d4d8ab74f995bcf Mon Sep 17 00:00:00 2001 From: leon-up9 <97597983+leon-up9@users.noreply.github.com> Date: Sun, 3 Jul 2022 15:36:16 +0300 Subject: [PATCH] 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 2f0bef5d3378b62120e53625cb2b12d95a73747e. * revert order change * changes * change * changes Co-authored-by: Leon <> --- .../EntrySections/EntrySections.tsx | 2 +- .../EntryViewer/AutoRepresentation.tsx | 65 ++++++++++++------- .../TrafficViewer/TrafficViewer.tsx | 6 ++ .../ReplayRequestModal/ReplayRequestModal.tsx | 4 +- 4 files changed, 51 insertions(+), 26 deletions(-) diff --git a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx index aca4d8956..efc8bfe3c 100644 --- a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx +++ b/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, { diff --git a/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx b/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx index c9a26e77f..ee957773a 100644 --- a/ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx +++ b/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 = ({ representation, color, isDisplayReplay = false }) => { +export enum TabsEnum { + Request = 0, + Response = 1 +} + +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 TABS = [ - { - tab: 'Request', - badge: isReplayDisplayed() && setIsOpenRequestModal(true)} /> + const { request, response } = JSON.parse(representation); + + const TABS = useMemo(() => { + const arr = [ + { + tab: 'Request', + badge: isReplayDisplayed() && setIsOpenRequestModal(true)} /> + }] + + 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 ; } - const { request, response } = JSON.parse(representation); - - let responseTabIndex = 0; - - if (response) { - TABS.push( - { - tab: 'Response', - badge: null - } - ); - responseTabIndex = TABS.length - 1; - } - 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 bf1c03d0c..56b299cee 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/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 = ({ 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 = ({ } }, [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) { diff --git a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx b/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx index e85be8fea..d9846b4dd 100644 --- a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx +++ b/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 = ({ isOpen, onClose RESPONSE - + )}