feat: show only available change types in dropdown for config changes

Fixes #1642

Author: mainawycliffe

src/components/Configs/Changes/ConfigChangesFilters/ChangeTypesDropdown.tsx

@@ -1,45 +1,39 @@
-import {
-  ConfigChangesTypeItem,
-  getConfigsChangesTypesFilter
-} from "@flanksource-ui/api/services/configs";
 import { ChangeIcon } from "@flanksource-ui/components/Icon/ChangeIcon";
 import TristateReactSelect, {
   TriStateOptions
 } from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
-import { useQuery } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 
 type Props = {
   onChange?: (value: string | undefined) => void;
   searchParamKey?: string;
   paramsToReset?: string[];
+  changeTypes?: Record<string, number>;
+  isLoading?: boolean;
 };
 
 export function ChangesTypesDropdown({
   onChange = () => {},
   searchParamKey = "changeType",
-  paramsToReset = []
+  changeTypes,
+  paramsToReset = [],
+  isLoading
 }: Props) {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const { isLoading, data: configTypeOptions } = useQuery(
-    ["db", "changes_types"],
-    getConfigsChangesTypesFilter,
-    {
-      select: useCallback((data: ConfigChangesTypeItem[] | null) => {
-        return data?.map(
-          ({ change_type }) =>
-            ({
-              id: change_type,
-              label: change_type,
-              value: change_type,
-              icon: <ChangeIcon change={{ change_type: change_type }} />
-            } satisfies TriStateOptions)
-        );
-      }, [])
-    }
-  );
+  const configTypeOptions = useMemo(() => {
+    return changeTypes
+      ? Object.entries(changeTypes).map(([change_type]) => {
+          return {
+            id: change_type,
+            label: change_type,
+            value: change_type,
+            icon: <ChangeIcon change={{ change_type: change_type }} />
+          } satisfies TriStateOptions;
+        })
+      : [];
+  }, [changeTypes]);
 
   const value = searchParams.get(searchParamKey) || undefined;
 

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx

@@ -7,12 +7,16 @@ import ConfigChangesDateRangeFilter from "./ConfigChangesDateRangeFIlter";
 type ConfigChangeFiltersProps = React.HTMLProps<HTMLDivElement> & {
   paramsToReset?: string[];
   hideConfigTypeFilter?: boolean;
+  changeTypes?: Record<string, number>;
+  isLoading?: boolean;
 };
 
 export function ConfigChangeFilters({
   className,
   paramsToReset,
   hideConfigTypeFilter = false,
+  changeTypes,
+  isLoading = false,
   ...props
 }: ConfigChangeFiltersProps) {
   return (
@@ -23,7 +27,11 @@ export function ConfigChangeFilters({
           label="Config Type"
         />
       )}
-      <ChangesTypesDropdown paramsToReset={paramsToReset} />
+      <ChangesTypesDropdown
+        changeTypes={changeTypes}
+        isLoading={isLoading}
+        paramsToReset={paramsToReset}
+      />
       <ConfigChangeSeverity paramsToReset={paramsToReset} />
       <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
     </div>

src/pages/config/ConfigChangesPage.tsx

@@ -175,7 +175,11 @@ export function ConfigChangesPage() {
             <InfoMessage message={errorMessage} />
           ) : (
             <>
-              <ConfigChangeFilters paramsToReset={["pageIndex", "pageSize"]} />
+              <ConfigChangeFilters
+                isLoading={isLoading}
+                changeTypes={data?.summary}
+                paramsToReset={["pageIndex", "pageSize"]}
+              />
               <ConfigChangeHistory
                 data={changes}
                 isLoading={isLoading}