@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/ReportMetadata/styles.scss

@@ -0,0 +1,99 @@
+@import "../../../assets/scss/mixins.scss";
+
+.report-metadata {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+}
+
+.report-metadata-keyvalue-value {
+  padding: 8px 0;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 48px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, auto);
+  grid-auto-flow: column;
+  padding-top: 16px;
+}
+
+.metadata-test-type {
+  display: flex;
+}
+
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text();
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}

package/src/components/app/Tabs/index.tsx

@@ -0,0 +1,58 @@
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { Text } from "../../commons/Typography";
+import * as styles from "./styles.scss";
+
+type TabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (tab: string) => void;
+};
+
+const TabsContext = createContext<TabsContextT | null>(null);
+
+export function useTabsContext() {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("Tabs' components must be used within a Tabs component");
+  }
+
+  return context;
+}
+
+export const TabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return <TabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</TabsContext.Provider>;
+};
+
+export const Tabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <TabsProvider {...props} />;
+};
+
+export const TabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const Tab = (props: { id: string; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const { currentTab, setCurrentTab } = useTabsContext();
+  const isCurrentTab = currentTab === id;
+
+  const handleTabClick = () => {
+    if (isCurrentTab) {
+      return;
+    }
+
+    setCurrentTab(id);
+  };
+
+  return (
+    <button {...rest} className={styles.tab} onClick={handleTabClick} aria-current={isCurrentTab ? true : undefined}>
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/app/Tabs/styles.scss

@@ -0,0 +1,56 @@
+.tabsList {
+  background-color: var(--bg-base-secondary);
+  padding: 2px;
+  border-radius: 8px;
+  display: flex;
+  overflow-x: auto;
+  flex-grow: 0;
+  max-width: max-content;
+}
+
+.tab {
+  background-color: var(--bg-control-flat);
+  color: var(--on-text-primary);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  padding: 2px 8px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  transform: scale(1);
+  outline-offset: 1px;
+  outline: 1px solid transparent;
+  transition:
+    transform var(--interaction-transition-duration) ease-out,
+    outline var(--interaction-transition-duration) ease-out,
+    background-color var(--color-change-transition-duration),
+    border-color var(--color-change-transition-duration);
+
+  &[aria-current] {
+    background-color: var(--bg-base-modal);
+    border-color: var(--on-border-primary);
+    cursor: default;
+  }
+
+  &:hover:not([aria-current]) {
+    background-color: var(--bg-control-flat-medium);
+  }
+
+  &:active:not([aria-current]) {
+    background-color: var(--bg-control-flat-heavy);
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--ad-other-focus);
+
+    &:not([aria-current]) {
+      background-color: var(--bg-control-flat-medium);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
+import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+export type TestResultAttachmentViewProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {
+  const { attachments } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-attachments-view"]}>
+      {attachments.length ? (
+        attachments?.map((attach, key) => (
+          <TestResultAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
+        ))
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-attachments-results")}</div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+.test-result-attachments-view {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  width: 100%;
+}

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

@@ -0,0 +1,27 @@
+import { useState } from "preact/hooks";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+import { FunctionalComponent } from "preact";
+import { AllureAwesomeTestResult } from "../../../../../types";
+
+export type TestResultDescriptionProps = {
+  description: AllureAwesomeTestResult["description"];
+}
+
+export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  return (
+    <div className={styles["test-result-description"]}>
+      <div className={styles["test-result-description-wrapper"]}>
+        <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
+        {isOpen && (
+          <Text tag={"p"} className={styles["test-result-description-text"]}>
+            {description || "Description mock"}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+.test-result-description {
+  padding: 0 24px;
+}
+
+.test-result-description-wrapper {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.test-result-description-text {
+  padding-top: 10px;
+}

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

@@ -0,0 +1,19 @@
+import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { Counter } from "@/components/commons/Counter";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+export const TestResultDropdown = ({ isOpened, setIsOpen, title, icon, counter }) => {
+  return (
+    <div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
+      <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />
+      <div className={styles["test-result-dropdown-wrap"]}>
+        <SvgIcon id={icon}></SvgIcon>
+        <Text bold>{title}</Text>
+        <Counter count={counter} size="s" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,34 @@
+.test-result-dropdown {
+  display: flex;
+  justify-content: space-between;
+  padding: 1px 8px 1px 6px;
+  border-radius: 6px;
+  transition: background-color 300ms;
+  align-items: center;
+  cursor: pointer;
+  width: 100%;
+}
+
+.test-result-step-chevron {
+  width: 12px;
+  height: 12px;
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.test-result-step-chevron-open {
+  transform: rotate(0deg);
+}
+
+.test-result-dropdown-wrap {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  align-items: center;
+  padding: 6px 8px 6px 6px;
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}

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

@@ -0,0 +1,34 @@
+import LineDevCodeSquare from "@/assets/svg/line-dev-code-square.svg";
+import * as baseStyles from "@/components/app/BaseLayout/styles.scss";
+import { TestResultInfo } from "@/components/app/TestResult/TestResultInfo";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+const TestResultThumb = () => {
+  return (
+    <div className={styles["test-result-thumb"]}>
+      <div className={styles["test-result-thumb-wrapper"]}>
+        <SvgIcon
+          size={"m"}
+          width={"32px"}
+          height={"32px"}
+          id={LineDevCodeSquare.id}
+          className={styles["test-result-thumb-icon"]}
+        />
+        <Text className={styles["test-result-thumb-text"]}>No test case results</Text>
+      </div>
+    </div>
+  );
+};
+
+const TestResultEmpty = () => {
+  return (
+    <div className={baseStyles.content}>
+      <TestResultInfo />
+      <TestResultThumb />
+    </div>
+  );
+};
+
+export default TestResultEmpty;

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

@@ -0,0 +1,25 @@
+.test-result-thumb {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 720px;
+  align-items: center;
+}
+
+.test-result-thumb-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.test-result-thumb-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 16px;
+  flex: 1 1 auto;
+}
+
+.test-result-thumb-text {
+  color: var(--on-text-secondary);
+  flex: 1 1 auto;
+}

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

@@ -0,0 +1,51 @@
+import { useState } from "preact/hooks";
+import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
+import { IconButton } from "@/components/commons/Button";
+import { Code, Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const TestResultErrorTrace = ({ trace }) => {
+  return (
+    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
+      <Code size={"s"} type={"ui"}>
+        <pre>{trace}</pre>
+      </Code>
+    </div>
+  );
+};
+
+export const TestResultError = ({ message, trace }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+
+  return (
+    <div data-testid="test-result-error" className={styles["test-result-error"]}>
+      <div
+        data-testid="test-result-error-header"
+        className={styles["test-result-error-header"]}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
+          {t("error")}
+        </Text>
+        <IconButton
+          style={"ghost"}
+          size={"s"}
+          icon={LineGeneralCopy3.id}
+          onClick={(e) => {
+            e.stopPropagation();
+            copyToClipboard(message);
+          }}
+        />
+      </div>
+      <div onClick={() => setIsOpen(!isOpen)}>
+        <Code data-testid="test-result-error-message" size={"s"}>
+          {message}
+        </Code>
+      </div>
+      {isOpen && trace && <TestResultErrorTrace trace={trace} />}
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+.test-result-error {
+  padding: 8px 8px 12px 24px;
+  background-color: var(--bg-alpha-capella);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+
+  &: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;
+  color: var(--on-support-capella);
+}
+
+.test-result-error-trace {
+  margin-top: 8px;
+
+  pre {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+}

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

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import { FunctionalComponent } from "preact";
+import { AllureAwesomeTestResult } from "types";
+import LineArrowsChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
+import LineGeneralHomeLine from "@/assets/svg/line-general-home-line.svg";
+import { LanguagePicker } from "@/components/app/LanguagePicker";
+import { ThemeButton } from "@/components/app/ThemeButton/ThemeButton";
+import { IconButton } from "@/components/commons/Button";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import { navigateTo } from "@/index";
+import * as styles from "./styles.scss";
+
+export type TestResultHeaderProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ testResult }) => {
+  const { breadcrumbs, name } = testResult || {};
+
+  return (
+    <div className={styles.above}>
+      <div className={styles["test-result-breadcrumbs"]}>
+        <div className={clsx(styles["test-result-breadcrumb"], styles["test-result-home"])}>
+          <IconButton
+            icon={LineGeneralHomeLine.id}
+            size={"s"}
+            style={"ghost"}
+            className={styles["test-result-breadcrumb-link"]}
+            onClick={() => navigateTo("/")}
+          />
+        </div>
+        {Boolean(breadcrumbs?.length) &&
+          breadcrumbs?.[0]?.map((item, key) => {
+            return (
+              <div className={styles["test-result-breadcrumb"]} key={key}>
+                <SvgIcon id={LineArrowsChevronDown.id} className={styles["test-result-breadcrumb-arrow"]} />
+                <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+                  {item}
+                </Text>
+              </div>
+            );
+          })}
+        <div className={styles["test-result-breadcrumb"]}>
+          {name && <SvgIcon id={LineArrowsChevronDown.id} className={styles["test-result-breadcrumb-arrow"]} />}
+          <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+            {name}
+          </Text>
+        </div>
+      </div>
+      <LanguagePicker />
+      <ThemeButton />
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+.test-result-breadcrumbs {
+  margin-right: auto;
+  display: flex;
+  gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.test-result-home {
+  flex: none;
+}
+
+.test-result-breadcrumb-link {
+  color: var(--on-text-secondary);
+}
+
+.test-result-breadcrumb {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: var(--on-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.test-result-breadcrumb-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.test-result-breadcrumb-arrow {
+  transform: rotate(-90deg);
+}

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

@@ -0,0 +1,57 @@
+import { formatDuration } from "@allurereport/core-api";
+import { useState } from "preact/hooks";
+import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
+import LineGeneralLinkExternal from "@/assets/svg/line-general-link-external.svg";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { TestResultError } from "@/components/app/TestResult/TestResultError";
+import * as styles from "@/components/app/TestResult/TestResultHistory/styles.scss";
+import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
+import { IconButton } from "@/components/commons/Button";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Text } from "@/components/commons/Typography";
+import { navigateTo } from "@/index";
+import { timestampToDate } from "@/utils/time";
+
+export const TestResultHistoryItem = ({ testResultItem }) => {
+  const { status, message, trace, stop, duration, id, uuid } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = timestampToDate(stop);
+  const formattedDuration = formatDuration(duration);
+
+  const navigateUrl = `/${uuid}/${id}`;
+
+  return (
+    <div>
+      <div className={styles["test-result-history-item-header"]} onClick={() => setIsOpen(!isOpened)}>
+        {Boolean(message) && <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />}
+        <div className={styles["test-result-history-item-wrap"]}>
+          <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
+          <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>
+          <div className={styles["test-result-history-item-info"]}>
+            <Text type="ui" size={"s"} className={styles["item-time"]}>
+              {formattedDuration}
+            </Text>
+
+            <TooltipWrapper tooltipText={"Go to error"}>
+              <IconButton
+                icon={LineGeneralLinkExternal.id}
+                style={"ghost"}
+                size={"s"}
+                className={styles["test-result-history-item-link"]}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigateTo(navigateUrl);
+                }}
+              />
+            </TooltipWrapper>
+          </div>
+        </div>
+      </div>
+      {isOpened && message && (
+        <div>
+          <TestResultError message={message} trace={trace} />
+        </div>
+      )}
+    </div>
+  );
+};