Skip to content

Commit

Permalink
split view
Browse files Browse the repository at this point in the history
  • Loading branch information
todti committed Feb 11, 2025
1 parent 8188230 commit caaf8b1
Show file tree
Hide file tree
Showing 23 changed files with 209 additions and 108 deletions.
2 changes: 1 addition & 1 deletion allurerc.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default defineConfig({
name: "Allure Report 3",
output: "./out/allure-report",
plugins: {
awesome: {
allure2: {
options: {
singleFile: true,
reportLanguage: "en",
Expand Down
86 changes: 29 additions & 57 deletions packages/web-awesome/src/components/BaseLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,91 +1,63 @@
import { ensureReportDataReady } from "@allurereport/web-commons";
import { Loadable, PageLoader } from "@allurereport/web-components";
import { Loadable, PageLoader, Text } from "@allurereport/web-components";
import type { JSX } from "preact";
import { useEffect } from "preact/compat";
import { useState } from "preact/hooks";
import { Footer } from "@/components/Footer";
import MainReport from "@/components/MainReport";
import Modal from "@/components/Modal";
import SideBySide from "@/components/SideBySide";
import TestResult from "@/components/TestResult";
import { fetchStats, getLocale, getTheme } from "@/stores";
import { fetchPieChartData } from "@/stores/chart";
import { fetchEnvInfo } from "@/stores/envInfo";
import { route } from "@/stores/router";
import { fetchTestResult, fetchTestResultNav, testResultStore } from "@/stores/testResults";
import { fetchTreeData, treeStore } from "@/stores/tree";
import { treeStore } from "@/stores/tree";
import * as styles from "./styles.scss";

export type BaseLayoutProps = {
testResultId?: string;
};

export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
useEffect(() => {
getTheme();
getLocale();
}, []);
export const BaseLayout = () => {
const { id: testResultId, params } = route.value;

useEffect(() => {
if (testResultId) {
fetchTestResult(testResultId);
fetchTestResultNav();
} else {
ensureReportDataReady();
fetchStats();
fetchPieChartData();
fetchTreeData();
fetchEnvInfo();
}
}, [testResultId]);

const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);

useEffect(() => {
if (!cachedMain) {
setCachedMain(
<div className={styles.wrapper}>
<Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
</div>,
);
}
}, [cachedMain]); // Устанавливаем `cachedMain` только один раз

const testResult = testResultId ? (
<Loadable
source={testResultStore}
renderLoader={() => <PageLoader />}
transformData={(data) => data[testResultId]}
renderData={(testResult) => (
renderData={(tr) => (
<>
<Modal testResult={testResult} />
<div className={styles.wrapper} key={testResult?.id}>
<TestResult testResult={testResult} />
<Footer />
<Modal testResult={tr} />
<div className={styles.wrapper}>
<TestResult testResult={tr} />
</div>
</>
)}
/>
) : (
<div>notest</div>
<div className={styles.empty}>
<Text>Here will be test result</Text>
</div>
);

const Main = () => (
<div className={styles.wrapper}>
<Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
return (
<div className={styles["side-by-side"]}>
<SideBySide left={cachedMain} right={testResult} />
<Footer />
</div>
);

// const content = testResultId ? (
// <Loadable
// source={testResultStore}
// renderLoader={() => <PageLoader />}
// transformData={(data) => data[testResultId]}
// renderData={(testResult) => (
// <>
// <Modal testResult={testResult} />
// <div className={styles.wrapper} key={testResult?.id}>
// <TestResult testResult={testResult} />
// <Footer />
// </div>
// </>
// )}
// />
// ) : (
// <div className={styles.wrapper}>
// <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
// <Footer />
// </div>
// );
return <SideBySide left={<Main />} right={testResult} />;

// {
/* return <div className={styles.layout}>{content}</div>;*/
// }
};
18 changes: 17 additions & 1 deletion packages/web-awesome/src/components/BaseLayout/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,27 @@
.below {
display: flex;
justify-content: space-between;
padding-top: 16px;
//padding-top: 16px;
align-items: center;
margin: auto;
width: 100%;
padding: 16px 8px;
}

.test-result-errors {
padding: 0 24px;
margin-top: 12px;
}

.side-by-side {
display: flex;
flex-direction: column;
height: 100vh;
}

.empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
2 changes: 1 addition & 1 deletion packages/web-awesome/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as styles from "./styles.scss";
export const Header = () => {
return (
<div className={styles.above}>
<div className={styles.right}>
<div className={styles.left}>
<LanguagePicker />
<ThemeButton />
</div>
Expand Down
7 changes: 7 additions & 0 deletions packages/web-awesome/src/components/Header/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@
top: -2px;
}

.left {
margin-right: auto;
display: flex;
gap: 12px;
align-items: center;
}

.right {
margin-left: auto;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/web-awesome/src/components/ReportBody/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-direction: column;
gap: 12px;
position: sticky;
top: 120px;
top: 0;
background: var(--bg-base-primary);
z-index: 1;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
justify-content: space-between;
padding: 24px;
align-items: flex-start;
position: sticky;
//position: sticky;
z-index: 1;
background: var(--bg-base-primary);
top: 0;
Expand Down
9 changes: 6 additions & 3 deletions packages/web-awesome/src/components/SideBySide/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ComponentChild, FunctionalComponent } from "preact";
import { useEffect, useRef } from "preact/hooks";
import { useEffect, useMemo, useRef } from "preact/hooks";
import Split from "split.js";
import * as styles from "./styles.scss";

Expand All @@ -11,6 +11,9 @@ interface SideBySideProps {
const SideBySide: FunctionalComponent<SideBySideProps> = ({ left, right }) => {
const containerRef = useRef<HTMLDivElement>(null);

const leftContent = useMemo(() => left, [left]);
const rightContent = useMemo(() => right, [right]);

useEffect(() => {
const sizes = JSON.parse(localStorage.getItem("sideBySidePosition") || "[50, 50]");

Expand Down Expand Up @@ -45,8 +48,8 @@ const SideBySide: FunctionalComponent<SideBySideProps> = ({ left, right }) => {

return (
<div class={styles.side} ref={containerRef}>
<div class={styles["side-left"]}>{left}</div>
<div class={styles["side-right"]}>{right}</div>
<div class={styles["side-left"]}>{leftContent}</div>
<div class={styles["side-right"]}>{rightContent}</div>
</div>
);
};
Expand Down
9 changes: 6 additions & 3 deletions packages/web-awesome/src/components/SideBySide/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,18 @@
max-width: 1920px;
margin: auto;
}
.wrapper {
//max-width: 920px;
width: 100%;
flex-direction: column;
margin: auto;
}

.side-left {
padding: 8px 0 8px 8px;
overflow: auto;
//flex: 0 0 auto;
}

.side-right {
overflow: auto;
flex: 1 1 auto;
padding: 8px 8px 8px 0;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { type FunctionalComponent } from "preact";
import { ArrowButton } from "@/components/ArrowButton";
import * as styles from "./styles.scss";
Expand All @@ -9,9 +11,10 @@ export const TestResultDropdown: FunctionalComponent<{
title: string;
icon: string;
counter: number;
}> = ({ isOpened, setIsOpen, title, icon, counter }) => {
className?: ClassValue;
}> = ({ isOpened, setIsOpen, title, icon, counter, className }) => {
return (
<div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
<div className={clsx(styles["test-result-dropdown"], className)} onClick={() => setIsOpen(!isOpened)}>
<ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
<div className={styles["test-result-dropdown-wrap"]}>
<SvgIcon id={icon} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { IconButton, allureIcons } from "@allurereport/web-components";
import { SvgIcon } from "@allurereport/web-components";
import { Text } from "@allurereport/web-components";
import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
import clsx from "clsx";
import type { FunctionalComponent } from "preact";
import type { AllureAwesomeTestResult } from "types";
import { LanguagePicker } from "@/components/LanguagePicker";
import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
import { navigateTo } from "@/index";
import { navigateTo } from "@/stores/router";
import * as styles from "./styles.scss";

export type TestResultHeaderProps = {
Expand Down Expand Up @@ -48,8 +46,8 @@ export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ t
</Text>
</div>
</div>
<LanguagePicker />
<ThemeButton />
{/* <LanguagePicker />*/}
{/* <ThemeButton />*/}
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { ArrowButton } from "@/components/ArrowButton";
import { TestResultError } from "@/components/TestResult/TestResultError";
import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
import { navigateTo, openInNewTab } from "@/index";
import { useI18n } from "@/stores";
import { navigateTo, openInNewTab } from "@/stores/router";
import { timestampToDate } from "@/utils/time";

export const TestResultHistoryItem: FunctionalComponent<{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { IconButton, allureIcons } from "@allurereport/web-components";
import { Loadable } from "@allurereport/web-components";
import { TooltipWrapper } from "@allurereport/web-components";
import { Code } from "@allurereport/web-components";
import { Code, IconButton, Loadable, TooltipWrapper, allureIcons } from "@allurereport/web-components";
import type { FunctionalComponent } from "preact";
import type { AllureAwesomeTestResult } from "types";
import { navigateTo } from "@/index";
import { useI18n } from "@/stores";
import { navigateTo } from "@/stores/router";
import { testResultNavStore } from "@/stores/testResults";
import { copyToClipboard } from "@/utils/copyToClipboard";
import * as styles from "./styles.scss";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { type HistoryTestResult } from "@allurereport/core-api";
import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
import type { FunctionalComponent } from "preact";
import type { AllureAwesomeTestResult } from "types";
import { navigateTo } from "@/index";
import { useI18n } from "@/stores";
import { navigateTo } from "@/stores/router";
import { capitalize } from "@/utils/capitalize";
import { timestampToDate } from "@/utils/time";
import * as styles from "./styles.scss";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ArrowButton } from "@/components/ArrowButton";
import { TestResultError } from "@/components/TestResult/TestResultError";
import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
import TreeItemIcon from "@/components/Tree/TreeItemIcon";
import { navigateTo } from "@/index";
import { navigateTo } from "@/stores/router";
import { timestampToDate } from "@/utils/time";

export const TestResultRetriesItem: FunctionalComponent<{
Expand All @@ -16,7 +16,7 @@ export const TestResultRetriesItem: FunctionalComponent<{
const { id, status, error, stop, duration } = testResultItem;
const [isOpened, setIsOpen] = useState(false);
const convertedStop = timestampToDate(stop);
const formattedDuration = typeof duration === "number" ? formatDuration(duration as number) : undefined;
const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
const navigateUrl = `/testresult/${id}`;

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ ste
setIsOpen={handleClick}
counter={steps?.length}
title={t("body")}
className={styles["test-result-steps-dropdown"]}
/>
{isOpened && (
<div className={styles["test-result-steps-root"]}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
border-top: 1px solid var(--on-border-muted);
}
}
.test-result-steps-dropdown {
position: sticky;
top: 192px;
background: var(--bg-base-primary);
z-index: 1;
}

.test-result-steps-root {
padding-left: 30px;
Expand Down Expand Up @@ -222,4 +228,4 @@

.html-attachment-preview {
padding: 0 16px;
}
}
Loading

0 comments on commit caaf8b1

Please sign in to comment.