feat(trustroots):refactor-common-components

Author: abhinandan13jan

client/src/app/pages/Certificates/CertificatesPage.tsx

@@ -11,7 +11,6 @@ import {
   Pagination,
   PaginationVariant,
   Popper,
-  SearchInput,
   Toolbar,
   ToolbarContent,
   ToolbarFilter,
@@ -26,6 +25,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { ICertificateProps } from "./Certificates.data";
 import ShieldIcon from "@patternfly/react-icons/dist/esm/icons/shield-alt-icon";
 import { capitalizeFirstLetter, formatDate, getCertificateStatusColor } from "@app/utils/utils";
+import { PublishedOnInput, SearchInputField } from "@app/shared-components/SearchInputField";
 
 export interface ICertificatesPageProps {
   certificates: ICertificateProps[];
@@ -232,18 +232,7 @@ const CertificatesPage = ({ certificates, columns }: ICertificatesPageProps) =>
     </div>
   );
 
-  // Set up identifier search input
-  const searchInput = (
-    <SearchInput
-      placeholder="Filter by text"
-      value={searchValue}
-      onChange={(_event, value) => onSearchChange(value)}
-      onClear={() => onSearchChange("")}
-    />
-  );
 
-  // Set up date filter
-  const publishedOnInput = <>Date range input here</>;
 
   const toggleGroupItems = (
     <ToolbarGroup variant="filter-group">
@@ -255,10 +244,10 @@ const CertificatesPage = ({ certificates, columns }: ICertificatesPageProps) =>
         categoryName="Subject"
         showToolbarItem={activeAttributeMenu === "Filter text"}
       >
-        {searchInput}
+        <SearchInputField searchValue={searchValue} onSearchChange={onSearchChange} />
       </ToolbarFilter>
       <ToolbarFilter categoryName={"Valid To"} showToolbarItem={activeAttributeMenu === "Valid To"}>
-        {publishedOnInput}
+        <PublishedOnInput />
       </ToolbarFilter>
       <ToolbarItem variant="pagination">{renderPagination("top", true)}</ToolbarItem>
     </ToolbarGroup>

client/src/app/pages/TrustRoots/components/TrustRootRow.tsx

@@ -14,7 +14,7 @@ import {
   type MenuToggleElement,
 } from "@patternfly/react-core";
 import * as React from "react";
-import StatusIcon from "./StatusIcon";
+import StatusIcon from "../../../shared-components/StatusIcon";
 import CodeBranchIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
 import CubeIcon from "@patternfly/react-icons/dist/esm/icons/cube-icon";
 import { CalendarAltIcon, FileAltIcon, EllipsisVIcon } from "@patternfly/react-icons";

client/src/app/shared-components/SearchInputField.tsx

@@ -0,0 +1,19 @@
+import { SearchInput } from "@patternfly/react-core";
+
+interface SearchInputFieldProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+}
+
+// Set up identifier search input
+export const SearchInputField: React.FC<SearchInputFieldProps> = ({ searchValue, onSearchChange }) =>
+    <SearchInput
+        placeholder="Filter by text"
+        value={searchValue}
+        onChange={(_event, value) => onSearchChange(value)}
+        onClear={() => onSearchChange("")}
+    />
+
+
+// Set up date filter
+export const PublishedOnInput = () => <>Date range input here</>;