fix(supernova): fixes active filters loading order to avoid overridin…

…g filters on login (#354) * fix(supernova): fixes active filters loading order * fix(supernova): exports useGlobalsIsURLRead on the right file * fix(supernova): fixes typo and double check empty var * fix(supernova): fix typo in naming in methods * chore(core): migrate greenhouse dashboard (#337) * chore(greenhouse): adds greenhouse dashboard and apps * chore(greenhouse): adds greenhouse to allowed scopes * chore(greenhouse): adjust build scripts * chore(greenhouse): fixes lint issues in cluster-admin * chore(greenhouse): add ts-luxon pkg to cluster-admin * chore(greenhouse): merge main branch * chore(greenhouse): extend esbuild config to build apps * chore(greenhouse): add missing entries in package.json and changeset * chore(ci): add nginx.conf to license ignore path * chore(ci): update package-lock.json * fix(build): fixes tests * chore(example): remove console logs * fix(greenhouse): add dependent apps to turbo for build * chore(greenhouse): make packages private in apps * chore(supernova): add missinge dependecies in useCommunication * chore(supernova): create a new patch changeset --------- Co-authored-by: Andreas Pfau <[email protected]>
cloudoperators · Sep 13, 2024 · 1b7cb95 · 1b7cb95
1 parent 68a3e99
commit 1b7cb95
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 15 deletions.
diff --git a/.changeset/thirty-boxes-end.md b/.changeset/thirty-boxes-end.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-supernova": patch
+---
+
+Fixed the useCommunication hook to properly enable and handle filters derived from the URL. This ensures that the communication layer respects the filter parameters passed via the URL, improving synchronization between the app state and the URL.
diff --git a/apps/supernova/public/index.html b/apps/supernova/public/index.html
@@ -3,7 +3,7 @@
   ~ SPDX-License-Identifier: Apache-2.0
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -28,21 +28,19 @@
     </style>
     <script>
       // automatically reload on build changes
-      new EventSource("/esbuild").addEventListener("change", () =>
-        location.reload()
-      )
+      new EventSource("/esbuild").addEventListener("change", () => location.reload())
     </script>
   </head>
   <body>
-    <!-- <script
+    <script
       defer
       src="https://assets.juno.global.cloud.sap/apps/widget-loader@latest/build/app.js"
       data-name="auth"
       data-version="latest"
       data-props-initial-login="true"
       data-props-mock='{"groups":["organization:test-org", "team:containers","support-group:containers","role:ccloud:admin"]}'
       data-props-debug="true"
-    ></script> -->
+    ></script>
     <script type="module">
       // appProps are generated in development env and added to the build
       import allProps from "./build/appProps.js"

diff --git a/apps/supernova/src/hooks/useAppStore.js b/apps/supernova/src/hooks/useAppStore.js
@@ -41,6 +41,7 @@ const useAppStore = (selector) => useStore(useContext(StoreContext), selector)
 // See reasoning here: https://tkdodo.eu/blog/working-with-zustand
 
 // Globals exports
+export const useGlobalsIsURLRead = () => useAppStore((s) => s.globals.isURLRead)
 export const useGlobalsEmbedded = () => useAppStore((state) => state.globals.embedded)
 export const useShowDetailsFor = () => useAppStore((state) => state.globals.showDetailsFor)
 export const useGlobalsApiEndpoint = () => useAppStore((state) => state.globals.apiEndpoint)

diff --git a/apps/supernova/src/hooks/useCommunication.js b/apps/supernova/src/hooks/useCommunication.js
@@ -11,10 +11,12 @@ import {
   useActiveFilters,
   useFilterActions,
   useFilterLabels,
+  useGlobalsIsURLRead,
 } from "./useAppStore"
 
 const useCommunication = () => {
   console.debug("[supernova] useCommunication setup")
+  const isURLRead = useGlobalsIsURLRead()
   const { setIsActive } = useUserActivityActions()
   const { setData: authSetData } = useAuthActions()
   const activeFilters = useActiveFilters()
@@ -32,17 +34,18 @@ const useCommunication = () => {
       // We preset the support group filter based on auth data. This should be done
       // with predefined filters prop
 
-      // check if support group filter is set in activeFilters
+      // check if activeFilters are set and skip if they are
       // activeFilters example: {support_group: Array(1)}
       if (
-        !activeFilters?.support_group &&
+        activeFilters &&
+        Object.keys(activeFilters).length === 0 &&
         data?.auth?.parsed?.supportGroups &&
         filterLabels?.includes("support_group")
       ) {
         setActiveFilters({ support_group: data.auth.parsed.supportGroups })
       }
     },
-    [authSetData, filterLabels]
+    [authSetData, filterLabels, activeFilters]
   )
 
   useEffect(() => {
@@ -60,6 +63,9 @@ const useCommunication = () => {
   }, [setIsActive])
 
   useEffect(() => {
+    if (!isURLRead) return
+
+    // temporary fix to set the auth data for the app
     authSetData({ auth: { parsed: { fullName: "anonymous" } } })
     if (!setAuthData) return
 
@@ -69,7 +75,7 @@ const useCommunication = () => {
     return () => {
       if (unwatchUpdate) unwatchUpdate()
     }
-  }, [setAuthData])
+  }, [setAuthData, isURLRead])
 }
 
 export default useCommunication
diff --git a/apps/supernova/src/hooks/useUrlState.js b/apps/supernova/src/hooks/useUrlState.js
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useLayoutEffect, useEffect, useState } from "react"
+import { useLayoutEffect, useEffect } from "react"
 import { registerConsumer } from "@cloudoperators/juno-url-state-provider-v1"
 import {
-  useAuthLoggedIn,
   useFilterLabels,
   useFilterActions,
   useActiveFilters,
@@ -20,6 +19,7 @@ import {
   useSilencesRegEx,
   useSilencesStatus,
   useShowDetailsForSilence,
+  useGlobalsIsURLRead,
 } from "./useAppStore"
 
 const urlStateManager = registerConsumer("supernova")
@@ -35,8 +35,8 @@ const SILENCE_STATUS = "st"
 const SILENCE_DETAIL = "sd"
 
 const useUrlState = () => {
-  const [isURLRead, setIsURLRead] = useState(false)
-  const loggedIn = useAuthLoggedIn()
+  const isURLRead = useGlobalsIsURLRead()
+  const { setIsURLRead } = useGlobalsActions()
   const { setActiveFilters, setPausedFilters, setActivePredefinedFilter, setSearchTerm } = useFilterActions()
   const { setSilencesRegEx, setSilencesStatus, setShowDetailsForSilence } = useSilencesActions()
   const filterLabels = useFilterLabels()
@@ -150,7 +150,6 @@ const useUrlState = () => {
 
     urlStateManager.push(newState)
   }, [
-    loggedIn,
     activeFilters,
     pausedFilters,
     searchTerm,

diff --git a/apps/supernova/src/lib/createGlobalsSlice.js b/apps/supernova/src/lib/createGlobalsSlice.js
@@ -16,8 +16,18 @@ const createGlobalsSlice = (set, get, options) => ({
     showDetailsFor: null,
     apiEndpoint: options?.endpoint,
     activeSelectedTab: "alerts",
+    isURLRead: false,
 
     actions: {
+      setIsURLRead: () =>
+        set(
+          (state) => ({
+            globals: { ...state.globals, isURLRead: true },
+          }),
+          false,
+          "globals/setURLRead"
+        ),
+
       setShowDetailsFor: (alertID) =>
         set(
           (state) => ({