dashboard: improve error display for filters (including range bounds) (#36232)

- Fixes a bug where validation ui was not shown for regular filters
- Shows error validation for index filters, and adds a new type of validation for the is between operator
-

GitOrigin-RevId: 6b58812de243bbc44e9a787bdd11402f6c9be6be

Author: atrakh

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

@@ -224,6 +224,7 @@ export function DataFilters({
                   setDraftFilters={setDraftFilters}
                   onChangeOrder={onChangeOrder}
                   onChangeIndexFilter={onChangeIndexFilter}
+                  invalidFilters={invalidFilters}
                   onError={(...args) => onError("index", ...args)}
                   hasInvalidFilters={hasInvalidFilters}
                 />
@@ -272,8 +273,10 @@ export function DataFilters({
                       }}
                       onError={(...args) => onError("filter", ...args)}
                       error={
-                        dataFetchErrors?.find((e) => e.filter === idx)?.error ||
-                        invalidFilters[`filter:${idx}`]
+                        clause.enabled !== false
+                          ? dataFetchErrors?.find((e) => e.filter === idx)
+                              ?.error || invalidFilters[`filter/${idx}`]
+                          : undefined
                       }
                       autoFocusValueEditor={
                         idx === shownFilters.clauses.length - 1
@@ -410,7 +413,9 @@ function FilterItem({
       />
       {error && (
         <Tooltip tip={error}>
-          <ExclamationTriangleIcon className="mt-1.5 size-4 text-content-errorSecondary" />
+          <div className="rounded border bg-background-error p-1">
+            <ExclamationTriangleIcon className="size-4 text-content-errorSecondary" />
+          </div>
         </Tooltip>
       )}
     </div>
@@ -658,7 +663,7 @@ function useDataFilters({
         ...shownFilters,
         clauses: shownFilters.clauses.map((filter, idx) => ({
           ...filter,
-          enabled: invalidFilters[`filter:${idx}`] ? false : filter.enabled,
+          enabled: invalidFilters[`filter/${idx}`] ? false : filter.enabled,
         })),
         order: newOrder,
       };

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

@@ -11,12 +11,14 @@ import { DateTimePicker } from "@common/features/data/components/FilterEditor/Da
 import { cn } from "@common/lib/cn";
 import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/patchDocumentsFields";
 import { Tooltip } from "@common/elements/Tooltip";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 
 export type IndexFilterState = FilterByIndex | FilterByIndexRange;
 
 export type IndexFilterEditorProps = {
   idx: number;
   field: string;
+  error: string | undefined;
   onChange(filter: IndexFilterState, idx: number): void;
   onApplyFilters(): void;
   onError(idx: number, errors: string[]): void;
@@ -38,9 +40,14 @@ const filterTypeOptions: Option<string>[] = [
   { value: "between", label: "is between" },
 ];
 
+// Define a constant for the error message
+const RANGE_ERROR_MESSAGE =
+  "The lower bound of this range is currently set to a value that is higher than the upper bound. This filter would never match any documents.";
+
 export function IndexFilterEditor({
   idx,
   field,
+  error,
   onChange,
   onApplyFilters,
   onError,
@@ -186,21 +193,45 @@ export function IndexFilterEditor({
   // Handle lower date change for _creationTime between
   const handleLowerDateChange = useCallback(
     (date: Date) => {
+      const timestamp = date.getTime();
       if ("lowerValue" in filter) {
-        onChange({ ...filter, lowerValue: date.getTime() }, idx);
+        onChange({ ...filter, lowerValue: timestamp }, idx);
+
+        // Check if lowerValue is greater than upperValue
+        if (
+          filter.type === "indexRange" &&
+          typeof filter.upperValue === "number" &&
+          timestamp > filter.upperValue
+        ) {
+          onError(idx, [RANGE_ERROR_MESSAGE]);
+        } else if (error === RANGE_ERROR_MESSAGE) {
+          onError(idx, []);
+        }
       }
     },
-    [filter, idx, onChange],
+    [filter, idx, onChange, onError, error],
   );
 
   // Handle upper date change for _creationTime between
   const handleUpperDateChange = useCallback(
     (date: Date) => {
+      const timestamp = date.getTime();
       if ("upperValue" in filter) {
-        onChange({ ...filter, upperValue: date.getTime() }, idx);
+        onChange({ ...filter, upperValue: timestamp }, idx);
+
+        // Check if upperValue is less than lowerValue
+        if (
+          filter.type === "indexRange" &&
+          typeof filter.lowerValue === "number" &&
+          timestamp < filter.lowerValue
+        ) {
+          onError(idx, [RANGE_ERROR_MESSAGE]);
+        } else if (error === RANGE_ERROR_MESSAGE) {
+          onError(idx, []);
+        }
       }
     },
-    [filter, idx, onChange],
+    [filter, idx, onChange, onError, error],
   );
 
   // Handle changes to range filter values
@@ -215,9 +246,21 @@ export function IndexFilterEditor({
               ? Number(value)
               : (value as JSONValue);
         onChange({ ...filter, lowerValue: jsonValue }, idx);
+
+        // Check if lowerValue is greater than upperValue
+        if (
+          filter.type === "indexRange" &&
+          jsonValue !== null &&
+          filter.upperValue !== null &&
+          filter.upperValue !== undefined &&
+          typeof jsonValue === typeof filter.upperValue &&
+          jsonValue > filter.upperValue
+        ) {
+          onError(idx, [RANGE_ERROR_MESSAGE]);
+        }
       }
     },
-    [filter, idx, onChange],
+    [filter, idx, onChange, onError],
   );
 
   const handleUpperValueChange = useCallback(
@@ -231,9 +274,21 @@ export function IndexFilterEditor({
               ? Number(value)
               : (value as JSONValue);
         onChange({ ...filter, upperValue: jsonValue }, idx);
+
+        // Check if upperValue is less than lowerValue
+        if (
+          filter.type === "indexRange" &&
+          jsonValue !== null &&
+          filter.lowerValue !== null &&
+          filter.lowerValue !== undefined &&
+          typeof jsonValue === typeof filter.lowerValue &&
+          jsonValue < filter.lowerValue
+        ) {
+          onError(idx, [RANGE_ERROR_MESSAGE]);
+        }
       }
     },
-    [filter, idx, onChange],
+    [filter, idx, onChange, onError],
   );
 
   // Convert to range filter
@@ -612,6 +667,13 @@ export function IndexFilterEditor({
 
         {/* Render the appropriate value editor */}
         {renderValueEditor()}
+        {error && (
+          <Tooltip tip={error}>
+            <div className="ml-1 rounded border bg-background-error p-1">
+              <ExclamationTriangleIcon className="size-4 text-content-errorSecondary" />
+            </div>
+          </Tooltip>
+        )}
       </div>
     </div>
   );

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

@@ -72,11 +72,13 @@ type IndexFiltersProps = {
   onChangeIndexFilter: (filter: IndexFilterState, idx: number) => void;
   onError: (idx: number, errors: string[]) => void;
   hasInvalidFilters: boolean;
+  invalidFilters: Record<string, string>;
 };
 
 export function IndexFilters({
   shownFilters,
   defaultDocument,
+  invalidFilters,
   indexes,
   tableName,
   activeSchema,
@@ -313,6 +315,9 @@ export function IndexFilters({
               key={idx}
               idx={idx}
               field={fieldName}
+              error={
+                clause.enabled ? invalidFilters[`index/${idx}`] : undefined
+              }
               onChange={onChangeIndexFilter}
               onApplyFilters={() => {
                 if (hasInvalidFilters) {