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 on the image details page with create and revert. Introduces image version details page to show deployment locations for each image version.

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 instanceof Error && error.message ? 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/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/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,58 @@
+/*
+ * 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,
+  ]
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetImageVersionsQuery>({
+        query: GetImageVersionsDocument,
+        variables: {
+          filter,
+          first,
+          after,
+          firstVulnerabilities,
+          afterVulnerabilities,
+          firstOccurences,
+          afterOccurences,
+        },
+      }),
+  })
+}

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: () =>

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

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { PortalProvider } from "@cloudoperators/juno-ui-components"
+import { FalsePositiveModal } from "./index"
+
+const defaultProps = {
+  open: true,
+  onClose: () => {},
+  onConfirm: () => Promise.resolve(),
+  vulnerability: "CVE-2024-1234",
+  service: "my-service",
+  image: "my-image",
+}
+
+const renderModal = (props = {}) => {
+  return render(
+    <PortalProvider>
+      <FalsePositiveModal {...defaultProps} {...props} />
+    </PortalProvider>
+  )
+}
+
+describe("FalsePositiveModal", () => {
+  it("renders with title and vulnerability details when open", () => {
+    renderModal()
+    expect(screen.getByRole("heading", { name: "Mark as False Positive" })).toBeInTheDocument()
+    expect(screen.getByText(/Vulnerability:/)).toBeInTheDocument()
+    expect(screen.getByText("CVE-2024-1234")).toBeInTheDocument()
+    expect(screen.getByText(/Service:/)).toBeInTheDocument()
+    expect(screen.getByText("my-service")).toBeInTheDocument()
+    expect(screen.getByText(/Image:/)).toBeInTheDocument()
+    expect(screen.getByText("my-image")).toBeInTheDocument()
+  })
+
+  it("renders Cancel and Mark as False Positive buttons", () => {
+    renderModal()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Mark as False Positive" })).toBeInTheDocument()
+  })
+
+  it("calls onClose when Cancel is clicked", async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    renderModal({ onClose })
+    await user.click(screen.getByRole("button", { name: "Cancel" }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})