feat: system config ReplayCallback (#498)

Co-authored-by: onePone <[email protected]>

packages/arex/src/i18n/locales/cn/components.json

@@ -342,6 +342,8 @@
     "language": "语言",
     "avatar": "头像",
     "dataDesensitization": "数据加密",
-    "jarFileUrl": "Jar 包地址"
+    "jarFileUrl": "Jar 包地址",
+    "replayCallback": "回放回调",
+    "replayCallbackUrl": "回放回调地址"
   }
 }

packages/arex/src/i18n/locales/en/components.json

@@ -343,6 +343,8 @@
     "language": "Language",
     "avatar": "Avatar",
     "dataDesensitization": "DataDesensitization",
-    "jarFileUrl": "JarFileUrl"
+    "jarFileUrl": "JarFileUrl",
+    "replayCallback": "ReplayCallback",
+    "replayCallbackUrl": "ReplayCallbackUrl"
   }
 }

packages/arex/src/panes/SystemSetting/CallbackUrl/index.tsx

@@ -0,0 +1,80 @@
+import { getLocalStorage, useTranslation } from '@arextest/arex-core';
+import { useRequest } from 'ahooks';
+import { App, Button, Form, FormProps, Input } from 'antd';
+import React, { FC } from 'react';
+
+import { EMAIL_KEY } from '@/constant';
+import { SystemService } from '@/services';
+import { SystemConfig } from '@/services/SystemService';
+
+const CallbackUrl: FC = () => {
+  const { message } = App.useApp();
+  const { t } = useTranslation();
+  const email = getLocalStorage<string>(EMAIL_KEY) as string;
+  const [form] = Form.useForm<SystemConfig>();
+
+  useRequest(SystemService.getSystemConfig, {
+    onSuccess(res) {
+      if (res) {
+        form.setFieldsValue({
+          operator: email,
+          callbackUrl: res.callbackUrl,
+        });
+      }
+    },
+  });
+
+  const { run: saveDesensitization } = useRequest(SystemService.saveSystemConfig, {
+    manual: true,
+    onSuccess(success) {
+      success
+        ? message.success(t('message.updateSuccess'))
+        : message.error(t('message.updateFailed'));
+    },
+  });
+
+  const handleUploadJar: FormProps<SystemConfig>['onFinish'] = (value) => {
+    console.log(value);
+
+    if (value.callbackUrl) {
+      saveDesensitization({
+        systemConfig: {
+          operator: value.operator,
+          callbackUrl: value.callbackUrl,
+        },
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Form<SystemConfig>
+        name='system-setting-callbackUrl-form'
+        form={form}
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        onFinish={handleUploadJar}
+      >
+        <Form.Item hidden name='operator'>
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('systemSetting.replayCallbackUrl', { ns: 'components' })}
+          name='callbackUrl'
+        >
+          <Input allowClear style={{ width: '400px' }} />
+        </Form.Item>
+
+        {/* form submit button */}
+        <Form.Item wrapperCol={{ span: 14, offset: 4 }}>
+          <Button type='primary' htmlType='submit'>
+            Save
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default CallbackUrl;

packages/arex/src/panes/SystemSetting/DataDesensitization/index.tsx

@@ -39,6 +39,7 @@ const DataDesensitization = () => {
   });
 
   const handleUploadJar: FormProps<DesensitizationFormType>['onFinish'] = (value) => {
+    console.log(value);
     if (value.id && !value.jarUrl) {
       deleteDesensitization({ id: value.id });
     }

packages/arex/src/panes/SystemSetting/SystemSetting.tsx

@@ -2,6 +2,8 @@ import { ArexPaneFC, useTranslation } from '@arextest/arex-core';
 import { Divider } from 'antd';
 import React from 'react';
 
+import CallbackUrl from '@/panes/SystemSetting/CallbackUrl';
+
 import DataDesensitization from './DataDesensitization';
 import UserInterface from './UserInterface';
 
@@ -15,6 +17,9 @@ const SystemSetting: ArexPaneFC = () => {
 
       <Divider orientation='left'> {t('systemSetting.dataDesensitization')}</Divider>
       <DataDesensitization />
+
+      <Divider orientation='left'> {t('systemSetting.replayCallback')}</Divider>
+      <CallbackUrl />
     </div>
   );
 };

packages/arex/src/services/SystemService/getSystemConfig.ts

@@ -0,0 +1,8 @@
+import { request } from '@/utils';
+
+import { SystemConfig } from './saveSystemConfig';
+
+export async function getSystemConfig() {
+  const res = await request.get<SystemConfig>(`/report/system/config/list`);
+  return res.body;
+}

packages/arex/src/services/SystemService/index.ts

@@ -0,0 +1,2 @@
+export * from './getSystemConfig';
+export * from './saveSystemConfig';

packages/arex/src/services/SystemService/saveSystemConfig.ts

@@ -0,0 +1,11 @@
+import { request } from '@/utils';
+
+export interface SystemConfig {
+  operator: string;
+  callbackUrl: string;
+}
+
+export async function saveSystemConfig(params: { systemConfig: SystemConfig }) {
+  const res = await request.post<boolean>(`/report/system/config/save`, params);
+  return res.body;
+}

packages/arex/src/services/index.ts

@@ -8,4 +8,5 @@ export * as LoginService from './LoginService';
 export * as ReportService from './ReportService';
 export * as ScheduleService from './ScheduleService';
 export * as StorageService from './StorageService';
+export * as SystemService from './SystemService';
 export * as UserService from './UserService';