feat: category dropdown menu

arextest · Nov 12, 2024 · d98284e · d98284e
1 parent 94fc93b
commit d98284e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 66 deletions.
diff --git a/packages/arex/src/i18n/locales/cn/components.json b/packages/arex/src/i18n/locales/cn/components.json
@@ -288,7 +288,7 @@
     "caseTags": "标签",
     "caseloaded": "Case 加载完成",
     "cases": "case 数",
-    "compareConfigSuccess": "操作成功！新配置将在下次回放时生效。",
+    "compareConfigSuccess": "配置成功！新配置将在下次回放时生效。",
     "confirmAbortCase": "确定终止该任务?",
     "confirmDeleteReport": "确定删除该报告?",
     "confirmTerminateReplay": "确定终止该回放?",

diff --git a/packages/arex/src/i18n/locales/en/components.json b/packages/arex/src/i18n/locales/en/components.json
@@ -289,7 +289,7 @@
     "caseTags": "Tags",
     "caseloaded": "caseloaded",
     "cases": "Cases",
-    "compareConfigSuccess": "Operation successful! The configuration takes effect on the next replay.",
+    "compareConfigSuccess": "Configuration successful! It takes effect on the next replay。",
     "confirmAbortCase": "Are you sure to abort this case?",
     "confirmDeleteReport": "Are you sure to delete this report?",
     "confirmTerminateReplay": "Are you sure to terminate this replay?",

diff --git a/packages/arex/src/panes/ReplayCase/CaseDiff/index.tsx b/packages/arex/src/panes/ReplayCase/CaseDiff/index.tsx
@@ -1,17 +1,7 @@
-import {
-  css,
-  EllipsisTooltip,
-  EmptyWrapper,
-  HoveredActionButton,
-  SceneCode,
-  useTranslation,
-} from '@arextest/arex-core';
-import { useRequest } from 'ahooks';
-import { App, Button, Collapse, CollapseProps, Flex, Tooltip, Typography } from 'antd';
+import { css, EllipsisTooltip, EmptyWrapper, SceneCode, useTranslation } from '@arextest/arex-core';
+import { Collapse, CollapseProps, Flex, Tooltip, Typography } from 'antd';
 import React, { FC, useMemo, useState } from 'react';
 
-import { ComparisonService } from '@/services';
-import { IgnoreCategory } from '@/services/ComparisonService';
 import { InfoItem } from '@/services/ReportService';
 
 import CaseDiffTooltip, { DiffPathTooltipProps } from './CaseDiffTooltip';
@@ -40,7 +30,6 @@ const CaseDiff: FC<DiffPathProps> = (props) => {
     ...restProps
   } = props;
 
-  const { message } = App.useApp();
   const { t } = useTranslation('components');
 
   const [onlyFailed, setOnlyFailed] = useState(defaultOnlyFailed);
@@ -59,24 +48,6 @@ const CaseDiff: FC<DiffPathProps> = (props) => {
     });
   }, [data, onlyFailed, searchOperationName]);
 
-  const { run: insertIgnoreCategory } = useRequest(
-    (ignoreCategoryDetail: IgnoreCategory) =>
-      ComparisonService.insertIgnoreCategory({
-        appId: props.appId!,
-        operationId: props.operationId,
-        ignoreCategoryDetail,
-      }),
-    {
-      manual: true,
-      ready: !!props.appId,
-      onSuccess(success) {
-        if (success) {
-          message.success(t('message.updateSuccess', { ns: 'common' }));
-        } else message.error(t('message.updateFailed', { ns: 'common' }));
-      },
-    },
-  );
-
   const items = useMemo<CollapseProps['items']>(
     () =>
       diffListFiltered.map((data) => ({
@@ -96,35 +67,17 @@ const CaseDiff: FC<DiffPathProps> = (props) => {
                   </Typography.Text>
                 </Tooltip>
               ) : (
-                <HoveredActionButton
-                  hoveredNode={
-                    <Button
-                      type='text'
-                      size='small'
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        insertIgnoreCategory({
-                          operationType: data.categoryName,
-                          operationName: data.operationName,
-                        });
-                      }}
-                    >
-                      {t('replayCase.ignore')}
-                    </Button>
-                  }
-                >
-                  <Typography.Text strong type='secondary'>
-                    {`[${data.categoryName}]`}
-                  </Typography.Text>
-                </HoveredActionButton>
+                <Typography.Text strong type='secondary'>
+                  {`[${data.categoryName}]`}
+                </Typography.Text>
               )}
             </div>
           </Flex>
         ),
         extra: itemsExtraRender?.(data),
         children: <CaseDiffViewer {...restProps} defaultActiveFirst data={data} height='400px' />,
       })),
-    [diffListFiltered, insertIgnoreCategory, itemsExtraRender, restProps],
+    [diffListFiltered, itemsExtraRender, restProps],
   );
 
   return (

diff --git a/packages/arex/src/panes/ReplayCase/ReplayCase.tsx b/packages/arex/src/panes/ReplayCase/ReplayCase.tsx
@@ -13,7 +13,7 @@ import {
 } from '@arextest/arex-core';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { useRequest } from 'ahooks';
-import { App } from 'antd';
+import { App, Button, Dropdown } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useState } from 'react';
 
@@ -23,7 +23,7 @@ import CompareConfig from '@/panes/AppSetting/CompareConfig';
 import CaseDiff from '@/panes/ReplayCase/CaseDiff';
 import { IgnoreType } from '@/panes/ReplayCase/CaseDiff/CaseDiffViewer';
 import { ComparisonService, ReportService, ScheduleService } from '@/services';
-import { DependencyParams, ExpirationType } from '@/services/ComparisonService';
+import { DependencyParams, ExpirationType, IgnoreCategory } from '@/services/ComparisonService';
 import { InfoItem, PlanItemStatistic, ReplayCaseType } from '@/services/ReportService';
 import { useMenusPanes } from '@/store';
 import { decodePaneKey } from '@/store/useMenusPanes';
@@ -142,6 +142,24 @@ const ReplayCasePage: ArexPaneFC<{ filter?: number } | undefined> = (props) => {
     },
   );
 
+  const { run: insertIgnoreCategory } = useRequest(
+    (ignoreCategoryDetail: IgnoreCategory) =>
+      ComparisonService.insertIgnoreCategory({
+        appId: planItemData!.appId,
+        operationId: planItemData!.operationId,
+        ignoreCategoryDetail,
+      }),
+    {
+      manual: true,
+      ready: !!planItemData?.appId && !!planItemData?.operationId,
+      onSuccess(success) {
+        if (success) {
+          message.success(t('components:replay.compareConfigSuccess'));
+        } else message.error(t('message.updateFailed', { ns: 'common' }));
+      },
+    },
+  );
+
   function handleClickCompareConfigSetting(data?: InfoItem) {
     setSelectedDependency(data);
     setCompareConfigOpen(true);
@@ -208,15 +226,51 @@ const ReplayCasePage: ArexPaneFC<{ filter?: number } | undefined> = (props) => {
                   />
                 }
                 itemsExtraRender={(data) => (
-                  <TooltipButton
-                    icon={<SettingOutlined />}
-                    title={t('appSetting.compareConfig')}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleClickCompareConfigSetting(data);
-                    }}
-                    style={{ marginRight: '6px' }}
-                  />
+                  <div style={{ marginRight: '6px' }}>
+                    {data.isEntry ? (
+                      <TooltipButton
+                        icon={<SettingOutlined />}
+                        title={t('appSetting.compareConfig')}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleClickCompareConfigSetting(data);
+                        }}
+                      />
+                    ) : (
+                      <Dropdown
+                        menu={{
+                          items: [
+                            {
+                              label: <span>{t('components:appSetting.categoryIgnore')}</span>,
+                              key: 'categoryIgnore',
+                              onClick: (menuInfo) => {
+                                menuInfo.domEvent.stopPropagation();
+                                insertIgnoreCategory({
+                                  operationType: data.categoryName,
+                                  operationName: data.operationName,
+                                });
+                              },
+                            },
+                            {
+                              label: <span>{t('components:appSetting.compareConfig')}</span>,
+                              key: 'ignore',
+                              onClick: (menuInfo) => {
+                                menuInfo.domEvent.stopPropagation();
+                                handleClickCompareConfigSetting(data);
+                              },
+                            },
+                          ],
+                        }}
+                      >
+                        <Button
+                          size='small'
+                          type='text'
+                          icon={<SettingOutlined />}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </Dropdown>
+                    )}
+                  </div>
                 )}
                 onChange={setSelectedDependency}
                 onIgnoreKey={insertIgnoreNode}