feat(artifacts): add attestations tab

Author: kahboom

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

@@ -9,9 +9,13 @@ 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;
@@ -20,6 +24,14 @@ export interface IArtifactResultsProps {
 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,
+    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>

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

@@ -1,19 +1,14 @@
-import { Content, ContentVariants, DataList } from "@patternfly/react-core";
+import { DataList } from "@patternfly/react-core";
 import { ArtifactSignatureItem } from "./ArtifactSignatureItem";
 
 export const ArtifactResultsSignatures = ({ signatures }: { signatures: string[] }) => {
   console.table(signatures);
 
   return (
-    <>
-      <Content component={ContentVariants.h6} style={{ margin: "2em auto 1.5em", overflowY: "hidden" }}>
-        Signatures
-      </Content>
-      <DataList aria-label="Signatures list" isCompact>
-        {signatures.map((signature, id) => (
-          <ArtifactSignatureItem signature={signature} key={id} />
-        ))}
-      </DataList>
-    </>
+    <DataList aria-label="Signatures list" isCompact>
+      {signatures.map((signature, id) => (
+        <ArtifactSignatureItem signature={signature} key={id} />
+      ))}
+    </DataList>
   );
 };

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

@@ -139,11 +139,6 @@ export const ArtifactSignatureItem = ({ signature }: { signature: string }) => {
             onSelect={onSelectCertChain}
           />
         </Panel>
-        <Panel>
-          <Content component={ContentVariants.h6} style={{ margin: "1em auto" }}>
-            Attestations
-          </Content>
-        </Panel>
         <Panel>
           <Content component={ContentVariants.h6} style={{ margin: "1em auto" }}>
             Rekor Entry