Split Layout for Awesome

packages/e2e/test/allure-awesome/testResult.test.ts

@@ -1,6 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { layer } from "allure-js-commons";
-import { Stage, Status } from "allure-js-commons";
+import { Stage, Status, layer } from "allure-js-commons";
 import { type ReportBootstrap, boostrapReport, randomNumber } from "../utils/index.js";
 
 let bootstrap: ReportBootstrap;
@@ -82,7 +81,6 @@ test.describe("allure-awesome", () => {
       const randomLeaf = page.getByTestId("tree-leaf").nth(randomNumber(0, 4));
 
       await randomLeaf.click();
-
       const testTitleText = await page.getByTestId("test-result-info-title").textContent();
       const navCounterText = await page.getByTestId("test-result-nav-current").textContent();
       const pressPrevArrow = await page.getByTestId("test-result-nav-next").isDisabled();
@@ -135,4 +133,34 @@ test.describe("allure-awesome", () => {
       await expect(page.getByTestId("test-result-error-trace")).toHaveText("broken test trace");
     });
   });
+
+  test.describe("Layout switching", () => {
+    test.beforeEach(async ({ page }) => {
+      await expect(page.getByTestId("base-layout")).toBeVisible();
+    });
+
+    test("should toggle from BaseLayout to SplitLayout with loader displayed correctly", async ({ page }) => {
+      await page.getByTestId("toggle-layout-button").click();
+
+      await expect(page.getByTestId("loader")).toBeVisible();
+
+      await expect(page.getByTestId("loader")).toBeHidden({ timeout: 1000 });
+
+      await expect(page.getByTestId("split-layout")).toBeVisible();
+      await expect(page.getByTestId("base-layout")).toBeHidden();
+    });
+
+    test("should toggle back from SplitLayout to BaseLayout with loader displayed correctly", async ({ page }) => {
+      await page.getByTestId("toggle-layout-button").click();
+      await expect(page.getByTestId("split-layout")).toBeVisible();
+
+      await page.getByTestId("toggle-layout-button").click();
+
+      await expect(page.getByTestId("loader")).toBeVisible();
+      await expect(page.getByTestId("loader")).toBeHidden({ timeout: 1000 });
+
+      await expect(page.getByTestId("base-layout")).toBeVisible();
+      await expect(page.getByTestId("split-layout")).toBeHidden();
+    });
+  });
 });

packages/plugin-awesome/src/generators.ts

@@ -252,6 +252,7 @@ export const generateStaticFiles = async (
     reportDataFiles,
     reportUuid,
     allureVersion,
+    layout = "base",
   } = payload;
   const compile = Handlebars.compile(template);
   const manifest = await readTemplateManifest(payload.singleFile);
@@ -301,6 +302,8 @@ export const generateStaticFiles = async (
     createdAt: Date.now(),
     reportUuid,
     groupBy: groupBy?.length ? groupBy : ["parentSuite", "suite", "subSuite"],
+    layout,
+    allureVersion,
   };
   const html = compile({
     headTags: headTags.join("\n"),

packages/plugin-awesome/src/model.ts

@@ -5,6 +5,7 @@ export type AllureAwesomeOptions = {
   theme?: "light" | "dark";
   reportLanguage?: "en" | "ru";
   groupBy?: string[];
+  layout?: "base" | "split";
   ci?: {
     type: "github" | "jenkins";
     url: string;

packages/plugin-classic/src/generators.ts

@@ -321,6 +321,7 @@ export const generateStaticFiles = async (
     createdAt: Date.now(),
     reportUuid,
     groupBy: groupBy?.length ? groupBy : ["parentSuite", "suite", "subSuite"],
+    allureVersion,
   };
   const html = compile({
     headTags: headTags.join("\n"),

packages/web-awesome/package.json

@@ -90,6 +90,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
+    "split.js": "^1.6.5",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.6.3",

packages/web-awesome/src/assets/scss/_common.scss

@@ -140,4 +140,19 @@ body {
   background: var(--bg-base-secondary);
   font-family: var(--font-family);
   -webkit-text-size-adjust: 100%;
+  //* > * {
+  //  &::-webkit-scrollbar {
+  //    width: 16px;
+  //  }
+  //
+  //  &::-webkit-scrollbar-thumb {
+  //    border-radius: 10px;
+  //    background: var(--scrollbar-color);
+  //    border: 4px solid var(--bg-base-primary);
+  //  }
+  //
+  //  &::-webkit-scrollbar-thumb:hover {
+  //    cursor: pointer;
+  //  }
+  //}
 }

packages/web-awesome/src/assets/scss/index.scss

@@ -1,5 +1,5 @@
 @import "fonts.scss";
-@import "typography.scss";
+//@import "typography.scss";
 @import "day.scss";
 @import "night.scss";
 @import "theme.scss";

packages/web-awesome/src/assets/scss/theme.scss

@@ -48,6 +48,7 @@
   --on-text-hint: var(--on-text-hint-day);
   --on-text-primary: var(--on-text-primary-day);
   --on-text-secondary: var(--on-text-secondary-day);
+  --scrollbar-color: var(--gray-300);
 
   color-scheme: light;
 }
@@ -113,5 +114,6 @@
   --on-text-primary: var(--on-text-primary-night);
   --on-text-secondary: var(--on-text-secondary-night);
 
+  --scrollbar-color: var(--gray-400);
   color-scheme: dark;
 }

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

@@ -17,7 +17,7 @@
 }
 
 .arrow-button-m {
-  padding: 6px 6px;
+  padding: 4px 6px;
 }
 
 .icon-size-m {