@allurereport/web-awesome 3.0.1 → 3.2.0

package/dist/single/{app-996d3b5869f8fc942b66.js.LICENSE.txt → app-01fed10ad5f9083fd39c.js.LICENSE.txt}

@@ -8,3 +8,10 @@
      * @namespace
      * @public
      */
+
+/**!
+ * Sortable 1.15.6
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-996d3b5869f8fc942b66.js"
+  "main.js": "app-01fed10ad5f9083fd39c.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,19 +31,18 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.0.1",
-    "@allurereport/core-api": "3.0.1",
-    "@allurereport/plugin-api": "3.0.1",
-    "@allurereport/web-commons": "3.0.1",
-    "@allurereport/web-components": "3.0.1",
-    "@preact/signals": "^2.5.1",
+    "@allurereport/charts-api": "3.2.0",
+    "@allurereport/core-api": "3.2.0",
+    "@allurereport/plugin-api": "3.2.0",
+    "@allurereport/web-commons": "3.2.0",
+    "@allurereport/web-components": "3.2.0",
+    "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
     "preact": "^10.28.2",
-    "prismjs": "^1.30.0",
-    "reset.css": "^2.0.2"
+    "prismjs": "^1.30.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -60,7 +59,6 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
-    "@types/diff": "^7",
     "@types/eslint": "^8.56.11",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.17.9",
@@ -74,7 +72,7 @@
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
     "css-loader": "^7.1.2",
-    "diff": "^7.0.0",
+    "diff": "^8.0.3",
     "eslint": "^8.57.0",
     "eslint-config-preact": "^1.5.0",
     "eslint-config-prettier": "^9.1.0",

package/src/assets/scss/vars.scss

@@ -1,6 +1,9 @@
 :root {
   --shadow-small: 0px 2px 10px 0px rgba(48, 57, 64, 0.08);
+  --shadow-small-01: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
+  --shadow-small-02: 0px 1px 3px 0px rgba(16, 24, 40, 0.06);
   --shadow-medium: 0px 8px 24px 0px rgba(48, 57, 64, 0.12);
+  --shadow-large: 0px 2px 24px 0px rgba(48, 57, 64, 0.12);
   --shadow-raised: 0px 2px 6px 0px rgba(48, 57, 64, 0.08);
 
   --color-change-transition-duration: 0.15s;

package/src/components/BaseLayout/index.tsx

@@ -1,7 +1,7 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
-import { route } from "@/stores/router";
+import { testResultRoute } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -11,30 +11,34 @@ export type BaseLayoutProps = {
 };
 
 export const BaseLayout = () => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const { matches, params } = testResultRoute.value;
 
-  const content = testResultId ? (
-    <Loadable
-      source={testResultStore}
-      renderLoader={() => <PageLoader />}
-      transformData={(data) => data[testResultId]}
-      renderData={(testResult) => (
-        <>
-          <div className={styles.wrapper} key={testResult?.id}>
-            <TestResult testResult={testResult} />
-          </div>
-        </>
-      )}
-    />
-  ) : (
-    <div className={styles.wrapper}>
-      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
-    </div>
-  );
+  if (matches) {
+    const testResultId = params.testResultId;
+
+    return (
+      <div className={styles.layout} data-testid="base-layout">
+        <Loadable
+          source={testResultStore}
+          renderLoader={() => <PageLoader />}
+          transformData={(data) => data[testResultId]}
+          renderData={(testResult) => (
+            <>
+              <div className={styles.wrapper} key={testResult?.id}>
+                <TestResult testResult={testResult} />
+              </div>
+            </>
+          )}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className={styles.layout} data-testid="base-layout">
-      {content}
+      <div className={styles.wrapper}>
+        <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+      </div>
     </div>
   );
 };

package/src/components/BaseLayout/styles.scss

@@ -6,6 +6,7 @@
   font-size: 14px;
   height: 100%;
   overflow: auto;
+  scrollbar-width: thin;
 }
 
 .wrapper {

package/src/components/Charts/index.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { ChartType } from "@allurereport/charts-api";
 import { type UIChartData } from "@allurereport/web-commons";
+import { themeStore } from "@allurereport/web-commons";
 import {
   CurrentStatusChartWidget,
   DurationDynamicsChartWidget,
   DurationsChartWidget,
-  FBSUAgePyramidChartWidget,
   Grid,
   GridItem,
   HeatMapWidget,
   Loadable,
   PageLoader,
   StabilityDistributionWidget,
+  StatusAgePyramidChartWidget,
   StatusDynamicsChartWidget,
   StatusTransitionsChartWidget,
   TestBaseGrowthDynamicsChartWidget,
@@ -20,13 +21,15 @@ import {
   TrSeveritiesChartWidget,
   TreeMapChartWidget,
 } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { themeStore } from "@/stores";
 import { chartsStore, fetchChartsData } from "@/stores/chart";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
+const currentTheme = computed(() => themeStore.value.current);
+
 const getChartWidgetByType = (
   chartData: UIChartData,
   { t, empty }: Record<string, (key: string, options?: any) => string>,
@@ -110,15 +113,15 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.FBSUAgePyramid: {
-      const title = chartData.title ?? t("fbsuAgePyramid.title");
+    case ChartType.StatusAgePyramid: {
+      const title = chartData.title ?? t("statusAgePyramid.title");
 
       return (
-        <FBSUAgePyramidChartWidget
+        <StatusAgePyramidChartWidget
           title={title}
           data={chartData.data}
           statuses={chartData.statuses}
-          i18n={(key, props = {}) => t(`fbsuAgePyramid.${key}`, props)}
+          i18n={(key, props = {}) => t(`statusAgePyramid.${key}`, props)}
         />
       );
     }
@@ -210,7 +213,7 @@ export const Charts = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={themeStore.value}>
+    <ThemeProvider theme={currentTheme.value}>
       <Loadable
         source={chartsStore}
         renderLoader={() => <PageLoader />}

package/src/components/Footer/FooterVersion.tsx

@@ -1,23 +1,29 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Text } from "@allurereport/web-components";
-import { useEffect, useState } from "preact/hooks";
+import { 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 [createdAt] = useState(() => {
     const reportOptions = getReportOptions<AwesomeReportOptions>();
     if (reportOptions?.createdAt) {
-      setCreatedAt(Number(reportOptions.createdAt));
+      return Number(reportOptions.createdAt);
     }
+
+    return undefined;
+  });
+
+  const [currentVersion] = useState<string>(() => {
+    const reportOptions = getReportOptions<AwesomeReportOptions>();
+
     if (reportOptions?.allureVersion) {
-      setCurrentVersion(reportOptions.allureVersion as string);
+      return reportOptions.allureVersion as string;
     }
-  }, []);
+
+    return undefined;
+  });
 
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "numeric",

package/src/components/Header/index.tsx

@@ -1,10 +1,11 @@
+import { computed } from "@preact/signals";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
 import { SectionPicker } from "@/components/SectionPicker";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
-import { route } from "@/stores/router";
-import { availableSections } from "@/stores/sections";
+import { testResultRoute } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { CiInfo } from "./CiInfo";
 import * as styles from "./styles.scss";
@@ -13,14 +14,15 @@ interface HeaderProps {
   className?: ClassValue;
 }
 
-export const Header = ({ className }: HeaderProps) => {
-  const testResultId = route.value.params?.testResultId;
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const testResult = computed(() => testResultStore.value?.data?.[currentTrId.value]);
 
+export const Header = ({ className }: HeaderProps) => {
   return (
     <div className={clsx(styles.above, className)}>
-      {Boolean(availableSections.value?.length) && <SectionPicker />}
-      {!testResultId && <CiInfo />}
-      {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
+      <SectionPicker />
+      {!isTestResultRoute.value && <CiInfo />}
+      {isTestResultRoute.value && <TrBreadcrumbs testResult={testResult.value} />}
       <HeaderControls className={styles.right} />
     </div>
   );

package/src/components/HeaderControls/index.tsx

@@ -1,20 +1,23 @@
+import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
 import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 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;
 }
 
+const selectedTheme = computed(() => themeStore.value.selected);
+
 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} />
+      <ThemeButton theme={selectedTheme.value} toggleTheme={toggleUserTheme} />
     </div>
   );
 };

package/src/components/MainReport/index.tsx

@@ -6,8 +6,8 @@ import { ReportGlobalAttachments } from "@/components/ReportGlobalAttachments";
 import { ReportGlobalErrors } from "@/components/ReportGlobalErrors";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
-import { reportStatsStore } from "@/stores";
-import { useI18n } from "@/stores";
+import { reportStatsStore, useI18n } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
 import { isSplitMode } from "@/stores/layout";
 import { qualityGateStore } from "@/stores/qualityGate";
@@ -45,53 +45,58 @@ const MainReport = () => {
   const { t } = useI18n("tabs");
 
   return (
-    <>
-      <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
-        <ReportHeader />
-        <div className={styles["main-report-tabs"]}>
-          <NavTabs initialTab={ReportRootTab.Results}>
-            <NavTabsList>
-              <Loadable
-                source={reportStatsStore}
-                renderData={(stats) => (
-                  <NavTab id={ReportRootTab.Results}>
-                    {t("results")} <Counter count={stats?.total ?? 0} />
+    <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
+      <ReportHeader />
+      <div className={styles["main-report-tabs"]}>
+        <NavTabs initialTab={ReportRootTab.Results}>
+          <NavTabsList>
+            <Loadable
+              source={reportStatsStore}
+              renderData={(stats) => (
+                <NavTab id={ReportRootTab.Results}>
+                  {t("results")} <Counter count={stats?.total ?? 0} />
+                </NavTab>
+              )}
+            />
+            <Loadable
+              source={qualityGateStore}
+              renderData={(results) => {
+                const currentEnvResults = currentEnvironment.value
+                  ? (results[currentEnvironment.value] ?? [])
+                  : Object.values(results).flatMap((envResults) => envResults);
+
+                return (
+                  <NavTab id={ReportRootTab.QualityGate}>
+                    {t("qualityGates")}{" "}
+                    <Counter
+                      status={currentEnvResults.length > 0 ? "failed" : undefined}
+                      count={currentEnvResults.length}
+                    />
+                  </NavTab>
+                );
+              }}
+            />
+            <Loadable
+              source={globalsStore}
+              renderData={({ attachments = [], errors = [] }) => (
+                <>
+                  <NavTab id={ReportRootTab.GlobalAttachments}>
+                    {t("globalAttachments")} <Counter count={attachments.length} />
                   </NavTab>
-                )}
-              />
-              <Loadable
-                source={qualityGateStore}
-                renderData={(results) => (
-                  <>
-                    <NavTab id={ReportRootTab.QualityGate}>
-                      {t("qualityGates")}{" "}
-                      <Counter status={results.length > 0 ? "failed" : undefined} count={results.length} />
-                    </NavTab>
-                  </>
-                )}
-              />
-              <Loadable
-                source={globalsStore}
-                renderData={({ attachments = [], errors = [] }) => (
-                  <>
-                    <NavTab id={ReportRootTab.GlobalAttachments}>
-                      {t("globalAttachments")} <Counter count={attachments.length} />
-                    </NavTab>
-                    <NavTab id={ReportRootTab.GlobalErrors}>
-                      {t("globalErrors")}{" "}
-                      <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
-                    </NavTab>
-                  </>
-                )}
-              />
-            </NavTabsList>
-            <div className={styles["main-report-tabs-content"]}>
-              <MainReportContent />
-            </div>
-          </NavTabs>
-        </div>
+                  <NavTab id={ReportRootTab.GlobalErrors}>
+                    {t("globalErrors")}{" "}
+                    <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
+                  </NavTab>
+                </>
+              )}
+            />
+          </NavTabsList>
+          <div className={styles["main-report-tabs-content"]}>
+            <MainReportContent />
+          </div>
+        </NavTabs>
       </div>
-    </>
+    </div>
   );
 };
 export default MainReport;

package/src/components/MainReport/styles.scss

@@ -9,6 +9,7 @@
   overflow: auto;
   height: 100%;
   border-radius: 0;
+  scrollbar-width: thin;
 }
 
 .main-report-tabs {

package/src/components/Metadata/index.tsx

@@ -1,11 +1,13 @@
-import { Button, Menu, Text, allureIcons } from "@allurereport/web-components";
+import { Button, ButtonLink, 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 { getTagsFilterUrl } from "@/stores/treeFilters/utils";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+import { parseOwnerAddress } from "@/utils/ownerAddress";
 import * as styles from "./styles.scss";
 
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
@@ -50,8 +52,65 @@ export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
   );
 };
 
-const MetadataTooltip = (props: { value: string }) => {
-  const { value } = props;
+const OpenFilterUrlButton: FunctionalComponent<{ url: string }> = ({ url }) => {
+  const { t } = useI18n("filters");
+
+  return (
+    <ButtonLink
+      href={url}
+      target="_blank"
+      style="ghost"
+      icon={allureIcons.lineGeneralLinkExternal}
+      text={t("goto_filter")}
+    />
+  );
+};
+
+const MAX_URL_LENGTH = 25;
+
+const OwnerAction = (props: { ownerValue: string }) => {
+  const { t } = useI18n("ui");
+  const { ownerValue } = props;
+  const ownerAddress = parseOwnerAddress(ownerValue);
+
+  if (ownerAddress.type === "none") {
+    return null;
+  }
+
+  // Don't need to show copy email button here because
+  // we already have a button to copy the whole owner value
+  if (ownerAddress.type === "email" && ownerAddress.email === ownerValue) {
+    return null;
+  }
+
+  if (ownerAddress.type === "email") {
+    return (
+      <Button
+        icon={allureIcons.lineGeneralCopy3}
+        style="outline"
+        text={t("copy-email")}
+        onClick={() => copyToClipboard(ownerAddress.email)}
+      />
+    );
+  }
+
+  if (ownerAddress.type === "url") {
+    const truncatedUrl =
+      ownerAddress.url.length > MAX_URL_LENGTH ? `${ownerAddress.url.slice(0, MAX_URL_LENGTH)}...` : ownerAddress.url;
+    return (
+      <ButtonLink
+        href={ownerAddress.url}
+        target="_blank"
+        style="ghost"
+        icon={allureIcons.lineGeneralLinkExternal}
+        text={truncatedUrl}
+      />
+    );
+  }
+};
+
+const MetadataTooltip = (props: { value: string; name: string }) => {
+  const { value, name } = props;
   const { t } = useI18n("ui");
 
   return (
@@ -59,6 +118,8 @@ const MetadataTooltip = (props: { value: string }) => {
       <div className={styles["metadata-tooltip-value"]}>
         <Text>{value}</Text>
       </div>
+      {name === "tag" && <OpenFilterUrlButton url={getTagsFilterUrl([value])} />}
+      {name === "owner" && <OwnerAction ownerValue={value} />}
       <Button
         style={"outline"}
         icon={allureIcons.lineGeneralCopy3}
@@ -69,10 +130,40 @@ const MetadataTooltip = (props: { value: string }) => {
   );
 };
 
+const MetaDataOwnerLabel: FunctionalComponent<{
+  value: string;
+  size?: "s" | "m";
+}> = ({ value, size = "s" }) => {
+  const ownerAddress = parseOwnerAddress(value);
+  const displayName = ownerAddress.displayName ?? 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"]}>
+            {displayName}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} name={"owner"} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
 const MetaDataKeyLabel: FunctionalComponent<{
+  name: string;
   size?: "s" | "m";
   value: string;
-}> = ({ size = "s", value }) => {
+}> = ({ name, size = "s", value }) => {
+  if (name === "owner") {
+    return <MetaDataOwnerLabel value={value} size={size} />;
+  }
+
   return (
     <Menu
       size="xl"
@@ -85,7 +176,7 @@ const MetaDataKeyLabel: FunctionalComponent<{
       )}
     >
       <Menu.Section>
-        <MetadataTooltip value={value} />
+        <MetadataTooltip value={value} name={name} />
       </Menu.Section>
     </Menu>
   );
@@ -110,12 +201,12 @@ const MetadataKeyValue: FunctionalComponent<{
       {values?.length ? (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           {values.map((item) => (
-            <MetaDataKeyLabel key={item} value={item} />
+            <MetaDataKeyLabel key={item} value={item} name={title} />
           ))}
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value} />
+          <MetaDataKeyLabel value={value ?? ""} name={title} />
         </div>
       )}
     </div>

package/src/components/Metadata/styles.scss

@@ -92,6 +92,16 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
+
+  &:is(a) {
+    color: inherit;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .report-metadata-list {

package/src/components/ReportBody/HeaderActions.tsx

@@ -1,21 +1,12 @@
-import { SearchBox } from "@allurereport/web-components";
-import { useI18n } from "@/stores/locale";
-import { setTreeQuery, treeQuery } from "@/stores/treeFilters";
-import { Filters } from "./Filters";
+import { ReportFilters } from "../ReportFilters";
+import { ReportSearch } from "../ReportSearch";
 import * as styles from "./styles.scss";
 
-const Search = () => {
-  const { t } = useI18n("search");
-  const query = treeQuery.value;
-
-  return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setTreeQuery} />;
-};
-
 export const HeaderActions = () => {
   return (
     <div className={styles.headerActions}>
-      <Search />
-      <Filters />
+      <ReportSearch />
+      <ReportFilters />
     </div>
   );
 };