feat(heureka): adds false positive actions and image version details page

.changeset/dull-taxis-walk.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-heureka": major
+---
+
+Adds false positive remediation action to image details page with create and delete functionality. Introduces image version details page to display deployment locations for each image version.

.gitignore

@@ -15,6 +15,9 @@ vite.config.*.timestamp-*
 # pnpm local package store (if configured locally)
 .pnpm-store/
 
+# TanStack Router cache directory
+.tanstack/
+
 # act artifacts needed for testing workflows
 .secrets
 .env

apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -7,8 +7,9 @@ import React from "react"
 import { FallbackProps } from "react-error-boundary"
 import { Message } from "@cloudoperators/juno-ui-components"
 
-const ErrorFallback = ({ error }: FallbackProps) => (
-  <Message text={(error as Error)?.message || "An error occurred"} variant="danger" />
-)
+const ErrorFallback = ({ error }: FallbackProps) => {
+  const message = error instanceof Error && error.message ? error.message : "An error occurred"
+  return <Message text={message} variant="danger" />
+}
 
 export default ErrorFallback

apps/heureka/.gitignore

@@ -34,3 +34,6 @@ npm-debug.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# TanStack Router cache directory
+.tanstack/

apps/heureka/codegen.ts

@@ -21,6 +21,11 @@ const config: CodegenConfig = {
         withHooks: false,
         withHOC: false,
         withComponent: false,
+        // Apollo Client v4 removed several legacy exported helper types (e.g. QueryResult, MutationFunction).
+        // Prevent codegen from generating those helper type aliases so the generated file stays compatible.
+        withResultType: false,
+        withMutationFn: false,
+        withMutationOptionsType: false,
       },
     },
   },

apps/heureka/package.json

@@ -28,6 +28,7 @@
     "clean:cache": "rm -rf .turbo"
   },
   "dependencies": {
+    "@cloudoperators/juno-messages-provider": "workspace:*",
     "@cloudoperators/juno-ui-components": "workspace:*",
     "@cloudoperators/juno-url-state-provider": "workspace:*",
     "@tanstack/react-query": "5.90.16",

apps/heureka/src/App.tsx

@@ -9,6 +9,7 @@ import { createRouter, RouterProvider, createHashHistory, createBrowserHistory }
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AppShell, AppShellProvider, PageHeader } from "@cloudoperators/juno-ui-components"
 import { encodeV2, decodeV2 } from "@cloudoperators/juno-url-state-provider"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import styles from "./styles.css?inline"
 import { ErrorBoundary } from "./components/common/ErrorBoundary"
 import { getClient } from "./apollo-client"
@@ -87,21 +88,23 @@ const App = (props: AppProps) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ApolloProvider client={apiClient}>
-        <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
-          {/* load styles inside the shadow dom */}
-          <style>{styles.toString()}</style>
-          <StrictMode>
-            <AppShell embedded={props.embedded} pageHeader={<PageHeader applicationName="Heureka" />}>
-              <ErrorBoundary>
-                <StrictMode>
-                  <StoreProvider>
-                    <RouterProvider basepath={props.basePath || "/"} router={router} />
-                  </StoreProvider>
-                </StrictMode>
-              </ErrorBoundary>
-            </AppShell>
-          </StrictMode>
-        </AppShellProvider>
+        <MessagesProvider>
+          <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
+            {/* load styles inside the shadow dom */}
+            <style>{styles.toString()}</style>
+            <StrictMode>
+              <AppShell embedded={props.embedded} pageHeader={<PageHeader applicationName="Heureka" />}>
+                <ErrorBoundary>
+                  <StrictMode>
+                    <StoreProvider>
+                      <RouterProvider basepath={props.basePath || "/"} router={router} />
+                    </StoreProvider>
+                  </StrictMode>
+                </ErrorBoundary>
+              </AppShell>
+            </StrictMode>
+          </AppShellProvider>
+        </MessagesProvider>
       </ApolloProvider>
     </QueryClientProvider>
   )

apps/heureka/src/api/createRemediation.tsx

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloClient } from "@apollo/client"
+import {
+  CreateRemediationDocument,
+  CreateRemediationMutation,
+  CreateRemediationMutationVariables,
+  RemediationInput,
+} from "../generated/graphql"
+
+type CreateRemediationParams = {
+  apiClient: ApolloClient
+  input: RemediationInput
+}
+
+export const createRemediation = async ({
+  apiClient,
+  input,
+}: CreateRemediationParams): Promise<CreateRemediationMutation["createRemediation"]> => {
+  const result = await apiClient.mutate<CreateRemediationMutation, CreateRemediationMutationVariables>({
+    mutation: CreateRemediationDocument,
+    variables: { input },
+  })
+
+  if (!result.data?.createRemediation) {
+    throw new Error("Failed to create remediation")
+  }
+
+  return result.data.createRemediation
+}

apps/heureka/src/api/deleteRemediation.tsx

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloClient } from "@apollo/client"
+import {
+  DeleteRemediationDocument,
+  DeleteRemediationMutation,
+  DeleteRemediationMutationVariables,
+} from "../generated/graphql"
+
+type DeleteRemediationParams = {
+  apiClient: ApolloClient
+  remediationId: string
+}
+
+export const deleteRemediation = async ({ apiClient, remediationId }: DeleteRemediationParams): Promise<string> => {
+  const result = await apiClient.mutate<DeleteRemediationMutation, DeleteRemediationMutationVariables>({
+    mutation: DeleteRemediationDocument,
+    variables: { id: remediationId },
+  })
+
+  if (!result.data?.deleteRemediation) {
+    throw new Error("Failed to delete remediation")
+  }
+
+  return result.data.deleteRemediation
+}

apps/heureka/src/api/fetchImageVersions.tsx

@@ -0,0 +1,63 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsDocument, GetImageVersionsQuery, ImageVersionFilter } from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+
+type FetchImageVersionsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
+  filter: ImageVersionFilter
+  after?: string | null
+  first?: number
+  firstVulnerabilities?: number
+  afterVulnerabilities?: string | null
+  firstOccurences?: number
+  afterOccurences?: string | null
+}
+
+export const fetchImageVersions = ({
+  queryClient,
+  apiClient,
+  filter,
+  after,
+  first,
+  firstVulnerabilities,
+  afterVulnerabilities,
+  firstOccurences,
+  afterOccurences,
+}: FetchImageVersionsParams): Promise<ObservableQuery.Result<GetImageVersionsQuery>> => {
+  const queryKey = [
+    "imageVersions",
+    filter,
+    after,
+    first,
+    firstVulnerabilities,
+    afterVulnerabilities,
+    firstOccurences,
+    afterOccurences,
+  ]
+
+  // Invalidate cache first to ensure queryFn is always called (forces network request)
+  // Then use ensureQueryData to maintain promise stability (like other fetch functions)
+  queryClient.invalidateQueries({ queryKey })
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetImageVersionsQuery>({
+        query: GetImageVersionsDocument,
+        variables: {
+          filter,
+          first,
+          after,
+          firstVulnerabilities,
+          afterVulnerabilities,
+          firstOccurences,
+          afterOccurences,
+        },
+        fetchPolicy: "network-only", // Force network request to always fetch fresh data
+      }),
+  })
+}

apps/heureka/src/api/fetchImages.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
+import { ObservableQuery } from "@apollo/client"
 import { GetImagesDocument, GetImagesQuery, ImageFilter, VulnerabilityFilter } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
@@ -29,7 +29,7 @@ export const fetchImages = ({
   firstVersions,
   afterVersions,
   vulFilter,
-}: FetchImagesParams): Promise<ApolloQueryResult<GetImagesQuery>> => {
+}: FetchImagesParams): Promise<ObservableQuery.Result<GetImagesQuery>> => {
   return queryClient.ensureQueryData({
     queryKey: [
       "images",

apps/heureka/src/api/fetchRemediations.tsx

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ObservableQuery } from "@apollo/client"
+import { GetRemediationsDocument, GetRemediationsQuery, RemediationFilter } from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+
+type FetchRemediationsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
+  filter?: RemediationFilter
+}
+
+export const fetchRemediations = ({
+  queryClient,
+  apiClient,
+  filter,
+}: FetchRemediationsParams): Promise<ObservableQuery.Result<GetRemediationsQuery>> => {
+  const queryKey = ["remediations", filter]
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetRemediationsQuery>({
+        query: GetRemediationsDocument,
+        variables: {
+          filter,
+        },
+      }),
+  })
+}

apps/heureka/src/api/fetchService.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
+import { ObservableQuery } from "@apollo/client"
 import { GetServicesDocument, GetServicesQuery, OrderDirection, ServiceOrderByField } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
@@ -15,7 +15,7 @@ export const fetchService = ({
   queryClient,
   apiClient,
   service,
-}: FetchServiceParams): Promise<ApolloQueryResult<GetServicesQuery>> => {
+}: FetchServiceParams): Promise<ObservableQuery.Result<GetServicesQuery>> => {
   return queryClient.ensureQueryData({
     queryKey: ["services", service],
     queryFn: () =>