@allurereport/web-awesome 3.0.0-beta.9 → 3.0.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

@@ -1,7 +1,6 @@
-import { Counter, Text } from "@allurereport/web-components";
+import { ArrowButton, Counter, Text } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
-import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {
@@ -11,22 +10,31 @@ 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 && <Counter count={counter} size="s" />}
       <ArrowButton
         isOpened={isOpened}
         iconSize={"s"}
         buttonSize={"s"}
         className={styles["report-metadata-header-arrow"]}
+        tag={"div"}
       />
-    </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/Modal/index.tsx

@@ -1,174 +1,22 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Button, Heading, IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import { signal } from "@preact/signals";
-import type { FunctionalComponent, VNode } from "preact";
-import { useEffect } from "preact/hooks";
-import Prism from "prismjs";
-import type { AllureAwesomeTestResult } from "types";
-import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
-import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
-import * as styles from "./styles.scss";
+import { Modal, type ModalTranslations } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { isModalOpen, modalData } from "@/stores/modal";
 
-export const isModalOpen = signal(false);
+export const ModalComponent = () => {
+  const { t } = useI18n("controls");
 
-interface ModalDataProps {
-  data: AttachmentTestStepResult;
-  component: VNode;
-  preview?: boolean;
-}
-
-export const modalData = signal<ModalDataProps>({
-  data: null,
-  preview: false,
-  component: null,
-});
-
-const openModal = ({ data, component, preview }: ModalDataProps) => {
-  modalData.value = {
-    data,
-    component,
-    preview,
-  };
-  isModalOpen.value = true;
-};
-
-const closeModal = () => {
-  isModalOpen.value = false;
-};
-
-const ModalThumb: FunctionalComponent<{ item: AttachmentTestStepResult }> = ({ item, children }) => {
-  const isActiveThumb = modalData.value.data?.link?.id === item.link?.id;
-
-  const showAttach = (showedItem: AttachmentTestStepResult) => {
-    openModal({
-      data: showedItem,
-      component: <Attachment item={showedItem} key={showedItem.link?.id} />,
-    });
+  const translations: ModalTranslations = {
+    tooltipDownload: t("downloadAttachment"),
+    tooltipPreview: t("previewAttachment"),
+    openInNewTabButton: t("openInNewTab"),
   };
 
   return (
-    <div className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`} onClick={() => showAttach(item)}>
-      {children}
-    </div>
-  );
-};
-
-export type ModalGalleryProps = {
-  attachments: AttachmentTestStepResult[];
-};
-
-const ModalGallery: FunctionalComponent<ModalGalleryProps> = ({ attachments = [] }) => {
-  const filteredAttachments = attachments.filter(({ link: { contentType } }: AttachmentTestStepResult) => {
-    const type = attachmentType(contentType).type;
-
-    return !["archive", null].includes(type as string);
-  });
-
-  return (
-    <div className={styles["modal-gallery"]}>
-      {filteredAttachments.map((item, index) => (
-        <ModalThumb item={item} key={index}>
-          <Attachment item={item} />
-        </ModalThumb>
-      ))}
-    </div>
+    <Modal
+      {...modalData.value}
+      translations={translations}
+      isModalOpen={isModalOpen.value}
+      closeModal={() => (isModalOpen.value = false)}
+    />
   );
 };
-
-export type ModalProps = {
-  testResult: AllureAwesomeTestResult;
-};
-
-const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
-  const { link } = modalData.value.data || {};
-  const attachName = link?.name ? `${link?.name}` : `${link?.id}${link?.ext}`;
-
-  useEffect(() => {
-    Prism.highlightAll();
-
-    if (isModalOpen.value) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
-
-  const isImageAttachment = link?.contentType?.startsWith("image");
-  const isHtmlAttachment = link?.contentType === "text/html";
-  const downloadData = async (e: Event) => {
-    e.stopPropagation();
-    const { id, ext, contentType } = link || {};
-    if (id && ext && contentType) {
-      await downloadAttachment(id, ext, contentType);
-    }
-  };
-  const openInNewWindow = async () => {
-    const { id, ext, contentType } = link || {};
-    await openAttachmentInNewTab(id, ext, contentType);
-  };
-
-  if (!isModalOpen.value) {
-    return null;
-  }
-
-  return (
-    <div className={styles["modal-overlay"]} onClick={closeModal}>
-      <div className={styles["modal-content"]} onClick={(e) => e.stopPropagation()}>
-        <div className={`${styles["modal-wrapper"]}`}>
-          <div className={styles["modal-top"]}>
-            <Heading size={"s"}>{attachName}</Heading>
-            <div className={styles["modal-buttons"]}>
-              {isImageAttachment && (
-                <Button
-                  style={"outline"}
-                  onClick={openInNewWindow}
-                  icon={allureIcons.lineGeneralLinkExternal}
-                  text={"Open in new tab"}
-                />
-              )}
-              {isHtmlAttachment && (
-                <TooltipWrapper tooltipText={"Preview attachment"}>
-                  <IconButton
-                    style={"outline"}
-                    size={"m"}
-                    iconSize={"s"}
-                    icon={modalData.value.preview ? allureIcons.viewOff : allureIcons.view}
-                    onClick={() => {
-                      modalData.value = {
-                        ...modalData.value,
-                        preview: !modalData.value.preview,
-                      };
-                    }}
-                  />
-                </TooltipWrapper>
-              )}
-              <TooltipWrapper tooltipText={"Download attachment"}>
-                <IconButton
-                  style={"outline"}
-                  size={"m"}
-                  iconSize={"s"}
-                  icon={allureIcons.lineGeneralDownloadCloud}
-                  onClick={(e: MouseEvent) => downloadData(e)}
-                />
-              </TooltipWrapper>
-              <IconButton iconSize={"m"} style={"ghost"} onClick={closeModal} icon={allureIcons.lineGeneralXClose} />
-            </div>
-          </div>
-          <div className={styles["modal-data"]}>
-            <div className={styles["modal-data-component"]} key={modalData.value?.data?.link?.id}>
-              {modalData.value?.component}
-            </div>
-          </div>
-        </div>
-        <ModalGallery attachments={testResult.attachments} />
-      </div>
-    </div>
-  );
-};
-
-export { openModal, closeModal };
-export default Modal;

package/src/components/NavTabs/index.tsx

@@ -0,0 +1,70 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+type NavTabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (id: string) => void;
+};
+
+const NavTabsContext = createContext<NavTabsContextT | null>(null);
+
+export const useNavTabsContext = () => {
+  const context = useContext(NavTabsContext);
+
+  if (!context) {
+    throw new Error("NavTabs components must be used within a NavTabs component");
+  }
+
+  return context;
+};
+
+export const NavTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return <NavTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</NavTabsContext.Provider>;
+};
+
+export const NavTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <NavTabsProvider {...props} />;
+};
+
+export const NavTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const NavTab = (props: {
+  "id": string;
+  "children": ComponentChildren;
+  "onClick"?: () => void;
+  "data-testid"?: string;
+  "isCurrentTab"?: boolean;
+}) => {
+  const { currentTab, setCurrentTab } = useNavTabsContext();
+  const { id, children, onClick, "data-testid": dataTestId, "isCurrentTab": overrideIsCurrentTab } = props;
+  const isCurrentTab = overrideIsCurrentTab !== undefined ? overrideIsCurrentTab : currentTab === id;
+  const handleTabClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (isCurrentTab) {
+      return;
+    } else {
+      setCurrentTab(id);
+    }
+  };
+
+  return (
+    <button
+      className={styles.tab}
+      onClick={handleTabClick}
+      data-testid={dataTestId || `nav-tab-${id}`}
+      aria-current={isCurrentTab ? true : undefined}
+    >
+      <Text type="paragraph" size="m">
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/{TestResult/TestResultTabs → NavTabs}/styles.scss

@@ -37,9 +37,6 @@
     border-bottom: 2px solid transparent;
   }
 
-  &[disabled] {
-    opacity: 0.5;
-  }
   &[aria-current] {
     background-color: var(--bg-base-primary);
     cursor: default;

package/src/components/Report/index.tsx

@@ -0,0 +1,7 @@
+import { BaseLayout } from "@/components/BaseLayout";
+import { SplitLayout } from "@/components/SplitLayout";
+import { isSplitMode } from "@/stores/layout";
+
+export const Report = () => {
+  return isSplitMode.value ? <SplitLayout /> : <BaseLayout />;
+};

package/src/components/ReportBody/Filters.tsx

@@ -1,12 +1,51 @@
-import { Button, Menu, Toggle, allureIcons } from "@allurereport/web-components";
+import { Button, Menu, Toggle, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
-import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import { type TreeFilters, setTreeFilter, treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
+const filterIcons: Record<TreeFilters, string> = {
+  flaky: allureIcons.lineIconBomb2,
+  retry: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNew,
+  fixed: allureIcons.lineAlertsFixed,
+  regressed: allureIcons.lineAlertsRegressed,
+  malfunctioned: allureIcons.lineAlertsMalfunctioned,
+};
+
+const MENU_KEYS = ["flaky", "retry", "new", "fixed", "regressed", "malfunctioned"] as TreeFilters[];
+
 export const Filters = () => {
   const { t } = useI18n("filters");
-  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
-  const hasFilter = flaky || retry || isNew;
+  const { t: tooltip } = useI18n("filters.description");
+  const hasFilter = MENU_KEYS.some((key) => treeFiltersStore.value.filter[key]);
+
+  const renderFilterItem = (filter: TreeFilters, value: boolean) => {
+    return (
+      <TooltipWrapper data-testid="filter-tooltip" tooltipText={tooltip(filter)}>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t(filter) })}
+          onClick={() => {
+            setTreeFilter(filter, !value);
+          }}
+          leadingIcon={filterIcons[filter]}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={value}
+                label={t("enable-filter", { filter: t(filter) })}
+                data-testid={`${filter}-filter`}
+                onChange={(changeValue) => setTreeFilter(filter, changeValue)}
+              />
+            </div>
+          }
+        >
+          {t(filter)}
+        </Menu.Item>
+      </TooltipWrapper>
+    );
+  };
 
   return (
     <Menu
@@ -24,66 +63,8 @@ export const Filters = () => {
         </div>
       )}
     >
-      <Menu.Section>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("flaky") })}
-          onClick={() => {
-            setTreeFilter("flaky", !flaky);
-          }}
-          leadingIcon={allureIcons.lineGeneralZap}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={flaky}
-                label={t("enable-filter", { filter: t("flaky") })}
-                data-testid="flaky-filter"
-                onChange={(value) => setTreeFilter("flaky", value)}
-              />
-            </div>
-          }
-        >
-          {t("flaky")}
-        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("retry") })}
-          onClick={() => setTreeFilter("retry", !retry)}
-          leadingIcon={allureIcons.lineArrowsRefreshCcw1}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={retry}
-                label={t("enable-filter", { filter: t("retry") })}
-                data-testid="retry-filter"
-                onChange={(value) => setTreeFilter("retry", value)}
-              />
-            </div>
-          }
-        >
-          {t("retry")}
-        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("new") })}
-          onClick={() => setTreeFilter("new", !isNew)}
-          leadingIcon={allureIcons.lineAlertsNotificationBox}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={isNew}
-                label={t("enable-filter", { filter: t("new") })}
-                data-testid="new-filter"
-                onChange={(value) => setTreeFilter("new", value)}
-              />
-            </div>
-          }
-        >
-          {t("new")}
-        </Menu.Item>
+      <Menu.Section data-testid="filters-menu">
+        {MENU_KEYS.map((key: TreeFilters) => renderFilterItem(key, treeFiltersStore.value.filter[key]))}
       </Menu.Section>
     </Menu>
   );

package/src/components/ReportBody/index.tsx

@@ -1,10 +1,10 @@
-import { statusesList } from "@allurereport/core-api";
+import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
-import { statsStore } from "@/stores";
+import { reportStatsStore, statsByEnvStore } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { treeFiltersStore } from "@/stores/tree";
-import { capitalize } from "@/utils/capitalize";
-import { Tab, Tabs, TabsList } from "../Tabs";
+import { setTreeStatus, treeFiltersStore } from "@/stores/tree";
+import { Tab, Tabs, TabsList, useTabsContext } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";
 import { SortBy } from "./SortBy";
@@ -15,27 +15,38 @@ const ALL_TAB = "total";
 
 const Header = () => {
   const { t } = useI18n("statuses");
+  const { currentTab, setCurrentTab } = useTabsContext();
+
   return (
     <header className={styles.header}>
       <HeaderActions />
       <div className={styles.headerRow}>
         <TabsList>
           <Loadable
-            source={statsStore}
+            source={statsByEnvStore}
             renderData={(stats) => {
-              const allStatuses = statusesList
-                .map((status) => ({ status, value: stats[status] }))
-                .filter(({ value }) => value)
-                .map(({ status, value }) => (
-                  <Tab data-testid={`tab-${status}`} key={status} id={status}>
-                    {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
-                  </Tab>
-                ));
+              const currentEnv = stats[currentEnvironment.value] || reportStatsStore.value.data;
+              const statList = statusesList
+                .map((status) => {
+                  return { status, value: currentEnv[status] };
+                })
+                .filter(({ value }) => value);
+              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === currentTab);
+              if (!isStatListHaveCurrentTab.length && currentTab !== "total") {
+                setCurrentTab("total");
+                setTreeStatus("total");
+              }
+
+              const allStatuses = statList.map(({ status, value }) => (
+                <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                  {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
+                </Tab>
+              ));
 
               return (
                 <>
                   <Tab data-testid="tab-all" id={ALL_TAB}>
-                    {capitalize(t("total"))} <Counter count={stats?.total ?? 0} size="s" />
+                    {capitalize(t("total"))} <Counter count={currentEnv?.total ?? 0} size="s" />
                   </Tab>
                   {allStatuses}
                 </>

package/src/components/ReportBody/styles.scss

@@ -1,9 +1,14 @@
 .header {
-  padding: 24px;
-  padding-bottom: 0;
+  padding: 24px 0 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  position: sticky;
+  left: 0;
+  top: 0;
+  left: 0;
+  background: var(--bg-base-primary);
+  z-index: 1;
 }
 
 .headerRow {
@@ -17,7 +22,8 @@
 }
 
 .body {
-  padding: 16px 24px;
+  padding: 16px 0;
+  min-height: 320px;
 }
 
 .headerActions {

package/src/components/ReportGlobalAttachments/index.tsx

@@ -0,0 +1,34 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
+import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
+import { AwesomeTestResult } from "../../../types";
+import * as styles from "./styles.scss";
+
+export const ReportGlobalAttachments = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={globalsStore}
+      renderData={({ attachments }) => {
+        if (!attachments.length) {
+          return <div className={styles["report-global-attachments-empty"]}>{t("no-attachments-results")}</div>;
+        }
+
+        const attachmentSteps: AttachmentTestStepResult[] = attachments.map((attachment: any) => ({
+          link: attachment,
+          type: "attachment",
+        }));
+
+        return (
+          <TrAttachmentView
+            className={styles["report-global-attachments"]}
+            testResult={{ attachments: attachmentSteps } as AwesomeTestResult}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/components/ReportGlobalAttachments/styles.scss

@@ -0,0 +1,11 @@
+.report-global-attachments {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.report-global-attachments-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/ReportGlobalErrors/index.tsx

@@ -0,0 +1,30 @@
+import { Loadable } from "@allurereport/web-components";
+import { TrError } from "@/components/TestResult/TrError";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
+import * as styles from "./styles.scss";
+
+export const ReportGlobalErrors = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={globalsStore}
+      renderData={({ errors }) => {
+        if (!errors.length) {
+          return <div className={styles["report-global-errors-empty"]}>{t("no-global-errors-results")}</div>;
+        }
+
+        return (
+          <ul className={styles["report-global-errors"]}>
+            {errors.map((error, i) => (
+              <li key={i} style={{ marginBottom: "8px" }}>
+                <TrError {...error} />
+              </li>
+            ))}
+          </ul>
+        );
+      }}
+    />
+  );
+};