@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

package/src/components/TestResult/{TestResultSteps → TrSteps}/styles.scss

@@ -1,3 +1,5 @@
+@import "~@allurereport/web-components/mixins.scss";
+
 .test-result-steps {
   padding-right: 24px;
 
@@ -23,16 +25,12 @@
 }
 
 .test-result-attachment-content {
-  max-height: 450px;
-  overflow-y: auto;
   border-top: 1px solid var(--on-border-muted);
 }
 
 .test-result-attachment-content-wrapper {
   padding-left: 16px;
   margin-left: 11px;
-  max-height: 450px;
-  overflow-y: auto;
 }
 
 .test-result-step-root {
@@ -41,10 +39,9 @@
 
 .test-result-step-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 4px;
   transition: background-color 300ms;
-  cursor: pointer;
   padding: 4px 8px 4px 6px;
   min-height: 32px;
 
@@ -56,6 +53,7 @@
 .test-result-header-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-step-button {
@@ -82,7 +80,6 @@
 }
 
 .item-info {
-  margin-left: auto;
   display: flex;
   gap: 8px;
   color: var(--on-text-secondary);
@@ -95,7 +92,7 @@
   align-items: center;
   gap: 4px;
   color: var(--on-icon-secondary);
-  min-width: 52px;
+  min-width: 56px;
   justify-content: flex-end;
 }
 
@@ -125,9 +122,12 @@
   align-items: center;
   gap: 4px;
   transition: background-color 300ms;
-  cursor: pointer;
   padding: 4px 8px 4px 6px;
 
+  &:not(.empty) {
+    cursor: pointer;
+  }
+
   &:hover {
     background: var(--bg-control-flat-medium);
   }
@@ -151,6 +151,7 @@
 .test-result-attachment-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-attachment-image {
@@ -218,8 +219,46 @@
 
 .test-result-strut {
   width: 24px;
+  flex: none;
 }
 
 .html-attachment-preview {
   padding: 0 16px;
-}
+}
+
+.item-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.item-status-icon {
+  &.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);
+  }
+}
+
+.failed-steps {
+  display: flex;
+  gap: 8px;
+}
+
+:global(.code-toolbar .toolbar) {
+  display: none;
+}

package/src/components/TestResult/{TestResultSteps → TrSteps}/wrongAttachment.tsx

@@ -1,4 +1,4 @@
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 
 export const EmptyComponent = () => {

package/src/components/TestResult/TrTabs/index.tsx

@@ -0,0 +1,42 @@
+import { type ComponentChildren } from "preact";
+import { useEffect } from "preact/hooks";
+import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
+import { activeSubTab, navigateTo, route } from "@/stores/router";
+
+export const TrTabs = NavTabs;
+export const TrTabsList = NavTabsList;
+export const useTestResultTabsContext = useNavTabsContext;
+
+export const TrTab = (props: { id: string; children: ComponentChildren }) => {
+  const { testResultId } = route.value.params;
+  const { currentTab, setCurrentTab } = useNavTabsContext();
+  const { id, children } = props;
+  const isActiveFromUrl = activeSubTab.value === id;
+  const handleTabClick = () => {
+    const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
+    if (isCurrentTab) {
+      return;
+    }
+    setCurrentTab(id);
+    navigateTo({
+      ...route.value,
+      params: {
+        testResultId,
+        subTab: id || null,
+      },
+    });
+  };
+  const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
+
+  useEffect(() => {
+    if (isActiveFromUrl) {
+      setCurrentTab(id);
+    }
+  }, [activeSubTab.value, id, setCurrentTab]);
+
+  return (
+    <NavTab id={id} onClick={handleTabClick} data-testid={`test-result-tab-${id}`} isCurrentTab={isCurrentTab}>
+      {children}
+    </NavTab>
+  );
+};

package/src/components/TestResult/{TestResultTeardown → TrTeardown}/index.tsx

@@ -1,27 +1,27 @@
 import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
-import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import type { AwesomeTestResult } from "types";
+import { TrDropdown } from "@/components/TestResult/TrDropdown";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 const typeMap = {
-  before: TestResultStep,
-  after: TestResultStep,
-  step: TestResultStep,
-  attachment: TestResultAttachment,
+  before: TrStep,
+  after: TrStep,
+  step: TrStep,
+  attachment: TrAttachment,
 };
 
-export type TestResultTeardownProps = {
-  teardown: AllureAwesomeTestResult["teardown"];
+export type TrTeardownProps = {
+  teardown: AwesomeTestResult["teardown"];
   id: string;
 };
 
-export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown, id }) => {
+export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id }) => {
   const teardownId = `${id}-teardown`;
   const isEarlyCollapsed = !collapsedTrees.value.has(teardownId);
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -35,7 +35,7 @@ export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> =
 
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineHelpersFlag}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/index.tsx

@@ -1,56 +1,72 @@
+import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import * as styles from "@/components/BaseLayout/styles.scss";
-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";
-
-export type TestResultViewProps = {
-  testResult?: AllureAwesomeTestResult;
+import { useEffect } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import TrEmpty from "@/components/TestResult/TrEmpty";
+import { TrEnvironmentsView } from "@/components/TestResult/TrEnvironmentsView";
+import TrHistoryView from "@/components/TestResult/TrHistory";
+import { TrInfo } from "@/components/TestResult/TrInfo";
+import { TrOverview } from "@/components/TestResult/TrOverview";
+import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
+import { TrTabs, useTestResultTabsContext } from "@/components/TestResult/TrTabs";
+import { fetchTestEnvGroup } from "@/stores/env";
+import { isSplitMode } from "@/stores/layout";
+import * as styles from "./styles.scss";
+
+export type TrViewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export type TrContentProps = {
+  testResult?: AwesomeTestResult;
 };
 
-const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+export type TrProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
   const { currentTab } = useTestResultTabsContext();
   const viewMap: Record<string, any> = {
-    overview: TestResultOverview,
-    history: TestResultHistoryView,
-    attachments: TestResultAttachmentView,
-    retries: TestResultRetriesView,
+    overview: TrOverview,
+    history: TrHistoryView,
+    attachments: TrAttachmentView,
+    retries: TrRetriesView,
+    environments: TrEnvironmentsView,
   };
   const ViewComponent = viewMap[currentTab];
 
   return <ViewComponent testResult={testResult} />;
 };
 
-export type TestResultContentProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+const TrContent: FunctionalComponent<TrContentProps> = ({ testResult }) => {
   return (
-    <TestResultTabs initialTab="overview">
-      <TestResultInfo testResult={testResult} />
-      <TestResultView testResult={testResult} />
-    </TestResultTabs>
+    <TrTabs initialTab="overview">
+      <TrInfo testResult={testResult} />
+      <TrView testResult={testResult} />
+    </TrTabs>
   );
 };
 
-export type TestResultProps = {
-  testResult?: AllureAwesomeTestResult;
-};
+const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
+  const splitModeClass = isSplitMode.value ? styles["scroll-inside"] : "";
+
+  useEffect(() => {
+    const testCaseId = testResult?.testCase?.id;
+
+    if (testCaseId) {
+      fetchTestEnvGroup(testCaseId);
+    }
+  }, [testResult]);
 
-const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => (
-  <>
-    <TestResultHeader testResult={testResult} />
-    <div className={styles.content}>
-      {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
-    </div>
-  </>
-);
+  return (
+    <>
+      <div className={clsx(styles.content, splitModeClass)}>
+        {testResult ? <TrContent testResult={testResult} /> : <TrEmpty />}
+      </div>
+    </>
+  );
+};
 
 export default TestResult;

package/src/components/TestResult/styles.scss

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

package/src/components/Timeline/index.tsx

@@ -0,0 +1,100 @@
+import { Timeline as AllureTimeline, Grid, GridItem, Loadable, PageLoader, Widget } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
+import { useEffect, useMemo } from "preact/hooks";
+import { useI18n } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
+import type { TimlineTr } from "@/stores/timeline";
+import { fetchTimelineData, timelineStore } from "@/stores/timeline";
+import * as styles from "./styles.scss";
+
+const getHosts = (tests: TimlineTr[]) => [
+  ...new Set(tests.map((test) => test.labels.find((label) => label.name === "host")?.value).filter(Boolean)),
+];
+
+const filterTestsByHost = (tests: TimlineTr[], host: string) =>
+  tests.filter((test) => test.labels.find((label) => label.name === "host")?.value === host);
+
+const currentTimelineData = computed(() => {
+  const tests = timelineStore.value.data ?? [];
+  if (!tests.length) {
+    return [];
+  }
+
+  if (currentEnvironment.value) {
+    const testsToEnv = tests.filter((test) => test.environment === currentEnvironment.value);
+    const hostsByEnv = getHosts(testsToEnv);
+
+    return hostsByEnv.map((host) => ({
+      data: filterTestsByHost(testsToEnv, host),
+      host,
+    }));
+  }
+
+  const hosts = getHosts(tests);
+
+  return hosts.map((host) => ({
+    data: filterTestsByHost(tests, host),
+    host,
+  }));
+});
+
+export const Timeline = () => {
+  const { t } = useI18n("timeline");
+
+  useEffect(() => {
+    fetchTimelineData();
+  }, []);
+
+  const translations = useMemo(
+    () => ({
+      empty: t("empty"),
+      selected: (props: { count: number; percentage: string; minDuration: string; maxDuration: string }) =>
+        t("selected", {
+          count: props.count,
+          percentage: props.percentage,
+          minDuration: props.minDuration,
+          maxDuration: props.maxDuration,
+        }),
+    }),
+    [t],
+  );
+
+  return (
+    <Loadable
+      source={timelineStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (currentTimelineData.value.length === 0) {
+          return (
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                <GridItem className={styles["overview-grid-item"]}>
+                  <Widget>
+                    <div className={styles.empty}>{t("empty")}</div>
+                  </Widget>
+                </GridItem>
+              </Grid>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles.overview}>
+            <Grid kind="swap" className={styles["overview-grid"]}>
+              {currentTimelineData.value.map(({ data, host }) => (
+                <GridItem key={host} className={styles["overview-grid-item"]}>
+                  <Widget title={t("host", { host })}>
+                    {data.length > 0 && (
+                      <AllureTimeline data={data} dataId={host} width={100} translations={translations} />
+                    )}
+                    {data.length === 0 && <div className={styles.empty}>{t("empty_host", { host })}</div>}
+                  </Widget>
+                </GridItem>
+              ))}
+            </Grid>
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Timeline/styles.scss

@@ -0,0 +1,45 @@
+.overview {
+  padding: 0 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  --timeline-font-family: var(--font-family);
+  --timeline-grid: var(--on-border-control);
+  --timeline-border-primary: var(--on-border-primary);
+  --timeline-axis-text: var(--on-text-secondary);
+  --timeline-bg: var(--bg-base-primary);
+  --timeline-selection-bg: var(--bg-control-flat-medium);
+}
+
+.overview-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.overview-grid-item {
+  padding: 4px;
+  width: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper-squeezer {
+  width: 50%;
+}
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 320px;
+  color: var(--on-text-hint);
+}

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

@@ -1,23 +1,39 @@
-import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
-import type { AllureAwesomeStatus } from "types";
-import { useTabsContext } from "@/components/Tabs";
-import Tree from "@/components/Tree/Tree";
+import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
+import { useMemo } from "preact/hooks";
+import { MetadataButton } from "@/components/MetadataButton";
+import { reportStatsStore, statsByEnvStore } from "@/stores";
+import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { clearTreeFilters, filteredTree, noTests, noTestsFound, treeStore } from "@/stores/tree";
+import { navigateTo, route } from "@/stores/router";
+import { collapsedTrees, filteredTree, noTests, noTestsFound, toggleTree, treeStore } from "@/stores/tree";
+import { clearTreeFilters, treeStatus } from "@/stores/treeFilters";
+import { createTreeLocalizer } from "@/utils/tree";
 import * as styles from "./styles.scss";
 
 export const TreeList = () => {
   const { t } = useI18n("empty");
-  const { currentTab } = useTabsContext();
+  const { t: tEnvironments } = useI18n("environments");
+  const { t: tooltip } = useI18n("transitions");
+  const routeId = route.value.params?.testResultId;
+
+  const currentTreeStatus = treeStatus.value;
+
+  const localizers = useMemo(
+    () => ({
+      tooltip: (key: string, options: Record<string, string>) => tooltip(`description.${key}`, options),
+    }),
+    [tooltip],
+  );
 
   return (
     <Loadable
       source={treeStore}
       renderLoader={() => <PageLoader />}
       renderData={() => {
+        // TODO: use function instead of computed
         if (noTests.value) {
           return (
-            <div className={styles["tree-list"]}>
+            <div>
               <div className={styles["tree-empty-results"]}>
                 <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
               </div>
@@ -27,7 +43,7 @@ export const TreeList = () => {
 
         if (noTestsFound.value) {
           return (
-            <div className={styles["tree-list"]}>
+            <div>
               <div className={styles["tree-empty-results"]}>
                 <Text tag="p" className={styles["tree-empty-results-title"]}>
                   {t("no-tests-found")}
@@ -45,10 +61,100 @@ export const TreeList = () => {
           );
         }
 
+        const treeLocalizer = createTreeLocalizer(localizers);
+
+        // render single tree for single environment
+        if (environmentsStore.value.data.length === 1) {
+          return (
+            <div>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={treeLocalizer(filteredTree.value.default)}
+                statusFilter={currentTreeStatus}
+                routeId={routeId}
+                root
+              />
+            </div>
+          );
+        }
+
+        const currentTree = currentEnvironment.value ? filteredTree.value[currentEnvironment.value] : undefined;
+
+        if (currentTree) {
+          return (
+            <div>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={treeLocalizer(currentTree)}
+                statusFilter={currentTreeStatus}
+                routeId={routeId}
+                root
+              />
+            </div>
+          );
+        }
+
+        // render tree section for every environment
         return (
-          <div className={styles["tree-list"]}>
-            <Tree tree={filteredTree.value} statusFilter={currentTab as AllureAwesomeStatus} root />
-          </div>
+          <>
+            {Object.entries(filteredTree.value).map(([key, value]) => {
+              const { total } = value.statistic;
+
+              if (total === 0) {
+                return null;
+              }
+
+              const isOpened = !collapsedEnvironments.value.includes(key);
+              const toggleEnv = () => {
+                collapsedEnvironments.value = isOpened
+                  ? collapsedEnvironments.value.concat(key)
+                  : collapsedEnvironments.value.filter((env) => env !== key);
+              };
+              const stats = statsByEnvStore.value.data[key];
+
+              return (
+                <div key={key} className={styles["tree-section"]} data-testid={"tree-section"}>
+                  <div className={styles["tree-env-button"]}>
+                    <MetadataButton
+                      isOpened={isOpened}
+                      setIsOpen={toggleEnv}
+                      title={`${tEnvironments("environment", { count: 1 })}: "${key}"`}
+                      counter={total}
+                      data-testid={"tree-section-env-button"}
+                    />
+                    <TreeStatusBar
+                      statistic={stats}
+                      reportStatistic={reportStatsStore.value.data}
+                      statusFilter={currentTreeStatus}
+                    />
+                  </div>
+                  {isOpened && (
+                    <div data-testid={"tree-section-env-content"}>
+                      <Tree
+                        statistic={statsByEnvStore.value.data[key]}
+                        reportStatistic={reportStatsStore.value.data}
+                        collapsedTrees={collapsedTrees.value}
+                        toggleTree={toggleTree}
+                        statusFilter={currentTreeStatus}
+                        navigateTo={navigateTo}
+                        tree={treeLocalizer(value)}
+                        routeId={routeId}
+                        root
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </>
         );
       }}
     />