Improvements and fixes on object table filters (#5802)

- Fix isnull condition
- Extracted code logic for filters to graphql query
- enum list is visible instead of text in table filters
- align kind column

Author: bilalabbad

frontend/app/src/entities/nodes/object/domain/get-objects.ts

@@ -3,7 +3,11 @@ import { getRelationshipsVisibleInListView } from "@/entities/nodes/object/utils
 import { NodeObject } from "@/entities/nodes/types";
 import { IModelSchema } from "@/entities/schema/stores/schema.atom";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
-import { addAttributesToRequest, addRelationshipsToRequest } from "@/shared/api/graphql/utils";
+import {
+  addAttributesToRequest,
+  addFiltersToRequest,
+  addRelationshipsToRequest,
+} from "@/shared/api/graphql/utils";
 import { ContextParams, PaginationParams } from "@/shared/api/types";
 import { Filter } from "@/shared/hooks/useFilters";
 import { gql } from "@apollo/client";
@@ -45,29 +49,7 @@ export const getObjects: GetObjects = async ({
         __args: {
           limit,
           offset,
-          ...(filters
-            ? filters.reduce(
-                (acc, filter) => {
-                  if (filter.name === "kind__value") return acc;
-
-                  const [fieldName, fieldKey] = filter.name.split("__");
-
-                  if (!fieldName || !fieldKey) return acc;
-
-                  if (fieldKey === "value" || fieldKey === "values" || fieldKey === "isnull") {
-                    acc[filter.name] = filter.value;
-                    return acc;
-                  }
-
-                  if (fieldKey === "ids") {
-                    acc[filter.name] = filter.value.map(({ id }: { id: string }) => id);
-                  }
-
-                  return acc;
-                },
-                { partial_match: true } as Record<string, string | number | boolean>
-              )
-            : {}),
+          ...(filters ? addFiltersToRequest(filters) : {}),
         },
         edges: {
           node: {

frontend/app/src/entities/nodes/object/ui/filters/attribute-filter-form.tsx

@@ -50,7 +50,7 @@ export function AttributeFilterForm({ attributeSchema, onSuccess }: AttributeFil
         ...filters.filter((f) => f.name !== currentFilter?.name),
         {
           name: `${attributeSchema.name}__isnull`,
-          value: false,
+          value: true,
         },
       ]);
     }

frontend/app/src/entities/nodes/object/ui/filters/dynamic-filter-input.tsx

@@ -7,6 +7,7 @@ import { JsonEditor } from "@/shared/components/editor/json/json-editor";
 import { ColorPicker } from "@/shared/components/inputs/color-picker";
 import { DatePicker } from "@/shared/components/inputs/date-picker";
 import { Dropdown, DropdownOption } from "@/shared/components/inputs/dropdown";
+import { Enum } from "@/shared/components/inputs/enum";
 import { List } from "@/shared/components/list";
 import { Badge } from "@/shared/components/ui/badge";
 import { Combobox, ComboboxContent } from "@/shared/components/ui/combobox";
@@ -77,8 +78,22 @@ export function DynamicFilterInput({ fieldSchema, value, onChange }: DynamicFilt
 
   const fieldKind = fieldSchema.kind as AttributeKind;
   switch (fieldKind) {
+    case ATTRIBUTE_KIND.TEXT: {
+      if (fieldSchema.enum) {
+        return (
+          <Enum
+            items={fieldSchema.enum as string[]}
+            value={value}
+            onChange={onChange}
+            defaultOpen={true}
+            fitTriggerWidth={false}
+            className="min-w-[132px]"
+          />
+        );
+      }
+      return <Input autoFocus value={value} onChange={onChange} />;
+    }
     case ATTRIBUTE_KIND.ID:
-    case ATTRIBUTE_KIND.TEXT:
     case ATTRIBUTE_KIND.TEXTAREA:
     case ATTRIBUTE_KIND.EMAIL:
     case ATTRIBUTE_KIND.FILE:

frontend/app/src/entities/nodes/object/ui/object-table/cells/generics/kind-header-cell.tsx

@@ -37,7 +37,7 @@ export function KindHeaderCell({ schema }: { schema: iGenericSchema }) {
         />
       </PopoverTrigger>
 
-      <PopoverContent className="min-w-[19rem] relative rounded-tl-none">
+      <PopoverContent className="min-w-[19rem] relative rounded-tl-none" align="start">
         <div className="absolute font-semibold -top-[1.8rem] bg-white border px-2 py-1 rounded-t-md border-b-0 -left-px">
           Filter by kind
         </div>

frontend/app/src/shared/api/graphql/utils.test.ts

@@ -1,7 +1,8 @@
 import { AttributeSchema, RelationshipSchema } from "@/entities/schema/types";
+import { Filter } from "@/shared/hooks/useFilters";
 import { describe, expect, it } from "vitest";
 import { generateAttributeSchema, generateRelationshipSchema } from "../../../../tests/fake/schema";
-import { addAttributesToRequest, addRelationshipsToRequest } from "./utils";
+import { addAttributesToRequest, addFiltersToRequest, addRelationshipsToRequest } from "./utils";
 
 describe("addAttributesToRequest", () => {
   it("should return base fragment for simple attribute", () => {
@@ -249,3 +250,104 @@ describe("addRelationshipsToRequest", () => {
     });
   });
 });
+
+describe("addFiltersToRequest", () => {
+  it("should not include kind__value filter in the result", () => {
+    // GIVEN
+    const filters: Filter[] = [{ name: "kind__value", value: "test" }];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({});
+  });
+
+  it("should add partial_match flag and value for text-based value filters", () => {
+    // GIVEN
+    const filters: Filter[] = [{ name: "name__value", value: "test" }];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({
+      partial_match: true,
+      name__value: "test",
+    });
+  });
+
+  it("should add partial_match flag and array value for text-based values filters", () => {
+    // GIVEN
+    const filters: Filter[] = [{ name: "tags__values", value: ["tag1", "tag2"] }];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({
+      partial_match: true,
+      tags__values: ["tag1", "tag2"],
+    });
+  });
+
+  it("should include isnull filter value without partial_match flag", () => {
+    // GIVEN
+    const filters: Filter[] = [{ name: "field__isnull", value: true }];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({
+      field__isnull: true,
+    });
+  });
+
+  it("should extract IDs from array of objects for ids filters", () => {
+    // GIVEN
+    const filters: Filter[] = [{ name: "related__ids", value: [{ id: "1" }, { id: "2" }] }];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({
+      related__ids: ["1", "2"],
+    });
+  });
+
+  it("should correctly combine multiple filters of different types", () => {
+    // GIVEN
+    const filters: Filter[] = [
+      { name: "name__value", value: "test" },
+      { name: "field__isnull", value: true },
+      { name: "related__ids", value: [{ id: "1" }] },
+    ];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({
+      partial_match: true,
+      name__value: "test",
+      field__isnull: true,
+      related__ids: ["1"],
+    });
+  });
+
+  it("should return empty object for filters with invalid field name format", () => {
+    // GIVEN
+    const filters: Filter[] = [
+      { name: "invalid", value: "test" } as any,
+      { name: "also__invalid", value: "test" },
+    ];
+
+    // WHEN
+    const result = addFiltersToRequest(filters);
+
+    // THEN
+    expect(result).toEqual({});
+  });
+});

frontend/app/src/shared/api/graphql/utils.ts

@@ -1,5 +1,6 @@
 import { ATTRIBUTE_KIND } from "@/entities/schema/constants";
 import { AttributeSchema, RelationshipSchema } from "@/entities/schema/types";
+import { Filter } from "@/shared/hooks/useFilters";
 
 type AddAttributesToRequestOptions = {
   withMetadata?: boolean;
@@ -102,3 +103,39 @@ export const addRelationshipsToRequest = (
     };
   }, {});
 };
+
+export const addFiltersToRequest = (filters: Array<Filter>) => {
+  return filters.reduce(
+    (acc, filter) => {
+      // Skip kind__value filter as it's handled separately
+      if (filter.name === "kind__value") {
+        return acc;
+      }
+
+      const [fieldName, fieldKey] = filter.name.split("__");
+      if (!fieldName || !fieldKey) {
+        return acc;
+      }
+
+      switch (fieldKey) {
+        case "value":
+        case "values": {
+          acc.partial_match = true; // Add partial_match for text-based filters
+          acc[filter.name] = filter.value;
+          break;
+        }
+        case "isnull": {
+          acc[filter.name] = filter.value;
+          break;
+        }
+        case "ids": {
+          acc[filter.name] = filter.value.map(({ id }: { id: string }) => id);
+          break;
+        }
+      }
+
+      return acc;
+    },
+    {} as Record<string, string | number | boolean | string[]>
+  );
+};

frontend/app/src/shared/components/inputs/enum.tsx

@@ -154,12 +154,26 @@ export interface EnumProps {
   schema?: IModelSchema;
   className?: string;
   onChange: (value: string | number | null) => void;
+  defaultOpen?: boolean;
+  fitTriggerWidth?: boolean;
 }
 
 export const Enum = forwardRef<HTMLButtonElement, EnumProps>(
-  ({ items, value, fieldSchema, schema, onChange, ...props }, ref) => {
+  (
+    {
+      items,
+      value,
+      fieldSchema,
+      schema,
+      onChange,
+      defaultOpen = false,
+      fitTriggerWidth = false,
+      ...props
+    },
+    ref
+  ) => {
     const [localItems, setLocalItems] = useState(items);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(defaultOpen);
 
     const handleAddOption = (newOption: string | number) => {
       setLocalItems([...localItems, newOption]);
@@ -179,7 +193,7 @@ export const Enum = forwardRef<HTMLButtonElement, EnumProps>(
           {value}
         </ComboboxTrigger>
 
-        <ComboboxContent>
+        <ComboboxContent fitTriggerWidth={fitTriggerWidth}>
           <ComboboxList>
             <ComboboxEmpty>No enum found.</ComboboxEmpty>
             {localItems.map((item) => (

frontend/app/tests/e2e/objects/object-filters.spec.ts

@@ -121,4 +121,29 @@ test.describe("Object filters", () => {
       await expect(page.getByTestId("object-items")).toContainText("Interface L3");
     });
   });
+
+  test("should filter using enum value", async ({ page }) => {
+    await page.goto("/objects/InfraBGPSession");
+    await expect(page.getByTestId("object-items")).toContainText("EXTERNAL");
+    await expect(page.getByTestId("object-items")).toContainText("INTERNAL");
+
+    await page.getByRole("button", { name: "Type" }).click();
+    await expect(page.getByPlaceholder("Filter...")).toBeFocused();
+    await expect(page.getByRole("option", { name: "EXTERNAL" })).toBeVisible();
+    await expect(page.getByRole("option", { name: "INTERNAL" })).toBeVisible();
+    await page.getByRole("option", { name: "EXTERNAL" }).click();
+    await expect(page.getByRole("combobox").filter({ hasText: "EXTERNAL" })).toBeVisible();
+    await page.getByRole("button", { name: "Apply" }).click();
+
+    await expect(page.getByRole("row", { name: "Type contains EXTERNAL" })).toBeVisible();
+    await expect(page.getByTestId("object-items")).toContainText("EXTERNAL");
+    await expect(page.getByTestId("object-items")).not.toContainText("INTERNAL");
+
+    await page.getByRole("button", { name: "Type" }).click();
+    await expect(page.getByRole("combobox").filter({ hasText: "EXTERNAL" })).toBeVisible();
+
+    await page.getByRole("row", { name: "Type contains EXTERNAL" }).click();
+    await expect(page.getByTestId("object-items")).toContainText("EXTERNAL");
+    await expect(page.getByTestId("object-items")).toContainText("INTERNAL");
+  });
 });