Feat: Extract the save buttons for dataset and chat configurations to separate files to increase permission control #3221 (#9803)

### What problem does this PR solve?

Feat: Extract the save buttons for dataset and chat configurations to
separate files to increase permission control #3221

### Type of change


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

web/src/pages/dataset/setting/chunk-method-form.tsx

@@ -1,12 +1,9 @@
 import { Button } from '@/components/ui/button';
-import { Loader2Icon } from 'lucide-react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { DocumentParserType } from '@/constants/knowledge';
-import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
 import { useMemo } from 'react';
-import { useParams } from 'umi';
 import { AudioConfiguration } from './configuration/audio';
 import { BookConfiguration } from './configuration/book';
 import { EmailConfiguration } from './configuration/email';
@@ -22,6 +19,7 @@ import { QAConfiguration } from './configuration/qa';
 import { ResumeConfiguration } from './configuration/resume';
 import { TableConfiguration } from './configuration/table';
 import { TagConfiguration } from './configuration/tag';
+import { SavingButton } from './saving-button';
 
 const ConfigurationComponentMap = {
   [DocumentParserType.Naive]: NaiveConfiguration,
@@ -48,11 +46,6 @@ function EmptyComponent() {
 export function ChunkMethodForm() {
   const form = useFormContext();
   const { t } = useTranslation();
-  // const [submitLoading, setSubmitLoading] = useState(false); // submit button loading
-  const { id: kb_id } = useParams();
-
-  const { saveKnowledgeConfiguration, loading: submitLoading } =
-    useUpdateKnowledge();
 
   const finalParserId: DocumentParserType = useWatch({
     control: form.control,
@@ -80,37 +73,7 @@ export function ChunkMethodForm() {
         >
           {t('knowledgeConfiguration.cancel')}
         </Button>
-        <Button
+        <SavingButton></SavingButton>
-          disabled={submitLoading}
-          onClick={() => {
-            (async () => {
-              try {
-                let beValid = await form.formControl.trigger();
-                if (beValid) {
-                  // setSubmitLoading(true);
-                  // let postData = form.formState.values;
-                  // console.log('submit form -->', form);
-                  // delete postData['avatar']; // has submitted in first form general
-                  form.handleSubmit(async (values) => {
-                    console.log('saveKnowledgeConfiguration: ', values);
-                    delete values['avatar'];
-                    await saveKnowledgeConfiguration({
-                      kb_id,
-                      ...values,
-                    });
-                  })();
-                }
-              } catch (e) {
-                console.log(e);
-              } finally {
-                // setSubmitLoading(false);
-              }
-            })();
-          }}
-        >
-          {submitLoading && <Loader2Icon className="animate-spin" />}
-          {t('knowledgeConfiguration.save')}
-        </Button>
       </div>
     </section>
   );

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

@@ -2,7 +2,7 @@ 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, ButtonLoading } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   FormControl,
   FormField,
@@ -12,26 +12,15 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { PermissionRole } from '@/constants/permission';
-import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { GeneralSavingButton } from './saving-button';
 
 export function GeneralForm() {
   const form = useFormContext();
   const { t } = useTranslation();
 
-  const { saveKnowledgeConfiguration, loading: submitLoading } =
-    useUpdateKnowledge();
-
-  const defaultValues = useMemo(
-    () => form.formState.defaultValues ?? {},
-    [form.formState.defaultValues],
-  );
-  const parser_id = defaultValues['parser_id'];
-  const { id: kb_id } = useParams();
-
   const teamOptions = useMemo(() => {
     return Object.values(PermissionRole).map((x) => ({
       label: t('knowledgeConfiguration.' + x),
@@ -131,30 +120,7 @@ export function GeneralForm() {
         >
           {t('knowledgeConfiguration.cancel')}
         </Button>
-        <ButtonLoading
+        <GeneralSavingButton></GeneralSavingButton>
-          type="button"
-          loading={submitLoading}
-          onClick={() => {
-            (async () => {
-              let isValidate = await form.trigger('name');
-              const { name, description, permission, avatar } =
-                form.getValues();
-
-              if (isValidate) {
-                saveKnowledgeConfiguration({
-                  kb_id,
-                  parser_id,
-                  name,
-                  description,
-                  avatar,
-                  permission,
-                });
-              }
-            })();
-          }}
-        >
-          {t('knowledgeConfiguration.save')}
-        </ButtonLoading>
       </div>
     </>
   );

web/src/pages/dataset/setting/saving-button.tsx

@@ -0,0 +1,82 @@
+import { ButtonLoading } from '@/components/ui/button';
+import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
+import { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'umi';
+
+export function GeneralSavingButton() {
+  const form = useFormContext();
+  const { saveKnowledgeConfiguration, loading: submitLoading } =
+    useUpdateKnowledge();
+  const { id: kb_id } = useParams();
+  const { t } = useTranslation();
+
+  const defaultValues = useMemo(
+    () => form.formState.defaultValues ?? {},
+    [form.formState.defaultValues],
+  );
+  const parser_id = defaultValues['parser_id'];
+
+  return (
+    <ButtonLoading
+      type="button"
+      loading={submitLoading}
+      onClick={() => {
+        (async () => {
+          let isValidate = await form.trigger('name');
+          const { name, description, permission, avatar } = form.getValues();
+
+          if (isValidate) {
+            saveKnowledgeConfiguration({
+              kb_id,
+              parser_id,
+              name,
+              description,
+              avatar,
+              permission,
+            });
+          }
+        })();
+      }}
+    >
+      {t('knowledgeConfiguration.save')}
+    </ButtonLoading>
+  );
+}
+
+export function SavingButton() {
+  const { saveKnowledgeConfiguration, loading: submitLoading } =
+    useUpdateKnowledge();
+  const form = useFormContext();
+  const { id: kb_id } = useParams();
+  const { t } = useTranslation();
+
+  return (
+    <ButtonLoading
+      loading={submitLoading}
+      onClick={() => {
+        (async () => {
+          try {
+            let beValid = await form.formControl.trigger();
+            if (beValid) {
+              form.handleSubmit(async (values) => {
+                console.log('saveKnowledgeConfiguration: ', values);
+                delete values['avatar'];
+                await saveKnowledgeConfiguration({
+                  kb_id,
+                  ...values,
+                });
+              })();
+            }
+          } catch (e) {
+            console.log(e);
+          } finally {
+          }
+        })();
+      }}
+    >
+      {t('knowledgeConfiguration.save')}
+    </ButtonLoading>
+  );
+}

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonLoading } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
 import { DatasetMetadata } from '@/constants/chat';
@@ -18,6 +18,7 @@ import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
+import { SavingButton } from './saving-button';
 import { useChatSettingSchema } from './use-chat-setting-schema';
 
 type ChatSettingsProps = { switchSettingVisible(): void };
@@ -110,9 +111,7 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
             <Button variant={'outline'} onClick={switchSettingVisible}>
               {t('chat.cancel')}
             </Button>
-            <ButtonLoading type="submit" loading={loading}>
+            <SavingButton loading={loading}></SavingButton>
-              {t('common.save')}
-            </ButtonLoading>
           </div>
         </form>
       </Form>

web/src/pages/next-chats/chat/app-settings/saving-button.tsx

@@ -0,0 +1,16 @@
+import { ButtonLoading } from '@/components/ui/button';
+import { useTranslation } from 'react-i18next';
+
+type SaveButtonProps = {
+  loading: boolean;
+};
+
+export function SavingButton({ loading }: SaveButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ButtonLoading type="submit" loading={loading}>
+      {t('common.save')}
+    </ButtonLoading>
+  );
+}