[INLONG-8621][Dashboard] Approval management supports approval data s…

…ynchronization (#8625)

inlong-dashboard/src/ui/pages/Process/Approvals/config.tsx

@@ -99,7 +99,9 @@ export const getColumns = activedName => [
     title: i18n.t('basic.Operating'),
     dataIndex: 'action',
     render: (text, record) => (
-      <Link to={`/process/${activedName}/${record.processId}?taskId=${record.id}`}>
+      <Link
+        to={`/process/${activedName}/${record.processId}?taskId=${record.id}&inlongGroupMode=${record.showInList?.inlongGroupMode}`}
+      >
         {i18n.t('basic.Detail')}
       </Link>
     ),

inlong-dashboard/src/ui/pages/ProcessDetail/Group.tsx

@@ -21,12 +21,22 @@ import React, { useMemo, forwardRef, useImperativeHandle, useEffect } from 'reac
 import FormGenerator, { useForm } from '@/ui/components/FormGenerator';
 import { CommonInterface } from './common';
 import { useGroupFormContent, getFormContent } from './GroupConfig';
+import { useLocation } from '@/ui/hooks';
+import { parse } from 'qs';
+import { getSyncFormContent, useSyncFormContent } from './SyncConfig';
 
 export type Props = CommonInterface;
 
 const Comp = ({ defaultData, isViwer, suffixContent, noExtraForm, isFinished }: Props, ref) => {
   const [form] = useForm();
 
+  const location = useLocation();
+
+  const inlongGroupMode = useMemo(
+    () => parse(location.search.slice(1))?.inlongGroupMode,
+    [location.search],
+  );
+
   const onOk = async (useValidate = true) => {
     if (!useValidate) {
       const values = await form.getFieldsValue();
@@ -44,11 +54,16 @@ const Comp = ({ defaultData, isViwer, suffixContent, noExtraForm, isFinished }:
   useEffect(() => {
     const groupInfo = defaultData?.processInfo?.formData?.groupInfo;
     const groupApproveInfo = defaultData?.currentTask?.formData?.groupApproveInfo;
+    const streamInfo = defaultData?.processInfo?.formData?.streamInfoList[0];
     if (groupInfo || groupApproveInfo) {
       const obj = {
         ...groupInfo,
         ...groupApproveInfo,
       };
+      if (inlongGroupMode === '1') {
+        obj.inlongStreamId = streamInfo.inlongStreamId;
+        obj.streamName = streamInfo.name;
+      }
       form.setFieldsValue(obj);
     }
   }, [defaultData, form]);
@@ -63,26 +78,32 @@ const Comp = ({ defaultData, isViwer, suffixContent, noExtraForm, isFinished }:
     isFinished,
   });
 
-  // Easy to set some default values of the form
-  const dataLoaded = useMemo(() => {
-    return !!(defaultData && Object.keys(defaultData).length);
-  }, [defaultData]);
+  const syncFormContent = useSyncFormContent({
+    mqType: defaultData?.processInfo?.formData?.groupInfo?.mqType,
+  });
 
-  return (
-    dataLoaded && (
-      <FormGenerator
-        form={form}
-        content={getFormContent({
+  const processContent =
+    inlongGroupMode === '1'
+      ? getSyncFormContent({
+          isViwer,
+          suffixContent,
+          syncFormContent,
+        })
+      : getFormContent({
           isViwer,
           formData: defaultData?.processInfo?.formData,
           suffixContent,
           noExtraForm,
           isFinished,
           groupFormContent,
-        })}
-      />
-    )
-  );
+        });
+
+  // Easy to set some default values of the form
+  const dataLoaded = useMemo(() => {
+    return !!(defaultData && Object.keys(defaultData).length);
+  }, [defaultData]);
+
+  return dataLoaded && <FormGenerator form={form} content={processContent} />;
 };
 
 export default forwardRef(Comp);

inlong-dashboard/src/ui/pages/ProcessDetail/SyncConfig.tsx

@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useMemo } from 'react';
+import { Divider } from 'antd';
+import i18n from '@/i18n';
+import { useLoadMeta, SyncMetaType } from '@/plugins';
+
+export const useSyncFormContent = ({ mqType = '' }) => {
+  const { Entity } = useLoadMeta<SyncMetaType>('sync', mqType);
+
+  const entityFields = useMemo(() => {
+    return Entity ? new Entity().renderRow() : [];
+  }, [Entity]);
+
+  return entityFields?.map(item => {
+    const obj = { ...item, col: 12 };
+
+    obj.type = 'text';
+    delete obj.rules;
+    delete obj.extra;
+    if ((obj.suffix as any)?.type) {
+      (obj.suffix as any).type = 'text';
+      delete (obj.suffix as any).rules;
+    }
+
+    return obj;
+  });
+};
+
+export const getSyncFormContent = ({ isViwer, suffixContent, syncFormContent = [] }) => {
+  const array = [
+    {
+      type: <Divider orientation="left">{i18n.t('pages.Approvals.Type.Group')}</Divider>,
+    },
+    ...syncFormContent,
+  ];
+
+  return isViwer
+    ? array
+    : array.concat([
+        {
+          type: (
+            <Divider orientation="left">
+              {i18n.t('pages.ApprovalDetail.GroupConfig.ApprovalInformation')}
+            </Divider>
+          ),
+        },
+        ...suffixContent.map(item => ({ ...item, col: 12 })),
+      ]);
+};