chore(heureka): adds checks for detailsFor and improve filter prop handling

Author: hodanoori

apps/heureka/src/hooks/useUrlState.js

@@ -9,6 +9,8 @@ import {
   useGlobalsShowPanel,
   useGlobalsActiveView,
   useGlobalsActions,
+  useGlobalsShowServiceDetail,
+  useGlobalsShowIssueDetail,
   useServiceActiveFilters,
   useIssueMatchesActiveFilters,
   useComponentActiveFilters,
@@ -24,6 +26,8 @@ const useUrlState = () => {
 
   const activeView = useGlobalsActiveView()
   const detailsFor = useGlobalsShowPanel()
+  const showServiceDetail = useGlobalsShowServiceDetail()
+  const showIssueDetail = useGlobalsShowIssueDetail()
   const { setShowPanel, setActiveView, setServiceDetail, setIssueDetail, syncDetailsWithURL } = useGlobalsActions()
   const serviceActiveFilters = useServiceActiveFilters()
   const issueMatchesActiveFilters = useIssueMatchesActiveFilters()
@@ -69,8 +73,19 @@ const useUrlState = () => {
 
     const updatedState = {
       [constants.ACTIVE_VIEW]: activeView, // Include active view
-      ...syncFiltersWithURL(),
-      ...syncDetailsWithURL(),
+      ...syncFiltersWithURL(serviceActiveFilters, issueMatchesActiveFilters, componentActiveFilters),
+      ...(detailsFor
+        ? syncDetailsWithURL(
+            showServiceDetail,
+            showIssueDetail,
+            detailsFor === constants.PANEL_SERVICE ? constants.PANEL_SERVICE : constants.PANEL_ISSUE
+          )
+        : {
+            // Remove detailsFor from URL when details Panel is closed
+            [constants.DETAILS_FOR]: undefined,
+            [constants.SERVICE_NAME]: undefined,
+            [constants.ISSUE_ID]: undefined,
+          }),
     }
 
     // Construct the URL state
@@ -79,12 +94,14 @@ const useUrlState = () => {
       urlStateManager.push(updatedState)
     }
   }, [
-    detailsFor,
     activeView,
+    isURLRead,
+    detailsFor,
+    showServiceDetail,
+    showIssueDetail,
     serviceActiveFilters,
     issueMatchesActiveFilters,
     componentActiveFilters,
-    isURLRead,
     syncFiltersWithURL,
     syncDetailsWithURL,
   ])

apps/heureka/src/lib/slices/createFiltersSlice.js

@@ -157,7 +157,7 @@ const createFiltersSlice = (set, get) => ({
           `filters.setFiltersFromURL`
         ),
 
-      syncFiltersWithURL: () => {
+      syncFiltersWithURL: (serviceFilters, issueFilters, componentFilters) => {
         const encodedSearchTerm = btoa(
           JSON.stringify({
             [ISSUEMATCHES]: get().filters[ISSUEMATCHES].search,
@@ -167,9 +167,9 @@ const createFiltersSlice = (set, get) => ({
         )
 
         const activeFilters = {
-          [ISSUEMATCHES]: get().filters[ISSUEMATCHES].activeFilters,
-          [SERVICES]: get().filters[SERVICES].activeFilters,
-          [COMPONENTS]: get().filters[COMPONENTS].activeFilters,
+          [ISSUEMATCHES]: issueFilters,
+          [SERVICES]: serviceFilters,
+          [COMPONENTS]: componentFilters,
         }
 
         return {

apps/heureka/src/lib/slices/createGlobalsSlice.js

@@ -124,13 +124,11 @@ const createGlobalsSlice = (set, get, options) => ({
         ),
 
       // Sync details state with the URL
-      syncDetailsWithURL: () => {
-        const state = get().globals
+      syncDetailsWithURL: (serviceDetail, issueDetail, panelType) => {
         const updatedState = {
-          [constants.DETAILS_FOR]: state.showPanel,
-          // Include `iid` or `svn` immediately after `d:issue/service`
-          [state.showPanel === constants.PANEL_SERVICE ? constants.SERVICE_NAME : constants.ISSUE_ID]:
-            state.showPanel === constants.PANEL_SERVICE ? state.showServiceDetail : state.showIssueDetail,
+          [constants.DETAILS_FOR]: panelType,
+          [panelType === constants.PANEL_SERVICE ? constants.SERVICE_NAME : constants.ISSUE_ID]:
+            panelType === constants.PANEL_SERVICE ? serviceDetail : issueDetail,
         }
         return updatedState
       },