feat: add include/exclude shortcuts in Catalog tag list

Fixes #2165 fix: fix a few minor issue in filter
flanksource · Sep 12, 2024 · e8ca2d2 · e8ca2d2
1 parent 6a4874c
commit e8ca2d2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/src/api/query-hooks/useAllConfigsQuery.ts b/src/api/query-hooks/useAllConfigsQuery.ts
@@ -21,7 +21,6 @@ export const useAllConfigsQuery = ({
   const sortBy = searchParams.get("sortBy");
   const sortOrder = searchParams.get("sortOrder");
   const configType = searchParams.get("configType") ?? undefined;
-  const labels = searchParams.get("labels") ?? undefined;
   const status = searchParams.get("status") ?? undefined;
   const health = searchParams.get("health") ?? undefined;
 
@@ -34,20 +33,10 @@ export const useAllConfigsQuery = ({
         sortOrder,
         hideDeletedConfigs,
         includeAgents: true,
-        labels: labels,
         health,
         status
       }),
-    [
-      search,
-      configType,
-      sortBy,
-      sortOrder,
-      hideDeletedConfigs,
-      labels,
-      health,
-      status
-    ]
+    [search, configType, sortBy, sortOrder, hideDeletedConfigs, health, status]
   );
 
   return useQuery(
@@ -59,7 +48,6 @@ export const useAllConfigsQuery = ({
       sortOrder,
       hideDeletedConfigs,
       true,
-      labels,
       health,
       status
     ],

diff --git a/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx b/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx
@@ -13,6 +13,7 @@ type ConfigListTagsCellProps<
   hideGroupByView?: boolean;
   label?: string;
   enableFilterByTag?: boolean;
+  filterByTagParamKey?: string;
 };
 
 export default function ConfigListTagsCell<
@@ -21,7 +22,8 @@ export default function ConfigListTagsCell<
   row,
   getValue,
   hideGroupByView = false,
-  enableFilterByTag = false
+  enableFilterByTag = false,
+  filterByTagParamKey = "tags"
 }: ConfigListTagsCellProps<T>): JSX.Element | null {
   const [params, setParams] = useSearchParams();
 
@@ -67,10 +69,10 @@ export default function ConfigListTagsCell<
         .join(",");
 
       // Update the URL
-      params.set("tags", updatedValue);
+      params.set(filterByTagParamKey, updatedValue);
       setParams(params);
     },
-    [enableFilterByTag, params, setParams]
+    [enableFilterByTag, filterByTagParamKey, params, setParams]
   );
 
   const groupByProp = decodeURIComponent(params.get("groupByProp") ?? "");

diff --git a/src/components/Configs/ConfigList/ConfigListColumn.tsx b/src/components/Configs/ConfigList/ConfigListColumn.tsx
@@ -1,5 +1,8 @@
 import { Status } from "@flanksource-ui/components/Status";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import ChangeCountIcon, {
+  CountBar
+} from "@flanksource-ui/ui/Icons/ChangeCount";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";
 import React from "react";
 import { FaTrash } from "react-icons/fa";
@@ -17,9 +20,6 @@ import ConfigListCostCell, {
 import ConfigListDateCell from "./Cells/ConfigListDateCell";
 import ConfigListNameCell from "./Cells/ConfigListNameCell";
 import ConfigListTagsCell from "./Cells/ConfigListTagsCell";
-import ChangeCountIcon, {
-  CountBar
-} from "@flanksource-ui/ui/Icons/ChangeCount";
 
 export const configListColumns: ColumnDef<ConfigItem, any>[] = [
   {
@@ -114,7 +114,14 @@ export const configListColumns: ColumnDef<ConfigItem, any>[] = [
   {
     header: "Tags",
     accessorKey: "tags",
-    cell: React.memo(ConfigListTagsCell),
+    cell: React.memo((props) => (
+      <ConfigListTagsCell
+        {...props}
+        hideGroupByView
+        enableFilterByTag
+        filterByTagParamKey="labels"
+      />
+    )),
     aggregatedCell: "",
     maxSize: 300,
     minSize: 100

diff --git a/src/components/Configs/ConfigsListFilters/ConfigLabelsDropdown.tsx b/src/components/Configs/ConfigsListFilters/ConfigLabelsDropdown.tsx
@@ -22,10 +22,10 @@ export function ConfigLabelsDropdown({ searchParamKey = "labels" }: Props) {
         (tag) =>
           ({
             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>
+              <span className="space-x-1 text-sm">
+                <span className="text-gray-600">{tag.key}:</span>
+                <span>{tag.value}</span>
+              </span>
             ),
             value: `${tag.key}____${tag.value}`,
             id: `${tag.key}____${tag.value}`
@@ -54,6 +54,7 @@ export function ConfigLabelsDropdown({ searchParamKey = "labels" }: Props) {
           });
         }
       }}
+      minMenuWidth="400px"
       value={field.value}
       className="w-auto max-w-[400px]"
       label={"Labels"}