fix: routing history with query params

splunk · Mar 31, 2021 · 9c5cc2f · 9c5cc2f
1 parent 748ab74
commit 9c5cc2f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx
@@ -49,31 +49,24 @@ function CustomTable({
 
     // Run only once when component is mounted to load component based on initial query params
     useEffect(() => {
-        if (
-            query &&
-            query.get('record') &&
-            (query.get('tab') === serviceName || !query.get('tab'))
-        ) {
-            const row = data.find((x) => x.name === query.get('record'));
-            setEntityModal({
-                ...entityModal,
-                open: true,
-                serviceName: row.serviceName,
-                stanzaName: row.name,
-                mode: MODE_EDIT,
-            });
-        }
-    }, []);
-
-    // Update query params on input context change on modal
-    useEffect(() => {
-        if (entityModal.open && entityModal.mode === MODE_EDIT) {
-            query.set('record', entityModal.stanzaName);
-        } else {
-            query.delete('record');
+        // Only run when tab matches serviceName or if in input page where serviceName is undefined
+        if (query && (query.get('tab') === serviceName || typeof serviceName === 'undefined')) {
+            // Open modal when record is available in query param and modal is not open
+            if (query.get('record') && !entityModal.open) {
+                const row = data.find((x) => x.name === query.get('record'));
+                setEntityModal({
+                    ...entityModal,
+                    open: true,
+                    serviceName: row.serviceName,
+                    stanzaName: row.name,
+                    mode: MODE_EDIT,
+                });
+                // Close modal if record query param is not available and mode is edit
+            } else if (!query.get('record') && entityModal.open && entityModal.mode === MODE_EDIT) {
+                setEntityModal({ ...entityModal, open: false });
+            }
         }
-        history.push({ search: query.toString() });
-    }, [entityModal, history]);
+    }, [query]);
 
     const generateColumns = () => {
         const column = [];
@@ -91,6 +84,11 @@ function CustomTable({
 
     const handleEntityClose = () => {
         setEntityModal({ ...entityModal, open: false });
+        // remove query param and push to browser history only when mode is edit
+        if (entityModal.mode === MODE_EDIT) {
+            query.delete('record');
+            history.push({ search: query.toString() });
+        }
     };
 
     const handleDeleteClose = () => {
@@ -171,6 +169,9 @@ function CustomTable({
             stanzaName: row.name,
             mode: MODE_EDIT,
         });
+        // set query and push to history
+        query.set('record', row.name);
+        history.push({ search: query.toString() });
     };
 
     const handleCloneActionClick = (row) => {

diff --git a/...add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/...add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -24,26 +24,25 @@ function ConfigurationPage() {
     const history = useHistory();
     const query = useQuery();
 
-    // Run only once when component is mounted to load component based on initial query params
+    // Run initially and when query is updated to set active tab based on initial URL
+    // or while navigating browser history
     useEffect(() => {
+        // Only change active tab when provided tab in query is specified in globalConfig
+        // and if the current active tab is not same as provided in query
         if (
             query &&
             permittedTabNames.includes(query.get('tab')) &&
             query.get('tab') !== activeTabId
         ) {
             setActiveTabId(query.get('tab'));
         }
-    }, []);
+    }, [query]);
 
-    const handleChange = useCallback((e, { selectedTabId }) => {
+    const handleChange = (e, { selectedTabId }) => {
         setActiveTabId(selectedTabId);
-    }, []);
-
-    // Update query params on tab change
-    useEffect(() => {
-        query.set('tab', activeTabId);
+        query.set('tab', selectedTabId);
         history.push({ search: query.toString() });
-    }, [activeTabId, history]);
+    };
 
     return (
         <ErrorBoundary>