diff --git a/package.json b/package.json index f2f70534..be13e295 100644 --- 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 index 422448cd..4a8be62a 100644 --- 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 index 3972b7d5..f76f7467 100644 --- 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 index 70c016bc..a7487385 100644 --- 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['onSelect']; }; -const CollectionSearchedList = (props: CollectionSearchedListProps) => { - const { token } = theme.useToken(); +export type CollectionSearchedListRef = { + search: () => void; +}; + +const CollectionSearchedList = forwardRef( + (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 ( - - ['items']) - .concat(data?.folderNodes.length ? [{ type: 'divider' }] : []) - .concat( - data?.folderNodes.map((item) => ({ - key: `${CollectionNodeType.folder}-${item.infoId}`, - label: ( - <> - {} - {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; - } - `} - /> - - ); -}; + // @ts-ignore + node && props.onSelect?.([id], { node }); + }; + + return ( + + ['items']) + .concat(data?.folderNodes.length ? [{ type: 'divider' }] : []) + .concat( + data?.folderNodes.map((item) => ({ + key: `${CollectionNodeType.folder}-${item.infoId}`, + label: ( + <> + {} + {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; + } + `} + /> + + ); + }, +); export default CollectionSearchedList; diff --git a/packages/arex/src/components/CollectionSelect/index.tsx b/packages/arex/src/components/CollectionSelect/index.tsx index ffd08e51..efaa930b 100644 --- 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 = (props) => { } = useCollections(); const searchRef = useRef(null); + const collectionSearchedListRef = useRef(null); const treeRef = useRef<{ scrollTo: (params: { key: string | number; @@ -292,8 +295,9 @@ const CollectionSelect: FC = (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 = (props) => { {searching ? ( = (props) => { icon={} 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 index fca64124..21b72a57 100644 --- 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 = (props) => { { key: 'environment', extra: ( - onDelete()} danger> + ), label: ( <> diff --git a/packages/arex/src/store/useCollections.ts b/packages/arex/src/store/useCollections.ts index 6275714d..9e820086 100644 --- a/packages/arex/src/store/useCollections.ts +++ b/packages/arex/src/store/useCollections.ts @@ -238,6 +238,9 @@ const useCollections = create( if (merge) { if (infoId) { + const path = getPathInFlatArray(infoId, treeToMap(generateRootNode(mergedData))).map( + (item) => item.id, + ); // mergedData = mergeTreeData( // treeData, // mergedData, @@ -245,6 +248,8 @@ const useCollections = create( // (item) => item.id, // ), // ); + get().setLoadedKeys(path); + get().setExpandedKeys(path); } else if (parentIds?.length) { const parentId = parentIds[parentIds.length - 1]; mergedData = appendChildrenByParent(