refactor: extract systems list filter to a separate component

web/html/src/manager/systems/all-list.tsx

@@ -3,12 +3,13 @@ import * as React from "react";
 import { IconTag } from "components/icontag";
 import * as Systems from "components/systems";
 import { Column } from "components/table/Column";
-import { SearchField } from "components/table/SearchField";
 import { Table } from "components/table/Table";
 
 import { Utils } from "utils/functions";
 import Network from "utils/network";
 
+import { SystemsListFilter } from "./list-filter";
+
 type Props = {
   /** Locale of the help links */
   docsLocale: string;
@@ -17,21 +18,6 @@ type Props = {
   query?: string;
 };
 
-const allListOptions = [
-  { value: "server_name", label: t("System") },
-  { value: "system_kind", label: t("System Kind") },
-  { value: "status_type", label: t("Updates") },
-  { value: "total_errata_count", label: t("Patches") },
-  { value: "outdated_packages", label: t("Packages") },
-  { value: "extra_pkg_count", label: t("Extra Packages") },
-  { value: "config_files_with_differences", label: t("Config Diffs") },
-  { value: "channel_labels", label: t("Base Channel") },
-  { value: "entitlement_level", label: t("System Type") },
-  { value: "requires_reboot", label: t("Requires Reboot") },
-  { value: "created_days", label: t("Registered Days") },
-  { value: "group_count", label: t("Groups") },
-];
-
 export function AllSystems(props: Props) {
   const [selectedSystems, setSelectedSystems] = React.useState<string[]>([]);
 
@@ -65,7 +51,7 @@ export function AllSystems(props: Props) {
         selectable={(item) => item.hasOwnProperty("id")}
         selectedItems={selectedSystems}
         onSelect={handleSelectedSystems}
-        searchField={<SearchField options={allListOptions} name="criteria" />}
+        searchField={<SystemsListFilter />}
         defaultSearchField={props.queryColumn || "server_name"}
         initialSearch={props.query}
         emptyText={t("No Systems.")}

web/html/src/manager/systems/list-filter.tsx

@@ -0,0 +1,20 @@
+import { SearchField } from "components/table/SearchField";
+
+const allListOptions = [
+  { value: "server_name", label: t("System") },
+  { value: "system_kind", label: t("System Kind") },
+  { value: "status_type", label: t("Updates") },
+  { value: "total_errata_count", label: t("Patches") },
+  { value: "outdated_packages", label: t("Packages") },
+  { value: "extra_pkg_count", label: t("Extra Packages") },
+  { value: "config_files_with_differences", label: t("Config Diffs") },
+  { value: "channel_labels", label: t("Base Channel") },
+  { value: "entitlement_level", label: t("System Type") },
+  { value: "requires_reboot", label: t("Requires Reboot") },
+  { value: "created_days", label: t("Registered Days") },
+  { value: "group_count", label: t("Groups") },
+];
+
+export const SystemsListFilter = (props) => {
+  return <SearchField options={allListOptions} name="criteria" />;
+};