fix: skip mock tooltip (#587)

* fix: skip mock tooltip * chore: update version to 0.6.14 --------- Co-authored-by: onePone <[email protected]>
arextest · Jan 3, 2024 · 3cdfbc9 · 3cdfbc9
1 parent 02e42a6
commit 3cdfbc9
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.13",
+  "version": "0.6.14",
   "description": "",
   "homepage": "https://github.com/arextest/arex",
   "main": "index.js",

diff --git a/packages/arex-core/package.json b/packages/arex-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arextest/arex-core",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "homepage": "https://github.com/arextest/arex",
   "main": "dist/arex-core.js",
   "module": "dist/arex-core.js",

diff --git a/packages/arex-core/src/components/HelpTooltip.tsx b/packages/arex-core/src/components/HelpTooltip.tsx
@@ -2,10 +2,20 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import React, { FC } from 'react';
 
-const HelpTooltip: FC<{ title: React.ReactNode; children: React.ReactNode }> = (props) => (
+export interface HelpTooltipProps {
+  title: React.ReactNode;
+  maxWidth?: string;
+  children: React.ReactNode;
+}
+
+const HelpTooltip: FC<HelpTooltipProps> = (props) => (
   <>
     <Typography.Text>{props.children}</Typography.Text>
-    <Tooltip title={props.title} placement='top' overlayStyle={{ maxWidth: '200px' }}>
+    <Tooltip
+      title={props.title}
+      placement='top'
+      overlayStyle={{ maxWidth: props.maxWidth || '200px' }}
+    >
       <QuestionCircleOutlined style={{ marginLeft: '4px' }} />
     </Tooltip>
   </>

diff --git a/packages/arex/package.json b/packages/arex/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.13",
+  "version": "0.6.14",
   "author": "arextest",
   "main": "dist-electron/main.js",
   "files": [

diff --git a/packages/arex/src/i18n/locales/cn/components.json b/packages/arex/src/i18n/locales/cn/components.json
@@ -310,6 +310,7 @@
     "QPSTips": "有效范围 1 - 20",
     "emptyQPS": "请输入最大QPS",
     "skipMock": "不Mock依赖",
+    "skipMockTooltip": "设置不需要回放的接口，多个值使用','分隔。",
     "sync": "同步",
     "emptyContractTip": "无报文契约，请尝试同步更新契约",
     "contract": "契约",

diff --git a/packages/arex/src/i18n/locales/en/components.json b/packages/arex/src/i18n/locales/en/components.json
@@ -312,6 +312,7 @@
     "QPSTips": "Allowable value range 1 - 20",
     "emptyQPS": "Please input your max QPS",
     "skipMock": "Skip Mock",
+    "skipMockTooltip": "Configure interfaces that do not require mocks, multiple values separated by ','.",
     "sync": "Sync",
     "emptyContractTip": "No contract, please try to synchronize the contract",
     "contract": "Contract",

diff --git a/packages/arex/src/panes/AppSetting/Replay/FormItem/ExcludeOperation.tsx b/packages/arex/src/panes/AppSetting/Replay/FormItem/ExcludeOperation.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
-import { styled, TooltipButton, useTranslation } from '@arextest/arex-core';
+import { css, styled, TooltipButton, useTranslation } from '@arextest/arex-core';
 import { useRequest } from 'ahooks';
 import { App, Button, Input, Select, Space, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
@@ -46,7 +46,6 @@ const ExcludeOperation: FC<ExcludeOperationProps> = (props) => {
       title: t('appSetting.path'),
       dataIndex: 'key',
       key: 'key',
-      width: '50%',
       render: (text, record, i) => (
         <Input
           value={text}
@@ -59,7 +58,6 @@ const ExcludeOperation: FC<ExcludeOperationProps> = (props) => {
       title: t('appSetting.value'),
       dataIndex: 'value',
       key: 'value',
-      width: '50%',
       render: (text, record, i) => (
         <Select
           mode='tags'
@@ -72,21 +70,9 @@ const ExcludeOperation: FC<ExcludeOperationProps> = (props) => {
       ),
     },
     {
-      title: (
-        <Button
-          size='small'
-          icon={<PlusOutlined />}
-          onClick={() => {
-            setValue((state) => {
-              state.push({ id: '', key: '', value: [] });
-            });
-          }}
-        >
-          {t('add', { ns: 'common' })}
-        </Button>
-      ),
+      title: t('action', { ns: 'common' }),
       key: 'actions',
-      width: 72,
+      width: 80,
       align: 'center',
       className: 'actions',
       render: (text, record, i) => (
@@ -164,6 +150,26 @@ const ExcludeOperation: FC<ExcludeOperationProps> = (props) => {
         pagination={false}
         showHeader={true}
         columns={columns}
+        footer={() => (
+          <Button
+            block
+            type='text'
+            size='small'
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setValue((state) => {
+                state.push({ id: '', key: '', value: [] });
+              });
+            }}
+          >
+            {t('add', { ns: 'common' })}
+          </Button>
+        )}
+        css={css`
+          .ant-table-footer {
+            padding: 4px;
+          }
+        `}
       />
     </ExcludeOperationWrapper>
   );

diff --git a/packages/arex/src/panes/AppSetting/Replay/index.tsx b/packages/arex/src/panes/AppSetting/Replay/index.tsx
@@ -86,7 +86,32 @@ const SettingReplay: React.FC<SettingRecordProps> = ({ appId }) => {
 
         <Form.Item
           label={
-            <HelpTooltip title={t('appSetting.exclusionTooltip')}>
+            <HelpTooltip
+              maxWidth='360px'
+              title={
+                <>
+                  <div>{t('appSetting.skipMockTooltip')}</div>
+                  <div style={{ marginTop: '4px' }}>DB:</div>
+                  <div>
+                    {`Path: <DB dbName> `}
+                    <strong>demoDb</strong>
+                  </div>
+                  <div>
+                    {`Value: <Operation type> `}
+                    <strong>query,insert</strong>
+                  </div>
+                  <div style={{ marginTop: '4px' }}>Http client:</div>
+                  <div>
+                    {`Path: <Class fullName> `}
+                    <strong>com.company.demoClass</strong>
+                  </div>
+                  <div>
+                    {`Value: <Method Name> `}
+                    <strong>DemoMethod</strong>
+                  </div>
+                </>
+              }
+            >
               {t('appSetting.skipMock')}
             </HelpTooltip>
           }

diff --git a/packages/arex/vite.config.ts b/packages/arex/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig(async ({ mode }) => {
         // '@arextest/arex-core/dist': path.resolve('../arex-core/src'),
         // '@arextest/arex-core': path.resolve('../arex-core/src'),
         // '@arextest/arex-common': path.resolve('../arex-common/src'),
-        '@arextest/arex-request': path.resolve('../arex-request/src'),
+        // '@arextest/arex-request': path.resolve('../arex-request/src'),
       },
     },
     plugins: [