refactor: remove collectionsFlatData & getPath (#681)

* refactor: remove collectionsFlatData & getPath * refactor: tree drag&drop * fix: reload collection after pinMock * refactor: adjusting the structure of Collection back to full-loading --------- Co-authored-by: onePone <[email protected]>
arextest · Jun 26, 2024 · f4a122e · f4a122e
1 parent b1e3bd4
commit f4a122e
Show file tree

Hide file tree

Showing 29 changed files with 506 additions and 632 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.22",
+  "version": "0.6.23",
   "description": "",
   "homepage": "https://github.com/arextest/arex",
   "main": "index.js",

diff --git a/packages/arex-core/src/components/StructuredFilter/index.tsx b/packages/arex-core/src/components/StructuredFilter/index.tsx
@@ -44,6 +44,7 @@ export type StructuredFilterProps = {
 } & Omit<SelectProps, 'options' | 'onSearch'>;
 
 export type StructuredFilterRef = {
+  focus: () => void;
   clear: () => void;
 };
 
@@ -91,6 +92,9 @@ const StructuredFilter = forwardRef<StructuredFilterRef, StructuredFilterProps>(
   useImperativeHandle(
     ref,
     () => ({
+      focus: () => {
+        selectRef.current?.focus();
+      },
       clear: () => {
         setKeyword('');
         setFilterData([]);

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

diff --git a/packages/arex/src/components/CollectionSelect/CollectionNodeTitle.tsx b/packages/arex/src/components/CollectionSelect/CollectionNodeTitle.tsx
@@ -13,8 +13,8 @@ import {
   useTranslation,
 } from '@arextest/arex-core';
 import { useRequest } from 'ahooks';
-import { App, Button, Dropdown, Input, MenuProps, Space, theme } from 'antd';
-import React, { FC, ReactNode, useMemo, useState } from 'react';
+import { App, Button, Dropdown, Input, InputRef, MenuProps, Space, theme } from 'antd';
+import React, { FC, ReactNode, useMemo, useRef, useState } from 'react';
 
 import { CollectionNodeType, EMAIL_KEY, PanesType } from '@/constant';
 import { useNavPane } from '@/hooks';
@@ -61,6 +61,7 @@ export type CollectionNodeTitleProps = {
   data: CollectionType;
   keyword?: string;
   readOnly?: boolean;
+  pos?: number[] | string[];
   selectable?: CollectionNodeType[];
   onAddNode?: (info: string, nodeType: CollectionNodeType) => void;
 };
@@ -70,8 +71,13 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
     selectable = [CollectionNodeType.folder, CollectionNodeType.interface, CollectionNodeType.case],
   } = props;
   const { activeWorkspaceId } = useWorkspaces();
-  const { addCollectionNode, renameCollectionNode, removeCollectionNode, duplicateCollectionNode } =
-    useCollections();
+  const {
+    getPathByIndexOrPath,
+    addCollectionNode,
+    renameCollectionNode,
+    removeCollectionNode,
+    duplicateCollectionNode,
+  } = useCollections();
   const { removePane } = useMenusPanes();
 
   const { modal } = App.useApp();
@@ -82,31 +88,33 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
 
   const userName = getLocalStorage<string>(EMAIL_KEY) as string;
 
+  const editInputRef = useRef<InputRef>(null);
+
   const [editMode, setEditMode] = useState(false);
   const [nodeName, setNodeName] = useState(props.data.nodeName);
 
+  const path = useMemo(() => getPathByIndexOrPath(props.pos), [props.pos]);
+
   const { run: addCollectionItem } = useRequest(
     (params: { nodeName: string; nodeType: CollectionNodeType; caseSourceType?: number }) =>
       FileSystemService.addCollectionItem({
         ...params,
         userName,
         id: activeWorkspaceId,
-        parentInfoId: props.data.infoId,
-        parentNodeType: props.data.nodeType,
+        parentPath: path,
       }),
     {
       manual: true,
       onSuccess: async (res, [{ caseSourceType, nodeName, nodeType }]) => {
         // case inherit interface
         if (caseSourceType === CaseSourceType.CASE)
           await createCaseInheritInterface(props.data.infoId, res.infoId);
-
         addCollectionNode({
           infoId: res.infoId,
           nodeName,
           nodeType,
-          parentId: props.data.infoId,
           caseSourceType,
+          pathOrIndex: props.pos || [],
         });
         props.onAddNode?.(res.infoId, nodeType);
       },
@@ -117,13 +125,12 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
     () =>
       FileSystemService.duplicateCollectionItem({
         id: activeWorkspaceId,
-        infoId: props.data.infoId,
-        nodeType: props.data.nodeType,
+        path,
       }),
     {
       manual: true,
       onSuccess: (res) => {
-        duplicateCollectionNode(props.data.infoId, res.infoId);
+        duplicateCollectionNode(props.pos || [], res.infoId);
       },
     },
   );
@@ -132,16 +139,15 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
     () =>
       FileSystemService.renameCollectionItem({
         id: activeWorkspaceId,
-        infoId: props.data.infoId,
-        nodeType: props.data.nodeType,
         newName: nodeName,
+        path,
       }),
     {
       manual: true,
       onSuccess(success) {
         if (success) {
           setEditMode(false);
-          renameCollectionNode(props.data.infoId, nodeName);
+          renameCollectionNode(props.pos || [], nodeName);
         }
       },
     },
@@ -154,7 +160,7 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
         const id = `${activeWorkspaceId}-${props.data.nodeType}-${props.data.infoId}`;
         const paneKey = encodePaneKey({ id, type: PanesType.REQUEST });
         removePane(paneKey);
-        removeCollectionNode(props.data.infoId);
+        removeCollectionNode(props.pos || []);
       }
     },
   });
@@ -261,7 +267,14 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
         {
           key: 'rename',
           label: (
-            <a onClick={() => setEditMode(true)}>{t('collection.rename', { ns: 'components' })}</a>
+            <a
+              onClick={() => {
+                setEditMode(true);
+                setTimeout(() => editInputRef?.current?.focus());
+              }}
+            >
+              {t('collection.rename', { ns: 'components' })}
+            </a>
           ),
         },
         {
@@ -287,8 +300,7 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
                   onOk: () =>
                     removeCollectionItem({
                       id: activeWorkspaceId,
-                      infoId: props.data.infoId,
-                      nodeType: props.data.nodeType,
+                      removeNodePath: path,
                     }),
                 });
               }}
@@ -339,6 +351,7 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
           {editMode ? (
             <Space style={{ display: 'flex' }}>
               <Input
+                ref={editInputRef}
                 value={nodeName}
                 onPressEnter={rename}
                 onChange={(e) => setNodeName(e.currentTarget.value)}
@@ -365,8 +378,12 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
             <Button
               type='text'
               size='small'
-              icon={<MoreOutlined style={{ fontSize: '14px' }} />}
-              onClick={(e) => e.stopPropagation()}
+              className='node-menu'
+              icon={<MoreOutlined className='node-menu-icon' style={{ fontSize: '14px' }} />}
+              onClick={(e) => {
+                // e.stopPropagation();
+                // 此处传递冒泡，在Tree onSelect 事件中会阻止冒泡，目的为了更新点击节点的 pos
+              }}
             />
           </Dropdown>
         </div>

diff --git a/packages/arex/src/components/CollectionSelect/CollectionSearchedList.tsx b/packages/arex/src/components/CollectionSelect/CollectionSearchedList.tsx
@@ -8,20 +8,20 @@ import {
 } from '@arextest/arex-core';
 import { useRequest } from 'ahooks';
 import { Menu, MenuProps, theme } from 'antd';
-import { DirectoryTreeProps } from 'antd/lib/tree';
 import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { CollectionTreeType } from '@/components/CollectionSelect/index';
 import { CollectionNodeType } from '@/constant';
 import { FileSystemService } from '@/services';
 import { CollectionType } from '@/services/FileSystemService';
+import { useCollections } from '@/store';
 import { CaseSourceType } from '@/store/useCollections';
 
 export type CollectionSearchedListProps = {
   height?: number;
   workspaceId: string;
   searchValue?: SearchDataType;
-  onSelect?: DirectoryTreeProps<CollectionTreeType>['onSelect'];
+  onSelect?: (id: string, node: CollectionTreeType) => void;
 };
 
 export type CollectionSearchedListRef = {
@@ -32,6 +32,8 @@ const CollectionSearchedList = forwardRef<CollectionSearchedListRef, CollectionS
   (props, ref) => {
     const { token } = theme.useToken();
 
+    const { setExpandedKeys } = useCollections();
+
     const {
       data,
       loading,
@@ -63,7 +65,7 @@ const CollectionSearchedList = forwardRef<CollectionSearchedListRef, CollectionS
       [],
     );
 
-    const handleSelect: MenuProps['onClick'] = ({ key }) => {
+    const handleSelect: MenuProps['onClick'] = async ({ key }) => {
       const [nodeType, id] = key.split('-');
 
       let nodes: CollectionType[] | undefined = [];
@@ -75,9 +77,16 @@ const CollectionSearchedList = forwardRef<CollectionSearchedListRef, CollectionS
         nodes = data?.caseNodes;
       }
       const node = nodes?.find((item) => item.infoId === id);
+      if (!node) return;
+
+      const pathInfo = await FileSystemService.queryPathInfo({
+        infoId: node.infoId,
+        nodeType: node.nodeType,
+      });
 
+      setExpandedKeys(pathInfo.map((item) => item.id));
       // @ts-ignore
-      node && props.onSelect?.([id], { node });
+      node && props.onSelect?.(id, { ...node, pathInfo });
     };
 
     return (