feat(search): add components into tabs

trustification · Sep 19, 2024 · a2a3589 · a2a3589
1 parent f879f00
commit a2a3589
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 33 deletions.
diff --git a/client/src/app/pages/advisory-list/advisory-list.tsx b/client/src/app/pages/advisory-list/advisory-list.tsx
@@ -196,11 +196,11 @@ export const AdvisoryList: React.FC = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">Advisories</Text>
-        </TextContent>
-      </PageSection>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">Advisories</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{

diff --git a/client/src/app/pages/importer-list/importer-list.tsx b/client/src/app/pages/importer-list/importer-list.tsx
@@ -277,11 +277,11 @@ export const ImporterList: React.FC = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">Importers</Text>
-        </TextContent>
-      </PageSection>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">Importers</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{

diff --git a/client/src/app/pages/package-list/package-list.tsx b/client/src/app/pages/package-list/package-list.tsx
@@ -124,11 +124,11 @@ export const PackageList: React.FC = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">Packages</Text>
-        </TextContent>
-      </PageSection>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">Packages</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{

diff --git a/client/src/app/pages/product-list/product-list.tsx b/client/src/app/pages/product-list/product-list.tsx
@@ -131,6 +131,11 @@ export const ProductList: React.FC = () => {
 
   return (
     <>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">Products</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{

diff --git a/client/src/app/pages/sbom-list/sbom-list.tsx b/client/src/app/pages/sbom-list/sbom-list.tsx
@@ -174,11 +174,11 @@ export const SbomList: React.FC = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">SBOMs</Text>
-        </TextContent>
-      </PageSection>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">SBOMs</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{

diff --git a/client/src/app/pages/search/search.tsx b/client/src/app/pages/search/search.tsx
@@ -10,13 +10,20 @@ import {
   Tabs,
   Text,
   TextContent,
+  SearchInput,
 } from "@patternfly/react-core";
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
+import SbomList from "@app/pages/sbom-list";
+import VulnerabilityList from "@app/pages/vulnerability-list";
+import PackageList from "@app/pages/package-list";
+import AdvisoryList from "@app/pages/advisory-list";
+import ImporterList from "@app/pages/importer-list";
 
 export const Search: React.FC = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
   const ref = React.createRef<HTMLElement>();
+  const [searchValue, setSearchValue] = React.useState("");
+  const [resultsCount, setResultsCount] = React.useState(0);
 
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -25,6 +32,16 @@ export const Search: React.FC = () => {
     setActiveTabKey(tabIndex);
   };
 
+  const onChangeSearch = (value: string) => {
+    setSearchValue(value);
+    setResultsCount(3);
+  };
+
+  const onClearSearch = () => {
+    setSearchValue("");
+    setResultsCount(0);
+  };
+
   const sbomPopover = (popoverRef: React.RefObject<any>) => (
     <Popover
       bodyContent={
@@ -41,11 +58,17 @@ export const Search: React.FC = () => {
         <TextContent>
           <Text component="h1">Search</Text>
         </TextContent>
+        <SearchInput
+          placeholder="Search for an SBOM, advisory, or CVE"
+          value={searchValue}
+          onChange={(_event, value) => onChangeSearch(value)}
+          onClear={onClearSearch}
+          resultsCount={resultsCount}
+        />
       </PageSection>
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        isBox={isBox}
         aria-label="Tabs"
         role="region"
       >
@@ -54,7 +77,7 @@ export const Search: React.FC = () => {
           title={<TabTitleText>Products</TabTitleText>}
           aria-label="Products"
         >
-          Products
+          <ProductList />
         </Tab>
         <Tab
           eventKey={1}
@@ -68,19 +91,19 @@ export const Search: React.FC = () => {
             </>
           }
         >
-          SBOMs
+          <SbomList />
         </Tab>
         <Tab eventKey={2} title={<TabTitleText>Vulnerabilities</TabTitleText>}>
-          Vulnerabilities
+          <VulnerabilityList />
         </Tab>
         <Tab eventKey={3} title={<TabTitleText>Packages</TabTitleText>}>
-          Packages
+          <PackageList />
         </Tab>
         <Tab eventKey={4} title={<TabTitleText>Advisories</TabTitleText>}>
-          Advisories
+          <AdvisoryList />
         </Tab>
         <Tab eventKey={5} title={<TabTitleText>Importers</TabTitleText>}>
-          Importers
+          <ImporterList />
         </Tab>
       </Tabs>
     </>

diff --git a/client/src/app/pages/vulnerability-list/vulnerability-list.tsx b/client/src/app/pages/vulnerability-list/vulnerability-list.tsx
@@ -147,11 +147,11 @@ export const VulnerabilityList: React.FC = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">Vulnerabilities</Text>
-        </TextContent>
-      </PageSection>
+      {/*<PageSection variant={PageSectionVariants.light}>*/}
+      {/*  <TextContent>*/}
+      {/*    <Text component="h1">Vulnerabilities</Text>*/}
+      {/*  </TextContent>*/}
+      {/*</PageSection>*/}
       <PageSection>
         <div
           style={{