@allurereport/web-awesome 3.0.1 → 3.1.0

package/dist/single/{app-996d3b5869f8fc942b66.js.LICENSE.txt → app-3ca67f29d0f1166c08ca.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-3ca67f29d0f1166c08ca.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,12 +31,12 @@
     "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.1.0",
+    "@allurereport/core-api": "3.1.0",
+    "@allurereport/plugin-api": "3.1.0",
+    "@allurereport/web-commons": "3.1.0",
+    "@allurereport/web-components": "3.1.0",
+    "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",

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,6 +1,7 @@
 /* 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,
@@ -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>,
@@ -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/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,10 +1,11 @@
-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 * as styles from "./styles.scss";
 
@@ -50,8 +51,22 @@ 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 MetadataTooltip = (props: { value: string; name: string }) => {
+  const { value, name } = props;
   const { t } = useI18n("ui");
 
   return (
@@ -59,6 +74,7 @@ const MetadataTooltip = (props: { value: string }) => {
       <div className={styles["metadata-tooltip-value"]}>
         <Text>{value}</Text>
       </div>
+      {name === "tag" && <OpenFilterUrlButton url={getTagsFilterUrl([value])} />}
       <Button
         style={"outline"}
         icon={allureIcons.lineGeneralCopy3}
@@ -70,9 +86,10 @@ const MetadataTooltip = (props: { value: string }) => {
 };
 
 const MetaDataKeyLabel: FunctionalComponent<{
+  name: string;
   size?: "s" | "m";
   value: string;
-}> = ({ size = "s", value }) => {
+}> = ({ name, size = "s", value }) => {
   return (
     <Menu
       size="xl"
@@ -85,7 +102,7 @@ const MetaDataKeyLabel: FunctionalComponent<{
       )}
     >
       <Menu.Section>
-        <MetadataTooltip value={value} />
+        <MetadataTooltip value={value} name={name} />
       </Menu.Section>
     </Menu>
   );
@@ -110,12 +127,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/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>
   );
 };

package/src/components/ReportBody/SortBy.tsx

@@ -2,22 +2,33 @@ import { DropdownButton, Link, Menu, SvgIcon, Text, allureIcons } from "@allurer
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import { useI18n } from "@/stores/locale";
-import { setTreeDirection, setTreeSortBy, treeDirection, treeSortBy } from "@/stores/treeFilters";
+import { type SortByDirection, type SortByField, type SortBy as TSortBy, setSortBy, sortBy } from "@/stores/treeSort";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
   return <div className={styles.sortByBtnWrap}>{children}</div>;
 };
 
+const setSortByField = (value: SortByField) => {
+  const direction = sortBy.peek().split(",")[1];
+  setSortBy(`${value},${direction}` as TSortBy);
+};
+
+const setDirection = (value: SortByDirection) => {
+  setSortBy(`${sortBy.peek().split(",")[0]},${value}` as TSortBy);
+};
+
 export const SortBy = () => {
   const { t: sortByLocale } = useI18n("sort-by");
   const { t: sortByValuesLocale } = useI18n("sort-by.values");
   const { t: sortByDirectionsLocale } = useI18n("sort-by.directions");
-  const sortBy = treeSortBy.value;
-  const direction = treeDirection.value;
+  const sortByValue = sortBy.value.split(",")[0] as SortByField;
+  const direction = sortBy.value.split(",")[1] as SortByDirection;
 
-  const displayedSortByValue = sortByValuesLocale(sortBy);
-  const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
+  const displayedSortByValue = sortByValuesLocale(sortByValue === "name" ? "alphabet" : sortByValue);
+  const displayedDirection = sortByDirectionsLocale(
+    `${sortByValue === "name" ? "alphabet" : sortByValue}-${direction}-short`,
+  );
 
   return (
     <div>
@@ -65,16 +76,19 @@ export const SortBy = () => {
               )}
             >
               <Menu.Section>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("order")} isChecked={sortBy === "order"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("order")} isChecked={sortByValue === "order"}>
                   {sortByValuesLocale("order")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("duration")} isChecked={sortBy === "duration"}>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setSortByField("duration")}
+                  isChecked={sortByValue === "duration"}
+                >
                   {sortByValuesLocale("duration")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("status")} isChecked={sortBy === "status"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("status")} isChecked={sortByValue === "status"}>
                   {sortByValuesLocale("status")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("name")} isChecked={sortByValue === "name"}>
                   {sortByValuesLocale("alphabet")}
                 </Menu.ItemWithCheckmark>
               </Menu.Section>
@@ -106,18 +120,18 @@ export const SortBy = () => {
             >
               <Menu.Section>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setTreeDirection("asc")}
+                  onClick={() => setDirection("asc")}
                   leadingIcon={allureIcons.lineArrowsSortLineAsc}
                   isChecked={direction === "asc"}
                 >
-                  {sortByDirectionsLocale(`${sortBy}-asc`)}
+                  {sortByDirectionsLocale(`${sortByValue}-asc`)}
                 </Menu.ItemWithCheckmark>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setTreeDirection("desc")}
+                  onClick={() => setDirection("desc")}
                   leadingIcon={allureIcons.lineArrowsSortLineDesc}
                   isChecked={direction === "desc"}
                 >
-                  {sortByDirectionsLocale(`${sortBy}-desc`)}
+                  {sortByDirectionsLocale(`${sortByValue}-desc`)}
                 </Menu.ItemWithCheckmark>
               </Menu.Section>
             </Menu>

package/src/components/ReportBody/index.tsx

@@ -3,7 +3,7 @@ import { Counter, Loadable } from "@allurereport/web-components";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
 import { ReportTab, ReportTabsList } from "../ReportTabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";

package/src/components/ReportBody/styles.scss

@@ -28,7 +28,10 @@
 
 .headerActions {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
 }
 
 /* This is a hack because button do not have this state */