feat(artifacts): add verification hook

Author: kahboom

client/src/app/pages/Artifacts/Artifacts.tsx

@@ -14,7 +14,7 @@ import {
   Popover,
   TextInput,
 } from "@patternfly/react-core";
-import { useFetchArtifactsImageData } from "@app/queries/artifacts";
+import { useFetchArtifactsImageData, useVerifyArtifact } from "@app/queries/artifacts";
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { ArtifactResults } from "./components/ArtifactResults";
 import { Controller, useForm } from "react-hook-form";
@@ -37,6 +37,14 @@ export const Artifacts = () => {
     fetchError: fetchErrorArtifactMetadata,
   } = useFetchArtifactsImageData({ uri: artifactUri });
 
+  const {
+    mutate: verifyArtifact,
+    isPending: isVerifying,
+    error: verifyError,
+    data: verifyResult,
+    reset: resetVerify,
+  } = useVerifyArtifact();
+
   const {
     control,
     handleSubmit,
@@ -54,6 +62,8 @@ export const Artifacts = () => {
     const uri = data.searchInput?.trim();
     if (!uri) return;
     setArtifactUri(uri);
+    // kick off verification (transitional: SAN not required yet in our draft type)
+    verifyArtifact({ uri });
   };
 
   const query = watch("searchInput");

client/src/app/pages/Artifacts/components/ArtifactResultsSummary.tsx

@@ -55,7 +55,7 @@ export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTermHelpText>
-              <Popover headerContent={<div>Date</div>} bodyContent={<div>Additional pod selector info</div>}>
+              <Popover headerContent={<div>Date</div>} bodyContent={<div>Date created</div>}>
                 <DescriptionListTermHelpTextButton> Created </DescriptionListTermHelpTextButton>
               </Popover>
             </DescriptionListTermHelpText>
@@ -88,7 +88,7 @@ export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTermHelpText>
-              <Popover headerContent={<div>Labels</div>} bodyContent={<div>Additional labels info</div>}>
+              <Popover headerContent={<div>Signatures</div>} bodyContent={<div>Additional labels info</div>}>
                 <DescriptionListTermHelpTextButton> Signatures </DescriptionListTermHelpTextButton>
               </Popover>
             </DescriptionListTermHelpText>

client/src/app/queries/artifacts.ts

@@ -1,17 +1,36 @@
 import type { AxiosError } from "axios";
 
 import { client } from "@app/axios-config/apiInit";
-import { getApiV1ArtifactsImage, type _Error, type ImageMetadataResponse } from "@app/client";
+import {
+  getApiV1ArtifactsImage,
+  type PostApiV1ArtifactsVerifyResponse,
+  type _Error,
+  type ImageMetadataResponse,
+  postApiV1ArtifactsVerify,
+  type VerifyArtifactRequest,
+} from "@app/client";
 import { useMockableQuery } from "./helpers";
 import { artifactsImageDataMock } from "./mocks/artifacts.mock";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-export const ArtifactsKey = "Artifacts";
+export const ArtifactsKeys = {
+  all: ["Artifacts" as const],
+  image: (uri: string) => ["Artifacts", "image", uri] as const,
+  verify: (id: string | number) => ["Artifacts", "verify", id] as const,
+};
+
+// transitional payload while backend/types evolve
+interface VerifyArtifactDraft {
+  uri: string;
+  expectedSAN?: string; // optional for now
+  [k: string]: unknown;
+}
 
 export const useFetchArtifactsImageData = ({ uri }: { uri: string | null | undefined }) => {
   const enabled = typeof uri === "string" && uri.trim().length > 0;
   const { data, isLoading, error, refetch } = useMockableQuery<ImageMetadataResponse | null, AxiosError<_Error>>(
     {
-      queryKey: [ArtifactsKey, "image", uri ?? ""],
+      queryKey: ArtifactsKeys.image(uri ?? ""),
       queryFn: async () => {
         const response = await getApiV1ArtifactsImage({ client, query: { uri: uri! } });
         return response.data ?? null;
@@ -25,3 +44,30 @@ export const useFetchArtifactsImageData = ({ uri }: { uri: string | null | undef
 
   return { artifact: data, isFetching: isLoading, fetchError: error, refetch };
 };
+
+export const useVerifyArtifact = () => {
+  const queryClient = useQueryClient();
+  return useMutation<PostApiV1ArtifactsVerifyResponse | null, AxiosError<_Error>, VerifyArtifactDraft>({
+    mutationFn: async (draft) => {
+      // if the backend/types aren't ready (e.g., missing SAN), return a mock/null
+      if (!draft.expectedSAN) {
+        return null;
+      }
+
+      // map the draft payload into the SDK body shape. Include only fields we know.
+      const res = await postApiV1ArtifactsVerify({
+        client,
+        body: {
+          // the SDK requires `expectedSAN` (string | null); ensure it exists when we reach here
+          expectedSAN: draft.expectedSAN ?? null,
+          // use `ociImage` for the artifact reference (since `uri` isn't in the SDK type)
+          ociImage: draft.uri,
+        } as VerifyArtifactRequest,
+      });
+      return res.data ?? null;
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ArtifactsKeys.all });
+    },
+  });
+};