Fix: Bugs fixed (#12524)

### What problem does this PR solve?

Fix: Bugs fixed
- The issue of filter conditions not being able to be deleted on the
knowledge base file page
- The issue of metadata filter conditions not working.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/list-filter-bar/filter-popover.tsx

@@ -11,18 +11,12 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { FieldPath, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import { z, ZodArray, ZodString } from 'zod';
 
 import { Button } from '@/components/ui/button';
 
-import {
+import { Form, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
 import { t } from 'i18next';
 import { FilterField } from './filter-field';
 import { FilterChange, FilterCollection, FilterValue } from './interface';
@@ -71,37 +65,35 @@ function CheckboxFormMultiple({
     }, {});
   }, [resolvedFilters]);
 
-  // const FormSchema = useMemo(() => {
-  //   if (resolvedFilters.length === 0) {
-  //     return z.object({});
-  //   }
-
-  //   return z.object(
-  //     resolvedFilters.reduce<
-  //       Record<
-  //         string,
-  //         ZodArray<ZodString, 'many'> | z.ZodObject<any> | z.ZodOptional<any>
-  //       >
-  //     >((pre, cur) => {
-  //       const hasNested = cur.list?.some(
-  //         (item) => item.list && item.list.length > 0,
-  //       );
-
-  //       if (hasNested) {
-  //         pre[cur.field] = z
-  //           .record(z.string(), z.array(z.string().optional()).optional())
-  //           .optional();
-  //       } else {
-  //         pre[cur.field] = z.array(z.string().optional()).optional();
-  //       }
-
-  //       return pre;
-  //     }, {}),
-  //   );
-  // }, [resolvedFilters]);
   const FormSchema = useMemo(() => {
-    return z.object({});
+    if (resolvedFilters.length === 0) {
-  }, []);
+      return z.object({});
+    }
+    return z.object(
+      resolvedFilters.reduce<
+        Record<
+          string,
+          ZodArray<ZodString, 'many'> | z.ZodObject<any> | z.ZodOptional<any>
+        >
+      >((pre, cur) => {
+        const hasNested = cur.list?.some(
+          (item) => item.list && item.list.length > 0,
+        );
+        if (hasNested) {
+          pre[cur.field] = z
+            .record(z.string(), z.array(z.string().optional()).optional())
+            .optional();
+        } else {
+          pre[cur.field] = z.array(z.string().optional()).optional();
+        }
+
+        return pre;
+      }, {}),
+    );
+  }, [resolvedFilters]);
+  // const FormSchema = useMemo(() => {
+  //   return z.object({});
+  // }, []);
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: resolvedFilters.length > 0 ? zodResolver(FormSchema) : undefined,
@@ -178,37 +170,28 @@ function CheckboxFormMultiple({
           {notInfilterGroup &&
             notInfilterGroup.map((x) => {
               return (
-                <FormField
+                <FormItem className="space-y-4" key={x.field}>
-                  key={x.field}
+                  <div>
-                  control={form.control}
+                    <FormLabel className="text-text-primary text-sm">
-                  name={
+                      {x.label}
-                    x.field.toString() as FieldPath<z.infer<typeof FormSchema>>
+                    </FormLabel>
-                  }
+                  </div>
-                  render={() => (
+                  {x.list?.length &&
-                    <FormItem className="space-y-4">
+                    x.list.map((item) => {
-                      <div>
+                      return (
-                        <FormLabel className="text-text-primary text-sm">
+                        <FilterField
-                          {x.label}
+                          key={item.id}
-                        </FormLabel>
+                          item={{ ...item }}
-                      </div>
+                          parent={{
-                      {x.list?.length &&
+                            ...x,
-                        x.list.map((item) => {
+                            id: x.field,
-                          return (
+                            // field: `${x.field}${item.field ? '.' + item.field : ''}`,
-                            <FilterField
+                          }}
-                              key={item.id}
+                        />
-                              item={{ ...item }}
+                      );
-                              parent={{
+                    })}
-                                ...x,
+                  <FormMessage />
-                                id: x.field,
+                </FormItem>
-                                // field: `${x.field}${item.field ? '.' + item.field : ''}`,
-                              }}
-                            />
-                          );
-                        })}
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
               );
             })}
         </div>

web/src/components/list-filter-bar/use-handle-filter-submit.ts

@@ -1,7 +1,42 @@
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import { useCallback, useState } from 'react';
-import { FilterChange, FilterValue } from './interface';
+import {
+  FilterChange,
+  FilterCollection,
+  FilterType,
+  FilterValue,
+} from './interface';
 
+const getFilterIds = (filter: FilterType): string[] => {
+  let ids: string[] = [];
+  if (!filter.list) {
+    ids = [filter.id];
+  }
+
+  if (filter.list && Array.isArray(filter.list)) {
+    for (const item of filter.list) {
+      ids = ids.concat(getFilterIds(item));
+    }
+  }
+
+  return ids;
+};
+
+const mergeFilterValue = (
+  filterValue: FilterValue,
+  ids: string[],
+): FilterValue => {
+  let value = {} as FilterValue;
+  for (const key in filterValue) {
+    if (Array.isArray(filterValue[key])) {
+      const keyIds = filterValue[key] as string[];
+      value[key] = ids.filter((id) => keyIds.includes(id));
+    } else if (typeof filterValue[key] === 'object') {
+      value[key] = mergeFilterValue(filterValue[key], ids);
+    }
+  }
+  return value;
+};
 export function useHandleFilterSubmit() {
   const [filterValue, setFilterValue] = useState<FilterValue>({});
   const { setPagination } = useGetPaginationWithRouter();
@@ -13,5 +48,21 @@ export function useHandleFilterSubmit() {
     [setPagination],
   );
 
-  return { filterValue, setFilterValue, handleFilterSubmit };
+  const checkValue = useCallback((filters: FilterCollection[]) => {
+    if (!filters?.length || !filterValue) {
+      return;
+    }
+    let validFields = filters.reduce((pre, cur) => {
+      return [...pre, ...getFilterIds(cur as FilterType)];
+    }, [] as string[]);
+    if (!validFields.length) {
+      return;
+    }
+    setFilterValue((preValue) => {
+      const newValue: FilterValue = mergeFilterValue(preValue, validFields);
+      return newValue;
+    });
+  }, []);
+
+  return { filterValue, setFilterValue, handleFilterSubmit, checkValue };
 }

web/src/hooks/use-document-request.ts

@@ -94,8 +94,10 @@ export const useFetchDocumentList = () => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
   const { id } = useParams();
+  const queryClient = useQueryClient();
   const debouncedSearchString = useDebounce(searchString, { wait: 500 });
-  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
+  const { filterValue, handleFilterSubmit, checkValue } =
+    useHandleFilterSubmit();
   const [docs, setDocs] = useState<IDocumentInfo[]>([]);
   const isLoop = useMemo(() => {
     return docs.some((doc) => doc.run === '1');
@@ -144,6 +146,9 @@ export const useFetchDocumentList = () => {
         },
       );
       if (ret.data.code === 0) {
+        queryClient.invalidateQueries({
+          queryKey: [DocumentApiAction.FetchDocumentFilter],
+        });
         return ret.data.data;
       }
 
@@ -173,6 +178,7 @@ export const useFetchDocumentList = () => {
     setPagination,
     filterValue,
     handleFilterSubmit,
+    checkValue,
   };
 };
 
@@ -191,7 +197,6 @@ export const useGetDocumentFilter = (): {
       DocumentApiAction.FetchDocumentFilter,
       debouncedSearchString,
       knowledgeId,
-      open,
     ],
     queryFn: async () => {
       const { data } = await kbService.documentFilter({

web/src/pages/dataset/dataset/index.tsx

@@ -14,7 +14,7 @@ import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
 import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
 import { Pen, Upload } from 'lucide-react';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   MetadataType,
@@ -48,6 +48,7 @@ export default function Dataset() {
     filterValue,
     handleFilterSubmit,
     loading,
+    checkValue,
   } = useFetchDocumentList();
 
   const refreshCount = useMemo(() => {
@@ -75,6 +76,10 @@ export default function Dataset() {
     config: metadataConfig,
   } = useManageMetadata();
 
+  useEffect(() => {
+    checkValue(filters);
+  }, [filters]);
+
   const { rowSelection, rowSelectionIsEmpty, setRowSelection, selectedCount } =
     useRowSelection();