Support search index filters on the dashboard Data page (#40933)

GitOrigin-RevId: c30f0d0bd8dab227263ce9fadec0a82241e534c7

Author: Nicolapps

npm-packages/common/config/rush/pnpm-lock.yaml

@@ -108,6 +108,7 @@
     "next-router-mock": "~0.9.11",
     "postcss": "^8.4.19",
     "prettier": "3.6.2",
+    "storybook": "^9.1.2",
     "prettier-plugin-tailwindcss": "~0.6.11",
     "tailwindcss": "^4.1.11",
     "tailwind-scrollbar": "^4.0.2",

npm-packages/dashboard-common/package.json

@@ -9,9 +9,11 @@ import {
 } from "@radix-ui/react-icons";
 import { GenericDocument } from "convex/server";
 import {
+  DatabaseIndexFilterClause,
   Filter,
   FilterExpression,
   FilterValidationError,
+  SearchIndexFilterClause,
 } from "system-udfs/convex/_system/frontend/lib/filters";
 import {
   FilterEditor,
@@ -43,7 +45,6 @@ import { useNents } from "@common/lib/useNents";
 import { useQuery } from "convex/react";
 import { api } from "system-udfs/convex/_generated/api";
 import { Index } from "@common/features/data/lib/api";
-import { IndexFilterState } from "./IndexFilterEditor";
 import { IndexFilters, getDefaultIndex } from "./IndexFilters";
 import { clearFilters } from "./clearFilters";
 
@@ -560,7 +561,10 @@ function useDataFilters({
   );
 
   const onChangeIndexFilter = useCallback(
-    (filter: IndexFilterState, idx: number) => {
+    (
+      filter: DatabaseIndexFilterClause | SearchIndexFilterClause,
+      idx: number,
+    ) => {
       const newFilters = cloneDeep(shownFilters);
       if (!newFilters.index) {
         throw new Error("Index not found");
@@ -575,7 +579,11 @@ function useDataFilters({
             filterType: "index",
             filterIndex: idx,
           });
-        } else if ("type" in oldFilter && oldFilter.type !== filter.type) {
+        } else if (
+          "type" in oldFilter &&
+          "type" in filter &&
+          oldFilter.type !== filter.type
+        ) {
           log("index filter type change", {
             oldType: oldFilter.type,
             newType: filter.type,

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

@@ -1,34 +1,17 @@
 import { ValidatorJSON, Value, convexToJson } from "convex/values";
 import React, { useCallback, useState } from "react";
 import {
+  DatabaseIndexFilterClause,
   FilterByIndex,
   FilterByIndexRange,
 } from "system-udfs/convex/_system/frontend/lib/filters";
 import { Checkbox } from "@ui/Checkbox";
-import { ObjectEditor } from "@common/elements/ObjectEditor/ObjectEditor";
 import { Combobox, Option } from "@ui/Combobox";
 import { DateTimePicker } from "@common/features/data/components/FilterEditor/DateTimePicker";
 import { cn } from "@ui/cn";
-import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/lib/values";
 import { Tooltip } from "@ui/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;
-  filter: IndexFilterState;
-  autoFocusValueEditor?: boolean;
-  documentValidator?: ValidatorJSON;
-  shouldSurfaceValidatorErrors?: boolean;
-  previousFiltersEnabled: boolean[];
-  nextFiltersEnabled?: boolean[];
-};
+import { ObjectEditorWithPlaceholder } from "./ObjectEditorWithPlaceholder";
 
 // Options for the filter type combobox
 const filterTypeOptions: Option<string>[] = [
@@ -44,7 +27,7 @@ const filterTypeOptions: Option<string>[] = [
 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({
+export function DatabaseIndexFilterEditor({
   idx,
   field,
   error,
@@ -57,7 +40,20 @@ export function IndexFilterEditor({
   shouldSurfaceValidatorErrors,
   previousFiltersEnabled,
   nextFiltersEnabled = [],
-}: IndexFilterEditorProps) {
+}: {
+  idx: number;
+  field: string;
+  error: string | undefined;
+  onChange(filter: DatabaseIndexFilterClause, idx: number): void;
+  onApplyFilters(): void;
+  onError(idx: number, errors: string[]): void;
+  filter: DatabaseIndexFilterClause;
+  autoFocusValueEditor?: boolean;
+  documentValidator?: ValidatorJSON;
+  shouldSurfaceValidatorErrors?: boolean;
+  previousFiltersEnabled: boolean[];
+  nextFiltersEnabled?: boolean[];
+}) {
   const [prevIsLastEnabledFilter, setPrevIsLastEnabledFilter] = useState<
     boolean | null
   >(null);
@@ -475,7 +471,7 @@ export function IndexFilterEditor({
               path={`indexFilter${idx}-${field}-${filter.type}`}
               autoFocus={autoFocusValueEditor}
               className="rounded-l-none rounded-r"
-              filter={filter}
+              enabled={filter.enabled}
               onApplyFilters={onApplyFilters}
               handleError={handleError}
               documentValidator={documentValidator}
@@ -516,7 +512,7 @@ export function IndexFilterEditor({
               path={`indexFilter${idx}-${field}-${filter.type}`}
               autoFocus={autoFocusValueEditor}
               className="rounded-l-none rounded-r"
-              filter={filter}
+              enabled={filter.enabled}
               onApplyFilters={onApplyFilters}
               handleError={handleError}
               documentValidator={documentValidator}
@@ -546,7 +542,7 @@ export function IndexFilterEditor({
                 path={`indexFilterLower${idx}-${field}-${filter.type}`}
                 autoFocus={autoFocusValueEditor}
                 className="rounded-l-none rounded-tr rounded-br-none"
-                filter={filter}
+                enabled={filter.enabled}
                 onApplyFilters={onApplyFilters}
                 handleError={handleError}
                 documentValidator={documentValidator}
@@ -569,7 +565,7 @@ export function IndexFilterEditor({
                 onChangeHandler={handleUpperValueChange}
                 path={`indexFilterUpper${idx}-${field}-${filter.type}`}
                 className="rounded-l-none rounded-tr-none rounded-br border-t-0"
-                filter={filter}
+                enabled={filter.enabled}
                 onApplyFilters={onApplyFilters}
                 handleError={handleError}
                 documentValidator={documentValidator}
@@ -684,77 +680,3 @@ export function IndexFilterEditor({
     </div>
   );
 }
-
-// Create a separate component for ObjectEditor with placeholder
-function ObjectEditorWithPlaceholder({
-  value,
-  onChangeHandler,
-  path,
-  autoFocus = false,
-  className = "",
-  filter,
-  onApplyFilters,
-  handleError,
-  documentValidator,
-  shouldSurfaceValidatorErrors,
-}: {
-  value: any;
-  onChangeHandler: (value?: Value) => void;
-  path: string;
-  autoFocus?: boolean;
-  className?: string;
-  filter: IndexFilterState;
-  onApplyFilters: () => void;
-  handleError: (errors: string[]) => void;
-  documentValidator?: ValidatorJSON;
-  shouldSurfaceValidatorErrors?: boolean;
-}) {
-  const [innerText, setInnerText] = useState("");
-
-  return (
-    <>
-      {filter.enabled &&
-        innerText === "" &&
-        value === UNDEFINED_PLACEHOLDER && (
-          <div
-            className="pointer-events-none absolute z-50 font-mono text-xs text-content-secondary italic"
-            data-testid="undefined-placeholder"
-            style={{
-              marginTop: "5px",
-              marginLeft: "11px",
-            }}
-          >
-            unset
-          </div>
-        )}
-      <ObjectEditor
-        key={path}
-        className={cn(
-          "w-full min-w-4 border focus-within:border focus-within:border-border-selected",
-          filter.enabled && "border-l-transparent",
-          className,
-        )}
-        editorClassname={cn(
-          "mt-0 rounded-sm bg-background-secondary px-2 py-1 text-xs",
-          className,
-        )}
-        allowTopLevelUndefined
-        size="sm"
-        disableFolding
-        defaultValue={value === UNDEFINED_PLACEHOLDER ? undefined : value}
-        onChange={onChangeHandler}
-        onError={handleError}
-        path={path}
-        autoFocus={autoFocus}
-        disableFind
-        saveAction={onApplyFilters}
-        enterSaves
-        mode="editField"
-        validator={documentValidator}
-        shouldSurfaceValidatorErrors={shouldSurfaceValidatorErrors}
-        disabled={!filter.enabled}
-        onChangeInnerText={setInnerText}
-      />
-    </>
-  );
-}

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

@@ -10,9 +10,11 @@ import { GenericDocument } from "convex/server";
 import { convexToJson, ValidatorJSON } from "convex/values";
 import {
   DatabaseIndexFilter,
+  DatabaseIndexFilterClause,
   FilterByIndexRange,
   FilterExpression,
   SearchIndexFilter,
+  SearchIndexFilterClause,
 } from "system-udfs/convex/_system/frontend/lib/filters";
 import { Button } from "@ui/Button";
 import { Combobox } from "@ui/Combobox";
@@ -21,8 +23,9 @@ import { SchemaJson } from "@common/lib/format";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { Index } from "@common/features/data/lib/api";
 import { cn } from "@ui/cn";
-import { IndexFilterEditor, IndexFilterState } from "./IndexFilterEditor";
+import { DatabaseIndexFilterEditor } from "./DatabaseIndexFilterEditor";
 import { SearchValueEditor } from "./SearchValueEditor";
+import { SearchIndexFilterEditor } from "./SearchIndexFilterEditor";
 
 export function getDefaultIndex(): {
   name: string;
@@ -97,7 +100,10 @@ type IndexFiltersProps = {
   applyFiltersWithHistory: (next: FilterExpression) => Promise<void>;
   setDraftFilters: (next: FilterExpression) => void;
   onChangeOrder: (newOrder: "asc" | "desc") => void;
-  onChangeIndexFilter: (filter: IndexFilterState, idx: number) => void;
+  onChangeIndexFilter: (
+    filter: DatabaseIndexFilterClause | SearchIndexFilterClause,
+    idx: number,
+  ) => void;
   onError: (idx: number, errors: string[]) => void;
   hasInvalidFilters: boolean;
   invalidFilters: Record<string, string>;
@@ -345,7 +351,7 @@ export function IndexFilters({
                 .map((c) => c.enabled) || [];
 
             return (
-              <IndexFilterEditor
+              <DatabaseIndexFilterEditor
                 key={idx}
                 idx={idx}
                 field={fieldName}
@@ -393,14 +399,33 @@ export function IndexFilters({
                 }
                 await applyFiltersWithHistory(shownFilters);
               }}
+              indented={searchIndex.clauses.length > 0}
             />
 
-            {/* TODO(ENG-9734) Support index filters in search queries */}
-            {searchIndex.clauses.length > 0 && (
-              <p className="text-xs text-content-secondary">
-                Using search index filters in the dashboard isn’t supported yet.
-              </p>
-            )}
+            {searchIndex.clauses.map((clause, idx) => (
+              <SearchIndexFilterEditor
+                key={clause.field}
+                idx={idx}
+                field={clause.field}
+                error={
+                  clause.enabled ? invalidFilters[`index/${idx}`] : undefined
+                }
+                onChange={onChangeIndexFilter}
+                onApplyFilters={async () => {
+                  if (hasInvalidFilters) {
+                    return;
+                  }
+                  await applyFiltersWithHistory(shownFilters);
+                }}
+                onError={onError}
+                filter={clause}
+                autoFocusValueEditor={
+                  idx === (shownFilters.index?.clauses.length || 0) - 1
+                }
+                documentValidator={getValidatorForField(clause.field)}
+                shouldSurfaceValidatorErrors={activeSchema?.schemaValidation}
+              />
+            ))}
           </>
         )}
       </div>

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

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { fn } from "storybook/test";
+import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/lib/values";
+import udfs from "@common/udfs";
+import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
+import { ConvexProvider } from "convex/react";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
+import { ObjectEditorWithPlaceholder } from "./ObjectEditorWithPlaceholder";
+
+const mockClient = mockConvexReactClient()
+  .registerQueryFake(udfs.components.list, () => [])
+  .registerQueryFake(udfs.getTableMapping.default, () => ({}));
+
+const meta: Meta<typeof ObjectEditorWithPlaceholder> = {
+  component: ObjectEditorWithPlaceholder,
+  args: {
+    onChangeHandler: fn(),
+    onApplyFilters: fn(),
+    handleError: fn(),
+    path: "test-path",
+    className: "",
+    documentValidator: undefined,
+    shouldSurfaceValidatorErrors: false,
+  },
+  render: (args) => (
+    <ConvexProvider client={mockClient}>
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <ObjectEditorWithPlaceholder {...args} />
+      </DeploymentInfoContext.Provider>
+    </ConvexProvider>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof ObjectEditorWithPlaceholder>;
+
+export const Disabled: Story = {
+  args: {
+    enabled: false,
+    value: UNDEFINED_PLACEHOLDER,
+  },
+};
+
+export const EnabledWithoutValue: Story = {
+  args: {
+    enabled: true,
+    value: UNDEFINED_PLACEHOLDER,
+  },
+};
+
+export const EnabledWithValue: Story = {
+  args: {
+    enabled: true,
+    value: { foo: "bar" },
+  },
+};