fix(routing): handle record param deletion on wrong tab and fix tab c…

…hange due to missing dep in useCallback
splunk · Apr 9, 2021 · a9fe88b · a9fe88b
1 parent 0d48b1d
commit a9fe88b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/ui/src/main/webapp/components/table/CustomTable.jsx b/ui/src/main/webapp/components/table/CustomTable.jsx
@@ -75,6 +75,10 @@ function CustomTable({
                 // useEffect dependency which will only be changed in case of editing entity
                 setEntityModal({ ...entityModal, open: false });
             }
+        } else if (query.get('tab') !== serviceName && query.get('record')) {
+            // remove the record param in case of wrong tab
+            query.delete('record');
+            history.push({ search: query.toString() });
         }
     }, [history.location.search]);
 

diff --git a/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -60,11 +60,14 @@ function ConfigurationPage() {
         }
     }, []);
 
-    const handleChange = useCallback((e, { selectedTabId }) => {
-        setActiveTabId(selectedTabId);
-        query.set('tab', selectedTabId);
-        history.push({ search: query.toString() });
-    }, []);
+    const handleChange = useCallback(
+        (e, { selectedTabId }) => {
+            setActiveTabId(selectedTabId);
+            query.set('tab', selectedTabId);
+            history.push({ search: query.toString() });
+        },
+        [activeTabId]
+    );
 
     return (
         <ErrorBoundary>