[FIX] remove filter when submitting filter form without value (#5860)

Author: bilalabbad

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

@@ -6,7 +6,7 @@ import {
 } from "@/entities/nodes/object/ui/filters/filter-condition-select";
 import { AttributeSchema } from "@/entities/schema/types";
 import { getCurrentFilterCondition } from "@/shared/components/filters/utils/get-current-filter-condition";
-import { FormFieldValue } from "@/shared/components/form/type";
+import { FormAttributeValue } from "@/shared/components/form/type";
 import { Form, FormField, FormSubmit } from "@/shared/components/ui/form";
 import useFilters, { Filter } from "@/shared/hooks/useFilters";
 import { useState } from "react";
@@ -19,20 +19,21 @@ export type AttributeFilterFormProps = {
 export function AttributeFilterForm({ attributeSchema, onSuccess }: AttributeFilterFormProps) {
   const [filters, setFilters] = useFilters();
   const currentFilter = filters.find((filter) => filter.name.startsWith(attributeSchema.name));
-  const [condition, setCondition] = useState<FilterCondition | undefined>(
+  const [condition, setCondition] = useState<FilterCondition>(
     getCurrentFilterCondition(currentFilter) ?? FILTER_CONDITION.CONTAINS
   );
 
-  const handleSubmit = (formData: Record<string, FormFieldValue>) => {
+  const handleSubmit = (formData: Record<string, FormAttributeValue["value"]>) => {
     if (condition === FILTER_CONDITION.CONTAINS) {
       const { attribute } = formData;
 
-      if (attribute === undefined) {
-        return;
+      if (!attribute && attribute !== 0) {
+        return setFilters(filters.filter((f) => !f.name.startsWith(attributeSchema.name)));
       }
 
+      const isAttributeArray = Array.isArray(attribute);
       const newFilter: Filter = {
-        name: `${attributeSchema.name}__value`,
+        name: `${attributeSchema.name}__${isAttributeArray ? "values" : "value"}`,
         value: attribute,
       };
 
@@ -87,7 +88,12 @@ export function AttributeFilterForm({ attributeSchema, onSuccess }: AttributeFil
         {condition === FILTER_CONDITION.CONTAINS && (
           <FormField
             name="attribute"
-            defaultValue={currentFilter?.value}
+            defaultValue={
+              currentFilter &&
+              getCurrentFilterCondition(currentFilter) === FILTER_CONDITION.CONTAINS
+                ? currentFilter.value
+                : undefined
+            }
             render={({ field }) => {
               return <DynamicFilterInput {...field} fieldSchema={attributeSchema} />;
             }}

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

@@ -33,8 +33,8 @@ export function RelationshipFilterForm({
 }: RelationshipFilterFormProps) {
   const [filters, setFilters] = useFilters();
   const currentFilter = filters.find((filter) => filter.name.startsWith(relationshipSchema.name));
-  const [condition, setCondition] = useState<FilterCondition | undefined>(
-    getCurrentFilterCondition(currentFilter) ?? "is any of"
+  const [condition, setCondition] = useState<FilterCondition>(
+    getCurrentFilterCondition(currentFilter) ?? FILTER_CONDITION.IS_ANY_OF
   );
 
   const handleSubmit = (data: FormData) => {
@@ -98,10 +98,15 @@ export function RelationshipFilterForm({
         }}
         data-testid="relationship-filter-form"
       >
-        {condition === "is any of" && (
+        {condition === FILTER_CONDITION.IS_ANY_OF && (
           <FormField
             name="relationships"
-            defaultValue={currentFilter?.value}
+            defaultValue={
+              currentFilter &&
+              getCurrentFilterCondition(currentFilter) === FILTER_CONDITION.IS_ANY_OF
+                ? currentFilter.value
+                : undefined
+            }
             render={({ field }) => {
               const value = field.value as RelationshipNode[] | undefined;
 

frontend/app/src/entities/nodes/object/ui/object-table/cells/table-column-header.tsx

@@ -2,7 +2,6 @@ import { AttributeFilterForm } from "@/entities/nodes/object/ui/filters/attribut
 import { RelationshipFilterForm } from "@/entities/nodes/object/ui/filters/relationship-filter-form";
 import { TableColumnHeaderIcon } from "@/entities/nodes/object/ui/object-table/cells/table-column-header-icon";
 import { AttributeSchema, ModelSchema, RelationshipSchema } from "@/entities/schema/types";
-import { getObjectFromFilters } from "@/shared/components/filters/utils/getObjectFromFilters";
 import { cellHeaderStyle, cellsStyle } from "@/shared/components/table/style";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
 import useFilters from "@/shared/hooks/useFilters";
@@ -19,8 +18,7 @@ export interface TableColumnHeaderProps extends PopoverTriggerProps {
 export function TableColumnHeader({ schema, columnSchema, ...props }: TableColumnHeaderProps) {
   const [filters] = useFilters();
   const [showFilters, setShowFilters] = useState(false);
-  const filtersAsObjectData = getObjectFromFilters(schema, filters);
-  const currentColumnFilters = filtersAsObjectData[columnSchema.name];
+  const currentColumnFilters = filters.find((f) => f.name.startsWith(columnSchema.name));
 
   const closePopover = () => {
     setShowFilters(false);

frontend/app/src/shared/components/filters/utils/get-current-filter-condition.test.ts

@@ -0,0 +1,94 @@
+import { FILTER_CONDITION } from "@/entities/nodes/object/ui/filters/filter-condition-select";
+import { Filter } from "@/shared/hooks/useFilters";
+import { describe, expect, it } from "vitest";
+import { getCurrentFilterCondition } from "./get-current-filter-condition";
+
+describe("getCurrentFilterCondition", () => {
+  it("should return undefined when no filter is provided", () => {
+    // GIVEN
+    const filter = undefined;
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toBeUndefined();
+  });
+
+  it("should return CONTAINS condition for field__value filter", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__value", value: "test" };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toEqual(FILTER_CONDITION.CONTAINS);
+  });
+
+  it("should return IS_ANY_OF condition for field__ids filter", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__ids", value: ["id1", "id2"] };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toEqual(FILTER_CONDITION.IS_ANY_OF);
+  });
+
+  it("should return IS_ANY_OF condition for field__values filter", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__values", value: ["value1", "value2"] };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toEqual(FILTER_CONDITION.IS_ANY_OF);
+  });
+
+  it("should return IS_EMPTY condition for field__isnull filter with true value", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__isnull", value: true };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toEqual(FILTER_CONDITION.IS_EMPTY);
+  });
+
+  it("should return IS_NOT_EMPTY condition for field__isnull filter with false value", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__isnull", value: false };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toEqual(FILTER_CONDITION.IS_NOT_EMPTY);
+  });
+
+  it("should return undefined for filter with unknown condition suffix", () => {
+    // GIVEN
+    const filter: Filter = { name: "field__unknown", value: "test" };
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toBeUndefined();
+  });
+
+  it("should return undefined for filter with no condition suffix", () => {
+    // GIVEN
+    const filter: Filter = { name: "field", value: "test" } as unknown as Filter;
+
+    // WHEN
+    const result = getCurrentFilterCondition(filter);
+
+    // THEN
+    expect(result).toBeUndefined();
+  });
+});

frontend/app/src/shared/components/filters/utils/get-current-filter-condition.ts

@@ -1,16 +1,30 @@
-import { FILTER_CONDITION } from "@/entities/nodes/object/ui/filters/filter-condition-select";
+import {
+  FILTER_CONDITION,
+  FilterCondition,
+} from "@/entities/nodes/object/ui/filters/filter-condition-select";
 import { Filter } from "@/shared/hooks/useFilters";
 
-export function getCurrentFilterCondition(filter?: Filter) {
+/**
+ * Determines the current filter condition based on the filter name and value.
+ *
+ * @param filter - The filter object to analyze
+ * @returns The corresponding filter condition or undefined if no filter is provided
+ */
+export function getCurrentFilterCondition(filter?: Filter): FilterCondition | undefined {
   if (!filter) return undefined;
 
-  const condition = filter.name.split("__")[1];
+  const parts = filter.name.split("__");
+  const condition = parts.length > 1 ? parts[1] : "";
 
-  if (condition === "ids") {
-    return FILTER_CONDITION.IS_ANY_OF;
-  }
-
-  if (condition === "isnull") {
-    return filter.value ? FILTER_CONDITION.IS_EMPTY : FILTER_CONDITION.IS_NOT_EMPTY;
+  switch (condition) {
+    case "value":
+      return FILTER_CONDITION.CONTAINS;
+    case "ids":
+    case "values":
+      return FILTER_CONDITION.IS_ANY_OF;
+    case "isnull":
+      return filter.value ? FILTER_CONDITION.IS_EMPTY : FILTER_CONDITION.IS_NOT_EMPTY;
+    default:
+      return undefined;
   }
 }