@allurereport/web-awesome 3.0.0-beta.10 → 3.0.0-beta.12

package/src/assets/scss/theme.scss

@@ -3,7 +3,6 @@
   --ad-other-modal-overlay: var(--ad-other-modal-overlay-day);
   --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-day);
   --bg-alpha-capella: var(--bg-alpha-capella-day);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-day);
   --bg-base-modal: var(--bg-base-modal-day);
   --bg-base-neutral: var(--bg-base-neutral-day);
   --bg-base-primary: var(--bg-base-primary-day);
@@ -49,6 +48,11 @@
   --on-text-primary: var(--on-text-primary-day);
   --on-text-secondary: var(--on-text-secondary-day);
   --scrollbar-color: var(--gray-300);
+  --bg-alpha-atlas: var(--atlas-day-darken-1-8);
+  --bg-alpha-rau: var(--rau-day-darken-1-8);
+  --bg-alpha-castor: var(--castor-day-darken-1-8);
+  --bg-alpha-skat: var(--skat-day-darken-1-8);
+  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-day);
 
   color-scheme: light;
 }
@@ -115,5 +119,9 @@
   --on-text-secondary: var(--on-text-secondary-night);
 
   --scrollbar-color: var(--gray-400);
+  --bg-alpha-atlas: var(--atlas-night-darken-5-12);
+  --bg-alpha-rau: var(--rau-night-darken-5-12);
+  --bg-alpha-castor: var(--castor-night-darken-5-20);
+  --bg-alpha-skat: var(--skat-night-darken-5-12);
   color-scheme: dark;
 }

package/src/assets/scss/vars.scss

@@ -5,5 +5,4 @@
 
   --color-change-transition-duration: 0.15s;
   --interaction-transition-duration: 0.1s;
-  --footer-header-sizes: 105px;
 }

package/src/components/BaseLayout/styles.scss

@@ -23,7 +23,7 @@
 
 .test-results {
   min-height: 320px;
-  padding-bottom: 32px;
+  padding-bottom: 64px;
   padding-top: 12px;
 }
 
@@ -51,10 +51,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 8px;
+  padding: 8px;
 }
 
 .test-result-errors {
   padding: 0 24px;
   margin-top: 12px;
+  gap: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  & > div {
+    flex: 1 1 auto;
+  }
 }

package/src/components/EnvironmentPicker/index.tsx

@@ -0,0 +1,51 @@
+import { DropdownButton, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { currentEnvironment, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+import * as styles from "./styles.scss";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+export const EnvironmentPicker = () => {
+  const { t } = useI18n("environments");
+  const environment = currentEnvironment.value;
+  const handleSelect = (selectedOption: string) => {
+    setCurrentEnvironment(selectedOption);
+  };
+
+  // TODO: use props instead
+  if (environmentsStore.value.data.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className={styles["environment-picker"]} data-testid={"environment-picker"}>
+      <SvgIcon id={allureIcons.environment} size={"s"} />
+      <Text className={styles["environment-picker-label"]} type={"ui"} size={"s"} bold>
+        {t("environment", { count: 1 })}:
+      </Text>
+      <Menu
+        size="s"
+        menuTrigger={({ isOpened, onClick }) => (
+          <DropdownButton
+            style="ghost"
+            size="s"
+            text={environment || t("all")}
+            isExpanded={isOpened}
+            data-testid={"environment-picker-button"}
+            onClick={onClick}
+          />
+        )}
+      >
+        <Menu.Section>
+          <Menu.ItemWithCheckmark onClick={() => handleSelect("")} isChecked={!environment}>
+            {t("all")}
+          </Menu.ItemWithCheckmark>
+          {environmentsStore.value.data.map((env) => (
+            <Menu.ItemWithCheckmark onClick={() => handleSelect(env)} key={env} isChecked={env === environment}>
+              {env}
+            </Menu.ItemWithCheckmark>
+          ))}
+        </Menu.Section>
+      </Menu>
+    </div>
+  );
+};

package/src/components/EnvironmentPicker/styles.scss

@@ -0,0 +1,9 @@
+.environment-picker {
+  display: flex;
+  align-items: center;
+  gap: 0 4px;
+}
+
+.environment-picker-label {
+  text-transform: capitalize;
+}

package/src/components/Footer/FooterLogo.tsx

@@ -1,5 +1,4 @@
-import { Text } from "@allurereport/web-components";
-import { ReportLogoFull } from "../ReportLogoFull";
+import { ReportLogoFull, Text } from "@allurereport/web-components";
 import * as styles from "./styles.scss";
 
 export const FooterLogo = () => {

package/src/components/Header/index.tsx

@@ -1,9 +1,7 @@
 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 { HeaderControls } from "@/components/HeaderControls";
+import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
 import { route } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import * as styles from "./styles.scss";
@@ -17,12 +15,8 @@ export const Header = ({ className }: HeaderProps) => {
 
   return (
     <div className={clsx(styles.above, className)}>
-      {id && <TestResultBreadcrumbs testResult={testResultStore.value?.data?.[id]} />}
-      <div className={styles.right}>
-        <LanguagePicker />
-        <ToggleLayout />
-        <ThemeButton />
-      </div>
+      {id && <TrBreadcrumbs testResult={testResultStore.value?.data?.[id]} />}
+      <HeaderControls className={styles.right} />
     </div>
   );
 };

package/src/components/HeaderControls/index.tsx

@@ -0,0 +1,20 @@
+import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { EnvironmentPicker } from "@/components/EnvironmentPicker";
+import ToggleLayout from "@/components/ToggleLayout";
+import { currentLocale, setLocale } from "@/stores/locale";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+interface HeaderControlsProps {
+  className?: string;
+}
+
+export const HeaderControls = ({ className }: HeaderControlsProps) => {
+  return (
+    <div className={className}>
+      <EnvironmentPicker />
+      <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
+      <ToggleLayout />
+      <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
+    </div>
+  );
+};

package/src/components/MainReport/styles.scss

@@ -7,5 +7,6 @@
 
 .scroll-inside {
   overflow: auto;
-  height: calc(100vh - var(--footer-header-sizes));
+  height: 100%;
+  border-radius: 0;
 }

package/src/components/Metadata/index.tsx

@@ -17,6 +17,7 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
     <div
       class={styles["report-metadata-list"]}
       style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
+      data-testid={"metadata-list"}
     >
       {envInfo?.map(({ name, values, value }) => (
         <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
@@ -25,7 +26,7 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
   );
 };
 
-export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
+export const TrMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
   return (
     <div class={styles["report-metadata-list"]}>
       {groupedLabels &&
@@ -97,22 +98,23 @@ const MetadataKeyValue: FunctionalComponent<{
   size?: "s" | "m";
 }> = ({ title, value, values, size = "m" }) => {
   return (
-    <div className={styles["report-metadata-keyvalue"]}>
+    <div className={styles["report-metadata-keyvalue"]} data-testid={"metadata-item"}>
       <Text
         type={"ui"}
         size={size}
         className={clsx(styles["report-metadata-keyvalue-title"], styles[`report-metadata-${size}`])}
+        data-testid={"metadata-item-key"}
       >
         {title}
       </Text>
       {values?.length ? (
-        <div className={styles["report-metadata-values"]}>
+        <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           {values.map((item) => (
             <MetaDataKeyLabel key={item} value={item} />
           ))}
         </div>
       ) : (
-        <div className={styles["report-metadata-values"]}>
+        <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           <MetaDataKeyLabel value={value} />
         </div>
       )}

package/src/components/MetadataButton/index.tsx

@@ -11,22 +11,30 @@ interface MetadataButtonProps {
   title?: string;
 }
 
-export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
+  isOpened,
+  setIsOpen,
+  counter,
+  title,
+  ...rest
+}) => {
   return (
-    <div
+    <button
+      {...rest}
       className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      type={"button"}
       onClick={() => setIsOpen(!isOpened)}
     >
       <Text size={"m"} bold>
         {title}
       </Text>
-      {counter && <Counter count={counter} size="s" />}
+      {counter !== null && <Counter count={counter} size="s" />}
       <ArrowButton
         isOpened={isOpened}
         iconSize={"s"}
         buttonSize={"s"}
         className={styles["report-metadata-header-arrow"]}
       />
-    </div>
+    </button>
   );
 };

package/src/components/MetadataButton/styles.scss

@@ -8,6 +8,9 @@
 }
 
 .report-metadata-header {
+  border: none;
+  background: none;
+  padding: 0;
   width: max-content;
   display: flex;
   align-items: center;

package/src/components/ReportBody/index.tsx

@@ -1,6 +1,6 @@
 import { statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
-import { statsStore } from "@/stores";
+import { reportStatsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { treeFiltersStore } from "@/stores/tree";
 import { capitalize } from "@/utils/capitalize";
@@ -15,13 +15,14 @@ const ALL_TAB = "total";
 
 const Header = () => {
   const { t } = useI18n("statuses");
+
   return (
     <header className={styles.header}>
       <HeaderActions />
       <div className={styles.headerRow}>
         <TabsList>
           <Loadable
-            source={statsStore}
+            source={reportStatsStore}
             renderData={(stats) => {
               const allStatuses = statusesList
                 .map((status) => ({ status, value: stats[status] }))

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/ReportMetadata/MetadataSummary.tsx

@@ -1,81 +1,74 @@
 import { type Statistic, statusesList } from "@allurereport/core-api";
-import { Loadable } from "@allurereport/web-components";
 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", "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

@@ -5,7 +5,7 @@ import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {
   flaky: allureIcons.lineGeneralZap,
-  retry: allureIcons.lineArrowsRefreshCcw1,
+  retries: allureIcons.lineArrowsRefreshCcw1,
   new: allureIcons.lineAlertsNotificationBox,
 };
 

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/SideBySide/styles.scss

@@ -1,13 +1,14 @@
 .side {
   width: 100%;
-  padding: 0;
   margin: 0;
   overflow: hidden;
   display: flex;
   max-width: 1920px;
   justify-content: space-between;
   height: 100%;
+  padding: 0 8px;
 }
+
 .wrapper {
   width: 100%;
   flex-direction: column;
@@ -15,7 +16,6 @@
 }
 
 .side-left {
-  padding: 8px 0 8px 8px;
   margin-right: auto;
   transition: width 50ms;
   will-change: width;
@@ -23,7 +23,6 @@
 
 .side-right {
   flex: 1 1 auto;
-  padding: 8px 8px 8px 0;
   margin-left: auto;
   transition: width 200ms;
   will-change: width, height;

package/src/components/SplitLayout/index.tsx

@@ -40,7 +40,7 @@ export const SplitLayout = () => {
     <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />
   );
 
-  const TestResultView = () => {
+  const TrView = () => {
     return testResultId ? (
       <Loadable
         source={testResultStore}
@@ -70,7 +70,7 @@ export const SplitLayout = () => {
   return (
     <div className={styles["side-by-side"]} data-testId={"split-layout"}>
       <Header className={styles.header} />
-      <SideBySide left={cachedMain} right={<TestResultView />} />
+      <SideBySide left={cachedMain} right={<TrView />} />
       <Footer />
     </div>
   );

package/src/components/SplitLayout/styles.scss

@@ -12,6 +12,7 @@
   flex-direction: column;
   margin: auto;
   position: relative;
+  height: 100%;
 }
 
 .content {
@@ -80,6 +81,6 @@
 }
 
 .header {
-  padding: 8px 8px 0;
+  padding: 8px;
   margin-bottom: 0;
 }

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

@@ -2,7 +2,7 @@ import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
-const TestStepsEmpty = () => {
+const TrStepsEmpty = () => {
   const { t } = useI18n("empty");
   return (
     <div className={styles["test-steps-empty"]}>
@@ -20,4 +20,4 @@ const TestStepsEmpty = () => {
   );
 };
 
-export default TestStepsEmpty;
+export default TrStepsEmpty;