fix(heureka): addresses remaining code review comments

- Move useAuthUserId() into FalsePositiveModal directly, removing the
  authUserId prop and its prop-drilling through IssuesDataRow
- Replace inline import() type expressions with properly imported
  AuthState in App.tsx (both AppProps and toEmbeddedAuth)
- Add error handling for background poll invalidateQueries failures;
  surface the error to the user via a timed message above the tabs

Author: hodanoori

apps/heureka/src/App.tsx

@@ -14,7 +14,7 @@ import { ErrorBoundary } from "./components/common/ErrorBoundary"
 import { getClient } from "./apollo-client"
 import { routeTree } from "./routeTree.gen"
 import { StoreProvider } from "./store/StoreProvider"
-import { AuthProvider, EmbeddedAuth } from "@cloudoperators/greenhouse-auth-provider"
+import { AuthProvider, EmbeddedAuth, type AuthState } from "@cloudoperators/greenhouse-auth-provider"
 
 /**
  * Auth user ID for the current user when embedded and authenticated; null otherwise.
@@ -41,7 +41,7 @@ export type AppProps = {
   initialFilters?: InitialFilters
   basePath?: string
   enableHashedRouting?: boolean
-  auth?: EmbeddedAuth | import("@cloudoperators/greenhouse-auth-provider").AuthState
+  auth?: EmbeddedAuth | AuthState
 }
 
 const router = createRouter({
@@ -63,7 +63,7 @@ declare module "@tanstack/react-router" {
 function toEmbeddedAuth(auth: AppProps["auth"]): EmbeddedAuth | undefined {
   if (!auth) return undefined
   if (typeof (auth as EmbeddedAuth).getSnapshot === "function") return auth as EmbeddedAuth
-  return { getSnapshot: () => auth as import("@cloudoperators/greenhouse-auth-provider").AuthState }
+  return { getSnapshot: () => auth as AuthState }
 }
 
 const App = (props: AppProps) => {

apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx

@@ -15,6 +15,7 @@ import {
   Message,
 } from "@cloudoperators/juno-ui-components"
 import { RemediationInput, RemediationTypeValues, SeverityValues } from "../../../../generated/graphql"
+import { useAuthUserId } from "../../../../App"
 
 type FalsePositiveModalProps = {
   open: boolean
@@ -24,8 +25,6 @@ type FalsePositiveModalProps = {
   severity?: string
   service: string
   image: string
-  /** User ID from auth (provided by parent under AuthProvider). When set, User ID field is read-only. */
-  authUserId?: string | null
   /** Error message to show when createRemediation fails. */
   errorMessage?: string | null
   /** Called when submit fails so the parent can set errorMessage. */
@@ -50,10 +49,10 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
   severity,
   service,
   image,
-  authUserId = null,
   errorMessage,
   onSetError,
 }) => {
+  const authUserId = useAuthUserId()
   const [description, setDescription] = useState<string>("")
   const [manualUserId, setManualUserId] = useState<string>("")
   const [expirationDate, setExpirationDate] = useState<Date | null>(null)

apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx

@@ -12,14 +12,13 @@ import {
   PopupMenuOptions,
   PopupMenuItem,
   Spinner,
+  Icon,
 } from "@cloudoperators/juno-ui-components"
-import { Icon } from "@cloudoperators/juno-ui-components"
 import { IssueIcon } from "../../../../../common/IssueIcon"
 import { IssueTimestamp } from "../../../../../common/IssueTimestamp"
 import { ImageVulnerability } from "../../../../../Services/utils"
 import { getSeverityColor, useTextOverflow } from "../../../../../../utils"
 import { FalsePositiveModal } from "../../../FalsePositiveModal"
-import { useAuthUserId } from "../../../../../../App"
 import { useRouteContext } from "@tanstack/react-router"
 import { createRemediation } from "../../../../../../api/createRemediation"
 import { RemediationInput } from "../../../../../../generated/graphql"
@@ -56,7 +55,6 @@ export const IssuesDataRow = ({
   const [createError, setCreateError] = useState<string | null>(null)
   const { needsExpansion, textRef } = useTextOverflow(issue?.description || "")
   const { apiClient } = useRouteContext({ from: "/services/$service" })
-  const authUserId = useAuthUserId()
 
   if (!issue || !issue.name) {
     return null
@@ -156,7 +154,6 @@ export const IssuesDataRow = ({
           severity={issue.severity}
           service={service}
           image={image}
-          authUserId={authUserId}
           errorMessage={createError}
           onSetError={setCreateError}
         />

apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx

@@ -236,6 +236,7 @@ export const ImageIssuesList = ({
     [navigate, service, image.repository]
   )
   const [vulnerabilitiesSuccessMessage, setVulnerabilitiesSuccessMessage] = useTimedState<string>(10000)
+  const [pollErrorMessage, setPollErrorMessage] = useTimedState<string>(10000)
   const [, setRefreshKey] = useState(0)
   const pollTimeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
   const isMountedRef = useRef(true)
@@ -289,29 +290,42 @@ export const ImageIssuesList = ({
 
       // Cancel any pending polls from a previous operation and schedule fresh ones.
       // The backend takes ~5–6 min to propagate changes, so we poll at 2.5 and 5 min.
+      // Note: we intentionally use setTimeout + invalidateQueries here instead of
+      // React Query's refetchInterval. The entire data layer in this app uses
+      // queryClient.ensureQueryData() + React use() for Suspense-based data fetching,
+      // not useQuery hooks.
       pollTimeoutsRef.current.forEach(clearTimeout)
       pollTimeoutsRef.current = []
       ;[2.5 * 60 * 1000, 5 * 60 * 1000].forEach((delay) => {
         const id = setTimeout(() => {
-          queryClient.invalidateQueries({
-            predicate: (query) => {
-              const [key, filter] = query.queryKey as [
-                string,
-                { service?: string[]; image?: string[]; repository?: string[]; vulnerability?: string[] } | undefined,
-              ]
-              if (key === "images" || key === "remediations") {
-                return matchesCurrentServiceAndImage(filter)
-              }
-              return false
-            },
-          })
-          if (!isMountedRef.current) return
-          setRefreshKey((k) => k + 1)
+          queryClient
+            .invalidateQueries({
+              predicate: (query) => {
+                const [key, filter] = query.queryKey as [
+                  string,
+                  { service?: string[]; image?: string[]; repository?: string[]; vulnerability?: string[] } | undefined,
+                ]
+                if (key === "images" || key === "remediations") {
+                  return matchesCurrentServiceAndImage(filter)
+                }
+                return false
+              },
+            })
+            .then(() => {
+              if (!isMountedRef.current) return
+              setRefreshKey((k) => k + 1)
+            })
+            .catch(() => {
+              if (!isMountedRef.current) return
+              setPollErrorMessage(
+                "Background data refresh failed. The table may not reflect the latest status, you can refresh the page to see the latest data."
+              )
+            })
         }, delay)
         pollTimeoutsRef.current.push(id)
       })
     },
-    [queryClient, service, image.repository, isMountedRef]
+    [queryClient, service, image.repository, isMountedRef, setPollErrorMessage]
   )
 
   const openVulFilter = {
@@ -371,6 +385,11 @@ export const ImageIssuesList = ({
 
   return (
     <>
+      {pollErrorMessage && (
+        <div className="mb-4">
+          <Message text={pollErrorMessage} variant="error" />
+        </div>
+      )}
       <Tabs selectedIndex={selectedTabIndex} onSelect={handleTabSelect} variant="content">
         <TabList>
           <Tab label="Active Vulnerabilities" />