@allurereport/web-awesome 3.0.0-beta.10

package/src/components/BaseLayout/styles.scss

@@ -0,0 +1,60 @@
+.layout {
+  margin: auto;
+  padding: 12px 32px;
+  background: var(--bg-base-secondary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+.wrapper {
+  max-width: 920px;
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 8px;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}

package/src/components/Footer/FooterLogo.tsx

@@ -0,0 +1,16 @@
+import { Text } from "@allurereport/web-components";
+import { ReportLogoFull } from "../ReportLogoFull";
+import * as styles from "./styles.scss";
+
+export const FooterLogo = () => {
+  return (
+    <div className={styles["footer-logo"]}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
+        <Text type="paragraph" size="m" className={styles["footer-logo"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </div>
+  );
+};

package/src/components/Footer/FooterVersion.tsx

@@ -0,0 +1,37 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@allurereport/web-components";
+import { useEffect, useState } from "preact/hooks";
+import type { AwesomeReportOptions } from "types";
+import { currentLocaleIso } from "@/stores";
+import * as styles from "./styles.scss";
+
+export const FooterVersion = () => {
+  const [createdAt, setCreatedAt] = useState<number | null>(null);
+  const [currentVersion, setCurrentVersion] = useState<string>();
+
+  useEffect(() => {
+    const reportOptions = getReportOptions<AwesomeReportOptions>();
+    if (reportOptions?.createdAt) {
+      setCreatedAt(Number(reportOptions.createdAt));
+    }
+    if (reportOptions?.allureVersion) {
+      setCurrentVersion(reportOptions.allureVersion as string);
+    }
+  }, []);
+
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+
+  return (
+    <Text type="paragraph" size="m" className={styles.version}>
+      {formattedCreatedAt}
+      {currentVersion && <span> Ver: {currentVersion}</span>}
+    </Text>
+  );
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/Footer/FooterLogo";
+import { FooterVersion } from "@/components/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

package/src/components/Footer/styles.scss

@@ -0,0 +1,14 @@
+.footer-logo {
+  color: var(--on-text-secondary);
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}

package/src/components/Header/index.tsx

@@ -0,0 +1,28 @@
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { TestResultBreadcrumbs } from "@/components/TestResult/TestResultHeader/TestResultBreadcrumbs";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import ToggleLayout from "@/components/ToggleLayout";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+interface HeaderProps {
+  className?: ClassValue;
+}
+
+export const Header = ({ className }: HeaderProps) => {
+  const { id } = route.value;
+
+  return (
+    <div className={clsx(styles.above, className)}>
+      {id && <TestResultBreadcrumbs testResult={testResultStore.value?.data?.[id]} />}
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ToggleLayout />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

package/src/components/Header/styles.scss

@@ -0,0 +1,33 @@
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.logoWrapper {
+  margin-right: auto;
+  color: var(--on-text-secondary);
+}
+
+.logo {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+  top: -2px;
+}
+
+.left {
+  margin-right: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/LanguagePicker/index.tsx

@@ -0,0 +1,40 @@
+import { DropdownButton, Menu } from "@allurereport/web-components";
+import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
+import { currentLocale } from "@/stores";
+import { setLocale } from "@/stores/locale";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
+  key: key as LangLocale,
+  value: full,
+}));
+
+export const LanguagePicker = () => {
+  const locale = currentLocale.value;
+  const handleSelect = (selectedOption: LangLocale) => {
+    setLocale(selectedOption);
+  };
+
+  return (
+    <Menu
+      size="s"
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="s"
+          text={LANG_LOCALE[locale || "en"].short}
+          isExpanded={isOpened}
+          onClick={onClick}
+        />
+      )}
+    >
+      <Menu.Section>
+        {langPickerOptions.map(({ key, value }) => (
+          <Menu.ItemWithCheckmark onClick={() => handleSelect(key)} key={key} isChecked={locale === key}>
+            {value}
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/MainReport/index.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import { Header } from "@/components/Header";
+import { ReportBody } from "@/components/ReportBody";
+import { ReportHeader } from "@/components/ReportHeader";
+import { ReportMetadata } from "@/components/ReportMetadata";
+import { isSplitMode } from "@/stores/layout";
+import * as styles from "./styles.scss";
+
+const MainReport = () => {
+  return (
+    <>
+      {!isSplitMode.value && <Header />}
+      <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
+        <ReportHeader />
+        <ReportMetadata />
+        <ReportBody />
+      </div>
+    </>
+  );
+};
+export default MainReport;

package/src/components/MainReport/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/Metadata/index.tsx

@@ -0,0 +1,121 @@
+import { Button, Menu, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { MetadataButton } from "@/components/MetadataButton";
+import type { MetadataProps } from "@/components/ReportMetadata";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
+  envInfo,
+  size = "m",
+  columns = 2,
+}) => {
+  return (
+    <div
+      class={styles["report-metadata-list"]}
+      style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
+    >
+      {envInfo?.map(({ name, values, value }) => (
+        <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
+      ))}
+    </div>
+  );
+};
+
+export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
+  return (
+    <div class={styles["report-metadata-list"]}>
+      {groupedLabels &&
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        Object.entries(groupedLabels)?.map(([name, values]) => (
+          <MetadataKeyValue key={name} size={size} title={name} values={values} />
+        ))}
+    </div>
+  );
+};
+
+export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const { t } = useI18n("ui");
+  const [isOpened, setIsOpen] = useState(true);
+
+  return (
+    <div class={styles["report-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={envInfo.length} title={t("metadata")} />
+      {isOpened && <MetadataList envInfo={envInfo} />}
+    </div>
+  );
+};
+
+const MetadataTooltip = (props: { value: string }) => {
+  const { value } = props;
+  const { t } = useI18n("ui");
+
+  return (
+    <div className={styles["metadata-tooltip"]}>
+      <div className={styles["metadata-tooltip-value"]}>
+        <Text>{value}</Text>
+      </div>
+      <Button
+        style={"outline"}
+        icon={allureIcons.lineGeneralCopy3}
+        text={t("copy")}
+        onClick={() => copyToClipboard(value)}
+      />
+    </div>
+  );
+};
+
+const MetaDataKeyLabel: FunctionalComponent<{
+  size?: "s" | "m";
+  value: string;
+}> = ({ size = "s", value }) => {
+  return (
+    <Menu
+      size="xl"
+      menuTrigger={({ onClick }) => (
+        <div className={styles["report-metadata-keyvalue-wrapper"]}>
+          <Text type={"ui"} size={size} onClick={onClick} bold className={styles["report-metadata-keyvalue-value"]}>
+            {value}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
+const MetadataKeyValue: FunctionalComponent<{
+  title: string;
+  value?: string;
+  values?: string[];
+  size?: "s" | "m";
+}> = ({ title, value, values, size = "m" }) => {
+  return (
+    <div className={styles["report-metadata-keyvalue"]}>
+      <Text
+        type={"ui"}
+        size={size}
+        className={clsx(styles["report-metadata-keyvalue-title"], styles[`report-metadata-${size}`])}
+      >
+        {title}
+      </Text>
+      {values?.length ? (
+        <div className={styles["report-metadata-values"]}>
+          {values.map((item) => (
+            <MetaDataKeyLabel key={item} value={item} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles["report-metadata-values"]}>
+          <MetaDataKeyLabel value={value} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Metadata/styles.scss

@@ -0,0 +1,146 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.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;
+  flex: 1 1 auto;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: inline-grid;
+  grid-template-columns: 30% 60%;
+  gap: 10%;
+  align-items: center;
+}
+
+.report-metadata-values {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.report-metadata-s {
+  font-size: 12px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.report-metadata-keyvalue-wrapper {
+  background: var(--on-border-primary);
+  border-radius: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 2px 4px;
+  line-height: 16px;
+}
+
+.report-metadata-keyvalue-value {
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 5%;
+  grid-template-columns: repeat(2, 45%);
+}
+
+.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);
+}
+
+.metadata-tooltip {
+  padding: 12px 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.metadata-tooltip-value {
+  flex: 1 1 auto;
+  min-width: 320px;
+  background: var(--bg-base-secondary);
+  max-height: 238px;
+  padding: 8px 16px;
+  overflow: hidden;
+  overflow-y: auto;
+  border-radius: 8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/src/components/MetadataButton/index.tsx

@@ -0,0 +1,32 @@
+import { Counter, Text } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
+import * as styles from "./styles.scss";
+
+interface MetadataButtonProps {
+  isOpened?: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  counter?: number;
+  title?: string;
+}
+
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+  return (
+    <div
+      className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      onClick={() => setIsOpen(!isOpened)}
+    >
+      <Text size={"m"} bold>
+        {title}
+      </Text>
+      {counter && <Counter count={counter} size="s" />}
+      <ArrowButton
+        isOpened={isOpened}
+        iconSize={"s"}
+        buttonSize={"s"}
+        className={styles["report-metadata-header-arrow"]}
+      />
+    </div>
+  );
+};

package/src/components/MetadataButton/styles.scss

@@ -0,0 +1,53 @@
+.report-metadata-header-arrow {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+
+.report-metadata-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.report-metadata-header {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+  transition:
+    background-color 200ms,
+    opacity 200ms;
+
+  margin: 6px 0;
+
+  &:after {
+    content: "";
+    padding: 6px 8px;
+    border-radius: 8px;
+    left: -8px;
+    top: -6px;
+    position: absolute;
+    width: calc(100% + 16px);
+    height: calc(100% + 12px);
+    z-index: 0;
+    background-color: transparent;
+    transition: background-color 200ms;
+  }
+
+  &:hover {
+    &:after {
+      background-color: var(--bg-control-flat-medium);
+    }
+
+    .report-metadata-header-arrow {
+      opacity: 1;
+    }
+  }
+}
+
+.report-metadata-header-opened {
+  .report-metadata-header-arrow {
+    transform: rotate(0);
+    opacity: 0;
+  }
+}

package/src/components/Modal/index.tsx

@@ -0,0 +1,22 @@
+import { Modal, type ModalTranslations } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { isModalOpen, modalData } from "@/stores/modal";
+
+export const ModalComponent = () => {
+  const { t } = useI18n("controls");
+
+  const translations: ModalTranslations = {
+    tooltipDownload: t("downloadAttachment"),
+    tooltipPreview: t("previewAttachment"),
+    openInNewTabButton: t("openInNewTab"),
+  };
+
+  return (
+    <Modal
+      {...modalData.value}
+      translations={translations}
+      isModalOpen={isModalOpen.value}
+      closeModal={() => (isModalOpen.value = false)}
+    />
+  );
+};