fix(frontend): fix conflict between trigger and response tabs (#3388)

kubeshop · Nov 22, 2023 · 5e64dc1 · 5e64dc1
1 parent 7bd72f0
commit 5e64dc1
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/web/src/components/SkipTraceCollectionInfo/SkipTraceCollectionInfo.tsx b/web/src/components/SkipTraceCollectionInfo/SkipTraceCollectionInfo.tsx
@@ -13,7 +13,7 @@ const SkipTraceCollectionInfo = ({runId, testId}: IProps) => {
     <S.SkipTraceContainer>
       <Typography.Paragraph type="secondary">
         <InfoCircleOutlined /> This test has been set to skip the <b>awaiting trace</b> step. You can change this in{' '}
-        <Link to={`/test/${testId}/run/${runId}/trigger?tab=settings`}>
+        <Link to={`/test/${testId}/run/${runId}/trigger?triggerTab=settings`}>
           <Typography.Text type="secondary" underline>
             <b>Settings</b>
           </Typography.Text>

diff --git a/web/src/components/TestPlugins/Forms/Grpc/Grpc.tsx b/web/src/components/TestPlugins/Forms/Grpc/Grpc.tsx
@@ -26,7 +26,7 @@ const RequestDetailsForm = () => {
     getMethodList();
   }, [protoFile]);
 
-  const [activeKey, setActiveKey] = useQueryTabs('service-definition');
+  const [activeKey, setActiveKey] = useQueryTabs('service-definition', 'triggerTab');
 
   return (
     <Tabs defaultActiveKey={activeKey} onChange={setActiveKey} activeKey={activeKey}>

diff --git a/web/src/components/TestPlugins/Forms/Kafka/Kafka.tsx b/web/src/components/TestPlugins/Forms/Kafka/Kafka.tsx
@@ -6,7 +6,7 @@ import {SupportedEditors} from 'constants/Editor.constants';
 import * as S from './Kafka.styled';
 
 const Kafka = () => {
-  const [activeKey, setActiveKey] = useQueryTabs('auth');
+  const [activeKey, setActiveKey] = useQueryTabs('auth', 'triggerTab');
 
   return (
     <Tabs defaultActiveKey={activeKey} onChange={setActiveKey} activeKey={activeKey}>

diff --git a/web/src/components/TestPlugins/Forms/Rest/Rest.tsx b/web/src/components/TestPlugins/Forms/Rest/Rest.tsx
@@ -6,7 +6,7 @@ import {Auth, SSL, KeyValueList, SkipTraceCollection} from 'components/Fields';
 import * as S from './Rest.styled';
 
 const Rest = () => {
-  const [activeKey, setActiveKey] = useQueryTabs('auth');
+  const [activeKey, setActiveKey] = useQueryTabs('auth', 'triggerTab');
 
   return (
     <Tabs defaultActiveKey={activeKey} activeKey={activeKey} onChange={setActiveKey}>

diff --git a/web/src/hooks/useQueryTabs.ts b/web/src/hooks/useQueryTabs.ts
@@ -1,20 +1,20 @@
 import {useCallback, useEffect, useState} from 'react';
 import {useSearchParams} from 'react-router-dom';
 
-const useQueryTabs = (defaultTab = '') => {
+const useQueryTabs = (defaultTab = '', paramName = 'tab') => {
   const [query, setQuery] = useSearchParams();
-  const [activeKey, setActiveKey] = useState(query.get('tab') || defaultTab);
+  const [activeKey, setActiveKey] = useState(query.get(paramName) || defaultTab);
 
   useEffect(() => {
-    const tab = query.get('tab');
+    const tab = query.get(paramName);
     if (tab) setActiveKey(tab);
-  }, [query]);
+  }, [paramName, query]);
 
   const handleChange = useCallback(
     (newTab: string) => {
-      setQuery([['tab', newTab]]);
+      setQuery([[paramName, newTab]]);
     },
-    [setQuery]
+    [paramName, setQuery]
   );
 
   return [activeKey, handleChange] as const;