@allurereport/web-awesome 3.0.0-beta.4 → 3.0.0-beta.5

package/src/components/app/Tree/TreeHeader.tsx

@@ -1,10 +1,11 @@
-import { Statistic, statusesList } from "@allurereport/core-api";
+import { type Statistic, statusesList } from "@allurereport/core-api";
 import { clsx } from "clsx";
-import { FunctionComponent } from "preact";
+import { type FunctionComponent } from "preact";
 import { ArrowButton } from "@/components/app/ArrowButton";
 import { Loadable } from "@/components/commons/Loadable";
 import { Text } from "@/components/commons/Typography";
 import { statsStore } from "@/stores";
+import { treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 interface TreeHeaderProps {
@@ -12,15 +13,14 @@ interface TreeHeaderProps {
   categoryTitle: string;
   isOpened: boolean;
   toggleTree: () => void;
-  statusFilter?: string;
 }
 
-const maxWidthTab: number = 140;
-const minWidthTab: number = 46;
+const maxWidthTab = 140;
+const minWidthTab = 46;
 // to make the progress bar more visually responsive for smaller values,
 // we can adjust the formula by adding an offset to stretch the lower part
 // of the logarithmic scale
-const offset: number = 10;
+const offset = 10;
 
 const progress = (current: number, total: number) => {
   const logOffset = Math.log(offset);
@@ -31,10 +31,11 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
   categoryTitle,
   isOpened,
   toggleTree,
-  statusFilter = "total",
   statistic,
   ...rest
 }) => {
+  const { status: statusFilter } = treeFiltersStore.value;
+
   return (
     <Loadable
       source={statsStore}
@@ -49,8 +50,8 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
                   value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
               )
               .map(({ status, value }) => {
-                const className = clsx(styles[`tree-header-bar-item`], styles[status]);
-                const style = { flexGrow: `${value}` };
+                const className = clsx(styles["tree-header-bar-item"], styles[status]);
+                const style = { flexGrow: value };
 
                 return (
                   <div key={status} className={className} style={style}>
@@ -61,9 +62,9 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
           : null;
 
         return (
-          <div {...rest} className={styles["tree-header"]} onClick={toggleTree}>
-            <ArrowButton isOpened={isOpened} />
-            <Text size="m" bold className={styles["tree-header-title"]}>
+          <div data-testid="tree-header" {...rest} className={styles["tree-header"]} onClick={toggleTree}>
+            <ArrowButton data-testid="tree-arrow" isOpened={isOpened} />
+            <Text data-testid="tree-header-title" size="m" bold className={styles["tree-header-title"]}>
               {categoryTitle}
             </Text>
             {treeHeaderBar && (

package/src/components/app/Tree/TreeItem.tsx

@@ -10,14 +10,16 @@ interface TreeItemProps {
   status: TestStatus;
   duration?: number;
   id: string;
+  groupOrder: number;
 }
 
-export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, status, duration, id, ...rest }) => {
+export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, groupOrder, status, duration, id, ...rest }) => {
   const formattedDuration = formatDuration(duration);
 
   return (
     <div {...rest} className={styles["tree-item"]} onClick={() => navigateTo(id)}>
       <TreeItemIcon status={status} />
+      <span data-testid="tree-leaf-order" class={styles.order}>#{groupOrder}</span>
       <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
         {name}
       </Text>

package/src/components/app/Tree/index.tsx

@@ -1,25 +1,29 @@
-import type { TestStatus } from "@allurereport/core-api";
+import { useEffect } from "preact/hooks";
 import { useTabsContext } from "@/components/app/Tabs";
 import Tree from "@/components/app/Tree/Tree";
+import { Button } from "@/components/commons/Button";
 import { Loadable } from "@/components/commons/Loadable";
 import { PageLoader } from "@/components/commons/PageLoader";
 import { Text } from "@/components/commons/Typography";
 import { useI18n } from "@/stores/locale";
-import { treeStore } from "@/stores/tree";
+import { clearTreeFilters, filteredTree, noTests, noTestsFound, setTreeStatus, treeStore } from "@/stores/tree";
+import type { AllureAwesomeStatus } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export const TreeList = () => {
   const { t } = useI18n("empty");
   const { currentTab } = useTabsContext();
 
+  useEffect(() => {
+    setTreeStatus(currentTab as AllureAwesomeStatus);
+  }, [currentTab]);
+
   return (
     <Loadable
       source={treeStore}
       renderLoader={() => <PageLoader />}
-      renderData={(treeData) => {
-        const { groups, leaves } = treeData?.root ?? {};
-
-        if (!groups && !leaves) {
+      renderData={() => {
+        if (noTests.value) {
           return (
             <div className={styles["tree-list"]}>
               <div className={styles["tree-empty-results"]}>
@@ -29,9 +33,29 @@ export const TreeList = () => {
           );
         }
 
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearTreeFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
         return (
           <div className={styles["tree-list"]}>
-            <Tree groups={groups} leaves={leaves} statusFilter={currentTab as TestStatus} root />
+            <Tree tree={filteredTree.value} statusFilter={currentTab as AllureAwesomeStatus} root />
           </div>
         );
       }}

package/src/components/app/Tree/styles.scss

@@ -159,12 +159,18 @@
 }
 
 .tree-empty-results {
-  display: flex;
   padding: 44px 24px;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
 }
 
 .tree-empty-results-title {
   color: var(--on-text-secondary);
 }
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+}

package/src/components/commons/Menu/index.tsx

@@ -99,9 +99,9 @@ export const Menu = (props: {
       }).then(({ x, y }) => {
         if (menuRef.current) {
           Object.assign(menuRef.current.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            position: "absolute",
+            "left": `${x}px`,
+            "top": `${y}px`,
+            "position": "absolute",
             "z-index": 10,
           });
         }
@@ -147,7 +147,7 @@ type ItemProps = {
   rightSlot?: ComponentChildren;
   closeMenuOnClick?: boolean;
   ariaLabel?: string;
-  setIsOpened: (isOpened: boolean) => void;
+  setIsOpened?: (isOpened: boolean) => void;
 };
 
 Menu.Item = (props: ItemProps) => {

package/src/components/commons/SearchBox/index.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { useState } from "preact/hooks";
+import {useEffect, useState} from "preact/hooks";
 import searchIcon from "@/assets/svg/line-general-search-md.svg";
 import closeIcon from "@/assets/svg/line-general-x-close.svg";
 import { useDebouncedCallback } from "@/hooks/useDebouncedCallback";
@@ -20,25 +20,27 @@ type Props = {
 export const SearchBox = (props: Props) => {
   const { placeholder, value, onChange, changeDebounce = 300 } = props;
   const [localValue, setLocalValue] = useState(value);
-
   const onChangeDebounced = useDebouncedCallback(onChange, changeDebounce);
-
   const handleChange = (e: Event) => {
     const newValue = (e.target as HTMLInputElement).value;
 
     setLocalValue(newValue);
     onChangeDebounced(newValue);
   };
-
   const handleClear = (e: PointerEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setLocalValue("");
     onChangeDebounced("");
   };
-
   const showClear = !!localValue;
 
+  useEffect(() => {
+    if (localValue !== value) {
+      setLocalValue(value);
+    }
+  }, [value]);
+
   return (
     <Text className={styles.inputWrap} type="ui" size="m" tag="div">
       <SvgIcon id={searchIcon.id} size="s" className={styles.leadingIcon} />
@@ -50,7 +52,7 @@ export const SearchBox = (props: Props) => {
         value={localValue}
         name="search"
         autocomplete="off"
-	data-testid="search-input"
+        data-testid="search-input"
       />
       {showClear && (
         <div className={styles.clearButton}>

package/src/components/commons/Toggle/index.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export const Toggle = (props: Props) => {
-  const { value, label, onChange, focusable = true } = props;
+  const { value, label, onChange, focusable = true, ...rest } = props;
 
   const handleChange = (e: Event) => {
     const newValue = !(e.target as HTMLInputElement).checked;
@@ -17,6 +17,7 @@ export const Toggle = (props: Props) => {
 
   return (
     <input
+      {...rest}
       tabIndex={focusable ? 0 : -1}
       className={styles.toggle}
       role="switch"

package/src/components/commons/Tooltip/index.tsx

@@ -49,9 +49,9 @@ export const TooltipWrapper: FunctionalComponent<TooltipWrapperProps> = ({
         }).then(({ x, y }) => {
           if (tooltipRef.current) {
             Object.assign(tooltipRef.current.style, {
-              left: `${x}px`,
-              top: `${y}px`,
-              position: "absolute",
+              "left": `${x}px`,
+              "top": `${y}px`,
+              "position": "absolute",
               "z-index": 100,
             });
           }

package/src/i18n/constants.ts

@@ -1,4 +1,23 @@
-export const AVAILABLE_LOCALES = ["en", "ru", "pl", "es", "pt", "de", "am", "az", "fr", "it", "ja", "he", "ka", "kr", "nl", "sv", "tr", "zh"] as const;
+export const AVAILABLE_LOCALES = [
+  "en",
+  "ru",
+  "pl",
+  "es",
+  "pt",
+  "de",
+  "am",
+  "az",
+  "fr",
+  "it",
+  "ja",
+  "he",
+  "ka",
+  "kr",
+  "nl",
+  "sv",
+  "tr",
+  "zh",
+] as const;
 
 export const DEFAULT_LOCALE = "en";
 
@@ -101,5 +120,5 @@ export const LANG_LOCALE: Record<
     short: "Zh",
     full: "中文",
     iso: "zh-CN",
-  }
+  },
 };

package/src/i18n/locales/am.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Հակադարձված"
   },
   "empty": {
-    "no-results": "Արդյունքներ չեն գտնվել",
+    "no-results": "Ոչ մի արդյունք",
+    "no-tests-found": "Արդյունքներ չեն գտնվել",
+    "clear-filters": "Մաքրել ֆիլտրները",
     "no-attachments-results": "Կցորդների մասին տեղեկություններ չկան",
     "no-history-results": "Պատմության մասին տեղեկություններ չկան",
     "no-retries-results": "Կրկնությունների մասին տեղեկություններ չկան"

package/src/i18n/locales/az.json

@@ -61,6 +61,8 @@
   },
   "empty": {
     "no-results": "Nəticə tapılmadı",
+    "no-tests-found": "Nəticə tapılmadı",
+    "clear-filters": "Filtrləri təmizlə",
     "no-attachments-results": "Əlavə məlumatı mövcud deyil",
     "no-history-results": "Tarixçə məlumatı mövcud deyil",
     "no-retries-results": "Təkrar məlumatı mövcud deyil"
@@ -112,4 +114,4 @@
   "errors": {
     "missedAttachment": "Əlavə tapılmadı"
   }
-}
+}

package/src/i18n/locales/de.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Umgekehrt"
   },
   "empty": {
-    "no-results": "Keine Ergebnisse gefunden",
+    "no-results": "Keine Ergebnisse",
+    "no-tests-found": "Keine Ergebnisse gefunden",
+    "clear-filters": "Filter löschen",
     "no-attachments-results": "Keine Anhängeinformationen verfügbar",
     "no-history-results": "Keine Verlaufsinformationen verfügbar",
     "no-retries-results": "Keine Wiederholungsinformationen verfügbar"

package/src/i18n/locales/en.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Reversed"
   },
   "empty": {
-    "no-results": "No results found",
+    "no-results": "No results",
+    "no-tests-found": "No results found",
+    "clear-filters": "Clear filters",
     "no-attachments-results": "No attachments information available",
     "no-history-results": "No history information available",
     "no-retries-results": "No retries information available"
@@ -112,4 +114,4 @@
   "errors": {
     "missedAttachment": "Attachment not found"
   }
-}
+}

package/src/i18n/locales/es.json

@@ -60,6 +60,9 @@
     "status-desc-short": "Invertido"
   },
   "empty": {
+    "no-results": "Sin resultados",
+    "no-tests-found": "No se encontraron resultados",
+    "clear-filters": "Limpiar filtros",
     "no-attachments-results": "No hay información de adjuntos disponible",
     "no-history-results": "No hay información de historial disponible",
     "no-retries-results": "No hay información de reintentos disponible"

package/src/i18n/locales/fr.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Inversé"
   },
   "empty": {
-    "no-results": "Aucun résultat trouvé",
+    "no-results": "Aucun résultat",
+    "no-tests-found": "Aucun résultat trouvé",
+    "clear-filters": "Effacer les filtres",
     "no-attachments-results": "Aucune information sur les pièces jointes disponible",
     "no-history-results": "Aucune information sur l'historique disponible",
     "no-retries-results": "Aucune information sur les réessais disponible"

package/src/i18n/locales/he.json

@@ -60,7 +60,9 @@
     "status-desc-short": "הפוך"
   },
   "empty": {
-    "no-results": "לא נמצאו תוצאות",
+    "no-results": "אין תוצאות",
+    "no-tests-found": "לא נמצאו תוצאות",
+    "clear-filters": "נקה מסננים",
     "no-attachments-results": "לא נמצאה מידע על קבצים מצורפים",
     "no-history-results": "לא נמצאה מידע על היסטוריה",
     "no-retries-results": "לא נמצאה מידע על נסיונות חוזרים"

package/src/i18n/locales/it.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Invertito"
   },
   "empty": {
-    "no-results": "Nessun risultato trovato",
+    "no-results": "Nessun risultato",
+    "no-tests-found": "Nessun risultato trovato",
+    "clear-filters": "Cancella i filtri",
     "no-attachments-results": "Nessuna informazione sugli allegati disponibile",
     "no-history-results": "Nessuna informazione sulla cronologia disponibile",
     "no-retries-results": "Nessuna informazione sui ritentativi disponibile"

package/src/i18n/locales/ja.json

@@ -60,7 +60,9 @@
     "status-desc-short": "逆順"
   },
   "empty": {
-    "no-results": "結果が見つかりません",
+    "no-results": "結果がありません",
+    "no-tests-found": "結果が見つかりません",
+    "clear-filters": "フィルターをクリア",
     "no-attachments-results": "添付ファイル情報が利用できません",
     "no-history-results": "履歴情報が利用できません",
     "no-retries-results": "再試行情報が利用できません"

package/src/i18n/locales/ka.json

@@ -60,7 +60,9 @@
     "status-desc-short": "შებრუნებული"
   },
   "empty": {
-    "no-results": "შედეგები არ მოიძებნა",
+    "no-results": "შედეგები არ არის",
+    "no-tests-found": "შედეგები არ მოიძებნა",
+    "clear-filters": "ფილტრების გასუფთავება",
     "no-attachments-results": "დანართების ინფორმაცია არ არის ხელმისაწვდომი",
     "no-history-results": "ისტორიის ინფორმაცია არ არის ხელმისაწვდომი",
     "no-retries-results": "ხელახალი ცდების ინფორმ���ცია არ არის ხელმისაწვდომი"

package/src/i18n/locales/kr.json

@@ -60,7 +60,9 @@
     "status-desc-short": "역순"
   },
   "empty": {
-    "no-results": "결과를 찾을 수 없습니다",
+    "no-results": "결과 없음",
+    "no-tests-found": "결과를 찾을 수 없음",
+    "clear-filters": "필터 지우기",
     "no-attachments-results": "첨부파일 정보를 사용할 수 없습니다",
     "no-history-results": "기록 정보를 사용할 수 없습니다",
     "no-retries-results": "재시도 정보를 사용할 수 없습니다"

package/src/i18n/locales/nl.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Omgekeerd"
   },
   "empty": {
-    "no-results": "Geen resultaten gevonden",
+    "no-results": "Geen resultaten",
+    "no-tests-found": "Geen resultaten gevonden",
+    "clear-filters": "Filters wissen",
     "no-attachments-results": "Geen bijlageninformatie beschikbaar",
     "no-history-results": "Geen geschiedenisinformatie beschikbaar",
     "no-retries-results": "Geen herhalingsinformatie beschikbaar"

package/src/i18n/locales/pl.json

@@ -57,7 +57,9 @@
     "status-desc-short": "Domyślnie"
   },
   "empty": {
-    "no-results": "Nie znaleziono wyników",
+    "no-results": "Brak wyników",
+    "no-tests-found": "Nie znaleziono wyników",
+    "clear-filters": "Wyczyść filtry",
     "no-attachments-results": "Brak dostępnych informacji o załącznikach",
     "no-history-results": "Brak dostępnych informacji o historii",
     "no-retries-results": "Brak dostępnych informacji o ponownych próbach"

package/src/i18n/locales/pt.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Invertido"
   },
   "empty": {
-    "no-results": "Nenhum resultado encontrado",
+    "no-results": "Sem resultados",
+    "no-tests-found": "Nenhum resultado encontrado",
+    "clear-filters": "Limpar filtros",
     "no-attachments-results": "Nenhuma informação de anexos disponível",
     "no-history-results": "Nenhuma informação de histórico disponível",
     "no-retries-results": "Nenhuma informação de repetições disponível"

package/src/i18n/locales/ru.json

@@ -57,7 +57,9 @@
     "status-desc-short": "По обычному"
   },
   "empty": {
-    "no-results": "Результатов не найдено",
+    "no-results": "Нет результатов",
+    "no-tests-found": "Результаты не найдены",
+    "clear-filters": "Очистить фильтры",
     "no-attachments-results": "Информация о вложениях отсутствует",
     "no-history-results": "Информация об истории отсутствует",
     "no-retries-results": "Информация о перезапусках отсутствует"

package/src/i18n/locales/sv.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Omvänd"
   },
   "empty": {
-    "no-results": "Inga resultat hittades",
+    "no-results": "Inga resultat",
+    "no-tests-found": "Inga resultat hittades",
+    "clear-filters": "Rensa filter",
     "no-attachments-results": "Ingen bilaga information tillgänglig",
     "no-history-results": "Ingen historik information tillgänglig",
     "no-retries-results": "Ingen omtagningar information tillgänglig"

package/src/i18n/locales/tr.json

@@ -60,7 +60,9 @@
     "status-desc-short": "Ters"
   },
   "empty": {
-    "no-results": "Sonuç bulunamadı",
+    "no-results": "Sonuç yok",
+    "no-tests-found": "Sonuç bulunamadı",
+    "clear-filters": "Filtreleri temizle",
     "no-attachments-results": "Ek bilgisi mevcut değil",
     "no-history-results": "Geçmiş bilgisi mevcut değil",
     "no-retries-results": "Tekrar deneme bilgisi mevcut değil"

package/src/i18n/locales/zh.json

@@ -60,7 +60,9 @@
     "status-desc-short": "反转"
   },
   "empty": {
-    "no-results": "未找到结果",
+    "no-results": "没有结果",
+    "no-tests-found": "未找到结果",
+    "clear-filters": "清除过滤器",
     "no-attachments-results": "没有附件信息",
     "no-history-results": "没有历史信息",
     "no-retries-results": "没有重试信息"
@@ -112,4 +114,4 @@
   "errors": {
     "missedAttachment": "未找到附件"
   }
-}
+}

package/src/index.html

@@ -26,6 +26,7 @@
         theme: "light",
         reportLanguage: "ru",
         createdAt: 1731513697651,
+        groupBy: "suite",
       };
     </script>
     <script async>

package/src/stores/chart.ts

@@ -21,12 +21,12 @@ export const fetchPieChartData = async () => {
     pieChartStore.value = {
       data: res,
       error: undefined,
-      loading: false
+      loading: false,
     };
   } catch (err) {
     pieChartStore.value = {
       error: err.message,
-      loading: false
+      loading: false,
     };
   }
 };

package/src/stores/testResults.ts

@@ -9,6 +9,30 @@ export const testResultStore = signal<StoreSignalState<Record<string, AllureAwes
   data: undefined,
 });
 
+export const testResultNavStore = signal<StoreSignalState<string[]>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTestResultNav = async () => {
+  try {
+    const data = await fetchReportJsonData<string[]>("widgets/nav.json");
+
+    testResultNavStore.value = {
+      data,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    testResultNavStore.value = {
+      ...testResultNavStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};
+
 export const fetchTestResult = async (testResultId: string) => {
   if (!testResultId || testResultStore.value.data?.[testResultId]) {
     return;
@@ -18,12 +42,10 @@ export const fetchTestResult = async (testResultId: string) => {
     ...testResultStore.value,
     loading: true,
     error: undefined,
-  }
+  };
 
   try {
-    const data = await fetchReportJsonData<AllureAwesomeTestResult>(
-      `data/test-results/${testResultId}.json`,
-    );
+    const data = await fetchReportJsonData<AllureAwesomeTestResult>(`data/test-results/${testResultId}.json`);
 
     testResultStore.value = {
       data: { ...testResultStore.value.data, [testResultId]: data },