From a33ff45bead37d68b25dc75e85d8a5bd00a8fd53 Mon Sep 17 00:00:00 2001 From: Enoma Victor Osasenaga Date: Thu, 4 Jun 2026 22:19:43 +0100 Subject: [PATCH] Fix traffic row highlight after closing details pane --- .../NetworkTable/VirtualTableV2.tsx | 19 ++++++++++++++----- .../NetworkInspector/NetworkTable/index.tsx | 6 ++++++ .../TrafficTableV2/NetworkInspector/index.tsx | 4 ++++ .../TrafficTableV2/Tables/GroupByNone.jsx | 4 ++++ .../WebTraffic/TrafficTableV2/index.jsx | 11 +++++++++++ 5 files changed, 39 insertions(+), 5 deletions(-) diff --git a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/VirtualTableV2.tsx b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/VirtualTableV2.tsx index d75ac1ab9d..4adf12f7d6 100644 --- a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/VirtualTableV2.tsx +++ b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/VirtualTableV2.tsx @@ -15,10 +15,19 @@ interface Props { renderLogRow: any; selectedRowData: RQNetworkLog | null; onReplayRequest: () => void; + selectedRowId: string | null; + onSelectedRowChange: (id: string | null) => void; } -const VirtualTableV2: React.FC = ({ logs = [], header, renderLogRow, selectedRowData, onReplayRequest }) => { - const [selected, setSelected] = useState(null); +const VirtualTableV2: React.FC = ({ + logs = [], + header, + renderLogRow, + selectedRowData, + onReplayRequest, + selectedRowId, + onSelectedRowChange, +}) => { const [lastKnownBottomIndex, setLastKnownBottomIndex] = useState(null); const [isScrollToBottomEnabled, setIsScrollToBottomEnabled] = useState(true); const [headerHeight, setHeaderHeight] = useState(0); @@ -147,12 +156,12 @@ const VirtualTableV2: React.FC = ({ logs = [], header, renderLogRow, sele "--virtualPaddingBottom": paddingBottom + "px", } as React.CSSProperties } - selected={selected ?? undefined} + selected={selectedRowId ?? undefined} onSelected={(id: string) => { - setSelected(id); + onSelectedRowChange(id); setIsScrollToBottomEnabled(false); // Disable autoscroll when row is selected }} - onContextMenu={(e: any) => setSelected(e.target?.parentElement.id)} + onContextMenu={(e: any) => onSelectedRowChange(e.target?.parentElement.id)} > {header} diff --git a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/index.tsx b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/index.tsx index e9c06b0bf1..1c21ef8ceb 100644 --- a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/index.tsx +++ b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/NetworkTable/index.tsx @@ -27,6 +27,8 @@ interface Props { setSelectedMockRequests: Function; showMockRequestSelector: boolean; selectedMockRequests: Record; + selectedRowId: string | null; + onSelectedRowChange: (id: string | null) => void; } const NetworkTable: React.FC = ({ @@ -36,6 +38,8 @@ const NetworkTable: React.FC = ({ setSelectedMockRequests, showMockRequestSelector, selectedMockRequests, + selectedRowId, + onSelectedRowChange, }) => { const [selectedRowData, setSelectedRowData] = useState(null); const [isReplayRequestModalOpen, setIsReplayRequestModalOpen] = useState(false); @@ -271,6 +275,8 @@ const NetworkTable: React.FC = ({ logs={logs} selectedRowData={selectedRowData} onReplayRequest={onReplayRequest} + selectedRowId={selectedRowId} + onSelectedRowChange={onSelectedRowChange} /> {isReplayRequestModalOpen ? ( diff --git a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/index.tsx b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/index.tsx index f499747347..c59091c63f 100644 --- a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/index.tsx +++ b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/NetworkInspector/index.tsx @@ -10,6 +10,8 @@ interface Props { setSelectedMockRequests: Function; showMockRequestSelector: boolean; selectedMockRequests: Record; + selectedRowId: string | null; + onSelectedRowChange: (id: string | null) => void; } const NetworkInspector: React.FC = (props) => { @@ -22,6 +24,8 @@ const NetworkInspector: React.FC = (props) => { setSelectedMockRequests={props.setSelectedMockRequests} showMockRequestSelector={props.showMockRequestSelector} selectedMockRequests={props.selectedMockRequests} + selectedRowId={props.selectedRowId} + onSelectedRowChange={props.onSelectedRowChange} /> ); diff --git a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/Tables/GroupByNone.jsx b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/Tables/GroupByNone.jsx index d7356105b2..9f95f58400 100644 --- a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/Tables/GroupByNone.jsx +++ b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/Tables/GroupByNone.jsx @@ -15,6 +15,8 @@ const GroupByNone = ({ showMockRequestSelector, selectedMockRequests, showMockFilters, + selectedRowId, + onSelectedRowChange, }) => { const renderNoTrafficCTA = () => { if (emptyCtaAction && emptyCtaText) { @@ -49,6 +51,8 @@ const GroupByNone = ({ setSelectedMockRequests={setSelectedMockRequests} showMockRequestSelector={showMockRequestSelector} selectedMockRequests={selectedMockRequests} + selectedRowId={selectedRowId} + onSelectedRowChange={onSelectedRowChange} /> ); }; diff --git a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/index.jsx b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/index.jsx index 5d73e8607e..490786e70b 100644 --- a/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/index.jsx +++ b/app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/index.jsx @@ -81,6 +81,7 @@ const CurrentTrafficTable = ({ // Component State const [isPreviewOpen, setIsPreviewOpen] = useState(false); const [selectedRequestData, setSelectedRequestData] = useState({}); + const [selectedRowId, setSelectedRowId] = useState(null); const [rulePaneSizes, setRulePaneSizes] = useState([100, 0]); const [isSSLProxyingModalVisible, setIsSSLProxyingModalVisible] = useState(false); @@ -98,6 +99,10 @@ const CurrentTrafficTable = ({ const mounted = useRef(false); + const handleSelectedRowChange = useCallback((id) => { + setSelectedRowId(id); + }, []); + const selectedRequestResponse = useSelector(getLogResponseById(selectedRequestData?.id)) || selectedRequestData?.response?.body; @@ -131,6 +136,7 @@ const CurrentTrafficTable = ({ const handleRowClick = useCallback((row) => { setSelectedRequestData(row); + setSelectedRowId(row.id); handlePreviewVisibility(true); trackTrafficTableRequestClicked(); trackRQDesktopLastActivity(TRAFFIC_TABLE.TRAFFIC_TABLE_REQUEST_CLICKED); @@ -138,6 +144,7 @@ const CurrentTrafficTable = ({ const handleClosePane = () => { handlePreviewVisibility(false); + setSelectedRowId(null); }; // const printLogsToConsole = useCallback( @@ -461,6 +468,8 @@ const CurrentTrafficTable = ({ showMockRequestSelector={showMockRequestSelector} selectedMockRequests={selectedMockRequests} showMockFilters={createMocksMode} + selectedRowId={selectedRowId} + onSelectedRowChange={handleSelectedRowChange} /> ); }, @@ -476,6 +485,8 @@ const CurrentTrafficTable = ({ showMockRequestSelector, selectedMockRequests, createMocksMode, + selectedRowId, + handleSelectedRowChange, ] );