Skip to content

Commit 98b0977

Browse files
todtitodti
committed
split improvements and bugfixes
1 parent 9ab6fa6 commit 98b0977

File tree

16 files changed

+456
-51
lines changed

16 files changed

+456
-51
lines changed

‎packages/web-awesome/src/components/TestResult/TestResultHistory/TestResultHistoryItem.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
2-
import { IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
2+
import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
33
import { type FunctionalComponent } from "preact";
44
import { useState } from "preact/hooks";
55
import { ArrowButton } from "@/components/ArrowButton";
66
import { TestResultError } from "@/components/TestResult/TestResultError";
77
import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
8-
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
98
import { useI18n } from "@/stores";
109
import { navigateTo, openInNewTab } from "@/stores/router";
1110
import { timestampToDate } from "@/utils/time";
@@ -19,7 +18,7 @@ export const TestResultHistoryItem: FunctionalComponent<{
1918
const formattedDuration = formatDuration(duration as number);
2019
const { t } = useI18n("controls");
2120

22-
const navigateUrl = `/testresult/${id}`;
21+
const navigateUrl = `/${id}`;
2322

2423
return (
2524
<div>

‎packages/web-awesome/src/components/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { formatDuration } from "@allurereport/core-api";
2-
import { IconButton, Text, allureIcons } from "@allurereport/web-components";
2+
import { IconButton, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
33
import type { FunctionalComponent } from "preact";
44
import { useState } from "preact/hooks";
55
import type { AllureAwesomeTestResult } from "types";
66
import { ArrowButton } from "@/components/ArrowButton";
77
import { TestResultError } from "@/components/TestResult/TestResultError";
88
import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
9-
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
109
import { navigateTo } from "@/stores/router";
1110
import { timestampToDate } from "@/utils/time";
1211

‎packages/web-awesome/src/components/TestResult/TestResultStatus/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { TestStatus } from "@allurereport/core-api";
2-
import { Text } from "@allurereport/web-components";
2+
import { Text, TreeItemIcon } from "@allurereport/web-components";
33
import clsx from "clsx";
4-
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
54
import { useI18n } from "@/stores";
65
import { capitalize } from "@/utils/capitalize";
76
import * as styles from "./styles.scss";

‎packages/web-awesome/src/components/TestResult/TestResultSteps/testResultStep.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { DefaultTestStepResult } from "@allurereport/core-api";
2-
import { Code, Text, allureIcons } from "@allurereport/web-components";
2+
import { Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
33
import type { FunctionComponent } from "preact";
44
import { useState } from "preact/hooks";
55
import { ArrowButton } from "@/components/ArrowButton";
@@ -8,7 +8,6 @@ import { type MetadataItem } from "@/components/ReportMetadata";
88
import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
99
import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
1010
import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
11-
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
1211
import { collapsedTrees, toggleTree } from "@/stores/tree";
1312

1413
export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {

‎packages/web-awesome/src/components/Tree/index.tsx

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
1+
import { Button, Loadable, PageLoader, Text, Tree } from "@allurereport/web-components";
22
import type { AllureAwesomeStatus } from "types";
33
import { useTabsContext } from "@/components/Tabs";
4-
import Tree from "@/components/Tree/Tree";
4+
import { statsStore } from "@/stores";
55
import { useI18n } from "@/stores/locale";
6-
import { clearTreeFilters, filteredTree, noTests, noTestsFound, treeStore } from "@/stores/tree";
6+
import { navigateTo } from "@/stores/router";
7+
import {
8+
clearTreeFilters,
9+
collapsedTrees,
10+
filteredTree,
11+
noTests,
12+
noTestsFound,
13+
toggleTree,
14+
treeFiltersStore,
15+
treeStore,
16+
} from "@/stores/tree";
717
import * as styles from "./styles.scss";
818

919
export const TreeList = () => {
@@ -47,7 +57,16 @@ export const TreeList = () => {
4757

4858
return (
4959
<div className={styles["tree-list"]}>
50-
<Tree tree={filteredTree.value} statusFilter={currentTab as AllureAwesomeStatus} root />
60+
<Tree
61+
collapsedTrees={collapsedTrees.value}
62+
toggleTree={toggleTree}
63+
treeFiltersStore={treeFiltersStore}
64+
navigateTo={navigateTo}
65+
statsStore={statsStore}
66+
tree={filteredTree.value}
67+
statusFilter={currentTab as AllureAwesomeStatus}
68+
root
69+
/>
5170
</div>
5271
);
5372
}}

‎packages/web-classic/src/components/Tree/TreeHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
3939
return (
4040
<Loadable
4141
source={statsStore}
42-
renderData={(stats) => {
42+
renderData={(stats: Statistic) => {
4343
const width = Math.floor(progress(statistic.total, stats.total) * (maxWidthTab - minWidthTab) + minWidthTab);
4444

4545
const treeHeaderBar = statistic

‎packages/web-components/global.d.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,97 @@
11
// import "@testing-library/jest-dom";
2+
import type {
3+
AttachmentTestStepResult,
4+
DefaultTreeGroup,
5+
HistoryTestResult,
6+
TestFixtureResult,
7+
TestResult,
8+
TestStatus,
9+
TestStepResult,
10+
TreeData,
11+
WithChildren,
12+
} from "@allurereport/core-api";
13+
14+
export type Allure2ReportOptions = {
15+
reportName?: string;
16+
reportLanguage?: string;
17+
createdAt: number;
18+
};
19+
20+
export type AllureAwesomeReportOptions = {
21+
reportName?: string;
22+
logo?: string;
23+
theme?: "light" | "dark";
24+
groupBy?: string[];
25+
reportLanguage?: "en" | "ru";
26+
createdAt: number;
27+
reportUuid: string;
28+
};
29+
30+
export type AllureAwesomeFixtureResult = Omit<
31+
TestFixtureResult,
32+
"testResultIds" | "start" | "stop" | "sourceMetadata" | "steps"
33+
> & {
34+
steps: AllureAwesomeTestStepResult[];
35+
};
36+
37+
export type AllureAwesomeStatus = TestStatus | "total";
38+
39+
export type AllureAwesomeTestStepResult = TestStepResult;
40+
41+
type AllureAwesomeBreadcrumbItem = string[] | string[][];
42+
43+
export type AllureAwesomeTestResult = Omit<
44+
TestResult,
45+
| "runSelector"
46+
| "sourceMetadata"
47+
| "expectedResult"
48+
| "expectedResultHtml"
49+
| "precondition"
50+
| "preconditionHtml"
51+
| "steps"
52+
> & {
53+
setup: AllureAwesomeFixtureResult[];
54+
teardown: AllureAwesomeFixtureResult[];
55+
steps: AllureAwesomeTestStepResult[];
56+
history: HistoryTestResult[];
57+
retries?: TestResult[];
58+
groupedLabels: Record<string, string[]>;
59+
attachments?: AttachmentTestStepResult[];
60+
breadcrumbs: AllureAwesomeBreadcrumbItem[];
61+
order?: number;
62+
groupOrder?: number;
63+
retry: boolean;
64+
time?: Record<string, string[]>;
65+
extra?: { severity: string };
66+
};
67+
68+
export type AllureAwesomeTreeLeaf = Pick<
69+
AllureAwesomeTestResult,
70+
"duration" | "name" | "start" | "status" | "groupOrder" | "flaky" | "retry"
71+
> & {
72+
nodeId: string;
73+
};
74+
75+
export type AllureAwesomeTreeGroup = WithChildren & DefaultTreeGroup & { nodeId: string };
76+
77+
export type AllureAwesomeTree = TreeData<AllureAwesomeTreeLeaf, AllureAwesomeTreeGroup>;
78+
79+
/**
80+
* Tree which contains tree leaves instead of their IDs and recursive trees structure instead of groups
81+
*/
82+
export type AllureAwesomeRecursiveTree = DefaultTreeGroup & {
83+
nodeId: string;
84+
leaves: AllureAwesomeTreeLeaf[];
85+
trees: AllureAwesomeRecursiveTree[];
86+
};
87+
88+
export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
89+
export type TreeDirection = "asc" | "desc";
90+
export type TreeFilters = "flaky" | "retry" | "new";
91+
export type TreeFiltersState = {
92+
query: string;
93+
status: AllureAwesomeStatus;
94+
filter: Record<TreeFilters, boolean>;
95+
sortBy: TreeSortBy;
96+
direction: TreeDirection;
97+
};

‎packages/web-components/src/components/ArrowButton/index.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { clsx } from "clsx";
2+
import type { FunctionalComponent } from "preact";
3+
import { SvgIcon, allureIcons } from "@/components/SvgIcon";
4+
import styles from "./styles.scss";
5+
6+
export interface ArrowButtonProps {
7+
isOpened?: boolean;
8+
iconSize?: "m" | "xs" | "s";
9+
buttonSize?: "m" | "xs" | "s";
10+
className?: string;
11+
icon?: string;
12+
}
13+
14+
export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
15+
isOpened,
16+
buttonSize = "m",
17+
iconSize = "xs",
18+
className,
19+
icon = allureIcons.lineArrowsChevronDown,
20+
...rest
21+
}) => {
22+
return (
23+
<button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])} {...rest}>
24+
<SvgIcon
25+
id={icon}
26+
size={iconSize}
27+
className={clsx(
28+
styles["arrow-button-icon"],
29+
isOpened && styles["arrow-button-icon--opened"],
30+
styles[`icon-size-${iconSize}`],
31+
className,
32+
)}
33+
/>
34+
</button>
35+
);
36+
};

‎packages/web-components/src/components/ArrowButton/styles.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.arrow-button {
2+
background: transparent;
3+
border: none;
4+
padding: 8px 4px;
5+
border-radius: 4px;
6+
cursor: pointer;
7+
color: var(--on-icon-secondary);
8+
9+
&:hover {
10+
background: var(--bg-control-flat-medium);
11+
color: var(--on-icon-primary);
12+
}
13+
}
14+
15+
.arrow-button-s {
16+
padding: 0 4px;
17+
}
18+
19+
.arrow-button-m {
20+
padding: 6px 6px;
21+
}
22+
23+
.icon-size-m {
24+
width: 15px;
25+
height: 15px;
26+
}
27+
28+
.arrow-button-icon {
29+
transform: rotate(-90deg);
30+
transition: transform 200ms;
31+
}
32+
33+
.arrow-button-icon--opened {
34+
transform: rotate(0);
35+
}

‎packages/web-awesome/src/components/Tree/Tree.tsx renamed to ‎packages/web-components/src/components/Tree/Tree.tsx

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
11
import type { Statistic } from "@allurereport/core-api";
22
import cx from "clsx";
3+
import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus, TreeFiltersState } from "global";
34
import type { FunctionComponent } from "preact";
45
import { useState } from "preact/hooks";
5-
import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus } from "types";
6-
import TreeItem from "@/components/Tree/TreeItem";
7-
import { route } from "@/stores/router";
8-
import { collapsedTrees, toggleTree } from "@/stores/tree";
9-
import TreeHeader from "./TreeHeader";
10-
import * as styles from "./styles.scss";
6+
import type { StoreSignalState } from "@/components/Loadable";
7+
import { TreeItem } from "@/components/Tree/TreeItem";
8+
import { TreeHeader } from "./TreeHeader";
9+
import styles from "./styles.scss";
1110

1211
interface TreeProps {
1312
statistic?: Statistic;
1413
tree: AllureAwesomeRecursiveTree;
1514
name?: string;
1615
root?: boolean;
1716
statusFilter?: AllureAwesomeStatus;
17+
collapsedTrees: Set<string>;
18+
toggleTree: (id: string) => void;
19+
navigateTo: (id: string) => void;
20+
routeId?: string;
21+
statsStore: StoreSignalState<Statistic>;
22+
treeFiltersStore: TreeFiltersState;
1823
}
1924

20-
const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
21-
const { id } = route.value;
22-
const isEarlyCollapsed = collapsedTrees.value.has(tree.nodeId);
25+
export const Tree: FunctionComponent<TreeProps> = ({
26+
tree,
27+
statusFilter,
28+
root,
29+
name,
30+
statistic,
31+
collapsedTrees,
32+
toggleTree,
33+
routeId,
34+
statsStore,
35+
navigateTo,
36+
treeFiltersStore,
37+
}) => {
38+
const isEarlyCollapsed = collapsedTrees.has(tree.nodeId as string);
2339
const haveFailedSteps = statistic === undefined || !!statistic?.failed || !!statistic?.broken;
2440
const [isOpened, setIsOpen] = useState(() => (isEarlyCollapsed ? !haveFailedSteps : haveFailedSteps));
2541

2642
const toggleTreeHeader = () => {
2743
setIsOpen(!isOpened);
28-
toggleTree(tree.nodeId);
44+
toggleTree(tree.nodeId as string);
2945
};
3046
const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
3147

@@ -48,6 +64,12 @@ const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, st
4864
tree={subTree}
4965
statistic={subTree.statistic}
5066
statusFilter={statusFilter}
67+
collapsedTrees={collapsedTrees}
68+
toggleTree={toggleTree}
69+
routeId={routeId}
70+
navigateTo={navigateTo}
71+
statsStore={statsStore}
72+
treeFiltersStore={treeFiltersStore}
5173
/>
5274
))}
5375
{tree?.leaves?.map?.((leaf) => (
@@ -57,9 +79,10 @@ const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, st
5779
id={leaf.nodeId}
5880
name={leaf.name}
5981
status={leaf.status}
60-
groupOrder={leaf.groupOrder}
82+
groupOrder={leaf.groupOrder as number}
6183
duration={leaf.duration}
62-
marked={leaf.nodeId === id}
84+
marked={leaf.nodeId === routeId}
85+
navigateTo={navigateTo}
6386
/>
6487
))}
6588
</div>
@@ -68,11 +91,16 @@ const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, st
6891
return (
6992
<div className={styles.tree}>
7093
{name && (
71-
<TreeHeader categoryTitle={name} isOpened={isOpened} toggleTree={toggleTreeHeader} statistic={statistic} />
94+
<TreeHeader
95+
treeFiltersStore={treeFiltersStore}
96+
statsStore={statsStore}
97+
categoryTitle={name}
98+
isOpened={isOpened}
99+
toggleTree={toggleTreeHeader}
100+
statistic={statistic}
101+
/>
72102
)}
73103
{treeContent}
74104
</div>
75105
);
76106
};
77-
78-
export default Tree;

0 commit comments

Comments
 (0)