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

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

@@ -1,121 +1,74 @@
-import type { Statistic, TestStatus, WithChildren } from "@allurereport/core-api";
+import type { Statistic } from "@allurereport/core-api";
 import cx from "clsx";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
-import { useReportContentContext } from "@/components/app/ReportBody/context";
 import TreeItem from "@/components/app/Tree/TreeItem";
-import { Loadable } from "@/components/commons/Loadable";
-import { PageLoader } from "@/components/commons/PageLoader";
-import { Text } from "@/components/commons/Typography";
-import { useI18n } from "@/stores";
-import { treeStore } from "@/stores/tree";
-import { filterGroups, filterLeaves } from "@/utils/treeFilters";
+import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus } from "../../../../types";
 import TreeHeader from "./TreeHeader";
 import * as styles from "./styles.scss";
 
 interface TreeProps {
   statistic?: Statistic;
-  leaves?: WithChildren["leaves"];
-  groups?: WithChildren["groups"];
+  tree: AllureAwesomeRecursiveTree;
   name?: string;
   root?: boolean;
-  statusFilter?: TestStatus;
+  statusFilter?: AllureAwesomeStatus;
 }
 
-const Tree: FunctionComponent<TreeProps> = ({ statusFilter, root, name, leaves = [], groups = [], statistic }) => {
+const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
   const [isOpened, setIsOpen] = useState(statistic === undefined || !!statistic.failed || !!statistic.broken);
-  const { t } = useI18n("empty");
+  const toggleTree = () => {
+    setIsOpen(!isOpened);
+  };
+  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
 
-  return (
-    <Loadable
-      source={treeStore}
-      renderLoader={() => <PageLoader />}
-      renderData={(treeData) => {
-        const reportContext = useReportContentContext();
-        const toggleTree = () => {
-          setIsOpen(!isOpened);
-        };
-        const leavesToRender = filterLeaves(leaves, treeData?.leavesById, statusFilter, reportContext);
-        const groupsToRender = filterGroups(
-          groups,
-          treeData?.groupsById,
-          treeData?.leavesById,
-          statusFilter,
-          reportContext,
-        );
-        if (!groupsToRender.length && !leavesToRender.length) {
-          return (
-            <div className={styles["tree-list"]}>
-              <div className={styles["tree-empty-results"]}>
-                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
-              </div>
-            </div>
-          );
-        }
-
-        const treeContent = isOpened && (
-          <div
-            className={cx({
-              [styles["tree-content"]]: true,
-              [styles.root]: root,
-            })}
-          >
-            {groupsToRender.map((groupId) => {
-              const group = treeData?.groupsById?.[groupId];
-
-              if (!group) {
-                return null;
-              }
-
-              return (
-                <Tree
-                  key={group.nodeId}
-                  name={group.name}
-                  leaves={group.leaves}
-                  groups={group.groups}
-                  statistic={group.statistic}
-                  statusFilter={statusFilter}
-                />
-              );
-            })}
-            {leavesToRender.map((leafId) => {
-              const leaf = treeData?.leavesById?.[leafId];
+  if (emptyTree) {
+    return null;
+  }
 
-              if (!leaf) {
-                return null;
-              }
-
-              return (
-                <TreeItem
-                  data-testid="tree-leaf"
-                  key={leaf.nodeId}
-                  id={leaf.nodeId}
-                  name={leaf.name}
-                  status={leaf.status}
-                  duration={leaf.duration}
-                />
-              );
-            })}
-          </div>
-        );
+  const treeContent = isOpened && (
+    <div
+      data-testid="tree-content"
+      className={cx({
+        [styles["tree-content"]]: true,
+        [styles.root]: root,
+      })}
+    >
+      {tree?.trees?.map?.((subTree) => (
+        <Tree
+          key={subTree.nodeId}
+          name={subTree.name}
+          tree={subTree}
+          statistic={subTree.statistic}
+          statusFilter={statusFilter}
+        />
+      ))}
+      {tree?.leaves?.map?.((leaf) => (
+        <TreeItem
+          data-testid="tree-leaf"
+          key={leaf.nodeId}
+          id={leaf.nodeId}
+          name={leaf.name}
+          status={leaf.status}
+          groupOrder={leaf.groupOrder}
+          duration={leaf.duration}
+        />
+      ))}
+    </div>
+  );
 
-        return (
-          <div className={styles.tree}>
-            {name && (
-              <TreeHeader
-                categoryTitle={name}
-                isOpened={isOpened}
-                toggleTree={toggleTree}
-                statusFilter={statusFilter}
-                statistic={statistic}
-                data-testid="tree-group-header"
-              />
-            )}
-            {treeContent}
-          </div>
-        );
-      }}
-    />
+  return (
+    <div className={styles.tree}>
+      {name && (
+        <TreeHeader
+          categoryTitle={name}
+          isOpened={isOpened}
+          toggleTree={toggleTree}
+          statistic={statistic}
+        />
+      )}
+      {treeContent}
+    </div>
   );
 };
 

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

@@ -1,12 +1,29 @@
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { clsx } from "clsx";
 import type { ComponentChildren, VNode } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { createContext } from "preact";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import check from "@/assets/svg/line-general-check.svg";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { Text } from "@/components/commons/Typography";
 import * as styles from "./styles.scss";
 
+type MenuContextT = {
+  setIsOpened: (isOpened: boolean) => void;
+};
+
+const MenuContext = createContext<MenuContextT | null>(null);
+
+export const useMenuContext = () => {
+  const context = useContext(MenuContext);
+
+  if (!context) {
+    throw new Error("useMenuContext must be used within a Menu");
+  }
+
+  return context;
+};
+
 export const Menu = (props: {
   children: ComponentChildren;
   isInitialOpened?: boolean;
@@ -82,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,
           });
         }
@@ -96,20 +113,26 @@ export const Menu = (props: {
   }, [menuRef.current, triggerRef.current]);
 
   return (
-    <>
-      {typeof menuTrigger === "function" && (
-        <MenuTriggerWrapper ref={triggerRef}>
-          {menuTrigger({
-            isOpened,
-            onClick: handleTriggerClick,
-            setIsOpened,
-          })}
-        </MenuTriggerWrapper>
-      )}
-      <div ref={menuRef}>
-        {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
-      </div>
-    </>
+    <MenuContext.Provider
+      value={{
+        setIsOpened,
+      }}
+    >
+      <>
+        {typeof menuTrigger === "function" && (
+          <MenuTriggerWrapper ref={triggerRef}>
+            {menuTrigger({
+              isOpened,
+              onClick: handleTriggerClick,
+              setIsOpened,
+            })}
+          </MenuTriggerWrapper>
+        )}
+        <div ref={menuRef}>
+          {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
+        </div>
+      </>
+    </MenuContext.Provider>
   );
 };
 
@@ -124,10 +147,11 @@ type ItemProps = {
   rightSlot?: ComponentChildren;
   closeMenuOnClick?: boolean;
   ariaLabel?: string;
-  setIsOpened: (isOpened: boolean) => void;
+  setIsOpened?: (isOpened: boolean) => void;
 };
 
 Menu.Item = (props: ItemProps) => {
+  const { setIsOpened } = useMenuContext();
   const { children, onClick, leadingIcon, rightSlot, ariaLabel, closeMenuOnClick = true } = props;
   const isInteractive = typeof onClick === "function";
   const hasLeadingIcon = typeof leadingIcon === "string";
@@ -135,6 +159,7 @@ Menu.Item = (props: ItemProps) => {
   const handleItemClick = (e: MouseEvent) => {
     if (isInteractive && closeMenuOnClick) {
       e.stopPropagation();
+      setIsOpened(false);
     }
 
     if (isInteractive) {

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,6 +52,7 @@ export const SearchBox = (props: Props) => {
         value={localValue}
         name="search"
         autocomplete="off"
+        data-testid="search-input"
       />
       {showClear && (
         <div className={styles.clearButton}>

package/src/components/commons/SuccessRatePieChart/styles.scss

@@ -8,5 +8,4 @@
 
 .chart {
   position: relative;
-  display: flex;
 }

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,13 +17,14 @@ export const Toggle = (props: Props) => {
 
   return (
     <input
+      {...rest}
       tabIndex={focusable ? 0 : -1}
       className={styles.toggle}
       role="switch"
       type="checkbox"
       checked={value}
       aria-label={label}
-      onChange={handleChange}
+      onToggle={handleChange}
     />
   );
 };

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"