dashboard: tidy up index filters ui (#36107)

- Add clear filters button
- Make the number of selected filters badge blue
- Show a tooltip when the operator selection is disabled
- Clear validation errors from index filters when the selected index is changed.
-

GitOrigin-RevId: 699ee6bcc83ed8be5e9df47f153e337e61d9c2df

Author: atrakh

npm-packages/dashboard-common/src/features/data/components/DataContent.tsx

@@ -51,6 +51,7 @@ import {
 } from "react-resizable-panels";
 import { cn } from "@common/lib/cn";
 import { useTableIndexes } from "@common/features/data/lib/api";
+import { getDefaultIndex } from "@common/features/data/components/DataFilters/IndexFilters";
 
 export function DataContent({
   tableName,
@@ -294,8 +295,14 @@ export function DataContent({
                     onAddDraftFilter={(filter: Filter) => {
                       setDraftFilters((prev) =>
                         prev
-                          ? { clauses: [...prev.clauses, filter] }
-                          : { clauses: [filter] },
+                          ? {
+                              clauses: [...prev.clauses, filter],
+                              index: prev.index ?? getDefaultIndex(),
+                            }
+                          : {
+                              clauses: [filter],
+                              index: getDefaultIndex(),
+                            },
                       );
                       setShowFilters(true);
                     }}

npm-packages/dashboard-common/src/features/data/components/DataFilters/DataFilters.tsx

@@ -10,6 +10,8 @@ import {
 import { GenericDocument } from "convex/server";
 import {
   Filter,
+  FilterByIndex,
+  FilterByIndexRange,
   FilterExpression,
   FilterValidationError,
 } from "system-udfs/convex/_system/frontend/lib/filters";
@@ -38,11 +40,7 @@ import { cn } from "@common/lib/cn";
 import { useTableIndexes } from "@common/features/data/lib/api";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { IndexFilterState } from "./IndexFilterEditor";
-import {
-  IndexFilters,
-  DEFAULT_INDEX_NAME,
-  getDefaultIndexClause,
-} from "./IndexFilters";
+import { IndexFilters, getDefaultIndex } from "./IndexFilters";
 
 export function DataFilters({
   defaultDocument,
@@ -296,10 +294,37 @@ export function DataFilters({
                   </Button>
                 ) : (
                   hasFilters && (
-                    <p className="ml-1 flex gap-0.5 text-xs font-medium text-content-secondary">
-                      <CheckIcon />
-                      Filters applied
-                    </p>
+                    <div className="flex w-full items-center gap-1">
+                      <p className="ml-1 flex gap-0.5 text-xs font-medium text-content-secondary">
+                        <CheckIcon />
+                        Filters applied
+                      </p>
+                      <Button
+                        size="xs"
+                        variant="neutral"
+                        className="ml-auto text-xs"
+                        onClick={() => {
+                          onChangeFilters({
+                            clauses: [],
+                            index: shownFilters.index
+                              ? {
+                                  name: shownFilters.index.name,
+                                  clauses: shownFilters.index.clauses.map(
+                                    (clause) => ({
+                                      ...clause,
+                                      enabled: false,
+                                    }),
+                                  ) as
+                                    | FilterByIndex[]
+                                    | [...FilterByIndex[], FilterByIndexRange],
+                                }
+                              : undefined,
+                          });
+                        }}
+                      >
+                        Clear filters
+                      </Button>
+                    </div>
                   )
                 )}
                 {dataFetchErrors && dataFetchErrors.length > 0 && (
@@ -440,10 +465,7 @@ function useDataFilters({
       draftFilters ??
       ({
         clauses: [],
-        index: {
-          name: DEFAULT_INDEX_NAME,
-          clauses: [getDefaultIndexClause()],
-        },
+        index: getDefaultIndex(),
       } as FilterExpression),
     [draftFilters],
   );
@@ -499,10 +521,7 @@ function useDataFilters({
           ...shownFilters.clauses.slice(0, idx),
           ...shownFilters.clauses.slice(idx + 1),
         ],
-        index: shownFilters.index || {
-          name: DEFAULT_INDEX_NAME,
-          clauses: [getDefaultIndexClause()],
-        },
+        index: shownFilters.index || getDefaultIndex(),
       } as FilterExpression;
       setDraftFilters(newFilters);
     },
@@ -518,10 +537,7 @@ function useDataFilters({
           generateNewFilter(),
           ...shownFilters.clauses.slice(idx),
         ],
-        index: shownFilters.index || {
-          name: DEFAULT_INDEX_NAME,
-          clauses: [getDefaultIndexClause()],
-        },
+        index: shownFilters.index || getDefaultIndex(),
       } as FilterExpression;
       setDraftFilters(newFilters);
     },

npm-packages/dashboard-common/src/features/data/components/DataFilters/FilterButton.tsx

@@ -39,7 +39,7 @@ export function FilterButton({
     <div className="flex items-center gap-2">
       <span>{enableIndexFilters ? "Filter & Sort" : "Filter"}</span>
       {(indexFilters?.length || validFilterNames.size > 0) && (
-        <span className="rounded-full border bg-background-primary px-1 py-0 text-xs tabular-nums leading-[14px] text-content-secondary">
+        <span className="rounded-full border bg-blue-100/50 px-1 py-0 text-xs tabular-nums leading-[14px] text-content-accent dark:bg-blue-700/50 dark:text-white">
           {(indexFilters?.length || 0) + (regularFilters?.length || 0)}
         </span>
       )}

npm-packages/dashboard-common/src/features/data/components/DataFilters/IndexFilterEditor.tsx

@@ -581,26 +581,33 @@ export function IndexFilterEditor({
             disabled={!filter.enabled}
           />
         ) : (
-          <div
-            className={cn(
-              "ml-[-1px] flex w-fit items-center border px-2 py-1 text-xs cursor-not-allowed",
-              filter.enabled
-                ? "bg-background-secondary"
-                : "bg-background-tertiary text-content-secondary",
-            )}
+          <Tooltip
+            tip={
+              filter.enabled &&
+              "In an index filter, you can only change the operator of the last enabled filter."
+            }
           >
-            {currentOperator === "between"
-              ? "is between"
-              : currentOperator === "lt"
-                ? "<"
-                : currentOperator === "lte"
-                  ? "<="
-                  : currentOperator === "gt"
-                    ? ">"
-                    : currentOperator === "gte"
-                      ? ">="
-                      : "equals"}
-          </div>
+            <div
+              className={cn(
+                "ml-[-1px] flex w-fit items-center border px-2 py-1 text-xs cursor-not-allowed",
+                filter.enabled
+                  ? "bg-background-secondary"
+                  : "bg-background-tertiary text-content-secondary",
+              )}
+            >
+              {currentOperator === "between"
+                ? "is between"
+                : currentOperator === "lt"
+                  ? "<"
+                  : currentOperator === "lte"
+                    ? "<="
+                    : currentOperator === "gt"
+                      ? ">"
+                      : currentOperator === "gte"
+                        ? ">="
+                        : "equals"}
+            </div>
+          </Tooltip>
         )}
 
         {/* Render the appropriate value editor */}

npm-packages/dashboard-common/src/features/data/components/DataFilters/IndexFilters.tsx

@@ -2,7 +2,10 @@ import { ArrowsUpDownIcon, FingerPrintIcon } from "@heroicons/react/24/outline";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import { GenericDocument } from "convex/server";
 import { ValidatorJSON } from "convex/values";
-import { FilterExpression } from "system-udfs/convex/_system/frontend/lib/filters";
+import {
+  FilterByIndexRange,
+  FilterExpression,
+} from "system-udfs/convex/_system/frontend/lib/filters";
 import { Button } from "@common/elements/Button";
 import { Combobox } from "@common/elements/Combobox";
 import { Tooltip } from "@common/elements/Tooltip";
@@ -11,8 +14,18 @@ import { SchemaJson } from "@common/lib/format";
 import Link from "next/link";
 import { IndexFilterEditor, IndexFilterState } from "./IndexFilterEditor";
 
+export function getDefaultIndex(): {
+  name: string;
+  clauses: [FilterByIndexRange];
+} {
+  return {
+    name: DEFAULT_INDEX_NAME,
+    clauses: [getDefaultIndexClause()],
+  };
+}
+
 // Function to generate a default index clause with current timestamp
-function getDefaultIndexClause() {
+function getDefaultIndexClause(): FilterByIndexRange {
   return {
     type: "indexRange",
     enabled: false,
@@ -136,6 +149,11 @@ export function IndexFilters({
                 return;
               }
 
+              // Clear all errors for the existing index filters
+              shownFilters.index?.clauses.forEach((_, idx) => {
+                onError(idx, []);
+              });
+
               const newFilters = {
                 ...shownFilters,
                 index: {
@@ -308,5 +326,3 @@ export function IndexFilters({
     </>
   );
 }
-
-export { DEFAULT_INDEX_NAME, DEFAULT_INDEX, getDefaultIndexClause };

npm-packages/dashboard-common/src/features/data/components/Table/TableContextMenu.test.tsx

@@ -108,6 +108,7 @@ describe("TableContextMenu", () => {
       op: "eq",
       value: defaultProps.defaultDocument.name,
       id: expect.anything(),
+      enabled: true,
     });
   });
 

npm-packages/dashboard-common/src/features/data/components/Table/TableContextMenu.tsx

@@ -294,6 +294,7 @@ function CellActions({
             field: state.selectedCell?.column,
             op: "eq",
             value: convexToJson(value),
+            enabled: true,
           });
         }}
       />

npm-packages/dashboard-common/src/features/data/lib/useTableFilters.ts

@@ -143,8 +143,8 @@ export const useTableFilters = (
 function hasValidEnabledFilters(filters?: FilterExpression) {
   return (
     !!filters &&
-    (filters.clauses.filter(isValidFilter).filter((f) => f.enabled).length >
-      0 ||
+    (filters.clauses.filter(isValidFilter).filter((f) => f.enabled !== false)
+      .length > 0 ||
       (filters.index?.clauses.filter((f) => f.enabled).length ?? 0) > 0)
   );
 }