Feat: Move the dataset permission drop-down box to a separate file for better permission control #3221 (#9850)

### What problem does this PR solve?

Feat: Move the dataset permission drop-down box to a separate file for
better permission control #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/layouts/next-header.tsx

@@ -111,7 +111,7 @@ export function Header() {
         <img
           src={'/logo.svg'}
           alt="logo"
-          className="size-10 mr-[12]"
+          className="size-10 mr-[12] cursor-pointer"
           onClick={handleLogoClick}
         />
         <a

web/src/pages/agents/index.tsx

@@ -39,6 +39,7 @@ export default function Agents() {
           title="Agents"
           searchString={searchString}
           onSearchChange={handleInputChange}
+          icon="agent"
         >
           <Button onClick={navigateToAgentTemplates}>
             <Plus className="mr-2 h-4 w-4" />

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

@@ -59,7 +59,7 @@ export default function Dataset() {
     setRowSelection,
   });
   return (
-    <section className="p-5">
+    <section className="p-5 min-w-[880px]">
       <ListFilterBar
         title="Dataset"
         onSearchChange={handleInputChange}

web/src/pages/dataset/index.tsx

@@ -39,7 +39,7 @@ export default function DatasetWrapper() {
       </PageHeader>
       <div className="flex flex-1 min-h-0">
         <SideBar></SideBar>
-        <div className="flex-1">
+        <div className="flex-1 overflow-auto">
           <Outlet />
         </div>
       </div>

web/src/pages/dataset/setting/form-schema.ts

@@ -9,7 +9,7 @@ export const formSchema = z.object({
   }),
   // avatar: z.instanceof(File),
   avatar: z.any().nullish(),
-  permission: z.string(),
+  permission: z.string().optional(),
   parser_id: z.string(),
   embd_id: z.string(),
   parser_config: z

web/src/pages/dataset/setting/general-form.tsx

@@ -1,7 +1,5 @@
 import { AvatarUpload } from '@/components/avatar-upload';
 import { FormContainer } from '@/components/form-container';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { Button } from '@/components/ui/button';
 import {
   FormControl,
@@ -11,23 +9,15 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { PermissionRole } from '@/constants/permission';
-import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { PermissionFormField } from './permission-form-field';
 import { GeneralSavingButton } from './saving-button';
 
 export function GeneralForm() {
   const form = useFormContext();
   const { t } = useTranslation();
 
-  const teamOptions = useMemo(() => {
-    return Object.values(PermissionRole).map((x) => ({
-      label: t('knowledgeConfiguration.' + x),
-      value: x,
-    }));
-  }, [t]);
-
   return (
     <>
       <FormContainer className="space-y-10 p-10">
@@ -98,17 +88,7 @@ export function GeneralForm() {
             );
           }}
         />
-        <RAGFlowFormItem
-          name="permission"
-          label={t('knowledgeConfiguration.permissions')}
-          tooltip={t('knowledgeConfiguration.permissionsTip')}
-          horizontal
-        >
-          <SelectWithSearch
-            options={teamOptions}
-            triggerClassName="w-3/4"
-          ></SelectWithSearch>
-        </RAGFlowFormItem>
+        <PermissionFormField></PermissionFormField>
       </FormContainer>
       <div className="text-right pt-4 flex justify-end gap-3">
         <Button

web/src/pages/dataset/setting/permission-form-field.tsx

@@ -0,0 +1,29 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { PermissionRole } from '@/constants/permission';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function PermissionFormField() {
+  const { t } = useTranslation();
+  const teamOptions = useMemo(() => {
+    return Object.values(PermissionRole).map((x) => ({
+      label: t('knowledgeConfiguration.' + x),
+      value: x,
+    }));
+  }, [t]);
+
+  return (
+    <RAGFlowFormItem
+      name="permission"
+      label={t('knowledgeConfiguration.permissions')}
+      tooltip={t('knowledgeConfiguration.permissionsTip')}
+      horizontal
+    >
+      <SelectWithSearch
+        options={teamOptions}
+        triggerClassName="w-3/4"
+      ></SelectWithSearch>
+    </RAGFlowFormItem>
+  );
+}

web/src/pages/next-chats/index.tsx

@@ -39,6 +39,7 @@ export default function ChatList() {
       <div className="px-8 pt-8">
         <ListFilterBar
           title="Chat apps"
+          icon="chat"
           onSearchChange={handleInputChange}
           searchString={searchString}
         >

web/src/pages/next-searches/index.tsx

@@ -114,11 +114,7 @@ export default function SearchList() {
     <section className="w-full h-full flex flex-col">
       <div className="px-8 pt-8">
         <ListFilterBar
-          icon={
-            <div className="rounded-sm bg-emerald-400 bg-gradient-to-t from-emerald-400 via-emerald-400 to-emerald-200 p-1 size-6 flex justify-center items-center">
-              <Search size={14} className="font-bold m-auto" />
-            </div>
-          }
+          icon="search"
           title="Search apps"
           showFilter={false}
           onSearchChange={(e) => handleSearchChange(e.target.value)}