Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fixed the problem of directory hiding in test case page and test plan page #161

Closed
wants to merge 1 commit into from
Closed

fix: Fixed the problem of directory hiding in test case page and test plan page #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 41 additions & 33 deletions shell/app/modules/project/pages/test-manage/components/case-tree/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const { DirectoryTree, TreeNode } = Tree;
interface IActionItem {
key: string;
name: string;
onclick: (prop: any)=>void;
onclick: (prop: any) => void;
}
interface IProps {
mode: TEST_CASE.PageScope
Expand All @@ -59,7 +59,7 @@ interface ITree {
testSetID: number
}

const mergeTree = (source: IExpandTree[], child:IExpandTree) => {
const mergeTree = (source: IExpandTree[], child: IExpandTree) => {
const curItem = source.find(item => item.id === child.id);
if (!curItem) {
source.push(child);
Expand Down Expand Up @@ -102,21 +102,20 @@ const TestSet = ({
const projectInfo = projectStore.useStore(s => s.info);
const { getCases } = testCaseStore.effects;
const { triggerChoosenAll: resetChoosenAll } = testCaseStore.reducers;
const isAddNodeFromOuterRef = React.useRef(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

define ref type


const testSet:{[k in TEST_CASE.PageScope]: any} = {
const testSet: { [k in TEST_CASE.PageScope]: any } = {
testCase: projectTestSet,
testPlan: projectTestSet,
caseModal: modalTestSet,
temp: tempTestSet,
};
const setRef = React.useRef(testSet);
const currentTestSet: TEST_SET.TestSet[] = React.useMemo(() => setRef.current[mode], [setRef, mode]);
const currentTestSet: TEST_SET.TestSet[] = testSet[mode];

useMount(() => {
getProjectTestSets({ testPlanID, mode, recycled: false, parentID: rootId, forceUpdate: true });
});


const loadTreeNode = (arr: string[], isInRecycleBin = false) => {
arr.reduce(async (prev, curr) => {
await prev;
Expand All @@ -137,6 +136,7 @@ const TestSet = ({
newNode,
...(parent.children || []),
];
isAddNodeFromOuterRef.current = true;
setTreeData([...treeData]);
};
const reloadLoadData = (id: number, eventKey: string, recycled: boolean) => {
Expand All @@ -147,7 +147,7 @@ const TestSet = ({
}
};

const updateTree = (tree: IExpandTree[], data:ITree[], newTreeData: TEST_SET.TestSetNode[]) => {
const updateTree = (tree: IExpandTree[], data: ITree[], newTreeData: TEST_SET.TestSetNode[]) => {
tree.forEach(({ id, children }) => {
const newTree = data.find(item => item.testSetID === id);
if (!isEmpty(newTree)) {
Expand All @@ -167,10 +167,10 @@ const TestSet = ({
});
};

const [expandTree, expandIds] = React.useMemo<[IExpandTree[], Array<{id: number, key: string; pKey: string}>]>(() => {
const [expandTree, expandIds] = React.useMemo<[IExpandTree[], Array<{ id: number, key: string; pKey: string }>]>(() => {
const result: IExpandTree[] = [];
// 展开节点ID，需去重，防止一个节点请求多次
const temp: Array<{id: number, key: string, pKey: string}> = [];
const temp: Array<{ id: number, key: string, pKey: string }> = [];
// 最深层级路径
const deepestPath: string[] = [];
const keys = [...expandedKeys];
Expand Down Expand Up @@ -210,14 +210,14 @@ const TestSet = ({
} else {
let newActiveKey = rootKey;
let tempIndex = 0;
const promiseArr: Array<PromiseLike<{testSetID: number; key: string;pKey: string; list: TEST_SET.TestSet[]}>> = [];
const promiseArr: Array<PromiseLike<{ testSetID: number; key: string; pKey: string; list: TEST_SET.TestSet[] }>> = [];
expandIds.forEach(({ id, key, pKey }) => {
promiseArr.push(getTestSetChildren({ testPlanID, recycled: false, parentID: id, mode }).then(res => ({ testSetID: id, key, pKey, list: res || [] })));
});
// 请求所有展开的节点
Promise.all(promiseArr).then(data => {
const activeKeys = activeKey.split('-');
const trees:ITree[] = [];
const trees: ITree[] = [];
data.forEach(({ list, key, pKey, testSetID }) => {
const targetIndex = activeKeys.findIndex(t => t === `${testSetID}`);
if (targetIndex !== -1 && !!list.length) {
Expand Down Expand Up @@ -264,35 +264,42 @@ const TestSet = ({
// onSelect([rootKey]);
firstBuild.current = false;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [treeData, query.caseId]);

useEffect(() => {
if (activeOuter) {
onAddNode(rootKey);
clearActiveOuter();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can u remove these lint disable line?

}, [activeOuter]);

useEffect(() => {
const normalNodes: TEST_SET.TestSetNode[] = currentTestSet.map(({ id, name, recycled, parentID }: any) => ({ title: name, key: `${rootKey}-${id}`, id, recycled, parentID, isLeaf: false }));
const nextActiveKey = firstBuild.current && query.eventKey && needActiveKey ? query.eventKey : rootKey;
setActiveKey(nextActiveKey);
setExpandedKeys([rootKey]);
setTreeData([
{
title: projectInfo.name,
key: rootKey,
id: rootId,
iconType: 'project',
iconClass: 'color-info',
parentID: rootId,
isLeaf: false,
recycled: false,
children: needRecycled ? normalNodes.concat([{ ...recycledRoot }]) : normalNodes,
},
]);

// prevent setTreeData while execute addNodeFromOuter
if (!isAddNodeFromOuterRef.current) {
setTreeData([
{
title: projectInfo.name,
key: rootKey,
id: rootId,
iconType: 'project',
iconClass: 'color-info',
parentID: rootId,
isLeaf: false,
recycled: false,
children: needRecycled ? normalNodes.concat([{ ...recycledRoot }]) : normalNodes,
},
]);
}

// reset isAddNodeFromOuterRef to false
isAddNodeFromOuterRef.current = false;

if (needBreadcrumb) {
updateBreadcrumb({
Expand All @@ -301,10 +308,11 @@ const TestSet = ({
testPlanID,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTestSet, projectInfo]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTestSet, projectInfo, isAddNodeFromOuterRef]);

useEffect(() => {
const expandId:string[] = (query.eventKey || '').split('-');
const expandId: string[] = (query.eventKey || '').split('-');
// 是否为回收站内的case
const isInRecycleBin = expandId.includes('recycled');
// 测试计划测试用例需要打开分享链接
Expand All @@ -329,7 +337,7 @@ const TestSet = ({
loadTreeNode(eventKeys.splice(1), isInRecycleBin);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [treeData, query.caseId, query.eventKey, mode, query.testSetID, getCases, testPlanID]);

// 复制/移动/引入测试集
Expand All @@ -354,7 +362,7 @@ const TestSet = ({
onRemoveNode(currentNode.key);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [reloadTestSetInfo]);

const renderTreeNodes = (data: any[]) => data.map((item) => {
Expand Down Expand Up @@ -618,8 +626,8 @@ const TestSet = ({
});
updateSearch({ pageNo: 1, recycled, testSetID, eventKey });

// 页面刚刚进来时保持当前 query 不进行更新
if (!_extra.keepCurrentSearch) {
// 页面刚刚进来时保持当前 query 不进行更新
if (!_extra.keepCurrentSearch) {
updateSearch({ pageNo: 1, recycled, testSetID, eventKey });
}

Expand Down