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/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>
+  );
+}