feat: add filter by config tags for changes

Fixes #1961

src/api/query-hooks/useGetConfigsChangesQuery.ts → src/api/query-hooks/useConfigChangesHooks.ts

@@ -10,6 +10,27 @@ import {
   getConfigsChanges
 } from "../services/configs";
 
+function useConfigChangesTagsFilter() {
+  const [params] = useSearchParams();
+
+  const tags = useMemo(() => {
+    const allTags = params.get("tags");
+    if (allTags) {
+      return allTags.split(",").map((tag) => {
+        const prefix = tag.split(":")[1] === "-1" ? "!" : ""; // expected: `key____value:-1`
+        const key = `${prefix}${tag.split("____")[0]}`; // expected: `key____value:-1`
+        const value = tag.split("____")[1].split(":")[0]; // expected: `key____value:-1`
+        return {
+          key,
+          value
+        } satisfies Required<GetConfigsRelatedChangesParams>["tags"][number];
+      });
+    }
+  }, [params]);
+
+  return tags;
+}
+
 export function useGetAllConfigsChangesQuery(
   queryOptions: UseQueryOptions<CatalogChangesSearchResponse> = {
     enabled: true,
@@ -38,6 +59,8 @@ export function useGetAllConfigsChangesQuery(
   const createdBy = params.get("created_by") ?? undefined;
   const externalCreatedBy = params.get("external_created_by") ?? undefined;
 
+  const tags = useConfigChangesTagsFilter();
+
   const arbitraryFilter = useMemo(() => {
     const filter = new Map<string, string>();
     if (configId) {
@@ -70,7 +93,8 @@ export function useGetAllConfigsChangesQuery(
     sortOrder: sortDirection === "desc" ? "desc" : "asc",
     page: page,
     pageSize: pageSize,
-    arbitraryFilter
+    arbitraryFilter,
+    tags
   } satisfies GetConfigsRelatedChangesParams;
 
   return useQuery({
@@ -108,6 +132,8 @@ export function useGetConfigChangesByIDQuery(
   const downstream = params.get("downstream") === "true";
   const all = upstream && downstream;
 
+  const tags = useConfigChangesTagsFilter();
+
   const relationshipType = useMemo(() => {
     if (all) {
       return "all";
@@ -133,7 +159,8 @@ export function useGetConfigChangesByIDQuery(
     sortBy,
     sortOrder: sortDirection === "desc" ? "desc" : "asc",
     page: page,
-    pageSize: pageSize
+    pageSize: pageSize,
+    tags
   } satisfies GetConfigsRelatedChangesParams;
 
   return useQuery({

src/api/services/configs.ts

@@ -211,6 +211,10 @@ export type GetConfigsRelatedChangesParams = {
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   arbitraryFilter?: Record<string, string>;
+  tags?: {
+    key: string;
+    value: string;
+  }[];
 };
 
 export async function getConfigsChanges({
@@ -227,7 +231,8 @@ export async function getConfigsChanges({
   pageSize,
   sortBy,
   sortOrder,
-  arbitraryFilter
+  arbitraryFilter,
+  tags
 }: GetConfigsRelatedChangesParams) {
   const queryParams = new URLSearchParams();
   if (id) {
@@ -253,7 +258,7 @@ export async function getConfigsChanges({
   }
   if (arbitraryFilter) {
     Object.entries(arbitraryFilter).forEach(([key, value]) => {
-      const filterExpression = tristateOutputToQueryParamValue(value);
+      const filterExpression = tristateOutputToQueryParamValue(value, false);
       if (filterExpression) {
         queryParams.set(key, filterExpression);
       }
@@ -276,7 +281,10 @@ export async function getConfigsChanges({
     // for descending order, we need to add a "-" before the sortBy field
     queryParams.set("sort_by", `${sortOrder === "desc" ? "-" : ""}${sortBy}`);
   }
-
+  if (tags) {
+    const tagList = tags.map(({ key, value }) => `${key}=${value}`);
+    queryParams.set("tags", tagList.join(","));
+  }
   if (type_filter) {
     queryParams.set(
       "recursive",

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

@@ -8,6 +8,7 @@ import { paramsToReset } from "../ConfigChangeHistory";
 import { ChangesTypesDropdown } from "./ChangeTypesDropdown";
 import { ConfigChangeSeverity } from "./ConfigChangeSeverity";
 import ConfigChangesDateRangeFilter from "./ConfigChangesDateRangeFIlter";
+import { ConfigTagsDropdown } from "./ConfigTagsDropdown";
 import ConfigTypesTristateDropdown from "./ConfigTypesTristateDropdown";
 
 type FilterBadgeProps = {
@@ -81,7 +82,7 @@ export function ConfigChangeFilters({
     <div className="flex flex-col gap-2">
       <FormikFilterForm
         paramsToReset={paramsToReset}
-        filterFields={["configTypes", "changeType", "severity"]}
+        filterFields={["configTypes", "changeType", "severity", "tags"]}
         defaultFieldValues={{
           ...(configType && { configTypes: defaultConfigType })
         }}
@@ -90,6 +91,7 @@ export function ConfigChangeFilters({
           <ConfigTypesTristateDropdown />
           <ChangesTypesDropdown />
           <ConfigChangeSeverity />
+          <ConfigTagsDropdown />
           <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
         </div>
       </FormikFilterForm>

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

@@ -0,0 +1,58 @@
+import { useGetConfigTagsListQuery } from "@flanksource-ui/api/query-hooks";
+import TristateReactSelect, {
+  TriStateOptions
+} from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
+import { useField } from "formik";
+import { useMemo } from "react";
+
+type Props = {
+  searchParamKey?: string;
+};
+
+export function ConfigTagsDropdown({ searchParamKey = "tags" }: Props) {
+  const [field] = useField({
+    name: searchParamKey
+  });
+
+  const { data, isLoading } = useGetConfigTagsListQuery();
+
+  const tagItems = useMemo(() => {
+    if (data) {
+      return data.map(
+        (tag) =>
+          ({
+            id: `${tag.key}____${tag.value}`,
+            label: (
+              <div className="block space-x-1 text-sm">
+                <span className="w-auto text-gray-600">{tag.key}:</span>
+                <span className="w-full">{tag.value}</span>
+              </div>
+            ),
+            value: `${tag.key}____${tag.value}`
+          } satisfies TriStateOptions)
+      );
+    }
+  }, [data]);
+
+  return (
+    <TristateReactSelect
+      options={tagItems ?? []}
+      onChange={(value) => {
+        console.log(value);
+        if (value) {
+          field.onChange({
+            target: { name: searchParamKey, value: value }
+          });
+        } else {
+          field.onChange({
+            target: { name: searchParamKey, value: undefined }
+          });
+        }
+      }}
+      value={field.value}
+      className="w-auto max-w-[38rem]"
+      label={"Tags"}
+      isLoading={isLoading}
+    />
+  );
+}

src/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx

@@ -4,6 +4,7 @@ import { ChangesTypesDropdown } from "../../ConfigChangesFilters/ChangeTypesDrop
 import { ConfigChangeSeverity } from "../../ConfigChangesFilters/ConfigChangeSeverity";
 import ConfigChangesDateRangeFilter from "../../ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { ConfigRelatedChangesToggles } from "../../ConfigChangesFilters/ConfigRelatedChangesToggles";
+import { ConfigTagsDropdown } from "../../ConfigChangesFilters/ConfigTagsDropdown";
 import ConfigTypesTristateDropdown from "../../ConfigChangesFilters/ConfigTypesTristateDropdown";
 import { ConfigChangesToggledDeletedItems } from "./ConfigChangesToggledDeletedItems";
 
@@ -25,6 +26,7 @@ export function ConfigRelatedChangesFilters({
         <ConfigTypesTristateDropdown />
         <ChangesTypesDropdown />
         <ConfigChangeSeverity />
+        <ConfigTagsDropdown />
         <ConfigRelatedChangesToggles />
         <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
         <ConfigChangesToggledDeletedItems />

src/pages/config/ConfigChangesPage.tsx

@@ -1,4 +1,4 @@
-import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useGetConfigsChangesQuery";
+import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
 import { ConfigChangeHistory } from "@flanksource-ui/components/Configs/Changes/ConfigChangeHistory";
 import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters";
 import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";

src/pages/config/details/ConfigDetailsChangesPage.tsx

@@ -1,4 +1,4 @@
-import { useGetConfigChangesByIDQuery } from "@flanksource-ui/api/query-hooks/useGetConfigsChangesQuery";
+import { useGetConfigChangesByIDQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
 import { ConfigChangeHistory } from "@flanksource-ui/components/Configs/Changes/ConfigChangeHistory";
 import { ConfigRelatedChangesFilters } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters";
 import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDetailsTabs";

src/ui/Dropdowns/TristateReactSelect.tsx

@@ -25,7 +25,7 @@ import { Tooltip } from "react-tooltip";
 
 export type TriStateOptions = {
   id: string;
-  label: string;
+  label: React.ReactNode;
   icon?: any;
   value: string;
 };
@@ -189,7 +189,7 @@ function ReactSelectTriStateSingleValue({
                 data-tooltip-content={`${
                   +value === 1 ? "Include" : "Exclude"
                 } ${v.label}`}
-                key={v.label}
+                key={v.id}
                 className={clsx(
                   "w-auto flex flex-row items-center gap-1 px-2 py-1 max-w-full overflow-hidden text-ellipsis text-nowrap bg-gray-200"
                 )}