feat(artifacts): verification

branding/manifest.json

@@ -3,7 +3,7 @@
   "name": "RHTAS Console UI",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon-rh.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

client/index.html

@@ -9,7 +9,7 @@
     <meta name="theme-color" content="#000000"/>
     <meta name="version" content="2.0.0"/>
     <link rel="manifest" href="/manifest.json"/>
-    <link rel="icon" href="/favicon.ico"/>
+    <link rel="icon" href="/favicon-rh.svg"/>
     <base href="/"/>
     <script>
       window._env = "<%= _env %>";

client/openapi/console.yaml

@@ -644,6 +644,25 @@ components:
       required:
         - mediaType
         - size
+    Signatures:
+      type: array
+      items:
+        $ref: '#/components/schemas/Signature'
+    Signature:
+      type: object
+      description: A cryptographic signature with its associated certificate chain
+      properties:
+        signature:
+          type: string
+          description: A single cryptographic signature encoded as a string
+        certificateChain:
+          type: array
+          description: The X.509 certificate chain associated with this signature
+          items:
+            type: string
+      required:
+        - signature
+        - certificateChain
     ImageMetadataResponse:
       type: object
       properties:
@@ -657,6 +676,14 @@ components:
           type: string
           description: The container image's digest (e.g., SHA256 hash)
           example: sha256:abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890
+        signatures:
+          $ref: '#/components/schemas/Signatures'
+        attestations:
+          type: array
+          description: A list of signed attestations associated with the image
+          items:
+            type: string
+            description: A single signed attestation payload or reference
       required:
         - artifact
         - metadata

client/src/app/Routes.tsx

@@ -5,18 +5,21 @@ import { Navigate, useRoutes } from "react-router-dom";
 import { Bullseye, Spinner } from "@patternfly/react-core";
 import { ErrorFallback } from "./components/ErrorFallback";
 
+const Artifacts = lazy(() => import("./pages/Artifacts"));
 const TrustRoot = lazy(() => import("./pages/TrustRoot"));
 const RekorSearch = lazy(() => import("./pages/RekorSearch"));
 
 export const Paths = {
-  trustRoot: "/trust-root",
+  artifacts: "/artifacts",
   rekorSearch: "/rekor-search",
+  trustRoot: "/trust-root",
 } as const;
 
 export const AppRoutes = () => {
   const allRoutes = useRoutes([
     { path: "/", element: <Navigate to={Paths.trustRoot} /> },
     { path: Paths.trustRoot, element: <TrustRoot /> },
+    { path: Paths.artifacts, element: <Artifacts /> },
     { path: Paths.rekorSearch, element: <RekorSearch /> },
   ]);
 

client/src/app/layout/about.tsx

@@ -23,13 +23,13 @@ export const AboutApp: React.FC<IButtonAboutAppProps> = ({ isOpen, onClose }) =>
       productName={about.displayName}
       brandImageAlt="Logo"
       brandImageSrc={about.imageSrc ?? TRANSPARENT_1x1_GIF}
-      trademark={`COPYRIGHT © 2020, ${new Date().getFullYear()}`}
+      trademark={`COPYRIGHT © 2025, ${new Date().getFullYear()}`}
     >
       <Content>
         <Content component={ContentVariants.p}>
-          {about.displayName} is a proactive service that assists in risk management of Open Source Software (OSS)
-          packages and dependencies. {about.displayName} brings awareness to and remediation of OSS vulnerabilities
-          discovered within the software supply chain.
+          {about.displayName} is a web-based UI for interacting with the Red Hat Trusted Artifact Signer (TAS)
+          ecosystem. It provides user-friendly workflows for retrieving, verifying, and monitoring signed software
+          artifacts, integrating with Sigstore services like Rekor, Fulcio, and TUF.
         </Content>
 
         {about.documentationUrl ? (

client/src/app/layout/sidebar.tsx

@@ -21,7 +21,15 @@ export const SidebarApp: React.FC = () => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
             >
-              Trust root
+              Trust Root
+            </NavLink>
+            <NavLink
+              to={Paths.artifacts}
+              className={({ isActive }) => {
+                return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
+              }}
+            >
+              Artifacts
             </NavLink>
           </li>
           <li className={nav.navItem}>

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

@@ -0,0 +1,156 @@
+import { Fragment, useRef, useState } from "react";
+import {
+  Button,
+  Content,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  FormGroupLabelHelp,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  PageSection,
+  Popover,
+  TextInput,
+} from "@patternfly/react-core";
+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";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+const PLACEHOLDER_URI = "docker.io/library/nginx:latest";
+
+interface FormInputs {
+  searchInput: string;
+}
+
+export const Artifacts = () => {
+  const [artifactUri, setArtifactUri] = useState<string | null>();
+  const labelHelpRef = useRef(null);
+
+  const {
+    artifact,
+    isFetching: isFetchingArtifactMetadata,
+    fetchError: fetchErrorArtifactMetadata,
+  } = useFetchArtifactsImageData({ uri: artifactUri });
+
+  const { mutate: verifyArtifact, data: verification, error: verifyError } = useVerifyArtifact();
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormInputs>({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: {
+      searchInput: "",
+    },
+  });
+
+  const onSubmit = (data: FormInputs) => {
+    const uri = data.searchInput?.trim();
+    if (!uri) return;
+    setArtifactUri(uri);
+    // kick off verification for this URI as well
+    verifyArtifact({ uri, expectedSAN: null });
+  };
+
+  const query = watch("searchInput");
+  const isEmpty = query.trim().length === 0;
+
+  return (
+    <Fragment>
+      <PageSection>
+        <Content>
+          <h1>Artifacts</h1>
+          <p>Search for an artifact.</p>
+        </Content>
+      </PageSection>
+      <PageSection>
+        <Form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
+          <Flex>
+            <Flex direction={{ default: "column" }} flex={{ default: "flex_3" }}>
+              <FlexItem>
+                <Controller
+                  name="searchInput"
+                  control={control}
+                  rules={{ required: { value: true, message: "A URI is required" } }}
+                  render={({ field, fieldState }) => (
+                    <FormGroup
+                      label="Container Image URI"
+                      labelHelp={
+                        <Popover
+                          triggerRef={labelHelpRef}
+                          headerContent={<div>Uniform Resource Identifier (URI)</div>}
+                          bodyContent={
+                            <div>
+                              The URI identifies where a resource, like a container image, lives (e.g.,{" "}
+                              {PLACEHOLDER_URI})
+                            </div>
+                          }
+                        >
+                          <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for URI field" />
+                        </Popover>
+                      }
+                      isRequired
+                      fieldId="uri"
+                    >
+                      <TextInput
+                        aria-label={`uri input field`}
+                        {...field}
+                        type="text"
+                        name="searchInput"
+                        id="uri"
+                        aria-describedby="uri-helper"
+                        aria-invalid={errors.searchInput ? "true" : "false"}
+                        placeholder={PLACEHOLDER_URI}
+                        validated={fieldState.invalid ? "error" : "default"}
+                      />
+                      {fieldState.invalid && (
+                        <FormHelperText>
+                          <HelperText>
+                            <HelperTextItem icon={<ExclamationCircleIcon />} variant={"error"}>
+                              {fieldState.invalid ? fieldState.error?.message : <span>A value is required</span>}
+                            </HelperTextItem>
+                          </HelperText>
+                        </FormHelperText>
+                      )}
+                    </FormGroup>
+                  )}
+                ></Controller>
+              </FlexItem>
+            </Flex>
+            <Flex
+              direction={{ default: "column" }}
+              alignSelf={{ default: "alignSelfFlexEnd" }}
+              flex={{ default: "flex_1" }}
+            >
+              <FlexItem>
+                <Button
+                  variant="primary"
+                  id="search-form-button"
+                  isBlock={true}
+                  isDisabled={isEmpty}
+                  type="submit"
+                  spinnerAriaLabel="Loading"
+                  spinnerAriaLabelledBy="search-form-button"
+                >
+                  Search
+                </Button>
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </Form>
+      </PageSection>
+      <PageSection>
+        <LoadingWrapper isFetching={isFetchingArtifactMetadata} fetchError={fetchErrorArtifactMetadata ?? verifyError}>
+          {artifact && verification && <ArtifactResults artifact={artifact} verification={verification} />}
+        </LoadingWrapper>
+      </PageSection>
+    </Fragment>
+  );
+};