update client/openapi/console.yaml

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(branding): update favicon

fix(branding): update favicon

chore(artifacts): add attestation component, update hook

chore: add mutation hook and mock data

add attestation results

Author: kahboom

branding/favicon-rh.svg

@@ -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"
     }

branding/favicon.ico

@@ -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 %>";

branding/manifest.json

@@ -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/index.html

@@ -14,11 +14,10 @@ import {
   Popover,
   TextInput,
 } from "@patternfly/react-core";
-import { useFetchArtifactsImageData, useVerifyArtifact } from "@app/queries/artifacts";
+import { useFetchArtifactsImageData } 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";
@@ -37,14 +36,6 @@ export const Artifacts = () => {
     fetchError: fetchErrorArtifactMetadata,
   } = useFetchArtifactsImageData({ uri: artifactUri });
 
-  const {
-    mutate: verifyArtifact,
-    isPending: isVerifying,
-    error: verifyError,
-    data: verifyResult,
-    reset: resetVerify,
-  } = useVerifyArtifact();
-
   const {
     control,
     handleSubmit,
@@ -62,8 +53,6 @@ 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/openapi/console.yaml

@@ -16,18 +16,17 @@ import {
 import { ArtifactResultsSummary } from "./ArtifactResultsSummary";
 import { ArtifactResultsSignatures } from "./ArtifactResultsSignatures";
 import { useState } from "react";
+import { ArtifactResultsAttestations } from "./ArtifactResultsAttestations";
 
 export interface IArtifactResultsProps {
   artifact: ImageMetadataResponse;
 }
 
 export const ArtifactResults = ({ artifact }: IArtifactResultsProps) => {
-  // temporary workaround until API merged
-  const artifactSignatures: string[] = ["a", "b"];
   const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
 
   const handleTabClick = (
-    event: React.MouseEvent<unknown> | React.KeyboardEvent | MouseEvent,
+    _event: React.MouseEvent<unknown> | React.KeyboardEvent | MouseEvent,
     tabIndex: string | number
   ) => {
     setActiveTabKey(tabIndex);
@@ -39,7 +38,7 @@ export const ArtifactResults = ({ artifact }: IArtifactResultsProps) => {
       <Card style={{ margin: "1.5em auto 2em", overflowY: "hidden" }}>
         <CardHeader>
           <Content component={ContentVariants.h4} style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-            <Flex className="example-border">
+            <Flex className="border">
               <FlexItem>
                 Artifact: <Button variant="plain">{artifact.image}</Button>
               </FlexItem>
@@ -53,18 +52,18 @@ export const ArtifactResults = ({ artifact }: IArtifactResultsProps) => {
             <ArtifactResultsSummary artifact={artifact} />
           </Panel>
           <Panel style={{ marginTop: "1.25em" }}>
-            <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">
+            <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Artifact results" role="region">
+              <Tab
+                eventKey={0}
+                title={<TabTitleText>Signatures</TabTitleText>}
+                aria-label="Default content - signatures"
+              >
                 {/** SIGNATURES */}
-                <ArtifactResultsSignatures signatures={artifactSignatures} />
+                <ArtifactResultsSignatures signatures={artifact.signatures} />
               </Tab>
               <Tab eventKey={1} title={<TabTitleText>Attestations</TabTitleText>}>
-                Attestations
+                {/** ATTESTATIONS */}
+                <ArtifactResultsAttestations attestations={artifact.attestations} />
               </Tab>
             </Tabs>
           </Panel>

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

@@ -0,0 +1,69 @@
+import {
+  ClipboardCopy,
+  Content,
+  ContentVariants,
+  DataList,
+  DataListCell,
+  DataListContent,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DataListToggle,
+  Panel,
+} from "@patternfly/react-core";
+import { useState } from "react";
+
+export const ArtifactResultsAttestations = ({ attestations }: { attestations?: string[] }) => {
+  console.table(attestations);
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  const handleToggleAttestationItem = (index: number) => {
+    setExpandedIndex((prev) => (prev === index ? null : index));
+  };
+
+  return (
+    <DataList aria-label="Attestations list" isCompact>
+      {attestations?.map((attestation, idx) => {
+        const isExpanded = expandedIndex === idx;
+        return (
+          <DataListItem aria-labelledby={`att-item-${idx}`} key={`att-${idx}`} isExpanded={isExpanded}>
+            <DataListItemRow>
+              <DataListToggle
+                onClick={() => handleToggleAttestationItem(idx)}
+                isExpanded={isExpanded}
+                id={`att-toggle-${idx}`}
+                aria-controls={`att-expand-${idx}`}
+              />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="identity">
+                    <span id="compact-item1">[email protected]</span>
+                  </DataListCell>,
+                  <DataListCell key="digest">
+                    <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
+                      sha256:77db
+                    </ClipboardCopy>
+                  </DataListCell>,
+                  <DataListCell key="signatureType">DSSE</DataListCell>,
+                  <DataListCell key="integratedTime">4 months ago </DataListCell>,
+                  <DataListCell key="verificationStatus">Signature ✓ / Rekor ✓ / Chain ✓</DataListCell>,
+                ]}
+              />
+            </DataListItemRow>
+            <DataListContent
+              aria-label="Attestation expandable content details"
+              id={`att-expand-${idx}`}
+              isHidden={!isExpanded}
+            >
+              <Panel>
+                <Content component={ContentVariants.h6} style={{ margin: "1em auto" }}>
+                  Attestation
+                </Content>
+              </Panel>
+            </DataListContent>
+          </DataListItem>
+        );
+      })}
+    </DataList>
+  );
+};

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

@@ -1,12 +1,12 @@
 import { DataList } from "@patternfly/react-core";
 import { ArtifactSignatureItem } from "./ArtifactSignatureItem";
+import type { Signatures } from "@app/client";
 
-export const ArtifactResultsSignatures = ({ signatures }: { signatures: string[] }) => {
+export const ArtifactResultsSignatures = ({ signatures }: { signatures?: Signatures }) => {
   console.table(signatures);
-
   return (
     <DataList aria-label="Signatures list" isCompact>
-      {signatures.map((signature, id) => (
+      {signatures?.map((signature, id) => (
         <ArtifactSignatureItem signature={signature} key={id} />
       ))}
     </DataList>

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

@@ -13,15 +13,15 @@ import {
   Button,
   Label,
 } from "@patternfly/react-core";
-import { LockIcon, PlusCircleIcon } from "@patternfly/react-icons";
+import { PlusCircleIcon } from "@patternfly/react-icons";
 
 import type { IArtifactResultsProps } from "./ArtifactResults";
 
 export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
   const summaryCards = [
-    <Card key="card-1" isPlain>
+    <Card key="artifact-summary" isPlain>
       <CardBody>
-        <DescriptionList aria-label="Term help text" isCompact isHorizontal columnModifier={{ default: "2Col" }}>
+        <DescriptionList aria-label="Digest help text" isCompact isHorizontal columnModifier={{ default: "2Col" }}>
           <DescriptionListGroup>
             <DescriptionListTermHelpText>
               <Popover headerContent={<div>Digest</div>} bodyContent={<div>ref + resolved canonical digest</div>}>
@@ -43,14 +43,7 @@ export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
             <DescriptionListDescription>{artifact.metadata.mediaType}</DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
-            <DescriptionListTermHelpText>
-              <Popover
-                headerContent={<div>Identities</div>}
-                bodyContent={<div>Deduped list of signature identities used</div>}
-              >
-                <DescriptionListTermHelpTextButton> Size </DescriptionListTermHelpTextButton>
-              </Popover>
-            </DescriptionListTermHelpText>
+            <DescriptionListTermHelpText>Size</DescriptionListTermHelpText>
             <DescriptionListDescription>{artifact.metadata.size}</DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
@@ -93,19 +86,27 @@ export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
               </Popover>
             </DescriptionListTermHelpText>
             <DescriptionListDescription>
-              <Label className="pf-v6-u-mb-sm" icon={<LockIcon />} color="blue">
+              <Label className="pf-v6-u-mb-sm" color="blue">
                 2 Signatures
               </Label>
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTermHelpText>
-              <Popover headerContent={<div>Attestation</div>} bodyContent={<div>A signed document</div>}>
+              <Popover
+                headerContent={<div>Attestation</div>}
+                bodyContent={
+                  <div>
+                    An attestation is a signed document (usually in in-toto format) that describes an event, action, or
+                    property related to a software artifact.
+                  </div>
+                }
+              >
                 <DescriptionListTermHelpTextButton> Attestations </DescriptionListTermHelpTextButton>
               </Popover>
             </DescriptionListTermHelpText>
             <DescriptionListDescription>
-              <Label className="pf-v6-u-mb-sm" icon={<LockIcon />} color="green">
+              <Label className="pf-v6-u-mb-sm" color="green">
                 2 Attestations
               </Label>
             </DescriptionListDescription>
@@ -117,7 +118,7 @@ export const ArtifactResultsSummary = ({ artifact }: IArtifactResultsProps) => {
               </Popover>
             </DescriptionListTermHelpText>
             <DescriptionListDescription>
-              <Label className="pf-v6-u-mb-sm" icon={<LockIcon />} color="orange">
+              <Label className="pf-v6-u-mb-sm" color="orange">
                 4 Rekor Entries
               </Label>
             </DescriptionListDescription>