@allurereport/web-awesome 3.0.0-beta.10

package/src/components/TestResult/TrError/styles.scss

@@ -0,0 +1,133 @@
+.test-result-error {
+  padding: 8px 8px 12px 16px;
+  background-color: var(--bg-alpha-capella);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: var(--on-support-capella);
+  }
+}
+
+.test-result-error-header {
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+}
+
+.test-result-error-text {
+  margin-bottom: 8px;
+  padding-left: 8px;
+  color: var(--on-support-capella);
+  margin-right: auto;
+}
+
+.test-result-error-trace {
+  margin-top: 8px;
+  padding-left: 8px;
+
+  pre {
+    overflow: scroll;
+    padding-bottom: 24px;
+  }
+}
+
+.test-result-error-message {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 300ms;
+  margin-bottom: 4px;
+
+  &:hover {
+    background: var(--bg-alpha-capella);
+  }
+}
+
+.diff {
+  width: 100%;
+  line-height: 1.28;
+  padding: 0 16px 16px;
+
+  .side {
+    flex: 1 1 auto;
+    gap: 4px;
+  }
+
+  .unified {
+    flex: 1 1 auto;
+  }
+
+  .diff-screen {
+    min-height: 320px;
+  }
+}
+
+.diff-green {
+  color: var(--on-support-castor);
+  background: #09933729;
+}
+
+.diff-grey {
+  color: var(--on-text-secondary);
+  margin-bottom: 4px;
+}
+
+.diff-red {
+  color: var(--on-support-capella);
+  background: var(--bg-alpha-capella);
+}
+
+.diff-buttons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  line-height: 24px;
+  margin-bottom: 4px;
+}
+
+.expected {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  line-height: 24px;
+}
+
+.side-title {
+  line-height: 24px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.diff-controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 4px;
+  justify-content: space-between;
+}
+
+.diff-view {
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+}
+
+.side-by-side {
+  display: flex;
+  gap: 4px;
+}
+
+.diff-buttons-title {
+  color: var(--on-text-secondary);
+  margin-right: 8px;
+}

package/src/components/TestResult/index.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import type { FunctionComponent, FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import { TestResultAttachmentView } from "@/components/TestResult/TestResultAttachmentsView";
+import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
+import { TestResultHeader } from "@/components/TestResult/TestResultHeader";
+import TestResultHistoryView from "@/components/TestResult/TestResultHistory";
+import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
+import { TestResultOverview } from "@/components/TestResult/TestResultOverview";
+import { TestResultRetriesView } from "@/components/TestResult/TestResultRetriesView";
+import { TestResultTabs, useTestResultTabsContext } from "@/components/TestResult/TestResultTabs";
+import { isSplitMode } from "@/stores/layout";
+import * as styles from "./styles.scss";
+
+export type TestResultViewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+  const { currentTab } = useTestResultTabsContext();
+  const viewMap: Record<string, any> = {
+    overview: TestResultOverview,
+    history: TestResultHistoryView,
+    attachments: TestResultAttachmentView,
+    retries: TestResultRetriesView,
+  };
+  const ViewComponent = viewMap[currentTab];
+
+  return <ViewComponent testResult={testResult} />;
+};
+
+export type TestResultContentProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+  return (
+    <TestResultTabs initialTab="overview">
+      <TestResultInfo testResult={testResult} />
+      <TestResultView testResult={testResult} />
+    </TestResultTabs>
+  );
+};
+
+export type TestResultProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => {
+  const splitModeClass = isSplitMode.value ? styles["scroll-inside"] : "";
+
+  return (
+    <>
+      {!isSplitMode.value && <TestResultHeader testResult={testResult} />}
+      <div className={clsx(styles.content, splitModeClass)}>
+        {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
+      </div>
+    </>
+  );
+};
+
+export default TestResult;

package/src/components/TestResult/styles.scss

@@ -0,0 +1,11 @@
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.scroll-inside {
+  overflow: auto;
+  height: calc(100vh - var(--footer-header-sizes));
+}

package/src/components/ThemeButton/ThemeButton.tsx

@@ -0,0 +1,20 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+export const ThemeButton = () => {
+  const theme = themeStore.value;
+
+  useEffect(() => {
+    getTheme();
+  }, []);
+
+  return (
+    <IconButton
+      onClick={toggleTheme}
+      style="ghost"
+      icon={theme === "light" ? allureIcons.lineShapesMoon : allureIcons.lineShapesSun}
+      size="s"
+    />
+  );
+};

package/src/components/ToggleLayout/index.tsx

@@ -0,0 +1,17 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { isSplitMode, toggleLayout } from "@/stores/layout";
+
+const ToggleLayout = () => {
+  const icon = isSplitMode.value ? allureIcons.lineLayoutsLayoutTop : allureIcons.lineLayoutsColumn2;
+  return (
+    <IconButton
+      data-testId={"toggle-layout-button"}
+      size={"s"}
+      icon={icon}
+      style={"ghost"}
+      onClick={() => toggleLayout()}
+    />
+  );
+};
+
+export default ToggleLayout;

package/src/components/Tree/index.tsx

@@ -0,0 +1,75 @@
+import { Button, Loadable, PageLoader, Text, Tree } from "@allurereport/web-components";
+import type { AwesomeStatus } from "types";
+import { useTabsContext } from "@/components/Tabs";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { navigateTo } from "@/stores/router";
+import {
+  clearTreeFilters,
+  collapsedTrees,
+  filteredTree,
+  noTests,
+  noTestsFound,
+  toggleTree,
+  treeFiltersStore,
+  treeStore,
+} from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const TreeList = () => {
+  const { t } = useI18n("empty");
+  const { currentTab } = useTabsContext();
+
+  return (
+    <Loadable
+      source={treeStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (noTests.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearTreeFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree
+              collapsedTrees={collapsedTrees.value}
+              toggleTree={toggleTree}
+              treeFiltersStore={treeFiltersStore}
+              navigateTo={navigateTo}
+              statsStore={statsStore}
+              tree={filteredTree.value}
+              statusFilter={currentTab as AwesomeStatus}
+              root
+            />
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Tree/styles.scss

@@ -0,0 +1,189 @@
+.tree {
+  position: relative;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-list {
+  min-height: 128px;
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.tree-header-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.tree-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.tree-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+}
+
+.tree-count {
+  display: flex;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 6px 6px;
+  transition: background-color 300ms;
+  gap: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.item-title {
+  display: flex;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+}
+
+.test-count {
+  display: flex;
+  margin-left: auto;
+}
+
+.tree-content:not(.root) {
+  display: block;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-icon {
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.tree-header-bar {
+  display: inline-flex;
+  font-family: var(--font-family);
+  max-width: 140px;
+  min-width: 46px;
+  border-radius: 4px;
+  height: 12px;
+  background: var(--on-text-hint);
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: var(--font-weight-extra-bold);
+  line-height: 12px;
+  overflow: hidden;
+}
+
+.tree-header-bar-item {
+  display: flex;
+  min-width: 16px;
+  justify-content: center;
+  text-align: center;
+  padding: 0 6px;
+  flex-grow: 1;
+
+  &.passed {
+    background-color: var(--bg-support-castor);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.failed {
+    background-color: var(--bg-support-capella);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.broken {
+    background-color: var(--bg-support-atlas);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.skipped {
+    background-color: var(--bg-support-rau);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.unknown {
+    background-color: var(--bg-support-skat);
+    color: var(--constant-on-text-primary);
+  }
+}
+
+.tree-empty-results {
+  padding: 44px 24px;
+  text-align: center;
+}
+
+.tree-empty-results-title {
+  color: var(--on-text-secondary);
+}
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+}
+
+.tree-item-marked {
+  background: var(--bg-base-secondary);
+}
+
+.tree-item-marked {
+  background: var(--bg-base-secondary);
+}

package/src/i18n/constants.ts

@@ -0,0 +1,124 @@
+export const AVAILABLE_LOCALES = [
+  "en",
+  "ru",
+  "pl",
+  "es",
+  "pt",
+  "de",
+  "am",
+  "az",
+  "fr",
+  "it",
+  "ja",
+  "he",
+  "ka",
+  "kr",
+  "nl",
+  "sv",
+  "tr",
+  "zh",
+] as const;
+
+export const DEFAULT_LOCALE = "en";
+
+export type LangLocale = (typeof AVAILABLE_LOCALES)[number];
+
+export const LANG_LOCALE: Record<
+  LangLocale,
+  {
+    short: string;
+    full: string;
+    iso: string;
+  }
+> = {
+  en: {
+    short: "Eng",
+    full: "English",
+    iso: "en-US",
+  },
+  ru: {
+    short: "Ру",
+    full: "Русский",
+    iso: "ru-RU",
+  },
+  pl: {
+    short: "Pl",
+    full: "Polski",
+    iso: "pl-PL",
+  },
+  es: {
+    short: "Es",
+    full: "Español",
+    iso: "es-ES",
+  },
+  pt: {
+    short: "Pt",
+    full: "Português",
+    iso: "pt-PT",
+  },
+  de: {
+    short: "De",
+    full: "Deutsch",
+    iso: "de-DE",
+  },
+  am: {
+    short: "Am",
+    full: "Հայերեն",
+    iso: "hy-AM",
+  },
+  az: {
+    short: "Az",
+    full: "Azərbaycan",
+    iso: "az-AZ",
+  },
+  fr: {
+    short: "Fr",
+    full: "Français",
+    iso: "fr-FR",
+  },
+  it: {
+    short: "It",
+    full: "Italiano",
+    iso: "it-IT",
+  },
+  ja: {
+    short: "Ja",
+    full: "日本語",
+    iso: "ja-JP",
+  },
+  he: {
+    short: "He",
+    full: "עברית",
+    iso: "he-IL",
+  },
+  ka: {
+    short: "Ka",
+    full: "ქართული",
+    iso: "ka-GE",
+  },
+  kr: {
+    short: "Kr",
+    full: "한국어",
+    iso: "kr-KR",
+  },
+  nl: {
+    short: "Nl",
+    full: "Nederlands",
+    iso: "nl-NL",
+  },
+  sv: {
+    short: "Sv",
+    full: "Svenska",
+    iso: "sv-SE",
+  },
+  tr: {
+    short: "Tr",
+    full: "Türkçe",
+    iso: "tr-TR",
+  },
+  zh: {
+    short: "Zh",
+    full: "中文",
+    iso: "zh-CN",
+  },
+};