@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/TestResult/TestResultHistory/index.tsx

@@ -0,0 +1,26 @@
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
+import { TestResultHistoryItem } from "@/components/app/TestResult/TestResultHistory/TestResultHistoryItem";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+export type TestResultHistoryViewProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = ({ testResult }) => {
+  const { history } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-history"]}>
+      {history.length ? (
+        history?.map((item, key) => <TestResultHistoryItem testResultItem={item} key={key} />)
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
+      )}
+    </div>
+  );
+};
+
+export default TestResultHistoryView;

package/src/components/app/TestResult/TestResultHistory/styles.scss

@@ -0,0 +1,63 @@
+.test-result-history {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-history-item-header {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.test-result-history-item-wrap {
+  transition: background-color 300ms;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  border-radius: 6px;
+  padding: 4px 4px 4px 4px;
+  width: 100%;
+  align-items: flex-start;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.test-result-history-item-text {
+  padding-top: 2px;
+}
+
+.test-result-history-item-info {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.item-time {
+  margin-left: auto;
+  line-height: 20px;
+  color: var(--on-text-secondary);
+}
+
+.test-result-history-item-link {
+  :root {
+    --allure-btn-icon-color: var(--bg-control-flat);
+  }
+
+  color: var(--on-icon-secondary);
+}
+
+.test-result-history-item-status {
+  padding-top: 4px;
+}
+
+.test-result-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/app/TestResult/TestResultInfo/index.tsx

@@ -0,0 +1,79 @@
+import { formatDuration } from "@allurereport/core-api";
+import * as test from "node:test";
+import { FunctionalComponent } from "preact";
+import { AllureAwesomeTestResult } from "types";
+import { TestResultNavigation } from "@/components/app/TestResult/TestResultNavigation";
+import { TestResultPrevStatuses } from "@/components/app/TestResult/TestResultPrevStatuses";
+import { TestResultSeverity } from "@/components/app/TestResult/TestResultSeverity";
+import { TestResultStatus } from "@/components/app/TestResult/TestResultStatus";
+import { TestResultTab, TestResultTabsList } from "@/components/app/TestResult/TestResultTabs";
+import { Counter } from "@/components/commons/Counter";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Heading, Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import { timestampToDate } from "@/utils/time";
+import * as styles from "./styles.scss";
+
+export type TestResultInfoProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
+  const { name, status, duration, labels, history, retries, attachments, stop } = testResult ?? {};
+  const formattedDuration = formatDuration(duration);
+  const fullDate = stop && timestampToDate(stop);
+  const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
+  const { t } = useI18n("ui");
+
+  const Content = () => {
+    return (
+      <>
+        {name && (
+          <Heading data-testid="test-result-info-title" tag={"h1"} size={"s"} className={styles["test-result-name"]}>
+            {name}
+          </Heading>
+        )}
+        <div className={styles["test-result-info-data"]}>
+          {Boolean(status) && <TestResultStatus status={status} />}
+          {Boolean(history?.length) && <TestResultPrevStatuses history={history} />}
+          <TestResultSeverity severity={severity} />
+          <TooltipWrapper tooltipText={fullDate}>
+            <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
+              {formattedDuration}
+            </Text>
+          </TooltipWrapper>
+        </div>
+        <div className={styles["test-result-tabs"]}>
+          <TestResultTabsList>
+            <TestResultTab id="overview">{t("overview")}</TestResultTab>
+            <TestResultTab id="history" disabled={!history?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("history")}
+                {Boolean(history?.length) && <Counter size={"s"} count={history?.length} />}
+              </div>
+            </TestResultTab>
+            <TestResultTab id="retries" disabled={!retries?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("retries")}
+                {Boolean(retries?.length) && <Counter size={"s"} count={retries?.length} />}
+              </div>
+            </TestResultTab>
+            <TestResultTab id="attachments" disabled={!attachments?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("attachments")}
+                {Boolean(attachments?.length) && <Counter size={"s"} count={attachments?.length} />}
+              </div>
+            </TestResultTab>
+          </TestResultTabsList>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles["test-result-info"]}>
+      <TestResultNavigation testResult={testResult} />
+      {testResult && <Content />}
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultInfo/styles.scss

@@ -0,0 +1,33 @@
+.test-result-info {
+  padding: 20px 24px 0;
+}
+
+.test-result-info-data {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 8px;
+
+  & > *:not(:first-child):not(:empty) {
+    border-left: 1px solid var(--on-border-primary);
+    padding-left: 12px;
+  }
+}
+
+.test-result-name {
+  margin-bottom: 8px;
+}
+
+.test-result-duration {
+  color: var(--on-text-secondary);
+}
+
+.test-result-tabs {
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.test-result-tab {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/app/TestResult/TestResultLinks/index.tsx

@@ -0,0 +1,60 @@
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import githubIcon from "@/assets/svg/github.svg";
+import Bug from "@/assets/svg/line-dev-bug-2.svg";
+import TmsLink from "@/assets/svg/line-general-checklist3.svg";
+import Link from "@/assets/svg/line-general-link-1.svg";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+interface TestResultLinkProps {
+  name: string;
+  url: string;
+  type: string;
+}
+
+const TestResultLink: FunctionalComponent<{
+  link: TestResultLinkProps;
+}> = ({ link }) => {
+  const { url, type } = link;
+  const iconMap = {
+    issue: Bug.id,
+    link: Link.id,
+    tms: TmsLink.id,
+    github: githubIcon.id,
+  };
+
+  return (
+    <div className={styles["test-result-link"]}>
+      <SvgIcon id={iconMap[type] ?? Link.id} />
+      <Text tag={"a"} href={url} target={"_blank"} size={"m"} className={styles["test-result-link-text"]}>
+        {url}
+      </Text>
+    </div>
+  );
+};
+
+export type TestResultLinksProps = {
+  links: AllureAwesomeTestResult["links"];
+};
+
+export const TestResultLinks: FunctionalComponent<TestResultLinksProps> = ({ links }) => {
+  const [isOpened, setIsOpen] = useState(true);
+  const { t } = useI18n("ui");
+  const linkMap = links.map((link, index) => {
+    return <TestResultLink link={link as TestResultLinkProps} key={index} />;
+  });
+
+  return (
+    <div className={styles["test-result-links"]}>
+      <div className={styles["test-result-links-wrapper"]}>
+        <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={links.length} title={t("links")} />
+        {isOpened && <div className={styles["test-result-links-list"]}>{linkMap}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultLinks/styles.scss

@@ -0,0 +1,30 @@
+.test-result-links {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  padding: 12px 24px 0;
+}
+
+.test-result-links-wrapper {
+  width: 100%;
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-bottom: 12px;
+}
+
+.test-result-link {
+  display: flex;
+  gap: 4px;
+  padding: 6px;
+  align-items: center;
+}
+
+.test-result-link-text {
+  color: var(--on-support-aldebaran);
+}
+
+.test-result-links-list {
+  display: grid;
+  column-gap: 32px;
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+}

package/src/components/app/TestResult/TestResultMetadata/index.tsx

@@ -0,0 +1,27 @@
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import { TestResultMetadataList } from "@/components/app/Metadata";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export type TestResultMetadataProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> = ({ testResult }) => {
+  const { t } = useI18n("ui");
+  const { labels, groupedLabels } = testResult ?? {};
+  const [isOpened, setIsOpened] = useState(true);
+
+  return (
+    <div className={styles["test-result-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={labels?.length} title={t("labels")} />
+
+      <div className={styles["test-result-metadata-wrapper"]}>
+        {isOpened && <TestResultMetadataList groupedLabels={groupedLabels} />}
+      </div>
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultMetadata/styles.scss

@@ -0,0 +1,8 @@
+.test-result-metadata {
+  padding: 12px 24px 0;
+}
+
+.test-result-metadata-wrapper {
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-bottom: 12px;
+}

package/src/components/app/TestResult/TestResultNavigation/index.tsx

@@ -0,0 +1,89 @@
+import { FunctionalComponent } from "preact";
+import { AllureAwesomeTestResult } from "types";
+import LineArrowsChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
+import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
+import { IconButton } from "@/components/commons/Button";
+import { Loadable } from "@/components/commons/Loadable";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Code } from "@/components/commons/Typography";
+import { navigateTo } from "@/index";
+import { useI18n } from "@/stores";
+import { treeStore } from "@/stores/tree";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+export type TestResultNavigationProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps> = ({ testResult }) => {
+  const { fullName, id: testResultId } = testResult ?? {};
+  const id = testResultId || "";
+  const { t: tooltip } = useI18n("controls");
+
+  return (
+    <Loadable
+      source={treeStore}
+      renderData={(treeData) => {
+        const leaves = treeData && Object.keys(treeData?.leavesById);
+        const currentIndex = id && leaves?.findIndex((leave) => leave === id) + 1;
+        const allTestResults = leaves?.length;
+
+        const FullName = () => {
+          return (
+            <div data-testid="test-result-fullname" className={styles["test-result-fullName"]}>
+              <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+                <IconButton
+                  data-testid="test-result-fullname-copy"
+                  style={"ghost"}
+                  size={"s"}
+                  icon={LineGeneralCopy3.id}
+                  onClick={() => copyToClipboard(fullName)}
+                />
+              </TooltipWrapper>
+              <Code tag={"div"} size={"s"} className={styles["test-result-fullName-text"]}>
+                {fullName && fullName}
+              </Code>
+            </div>
+          );
+        };
+
+        return (
+          <div className={styles["test-result-nav"]}>
+            {fullName && <FullName />}
+            {allTestResults && (
+              <div className={styles["test-result-navigator"]}>
+                <TooltipWrapper tooltipText={tooltip("nextTR")}>
+                  <IconButton
+                    icon={LineArrowsChevronDown.id}
+                    style={"ghost"}
+                    isDisabled={currentIndex === allTestResults}
+                    data-testid="test-result-nav-next"
+                    onClick={() => navigateTo(leaves[currentIndex])}
+                    className={styles["test-result-nav-next"]}
+                  />
+                </TooltipWrapper>
+                <Code
+                  data-testid="test-result-nav-current"
+                  size={"s"}
+                  className={styles["test-result-navigator-numbers"]}
+                >
+                  {currentIndex}/{allTestResults}
+                </Code>
+                <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
+                  <IconButton
+                    icon={LineArrowsChevronDown.id}
+                    style={"ghost"}
+                    isDisabled={currentIndex <= 1}
+                    data-testid="test-result-nav-prev"
+                    onClick={() => navigateTo(leaves[currentIndex - 2])}
+                  />
+                </TooltipWrapper>
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/app/TestResult/TestResultNavigation/styles.scss

@@ -0,0 +1,48 @@
+.test-result-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.test-result-fullName {
+  font-weight: 400;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-height: 32px;
+}
+
+.test-result-fullName-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  font-weight: 400;
+  color: var(--on-text-secondary);
+}
+
+.test-result-fullName-icon {
+  --allure-btn-icon-color: var(--on-icon-secondary);
+}
+
+.test-result-navigator {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.test-result-navigator-numbers {
+  color: var(--on-text-secondary);
+  font-weight: 400;
+}
+
+.test-result-nav-next {
+  transform: rotate(-180deg);
+  &:active {
+    transform: scale(var(--allure-btn-pressed-scale)) rotate(-180deg);
+  }
+}

package/src/components/app/TestResult/TestResultOverview.tsx

@@ -0,0 +1,40 @@
+import type { FunctionalComponent } from "preact";
+import * as styles from "@/components/app/BaseLayout/styles.scss";
+import { TestResultDescription } from "@/components/app/TestResult/TestResultDescription";
+import { TestResultError } from "@/components/app/TestResult/TestResultError";
+import { TestResultLinks } from "@/components/app/TestResult/TestResultLinks";
+import { TestResultMetadata } from "@/components/app/TestResult/TestResultMetadata";
+import { TestResultParameters } from "@/components/app/TestResult/TestResultParameters";
+import { TestResultSetup } from "@/components/app/TestResult/TestResultSetup";
+import { TestResultSteps } from "@/components/app/TestResult/TestResultSteps";
+import { TestResultTeardown } from "@/components/app/TestResult/TestResultTeardown";
+import type { AllureAwesomeTestResult } from "../../../../types.js";
+
+export type TestResultOverviewProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
+  const { message, trace, parameters, groupedLabels, links, description, setup, steps, teardown } = testResult || {};
+
+  return (
+    <>
+      {Boolean(message) && (
+        <div className={styles["test-result-errors"]}>
+          <TestResultError message={message} trace={trace} />
+        </div>
+      )}
+      {Boolean(parameters?.length) && <TestResultParameters parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
+        <TestResultMetadata testResult={testResult} />
+      )}
+      {Boolean(links?.length) && <TestResultLinks links={links} />}
+      {Boolean(description) && <TestResultDescription description={description} />}
+      <div className={styles["test-results"]}>
+        {Boolean(setup?.length) && <TestResultSetup setup={setup} />}
+        {Boolean(steps?.length) && <TestResultSteps steps={steps} />}
+        {Boolean(teardown?.length) && <TestResultTeardown teardown={teardown} />}
+      </div>
+    </>
+  );
+};

package/src/components/app/TestResult/TestResultParameters/index.tsx

@@ -0,0 +1,30 @@
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import { MetadataList } from "@/components/app/Metadata";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export type TestResultParametersProps = {
+  parameters: AllureAwesomeTestResult["parameters"];
+};
+
+export const TestResultParameters: FunctionalComponent<TestResultParametersProps> = ({ parameters }) => {
+  const [isOpened, setIsOpened] = useState(true);
+  const { t } = useI18n("ui");
+
+  return (
+    <div className={styles["test-result-metadata"]}>
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={setIsOpened}
+        counter={parameters?.length}
+        title={t("parameters")}
+      />
+      {/* FIXME: use proper type in the MetadataList component */}
+      {/* @ts-ignore */}
+      <div className={styles["test-result-metadata-wrapper"]}>{isOpened && <MetadataList envInfo={parameters} />}</div>
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultParameters/styles.scss

@@ -0,0 +1,8 @@
+.test-result-metadata {
+  padding: 12px 24px 0;
+}
+
+.test-result-metadata-wrapper {
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-bottom: 12px;
+}

package/src/components/app/TestResult/TestResultPrevStatuses/index.tsx

@@ -0,0 +1,52 @@
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { FunctionalComponent } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import LineShapesDotCircle from "@/assets/svg/line-shapes-dot-circle.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores";
+import { capitalize } from "@/utils/capitalize";
+import { timestampToDate } from "@/utils/time";
+import * as styles from "./styles.scss";
+
+const TestResultPrevStatus = ({ item }) => {
+  return (
+    <div className={styles["test-result-prev-status"]}>
+      <SvgIcon id={LineShapesDotCircle.id} className={styles[`status-${item?.status}`]} />
+    </div>
+  );
+};
+const TestResultPrevStatusTooltip = ({ item }) => {
+  const convertedStop = item.stop && timestampToDate(item.stop);
+  const { t } = useI18n("statuses");
+  const status = t(item.status);
+
+  return (
+    <div className={styles["test-result-prev-status-tooltip"]}>
+      <Text tag={"div"} size={"m"} bold>
+        {capitalize(status)}
+      </Text>
+      <Text size={"m"}>{convertedStop}</Text>
+    </div>
+  );
+};
+
+export type TestResultPrevStatusesProps = {
+  history: AllureAwesomeTestResult["history"];
+};
+
+export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesProps> = ({ history }) => {
+  return (
+    <div className={styles["test-result-prev-statuses"]}>
+      {history?.slice(0, 6).map((item, key) => (
+        <div className={styles["test-result-prev-status"]}>
+          <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
+            <TestResultPrevStatus item={item} />
+          </TooltipWrapper>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultPrevStatuses/styles.scss

@@ -0,0 +1,57 @@
+.test-result-prev-statuses {
+  display: flex;
+  align-items: center;
+}
+
+.test-result-prev-status {
+  position: relative;
+  display: flex;
+  cursor: pointer;
+
+  &:not(:first-child) {
+    padding-left: 8px;
+
+    &:before {
+      content: "";
+      width: 8px;
+      position: absolute;
+      height: 2px;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      background: var(--on-border-medium);
+    }
+  }
+}
+
+.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);
+}
+
+.test-result-prev-status-tooltip {
+  text-align: center;
+  background-color: var(--constant-bg-base-modal);
+  color: var(--constant-on-text-primary);
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  max-width: 600px;
+  min-width: max-content;
+}