fix: separated ArtifactSignatureItem component

feat(artifacts): add verification hook

feat(artifacts): add attestations tab

Author: stanislavsemeniuk

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/ArtifactResults.tsx

@@ -9,17 +9,29 @@ import {
   Flex,
   FlexItem,
   Panel,
+  Tab,
+  Tabs,
+  TabTitleText,
 } from "@patternfly/react-core";
 import { ArtifactResultsSummary } from "./ArtifactResultsSummary";
 import { ArtifactResultsSignatures } from "./ArtifactResultsSignatures";
+import { useState } from "react";
 
 export interface IArtifactResultsProps {
   artifact: ImageMetadataResponse;
 }
 
 export const ArtifactResults = ({ artifact }: IArtifactResultsProps) => {
   // temporary workaround until API merged
-  const artifactSignatures: string[] = [];
+  const artifactSignatures: string[] = ["a", "b"];
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+
+  const handleTabClick = (
+    event: React.MouseEvent<unknown> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
 
   return (
     <div style={{ margin: "2em auto" }}>
@@ -41,8 +53,20 @@ export const ArtifactResults = ({ artifact }: IArtifactResultsProps) => {
             <ArtifactResultsSummary artifact={artifact} />
           </Panel>
           <Panel style={{ marginTop: "1.25em" }}>
-            {/** SIGNATURES */}
-            <ArtifactResultsSignatures signatures={artifactSignatures} />
+            <Tabs
+              activeKey={activeTabKey}
+              onSelect={handleTabClick}
+              aria-label="Tabs in the default example"
+              role="region"
+            >
+              <Tab eventKey={0} title={<TabTitleText>Signatures</TabTitleText>} aria-label="Default content - users">
+                {/** SIGNATURES */}
+                <ArtifactResultsSignatures signatures={artifactSignatures} />
+              </Tab>
+              <Tab eventKey={1} title={<TabTitleText>Attestations</TabTitleText>}>
+                Attestations
+              </Tab>
+            </Tabs>
           </Panel>
         </CardBody>
       </Card>