✨ RHTPA v2 UI Microcopy Suggestions from the Docs team

client/src/app/pages/advisory-list/advisory-table.tsx

@@ -57,7 +57,13 @@ export const AdvisoryTable: React.FC = () => {
             <TableHeaderContentWithControls {...tableControls}>
               <Th {...getThProps({ columnKey: "identifier" })} />
               <Th {...getThProps({ columnKey: "title" })} />
-              <Th {...getThProps({ columnKey: "severity" })} />
+              <Th
+                {...getThProps({ columnKey: "severity" })}
+                info={{
+                  tooltip:
+                    "The average CVSS score for all of the Vulnerabilities linked to this Advisory.",
+                }}
+              />
               <Th {...getThProps({ columnKey: "type" })} />
               <Th {...getThProps({ columnKey: "modified" })} />
               <Th {...getThProps({ columnKey: "vulnerabilities" })} />

client/src/app/pages/home/components/MonitoringSection.tsx

@@ -93,7 +93,7 @@ export const MonitoringSection: React.FC = () => {
 
   return (
     <Card>
-      <CardTitle>Your dashboard</CardTitle>
+      <CardTitle>Dashboard</CardTitle>
       <CardBody>
         <Grid>
           <GridItem md={6}>
@@ -110,9 +110,9 @@ export const MonitoringSection: React.FC = () => {
               <Stack hasGutter>
                 <StackItem>
                   <TextContent>
-                    Below is a summary of Vulnerability status for your last 10
-                    ingested SBOMs. You can click on the SBOM name to be taken
-                    to their respective details page.
+                    Below is a summary of Vulnerability status for the last 10
+                    ingested SBOMs. To view the details, click on an SBOM name.
+                    You can also select up to 4 SBOMs to watch.
                   </TextContent>
                 </StackItem>
                 <StackItem>

client/src/app/pages/package-details/package-details.tsx

@@ -4,15 +4,18 @@ import {
   Flex,
   FlexItem,
   PageSection,
+  Popover,
   Stack,
   StackItem,
   Tab,
+  TabAction,
   TabContent,
   TabTitleText,
   Tabs,
   Text,
   TextContent,
 } from "@patternfly/react-core";
+import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 
 import { PathParam, useRouteParams } from "@app/Routes";
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
@@ -44,6 +47,8 @@ export const PackageDetails: React.FC = () => {
   const vulnerabilitiesTabRef = React.createRef<HTMLElement>();
   const sbomsTabRef = React.createRef<HTMLElement>();
 
+  const sbomsPopupRef = React.createRef<HTMLElement>();
+
   return (
     <>
       <PageSection variant="light">
@@ -86,6 +91,17 @@ export const PackageDetails: React.FC = () => {
           <Tab
             eventKey={1}
             title={<TabTitleText>SBOMs using package</TabTitleText>}
+            actions={
+              <>
+                <TabAction ref={sbomsPopupRef}>
+                  <HelpIcon />
+                </TabAction>
+                <Popover
+                  bodyContent={<div>A list of SBOMs using this package.</div>}
+                  triggerRef={sbomsPopupRef}
+                />
+              </>
+            }
             tabContentId="refTabSbomsSection"
             tabContentRef={sbomsTabRef}
           />

client/src/app/pages/search/components/SearchMenu.tsx

@@ -307,7 +307,7 @@ export const SearchMenu: React.FC<ISearchMenu> = ({ onChangeSearch }) => {
 
   const searchInput = (
     <SearchInput
-      placeholder="Search for an SBOM, Package, or Vulnerability"
+      placeholder="Search for an SBOM, Package, Advisory, or Vulnerability"
       value={searchValue}
       onChange={(_event, value) => onChangeSearchValue(value)}
       onClear={onClearSearchValue}

client/src/app/pages/search/components/SearchTabs.tsx

@@ -96,16 +96,9 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
   };
 
   const sbomPopoverRef = React.createRef<HTMLElement>();
-
-  const sbomPopover = (popoverRef: React.RefObject<unknown>) => (
-    <Popover
-      bodyContent={
-        <div>Software Bill of Materials for Products and Containers.</div>
-      }
-      position={"right"}
-      triggerRef={popoverRef}
-    />
-  );
+  const packagePopoverRef = React.createRef<HTMLElement>();
+  const vulnerabilityPopoverRef = React.createRef<HTMLElement>();
+  const advisoryPopoverRef = React.createRef<HTMLElement>();
 
   return (
     <Split hasGutter>
@@ -166,7 +159,16 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
                 <TabAction aria-label="SBOM help popover" ref={sbomPopoverRef}>
                   <HelpIcon />
                 </TabAction>
-                {sbomPopover(sbomPopoverRef)}
+                <Popover
+                  bodyContent={
+                    <div>
+                      A list of ingested Software Bill of Materials (SBOM)
+                      documents.
+                    </div>
+                  }
+                  position={"right"}
+                  triggerRef={sbomPopoverRef}
+                />
               </>
             }
           >
@@ -188,6 +190,26 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
                 </Badge>
               </TabTitleText>
             }
+            actions={
+              <>
+                <TabAction
+                  aria-label="Package help popover"
+                  ref={packagePopoverRef}
+                >
+                  <HelpIcon />
+                </TabAction>
+                <Popover
+                  bodyContent={
+                    <div>
+                      A list of packages along with the count of
+                      vulnerabilities.
+                    </div>
+                  }
+                  position={"right"}
+                  triggerRef={packagePopoverRef}
+                />
+              </>
+            }
           >
             {packageTable ?? <PackageTable />}
           </Tab>
@@ -207,6 +229,26 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
                 </Badge>
               </TabTitleText>
             }
+            actions={
+              <>
+                <TabAction
+                  aria-label="Vulnerability help popover"
+                  ref={vulnerabilityPopoverRef}
+                >
+                  <HelpIcon />
+                </TabAction>
+                <Popover
+                  bodyContent={
+                    <div>
+                      A list of publicly known Common Vulnerabilities and
+                      Exposures (CVE).
+                    </div>
+                  }
+                  position={"right"}
+                  triggerRef={vulnerabilityPopoverRef}
+                />
+              </>
+            }
           >
             {vulnerabilityTable ?? <VulnerabilityTable />}
           </Tab>
@@ -226,6 +268,21 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
                 </Badge>
               </TabTitleText>
             }
+            actions={
+              <>
+                <TabAction
+                  aria-label="Advisory help popover"
+                  ref={advisoryPopoverRef}
+                >
+                  <HelpIcon />
+                </TabAction>
+                <Popover
+                  bodyContent={<div>A list of available advisories.</div>}
+                  position={"right"}
+                  triggerRef={advisoryPopoverRef}
+                />
+              </>
+            }
           >
             {advisoryTable ?? <AdvisoryTable />}
           </Tab>

client/src/app/pages/upload/upload.tsx

@@ -1,4 +1,4 @@
-import type React from "react";
+import React from "react";
 
 import type { AxiosError, AxiosResponse } from "axios";
 
@@ -7,14 +7,17 @@ import {
   CardBody,
   PageSection,
   PageSectionVariants,
+  Popover,
   Tab,
+  TabAction,
   TabContent,
   TabContentBody,
   TabTitleText,
   Tabs,
   Text,
   TextContent,
 } from "@patternfly/react-core";
+import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 
 import { useUploadAdvisory } from "@app/queries/advisories";
 import { useUploadSBOM } from "@app/queries/sboms";
@@ -33,6 +36,9 @@ export const ImporterList: React.FC = () => {
     handleRemoveUpload: handleAdvisoryRemoveUpload,
   } = useUploadAdvisory();
 
+  const sbomPopupRef = React.createRef<HTMLElement>();
+  const advisoryPopupRef = React.createRef<HTMLElement>();
+
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -44,7 +50,28 @@ export const ImporterList: React.FC = () => {
         <Card>
           <CardBody>
             <Tabs defaultActiveKey={0}>
-              <Tab eventKey={0} title={<TabTitleText>SBOM</TabTitleText>}>
+              <Tab
+                eventKey={0}
+                title={<TabTitleText>SBOM</TabTitleText>}
+                actions={
+                  <>
+                    <TabAction ref={sbomPopupRef}>
+                      <HelpIcon />
+                    </TabAction>
+                    <Popover
+                      bodyContent={
+                        <div>
+                          Upload a Software Bill of Materials (SBOM) document.
+                          We accept CycloneDX versions 1.3, 1.4, 1.5 and 1.6,
+                          and System Package Data Exchange (SPDX) versions 2.2,
+                          and 2.3.
+                        </div>
+                      }
+                      triggerRef={sbomPopupRef}
+                    />
+                  </>
+                }
+              >
                 <TabContent id="upload-sbom-tab-content">
                   <TabContentBody hasPadding>
                     <UploadFiles
@@ -65,7 +92,23 @@ export const ImporterList: React.FC = () => {
                   </TabContentBody>
                 </TabContent>
               </Tab>
-              <Tab eventKey={1} title={<TabTitleText>Advisory</TabTitleText>}>
+              <Tab
+                eventKey={1}
+                title={<TabTitleText>Advisory</TabTitleText>}
+                actions={
+                  <>
+                    <TabAction ref={advisoryPopupRef}>
+                      <HelpIcon />
+                    </TabAction>
+                    <Popover
+                      bodyContent={
+                        <div>Upload a CSAF, CVE, or OSV Advisory.</div>
+                      }
+                      triggerRef={advisoryPopupRef}
+                    />
+                  </>
+                }
+              >
                 <TabContent id="upload-advisory-tab-content">
                   <TabContentBody hasPadding>
                     <UploadFiles

client/src/app/pages/vulnerability-details/overview.tsx

@@ -4,9 +4,11 @@ import {
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
-  DescriptionListTerm,
+  DescriptionListTermHelpText,
+  DescriptionListTermHelpTextButton,
   Grid,
   GridItem,
+  Popover,
   Stack,
   StackItem,
 } from "@patternfly/react-core";
@@ -43,19 +45,56 @@ export const Overview: React.FC<OverviewProps> = ({ vulnerability }) => {
                 }}
               >
                 <DescriptionListGroup>
-                  <DescriptionListTerm>Reserved</DescriptionListTerm>
+                  <DescriptionListTermHelpText>
+                    <Popover
+                      bodyContent={
+                        <div>
+                          The date the Vulnerability identifier was assigned by
+                          CVE Numbering Authority (CNA).
+                        </div>
+                      }
+                    >
+                      <DescriptionListTermHelpTextButton>
+                        Reserved
+                      </DescriptionListTermHelpTextButton>
+                    </Popover>
+                  </DescriptionListTermHelpText>
                   <DescriptionListDescription>
                     {formatDate(vulnerability.reserved)}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
-                  <DescriptionListTerm>Published date</DescriptionListTerm>
+                  <DescriptionListTermHelpText>
+                    <Popover
+                      bodyContent={
+                        <div>The date the Vulnerability went public.</div>
+                      }
+                    >
+                      <DescriptionListTermHelpTextButton>
+                        Published
+                      </DescriptionListTermHelpTextButton>
+                    </Popover>
+                  </DescriptionListTermHelpText>
                   <DescriptionListDescription>
                     {formatDate(vulnerability.published)}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
-                  <DescriptionListTerm>Last modified</DescriptionListTerm>
+                  <DescriptionListTermHelpText>
+                    <Popover
+                      bodyContent={
+                        <div>
+                          The last date when information for this Vulnerability
+                          was updated in the National Vulnerability Database
+                          (NVD).
+                        </div>
+                      }
+                    >
+                      <DescriptionListTermHelpTextButton>
+                        Modified
+                      </DescriptionListTermHelpTextButton>
+                    </Popover>
+                  </DescriptionListTermHelpText>
                   <DescriptionListDescription>
                     {formatDate(vulnerability.modified)}
                   </DescriptionListDescription>

client/src/app/pages/vulnerability-list/vulnerability-table.tsx

@@ -50,7 +50,13 @@ export const VulnerabilityTable: React.FC = () => {
             <TableHeaderContentWithControls {...tableControls}>
               <Th {...getThProps({ columnKey: "identifier" })} />
               <Th {...getThProps({ columnKey: "title" })} />
-              <Th {...getThProps({ columnKey: "severity" })} />
+              <Th
+                {...getThProps({ columnKey: "severity" })}
+                info={{
+                  tooltip:
+                    "The Common Vulnerability Scoring System measuring the severity of security flaws.",
+                }}
+              />
               <Th {...getThProps({ columnKey: "published" })} />
               <Th {...getThProps({ columnKey: "sboms" })} />
             </TableHeaderContentWithControls>