Fix bug 0329 (#650)

* fix: filter nodePath * fix: reset loadedKeys and expandedKeys when getCollectionItemTree * fix: collection search deps search value * fix: delete button style * chore: update arex version * chore: update arex-core version --------- Co-authored-by: onePone <[email protected]>
arextest · Mar 29, 2024 · 495f33a · 495f33a
1 parent 506e9e2
commit 495f33a
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.19",
+  "version": "0.6.20",
   "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.4.5",
+  "version": "0.4.6",
   "homepage": "https://github.com/arextest/arex",
   "main": "dist/arex-core.js",
   "module": "dist/arex-core.js",

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

diff --git a/packages/arex/src/components/CollectionSelect/CollectionSearchedList.tsx b/packages/arex/src/components/CollectionSelect/CollectionSearchedList.tsx
@@ -9,7 +9,7 @@ import {
 import { useRequest } from 'ahooks';
 import { Menu, MenuProps, theme } from 'antd';
 import { DirectoryTreeProps } from 'antd/lib/tree';
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { CollectionTreeType } from '@/components/CollectionSelect/index';
 import { CollectionNodeType } from '@/constant';
@@ -24,108 +24,124 @@ export type CollectionSearchedListProps = {
   onSelect?: DirectoryTreeProps<CollectionTreeType>['onSelect'];
 };
 
-const CollectionSearchedList = (props: CollectionSearchedListProps) => {
-  const { token } = theme.useToken();
+export type CollectionSearchedListRef = {
+  search: () => void;
+};
+
+const CollectionSearchedList = forwardRef<CollectionSearchedListRef, CollectionSearchedListProps>(
+  (props, ref) => {
+    const { token } = theme.useToken();
+
+    const {
+      data,
+      loading,
+      run: search,
+    } = useRequest(
+      () =>
+        FileSystemService.searchCollectionItems({
+          workspaceId: props.workspaceId,
+          pageSize: 10,
+          keywords: props.searchValue?.keyword?.trim(),
+          labels: props.searchValue?.structuredValue?.map((item) => ({
+            key: item.category!,
+            operator: item.operator as OperatorType,
+            value: item.value!,
+          })),
+        }),
+      {
+        debounceWait: 300,
+        ready: !!props.searchValue,
+        refreshDeps: [props.searchValue],
+      },
+    );
 
-  const {
-    data,
-    loading,
-    run: search,
-  } = useRequest(
-    () =>
-      FileSystemService.searchCollectionItems({
-        workspaceId: props.workspaceId,
-        pageSize: 10,
-        keywords: props.searchValue?.keyword?.trim(),
-        labels: props.searchValue?.structuredValue?.map((item) => ({
-          key: item.category!,
-          operator: item.operator as OperatorType,
-          value: item.value!,
-        })),
+    useImperativeHandle(
+      ref,
+      () => ({
+        search,
       }),
-    {
-      debounceWait: 300,
-      ready: !!props.searchValue,
-    },
-  );
-  const handleSelect: MenuProps['onClick'] = ({ key }) => {
-    const [nodeType, id] = key.split('-');
+      [],
+    );
 
-    let nodes: CollectionType[] | undefined = [];
-    if (parseInt(nodeType) === CollectionNodeType.folder) {
-      nodes = data?.folderNodes;
-    } else if (parseInt(nodeType) === CollectionNodeType.interface) {
-      nodes = data?.interfaceNodes;
-    } else if (parseInt(nodeType) === CollectionNodeType.case) {
-      nodes = data?.caseNodes;
-    }
-    const node = nodes?.find((item) => item.infoId === id);
+    const handleSelect: MenuProps['onClick'] = ({ key }) => {
+      const [nodeType, id] = key.split('-');
 
-    // @ts-ignore
-    node && props.onSelect?.([id], { node });
-  };
+      let nodes: CollectionType[] | undefined = [];
+      if (parseInt(nodeType) === CollectionNodeType.folder) {
+        nodes = data?.folderNodes;
+      } else if (parseInt(nodeType) === CollectionNodeType.interface) {
+        nodes = data?.interfaceNodes;
+      } else if (parseInt(nodeType) === CollectionNodeType.case) {
+        nodes = data?.caseNodes;
+      }
+      const node = nodes?.find((item) => item.infoId === id);
 
-  return (
-    <EmptyWrapper
-      loading={loading}
-      empty={!data?.folderNodes.length && !data?.interfaceNodes.length && !data?.caseNodes.length}
-    >
-      <Menu
-        items={([] as Required<MenuProps>['items'])
-          .concat(data?.folderNodes.length ? [{ type: 'divider' }] : [])
-          .concat(
-            data?.folderNodes.map((item) => ({
-              key: `${CollectionNodeType.folder}-${item.infoId}`,
-              label: (
-                <>
-                  {<FolderOutlined style={{ marginRight: token.marginXS }} />}
-                  {item.nodeName}
-                </>
-              ),
-            })) || [],
-          )
-          .concat(data?.interfaceNodes.length ? [{ type: 'divider' }] : [])
-          .concat(
-            data?.interfaceNodes.map((item) => ({
-              key: `${CollectionNodeType.interface}-${item.infoId}`,
-              label: (
-                <>
-                  {React.createElement(RequestMethodIcon[item.method || ''] || 'div')}
-                  {item.nodeName}
-                </>
-              ),
-            })) || [],
-          )
-          .concat(data?.caseNodes.length ? [{ type: 'divider' }] : [])
-          .concat(
-            data?.caseNodes.map((item) => ({
-              key: `${CollectionNodeType.case}-${item.infoId}`,
-              label: (
-                <>
-                  {React.createElement(
-                    RequestMethodIcon[
-                      item.caseSourceType === CaseSourceType.AREX ? 'arex' : 'case'
-                    ] || 'div',
-                  )}
-                  {item.nodeName}
-                </>
-              ),
-            })) || [],
-          )}
-        onClick={handleSelect}
-        css={css`
-          height: ${props.height ? `${props.height}px` : '100%'};
-          overflow-y: auto;
-          background-color: transparent;
-          border-inline-end: none !important;
-          .ant-menu-item {
-            height: 21px;
-            line-height: 21px;
-          }
-        `}
-      />
-    </EmptyWrapper>
-  );
-};
+      // @ts-ignore
+      node && props.onSelect?.([id], { node });
+    };
+
+    return (
+      <EmptyWrapper
+        loading={loading}
+        empty={!data?.folderNodes.length && !data?.interfaceNodes.length && !data?.caseNodes.length}
+      >
+        <Menu
+          items={([] as Required<MenuProps>['items'])
+            .concat(data?.folderNodes.length ? [{ type: 'divider' }] : [])
+            .concat(
+              data?.folderNodes.map((item) => ({
+                key: `${CollectionNodeType.folder}-${item.infoId}`,
+                label: (
+                  <>
+                    {<FolderOutlined style={{ marginRight: token.marginXS }} />}
+                    {item.nodeName}
+                  </>
+                ),
+              })) || [],
+            )
+            .concat(data?.interfaceNodes.length ? [{ type: 'divider' }] : [])
+            .concat(
+              data?.interfaceNodes.map((item) => ({
+                key: `${CollectionNodeType.interface}-${item.infoId}`,
+                label: (
+                  <>
+                    {React.createElement(RequestMethodIcon[item.method || ''] || 'div')}
+                    {item.nodeName}
+                  </>
+                ),
+              })) || [],
+            )
+            .concat(data?.caseNodes.length ? [{ type: 'divider' }] : [])
+            .concat(
+              data?.caseNodes.map((item) => ({
+                key: `${CollectionNodeType.case}-${item.infoId}`,
+                label: (
+                  <>
+                    {React.createElement(
+                      RequestMethodIcon[
+                        item.caseSourceType === CaseSourceType.AREX ? 'arex' : 'case'
+                      ] || 'div',
+                    )}
+                    {item.nodeName}
+                  </>
+                ),
+              })) || [],
+            )}
+          onClick={handleSelect}
+          css={css`
+            height: ${props.height ? `${props.height}px` : '100%'};
+            overflow-y: auto;
+            background-color: transparent;
+            border-inline-end: none !important;
+            .ant-menu-item {
+              height: 21px;
+              line-height: 21px;
+            }
+          `}
+        />
+      </EmptyWrapper>
+    );
+  },
+);
 
 export default CollectionSearchedList;
diff --git a/packages/arex/src/components/CollectionSelect/index.tsx b/packages/arex/src/components/CollectionSelect/index.tsx
@@ -20,7 +20,9 @@ import type { DataNode, DirectoryTreeProps } from 'antd/lib/tree';
 import { cloneDeep } from 'lodash';
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 
-import CollectionSearchedList from '@/components/CollectionSelect/CollectionSearchedList';
+import CollectionSearchedList, {
+  CollectionSearchedListRef,
+} from '@/components/CollectionSelect/CollectionSearchedList';
 import { CollectionNodeType, EMAIL_KEY } from '@/constant';
 import { FileSystemService, ReportService } from '@/services';
 import { CollectionType } from '@/services/FileSystemService';
@@ -68,6 +70,7 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
   } = useCollections();
 
   const searchRef = useRef<StructuredFilterRef>(null);
+  const collectionSearchedListRef = useRef<CollectionSearchedListRef>(null);
   const treeRef = useRef<{
     scrollTo: (params: {
       key: string | number;
@@ -292,8 +295,9 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
                 color: item.color,
               }))}
               options={options}
-              // placeholder={'Search for Name'}
+              placeholder={'Search for Name'}
               onChange={handleChange}
+              onSearch={collectionSearchedListRef.current?.search}
               onCancel={() => {
                 setSearchValue(undefined);
                 setShowSearchInput(false);
@@ -316,6 +320,7 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
         <ConfigProvider theme={{ token: { motion: false } }}>
           {searching ? (
             <CollectionSearchedList
+              ref={collectionSearchedListRef}
               height={props.height}
               workspaceId={activeWorkspaceId}
               searchValue={searchValue}

diff --git a/packages/arex/src/panes/AppSetting/CompareConfig/NodesTransform/index.tsx b/packages/arex/src/panes/AppSetting/CompareConfig/NodesTransform/index.tsx
@@ -220,7 +220,8 @@ const NodesTransform: FC<NodesTransformProps> = (props) => {
               icon={<Icon name='Crosshair' />}
               onClick={() => {
                 setTransformData((draft) => {
-                  draft[openIndex].transformDetail!.nodePath = nodePath?.split('/') || [];
+                  draft[openIndex].transformDetail!.nodePath =
+                    nodePath?.split('/').filter(Boolean) || [];
                 });
                 setOpenIndex(-1);
                 setNodePath(undefined);

diff --git a/packages/arex/src/panes/AppSetting/Record/MultiEnvironment/EnvironmentRecordSetting.tsx b/packages/arex/src/panes/AppSetting/Record/MultiEnvironment/EnvironmentRecordSetting.tsx
@@ -34,9 +34,9 @@ const EnvironmentRecordSetting: FC<EnvironmentRecordSettingProps> = (props) => {
           {
             key: 'environment',
             extra: (
-              <SmallTextButton onClick={() => onDelete()} danger>
+              <Button type='text' size='small' onClick={() => onDelete()} danger>
                 {t('delete', { ns: 'common' })}
-              </SmallTextButton>
+              </Button>
             ),
             label: (
               <>

diff --git a/packages/arex/src/store/useCollections.ts b/packages/arex/src/store/useCollections.ts
@@ -238,13 +238,18 @@ const useCollections = create(
 
           if (merge) {
             if (infoId) {
+              const path = getPathInFlatArray(infoId, treeToMap(generateRootNode(mergedData))).map(
+                (item) => item.id,
+              );
               // mergedData = mergeTreeData(
               //   treeData,
               //   mergedData,
               //   getPathInFlatArray(infoId, treeToMap(generateRootNode(mergedData))).map(
               //     (item) => item.id,
               //   ),
               // );
+              get().setLoadedKeys(path);
+              get().setExpandedKeys(path);
             } else if (parentIds?.length) {
               const parentId = parentIds[parentIds.length - 1];
               mergedData = appendChildrenByParent(