fix: fix incorrect name for health filter in catalog name

src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx

@@ -0,0 +1,95 @@
+import { ConfigSummary } from "@flanksource-ui/api/types/configs";
+import {
+  StatusInfo,
+  StatusLine
+} from "@flanksource-ui/components/StatusLine/StatusLine";
+import { CellContext } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getConfigStatusColor } from "../ConfigSummaryList";
+
+export function ConfigSummaryHealthCell({
+  getValue,
+  row
+}: CellContext<ConfigSummary, any>) {
+  const [searchParams] = useSearchParams();
+
+  const value = getValue<ConfigSummary["health"]>();
+  const type = row.original.type;
+  const groupBy = searchParams.get("groupBy");
+
+  const urlBase = useMemo(() => {
+    if (groupBy) {
+      return `/catalog?groupBy=${groupBy}&configType=${type}`;
+    }
+    return `/catalog?configType=${type}`;
+  }, [groupBy, type]);
+
+  const statusLines = useMemo(() => {
+    const data: StatusInfo[] = Object.entries(value ?? {}).map(
+      ([key, value]) => {
+        return {
+          label: value,
+          url: `${urlBase}&health=${key}:1`,
+          color: getConfigStatusColor({
+            [key]: value
+          } as ConfigSummary["health"])
+        };
+      }
+    );
+    return data;
+  }, [urlBase, value]);
+
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex flex-row gap-1"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <StatusLine label="" statuses={statusLines} />
+    </div>
+  );
+}
+
+export function ConfigSummaryHealthAggregateCell({
+  row
+}: CellContext<ConfigSummary, any>) {
+  const value = row.subRows.reduce((acc, row) => {
+    const health = row.original.health;
+    if (health) {
+      Object.entries(health).forEach(([key, value]) => {
+        acc[key] = (acc[key] || 0) + value;
+      });
+    }
+    return acc;
+  }, {} as Record<string, number>);
+
+  const statusLines = useMemo(() => {
+    const data: StatusInfo[] = Object.entries(value ?? {}).map(
+      ([key, value]) => {
+        return {
+          label: value.toString(),
+          color: getConfigStatusColor({
+            [key]: value
+          } as ConfigSummary["health"])
+        };
+      }
+    );
+    return data;
+  }, [value]);
+
+  if (!value) {
+    return null;
+  }
+  return (
+    <div className="flex flex-row gap-1">
+      <StatusLine label="" statuses={statusLines} />
+    </div>
+  );
+}

src/components/Configs/ConfigSummary/ConfigSummaryList.tsx

@@ -1,8 +1,4 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
-import {
-  StatusInfo,
-  StatusLine
-} from "@flanksource-ui/components/StatusLine/StatusLine";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CountBadge } from "@flanksource-ui/ui/Badge/CountBadge";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
@@ -15,6 +11,10 @@ import ConfigListCostCell from "../ConfigList/Cells/ConfigListCostCell";
 import ConfigListDateCell from "../ConfigList/Cells/ConfigListDateCell";
 import ConfigsTypeIcon from "../ConfigsTypeIcon";
 import ConfigInsightsIcon from "../Insights/ConfigInsightsIcon";
+import {
+  ConfigSummaryHealthAggregateCell,
+  ConfigSummaryHealthCell
+} from "./Cells/ConfigSummaryHealthCells";
 
 export function getConfigStatusColor(health?: ConfigSummary["health"]) {
   if (!health) {
@@ -111,71 +111,8 @@ const configSummaryColumns: ColumnDef<ConfigSummary, any>[] = [
     accessorKey: "health",
     minSize: 50,
     maxSize: 100,
-    cell: ({ getValue }: CellContext<ConfigSummary, any>) => {
-      const value = getValue<ConfigSummary["health"]>();
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const statusLines = useMemo(() => {
-        const data: StatusInfo[] = Object.entries(value ?? {}).map(
-          ([key, value]) => {
-            return {
-              label: value,
-              // @ts-ignore
-              color: getConfigStatusColor({
-                [key]: value
-              })
-            };
-          }
-        );
-        return data;
-      }, [value]);
-
-      if (!value) {
-        return null;
-      }
-
-      return (
-        <div className="flex flex-row gap-1">
-          <StatusLine label="" statuses={statusLines} />
-        </div>
-      );
-    },
-    aggregatedCell: ({ row }: CellContext<ConfigSummary, any>) => {
-      const value = row.subRows.reduce((acc, row) => {
-        const health = row.original.health;
-        if (health) {
-          Object.entries(health).forEach(([key, value]) => {
-            acc[key] = (acc[key] || 0) + value;
-          });
-        }
-        return acc;
-      }, {} as Record<string, number>);
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const statusLines = useMemo(() => {
-        const data: StatusInfo[] = Object.entries(value ?? {}).map(
-          ([key, value]) => {
-            return {
-              label: value.toString(),
-              // @ts-ignore
-              color: getConfigStatusColor({
-                [key]: value
-              })
-            };
-          }
-        );
-        return data;
-      }, [value]);
-
-      if (!value) {
-        return null;
-      }
-      return (
-        <div className="flex flex-row gap-1">
-          <StatusLine label="" statuses={statusLines} />
-        </div>
-      );
-    }
+    cell: ConfigSummaryHealthCell,
+    aggregatedCell: ConfigSummaryHealthAggregateCell
   },
   {
     header: "analysis",

src/components/Configs/ConfigsListFilters/ConfigHealthyDropdown.tsx

@@ -36,7 +36,7 @@ export function ConfigHealthyDropdown({
   paramsKey = "health"
 }: ConfigTypesDropdownProps) {
   const [field] = useField({
-    name: "configType"
+    name: paramsKey
   });
 
   return (

src/components/Configs/ConfigsListFilters/index.tsx

@@ -1,18 +1,13 @@
+import FormikSearchInputClearable from "@flanksource-ui/components/Forms/Formik/FormikSearchInputClearable";
 import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm";
-import { debounce } from "lodash";
-import React from "react";
-import { useSearchParams } from "react-router-dom";
-import { TextInputClearable } from "../../../ui/FormControls/TextInputClearable";
 import { ConfigListToggledDeletedItems } from "../ConfigListToggledDeletedItems/ConfigListToggledDeletedItems";
 import ConfigGroupByDropdown from "./ConfigGroupByDropdown";
 import { ConfigHealthyDropdown } from "./ConfigHealthyDropdown";
 import { ConfigLabelsDropdown } from "./ConfigLabelsDropdown";
 import { ConfigStatusDropdown } from "./ConfigStatusDropdown";
 import { ConfigTypesDropdown } from "./ConfigTypesDropdown";
 
-function ConfigsListFilterControls() {
-  const [params, setParams] = useSearchParams();
-
+export default function ConfigsListFilters() {
   return (
     <FormikFilterForm
       paramsToReset={["tags", "group_by"]}
@@ -36,22 +31,13 @@ function ConfigsListFilterControls() {
 
         <ConfigHealthyDropdown />
 
-        <TextInputClearable
-          onChange={debounce((e) => {
-            const query = e.target.value || "";
-            params.set("search", query);
-            setParams(params);
-          }, 200)}
-          className="w-80"
+        <FormikSearchInputClearable
+          name="search"
           placeholder="Search for configs"
-          defaultValue={params.get("search") ?? undefined}
         />
 
         <ConfigListToggledDeletedItems />
       </div>
     </FormikFilterForm>
   );
 }
-
-const ConfigsListFilters = React.memo(ConfigsListFilterControls);
-export default ConfigsListFilters;

src/components/Forms/Formik/FormikSearchInputClearable.tsx

@@ -0,0 +1,41 @@
+import { TextInputClearable } from "@flanksource-ui/ui/FormControls/TextInputClearable";
+import { useField } from "formik";
+import { debounce } from "lodash";
+import { ComponentProps } from "react";
+
+type FormikSearchInputClearableProps = {
+  name: string;
+  className?: string;
+} & ComponentProps<typeof TextInputClearable>;
+
+export default function FormikSearchInputClearable({
+  name,
+  required = false,
+  className = "flex flex-col w-80",
+  type = "text",
+  ...props
+}: FormikSearchInputClearableProps) {
+  const [field] = useField({
+    name,
+    type: type,
+    required,
+    validate: (value) => {
+      if (required && !value) {
+        return "This field is required";
+      }
+    }
+  });
+
+  const onChange = debounce((value) => {
+    field.onChange({
+      target: {
+        value,
+        name
+      }
+    });
+  }, 400);
+
+  return (
+    <TextInputClearable {...props} value={field.value} onChange={onChange} />
+  );
+}

src/components/Forms/FormikFilterForm.tsx

@@ -31,23 +31,17 @@ function FormikChangesListener({
     paramsToReset.forEach((param) => searchParams.delete(param));
     setSearchParams(searchParams);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [values]);
+  }, [values, setFieldValue]);
 
   // reset form values, if the query params change
   useEffect(() => {
     filterFields.forEach((field) => {
       const value = searchParams.get(field);
       const defaultValue = defaultFieldValues?.[field] ?? undefined;
-      if (!value) {
-        if (defaultValue) {
-          setFieldValue(field, defaultValue);
-        } else {
-          setFieldValue(field, undefined);
-        }
-      }
+      setFieldValue(field, value ?? defaultValue);
     }, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams]);
+  }, [defaultFieldValues, filterFields, searchParams]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;