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

package/src/components/ReportGlobalErrors/styles.scss

@@ -0,0 +1,12 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-global-errors {
+  padding: 20px 0;
+}
+
+.report-global-errors-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/ReportHeader/ReportHeaderLogo.tsx

@@ -1,10 +1,14 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { ReportLogo } from "@allurereport/web-components";
 import * as styles from "@/components/ReportHeader/styles.scss";
-import { ReportLogo } from "@/components/ReportLogo";
+import type { AwesomeReportOptions } from "../../../types";
 
 export const ReportHeaderLogo = () => {
+  const { logo } = getReportOptions<AwesomeReportOptions>() ?? {};
+
   return (
     <div className={styles["report-header-logo"]}>
-      <ReportLogo />
+      <ReportLogo logo={logo} />
     </div>
   );
 };

package/src/components/ReportHeader/ReportHeaderPie.tsx

@@ -1,5 +1,4 @@
-import { Loadable } from "@allurereport/web-components";
-import { SuccessRatePieChart } from "@allurereport/web-components";
+import { Loadable, SuccessRatePieChart } from "@allurereport/web-components";
 import { pieChartStore } from "@/stores/chart";
 import * as styles from "./styles.scss";
 

package/src/components/ReportHeader/index.tsx

@@ -1,31 +1,57 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { Heading, Text } from "@allurereport/web-components";
-import type { AllureAwesomeReportOptions } from "types";
+import { Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
+import type { AwesomeReportOptions } from "types";
 import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
 import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
-import { currentLocaleIso } from "@/stores";
+import { TrStatus } from "@/components/TestResult/TrStatus";
+import { currentLocaleIso, useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {
-  const { reportName, createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+  const { reportName, createdAt } = getReportOptions<AwesomeReportOptions>() ?? {};
+  const { t } = useI18n("ui");
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "long",
     day: "numeric",
     year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
   });
 
   return (
     <div className={styles["report-header"]}>
       <div className={styles["report-wrapper"]}>
         <ReportHeaderLogo />
-        <div className={styles["report-wrapper-text"]}>
-          <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]} data-testid="report-title">
-            {reportName}
-          </Heading>
-          <Text type="paragraph" size="m" className={styles["report-date"]}>
-            {formattedCreatedAt}
-          </Text>
-        </div>
+        <Loadable
+          source={globalsStore}
+          renderData={({ exitCode }) => {
+            const code = exitCode?.actual ?? exitCode?.original;
+
+            return (
+              <div className={styles["report-wrapper-text"]} data-testid="report-header">
+                <div className={styles["report-header-title"]}>
+                  {code !== undefined && <TrStatus status={code === 0 ? "passed" : "failed"} />}
+                  <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]} data-testid="report-title">
+                    {reportName}
+                  </Heading>
+                </div>
+                <Text type="paragraph" size="m" className={styles["report-date"]} data-testid="report-data">
+                  {code === undefined
+                    ? formattedCreatedAt
+                    : exitCode.actual !== undefined
+                      ? t("finishedAtBoth", {
+                          formattedCreatedAt,
+                          actual: exitCode.actual,
+                          original: exitCode.original,
+                        })
+                      : t("finishedAtOriginal", { formattedCreatedAt, original: exitCode.original })}
+                </Text>
+              </div>
+            );
+          }}
+        />
       </div>
       <ReportHeaderPie />
     </div>

package/src/components/ReportHeader/styles.scss

@@ -2,8 +2,10 @@
   display: flex;
   column-gap: 12px;
   justify-content: space-between;
-  padding: 24px;
+  padding: 24px 24px 0;
   align-items: flex-start;
+  background: var(--bg-base-primary);
+  border-radius: 8px;
 }
 
 .report-wrapper {
@@ -47,3 +49,9 @@
 .report-header-pie-chart {
   width: 88px;
 }
+
+.report-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0 4px;
+}

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,81 +1,73 @@
-import { type Statistic, statusesList } from "@allurereport/core-api";
-import { Loadable } from "@allurereport/web-components";
+import { type Statistic, capitalize, statusesList } from "@allurereport/core-api";
 import { computed } from "@preact/signals";
-import type { FunctionComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/ReportMetadata/styles.scss";
-import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
-import { capitalize } from "@/utils/capitalize";
 
-export const MetadataSummary: FunctionComponent = () => {
+export interface MetadataSummaryProps {
+  stats: Statistic;
+}
+
+const metadataTestsTypes = ["flaky", "new", "retries"] as const as (keyof Statistic)[];
+
+export const MetadataSummary: FunctionalComponent<MetadataSummaryProps> = ({ stats }) => {
   const { t } = useI18n("statuses");
   const { t: testSummary } = useI18n("testSummary");
 
-  return (
-    <Loadable
-      source={statsStore}
-      renderError={() => null}
-      renderData={(stats) => {
-        const allTest = computed(() => ({
-          title: capitalize(t("total")),
-          type: "all",
-          count: stats.total,
-        }));
-        const metaDataTests = ["flaky", "retry"]
-          .map((key) => {
-            if (!stats[key as keyof Statistic]) {
-              return;
-            }
-            const title = testSummary(key);
-            const props = { title, count: stats[key as keyof Statistic] || 0, type: key };
+  const allTest = computed(() => ({
+    title: testSummary("total"),
+    type: "all",
+    count: stats.total,
+  }));
 
-            return (
-              <div key={key}>
-                <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
-              </div>
-            );
-          })
-          .filter(Boolean);
+  const metaDataTests = metadataTestsTypes
+    .map((type) => {
+      if (!stats[type]) {
+        return;
+      }
 
-        const metadataStatuses = statusesList
-          .map((status) => ({ status, value: stats[status] }))
-          .filter(({ value }) => value)
-          .map(({ status, value }) => {
-            const title = capitalize(t(status) ?? status ?? "");
-            const props = {
-              title,
-              count: value,
-              status,
-            } as MetadataProps;
+      const props = { title: testSummary(type), count: stats[type] || 0, type: type };
 
-            return (
-              <MetadataItem
-                data-testid={`metadata-item-${status}`}
-                key={status}
-                props={props}
-                renderComponent={MetadataTestType}
-              />
-            );
-          });
+      return (
+        <div key={type}>
+          <MetadataItem data-testid={`metadata-item-${type}`} props={props} renderComponent={MetadataWithIcon} />
+        </div>
+      );
+    })
+    .filter(Boolean);
 
-        return (
-          <div class={styles["report-metadata-summary"]}>
-            <div className={styles["report-metadata-all-tests"]}>
-              <MetadataItem
-                data-testid="metadata-item-total"
-                props={allTest.value}
-                renderComponent={MetadataWithIcon}
-              />
-              {Boolean(metaDataTests.length) && <div className={styles["report-metadata-separator"]} />}
-              {metaDataTests}
-            </div>
-            <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
-          </div>
-        );
-      }}
-    />
+  const metadataStatuses = statusesList
+    .map((status) => ({ status, value: stats[status] }))
+    .filter(({ value }) => value)
+    .map(({ status, value }) => {
+      const title = capitalize(t(status) ?? status ?? "");
+      const props = {
+        title,
+        count: value,
+        status,
+      } as MetadataProps;
+
+      return (
+        <MetadataItem
+          data-testid={`metadata-item-${status}`}
+          key={status}
+          props={props}
+          renderComponent={MetadataTestType}
+        />
+      );
+    });
+
+  return (
+    <div class={styles["report-metadata-summary"]}>
+      <div className={styles["report-metadata-all-tests"]}>
+        <MetadataItem data-testid="metadata-item-total" props={allTest.value} renderComponent={MetadataWithIcon} />
+        {Boolean(metaDataTests.length) && <div className={styles["report-metadata-separator"]} />}
+        {metaDataTests}
+      </div>
+      <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
+    </div>
   );
 };

package/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -4,18 +4,16 @@ import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {
-  flaky: allureIcons.lineGeneralZap,
-  retry: allureIcons.lineArrowsRefreshCcw1,
-  new: allureIcons.lineAlertsNotificationBox,
+  flaky: allureIcons.lineIconBomb2,
+  retries: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNew,
 };
 
-export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => {
-  return (
-    <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
-      {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
-      <Text size={"m"} bold>
-        {count}
-      </Text>
-    </div>
-  );
-};
+export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => (
+  <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
+    {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
+    <Text size={"m"} bold>
+      {count}
+    </Text>
+  </div>
+);

package/src/components/ReportMetadata/index.tsx

@@ -1,24 +1,34 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
 import { Loadable } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
+import { reportStatsStore, statsByEnvStore, useI18n } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
 import { envInfoStore } from "@/stores/envInfo";
+import { fetchVariables, variables } from "@/stores/variables";
 import * as styles from "./styles.scss";
 
 export interface MetadataItem extends EnvironmentItem {
   value?: string;
 }
 
+// TODO: check, where do we use the component and refactor it up to our needs
 export type MetadataProps = {
   envInfo?: MetadataItem[];
   size?: "s" | "m";
   groupedLabels?: Record<string, string[]>;
 };
 
-const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+export type MetadataVariablesProps = {
+  variables?: Record<string, any>;
+  size?: "s" | "m";
+  groupedLabels?: Record<string, string[]>;
+};
+
+const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo = [] }) => {
   const [isOpened, setIsOpen] = useState(true);
   const convertedEnvInfo = envInfo.map((env) => {
     return { ...env, value: env.values.join(", ") };
@@ -32,10 +42,47 @@ const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
   );
 };
 
+const MetadataVariables: FunctionalComponent<MetadataVariablesProps> = (props) => {
+  const { t } = useI18n("ui");
+  const [isOpened, setIsOpen] = useState(true);
+  const convertedEnvInfo = Object.entries(props.variables).map(([key, value]) => {
+    return {
+      name: key,
+      value,
+    } as MetadataItem;
+  });
+
+  return (
+    <div class={styles["report-metadata"]} data-testid={"report-variables"}>
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        title={t("variables")}
+        counter={Object.keys(props.variables).length}
+        data-testid={"report-variables-button"}
+      />
+      {isOpened && <MetadataList envInfo={convertedEnvInfo} />}
+    </div>
+  );
+};
+
 export const ReportMetadata = () => {
+  const stats = currentEnvironment.value
+    ? statsByEnvStore.value.data[currentEnvironment.value]
+    : reportStatsStore.value.data;
+
+  useEffect(() => {
+    fetchVariables(currentEnvironment.value);
+  }, [currentEnvironment.value]);
+
   return (
     <div className={styles["report-metadata-wrapper"]}>
-      <MetadataSummary />
+      {stats && <MetadataSummary stats={stats} />}
+      <Loadable
+        source={variables}
+        transformData={(data) => data?.[currentEnvironment.value ?? "default"] ?? {}}
+        renderData={(data) => !!Object.keys(data).length && <MetadataVariables variables={data} />}
+      />
       <Loadable
         source={envInfoStore}
         renderError={() => null}

package/src/components/ReportMetadata/styles.scss

@@ -6,7 +6,6 @@
 }
 
 .report-metadata-wrapper {
-  padding: 0 24px;
   align-items: center;
 }
 
@@ -27,7 +26,6 @@
   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%;
 }

package/src/components/ReportQualityGateResults/index.tsx

@@ -0,0 +1,42 @@
+import { Loadable, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { TrError } from "@/components/TestResult/TrError";
+import { useI18n } from "@/stores";
+import { qualityGateStore } from "@/stores/qualityGate";
+import * as styles from "./styles.scss";
+
+export const ReportQualityGateResults = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={qualityGateStore}
+      renderData={(results) => {
+        if (!results.length) {
+          return <div className={styles["report-quality-gate-results-empty"]}>{t("no-quality-gate-results")}</div>;
+        }
+
+        return (
+          <ul className={styles["report-quality-gate-results"]}>
+            {results.map((result) => (
+              <li key={result.rule} data-testid="report-quality-gate-result">
+                <div className={styles["report-quality-gate-result"]}>
+                  <SvgIcon id={allureIcons.solidXCircle} className={styles["report-quality-gate-result-icon"]} />
+                  <div className={styles["report-quality-gate-result-content"]}>
+                    <Text tag="p" size="l" type="ui" bold data-testid="report-quality-gate-result-rule">
+                      {result.rule}
+                    </Text>
+                    <TrError
+                      className={styles["report-quality-gate-result-error"]}
+                      message={result.message}
+                      data-testid="report-quality-gate-result-message"
+                    />
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        );
+      }}
+    />
+  );
+};

package/src/components/ReportQualityGateResults/styles.scss

@@ -0,0 +1,44 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-quality-gate-results {
+  padding: 20px 0;
+
+  & > li + li {
+    margin-top: 12px;
+  }
+}
+
+.report-quality-gate-results-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.report-quality-gate-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 0 8px;
+
+  b {
+    font-weight: 700;
+  }
+}
+
+.report-quality-gate-result-icon {
+  flex: 0 0 auto;
+  margin-top: 3px;
+  color: var(--bg-support-capella);
+}
+
+.report-quality-gate-result-content {
+  flex: 1 1 auto;
+
+  & > * + * {
+    margin-top: 4px;
+  }
+}
+
+.report-quality-gate-result-error {
+  margin-top: 8px;
+}

package/src/components/SectionPicker/index.tsx

@@ -0,0 +1,55 @@
+import { DropdownButton, Menu, SvgIcon, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { availableSections, currentSection, setSection } from "@/stores/sections";
+import * as styles from "./styles.scss";
+
+export type SectionItem = {
+  name: string;
+  logo: string;
+};
+
+const defaultSection: SectionItem = { name: "report", logo: allureIcons.reportLogo };
+
+const sectionMap: Record<string, SectionItem> = {
+  default: defaultSection,
+  charts: { name: "charts", logo: allureIcons.lineChartsBarChartSquare },
+  timeline: { name: "timeline", logo: allureIcons.lineChartsTimeline },
+};
+
+export const SectionPicker = () => {
+  const selectedSection = sectionMap[currentSection.value] || defaultSection;
+  const { t } = useI18n("sections");
+
+  return (
+    <Menu
+      size="m"
+      placement={"bottom-start"}
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="m"
+          text={t(selectedSection.name)}
+          icon={selectedSection.logo}
+          isExpanded={isOpened}
+          onClick={onClick}
+          iconSize={"xs"}
+        />
+      )}
+    >
+      <Menu.Section>
+        {["default", ...availableSections.value].map((value) => (
+          <Menu.ItemWithCheckmark
+            onClick={() => setSection(value)}
+            key={value}
+            isChecked={currentSection.value === value}
+          >
+            <div className={styles["menu-item"]}>
+              <SvgIcon id={sectionMap[value]?.logo} size={"s"} />
+              {t(sectionMap[value]?.name) || value}
+            </div>
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/SectionPicker/styles.scss

@@ -0,0 +1,5 @@
+.menu-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/SectionSwitcher/index.tsx

@@ -0,0 +1,16 @@
+import type { VNode } from "preact";
+import { Charts } from "@/components/Charts";
+import { Report } from "@/components/Report";
+import { currentSection } from "@/stores/sections";
+import { Timeline } from "../Timeline";
+import * as styles from "./styles.scss";
+
+export const SectionSwitcher = () => {
+  const sectionMap: Record<string, VNode> = {
+    report: <Report />,
+    charts: <Charts />,
+    timeline: <Timeline />,
+  };
+
+  return <div className={styles.layout}>{sectionMap[currentSection.value] || sectionMap.report}</div>;
+};

package/src/components/SectionSwitcher/styles.scss

@@ -0,0 +1,4 @@
+.layout {
+  flex: 1 1 auto;
+  overflow: hidden;
+}

package/src/components/SideBySide/index.tsx

@@ -0,0 +1,52 @@
+import type { JSX } from "preact";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import Split from "split.js";
+import * as styles from "./styles.scss";
+
+const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const leftContent = useMemo(() => left, [left]);
+  const rightContent = useMemo(() => right, [right]);
+
+  useEffect(() => {
+    const sizes = JSON.parse(localStorage.getItem("sideBySidePosition") || "[50, 50]");
+
+    const splitter = Split([`.${styles["side-left"]}`, `.${styles["side-right"]}`], {
+      sizes,
+      gutterSize: 7,
+      gutter: (): HTMLElement => {
+        const gutter = document.createElement("div");
+        gutter.className = `${styles.gutter}`;
+        gutter.addEventListener("dblclick", () => {
+          const currentSizes = splitter.getSizes();
+          if (JSON.stringify(currentSizes) === "[50,50]") {
+            splitter.setSizes([30, 70]);
+            localStorage.setItem("sideBySidePosition", JSON.stringify([30, 70]));
+            return;
+          }
+          splitter.setSizes([50, 50]);
+          localStorage.setItem("sideBySidePosition", JSON.stringify([50, 50]));
+        });
+        return gutter;
+      },
+      onDragEnd: () => {
+        const newSizes = splitter.getSizes();
+        localStorage.setItem("sideBySidePosition", JSON.stringify(newSizes));
+      },
+    });
+
+    return () => {
+      splitter.destroy();
+    };
+  }, []);
+
+  return (
+    <div class={styles.side} ref={containerRef}>
+      <div class={styles["side-left"]}>{leftContent}</div>
+      <div class={styles["side-right"]}>{rightContent}</div>
+    </div>
+  );
+};
+
+export default SideBySide;