@allurereport/web-awesome 3.0.0-beta.3

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

@@ -0,0 +1,53 @@
+.report-metadata-header-arrow {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+
+.report-metadata-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.report-metadata-header {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+  transition:
+    background-color 200ms,
+    opacity 200ms;
+
+  margin: 6px 0;
+
+  &:after {
+    content: "";
+    padding: 6px 8px;
+    border-radius: 8px;
+    left: -8px;
+    top: -6px;
+    position: absolute;
+    width: calc(100% + 16px);
+    height: calc(100% + 12px);
+    z-index: 0;
+    background-color: transparent;
+    transition: background-color 200ms;
+  }
+
+  &:hover {
+    &:after {
+      background-color: var(--bg-control-flat-medium);
+    }
+
+    .report-metadata-header-arrow {
+      opacity: 1;
+    }
+  }
+}
+
+.report-metadata-header-opened {
+  .report-metadata-header-arrow {
+    transform: rotate(0);
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,184 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { signal } from "@preact/signals";
+import type { FunctionalComponent, VNode } from "preact";
+import { useEffect } from "preact/hooks";
+import Prism from "prismjs";
+import LineGeneralDownloadCloud from "@/assets/svg/line-general-download-cloud.svg";
+import LineGeneralCopy from "@/assets/svg/line-general-link-external.svg";
+import LineGeneralXClose from "@/assets/svg/line-general-x-close.svg";
+import ViewOffIcon from "@/assets/svg/view-off.svg";
+import ViewIcon from "@/assets/svg/view.svg";
+import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
+import { Button, IconButton } from "@/components/commons/Button";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Heading } from "@/components/commons/Typography";
+import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
+import type { AllureAwesomeTestResult } from "../../../../types.js";
+import * as styles from "./styles.scss";
+
+export const isModalOpen = signal(false);
+
+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 = ({ 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} />,
+    });
+  };
+
+  return (
+    <div
+      className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`}
+      onClick={() => showAttach(item as AttachmentTestStepResult)}
+    >
+      {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>
+  );
+};
+
+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={LineGeneralCopy.id}
+                  text={"Open in new tab"}
+                />
+              )}
+              {isHtmlAttachment && (
+                <TooltipWrapper tooltipText={"Preview attachment"}>
+                  <IconButton
+                    style={"outline"}
+                    size={"m"}
+                    iconSize={"s"}
+                    icon={modalData.value.preview ? ViewOffIcon.id : ViewIcon.id}
+                    onClick={() => {
+                      modalData.value = {
+                        ...modalData.value,
+                        preview: !modalData.value.preview,
+                      };
+                    }}
+                  />
+                </TooltipWrapper>
+              )}
+              <TooltipWrapper tooltipText={"Download attachment"}>
+                <IconButton
+                  style={"outline"}
+                  size={"m"}
+                  iconSize={"s"}
+                  icon={LineGeneralDownloadCloud.id}
+                  onClick={(e: MouseEvent) => downloadData(e)}
+                />
+              </TooltipWrapper>
+              <IconButton iconSize={"m"} style={"ghost"} onClick={closeModal} icon={LineGeneralXClose.id} />
+            </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/app/Modal/styles.scss

@@ -0,0 +1,126 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ad-other-modal-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.modal-wrapper {
+  position: relative;
+  background: var(--bg-base-primary);
+  max-width: 90%;
+  max-height: 80vh;
+  width: 90vw;
+  min-width: 320px;
+  min-height: 320px;
+  display: flex;
+  border-radius: 16px;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 1;
+  overflow-y: auto;
+}
+
+.modal-data-component {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  pointer-events: all;
+  padding-top: 56px;
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.close-button-wrap {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.modal-buttons {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.modal-button {
+}
+
+.modal-data {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  pointer-events: none;
+  display: flex;
+  position: relative;
+}
+
+.modal-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 32px);
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 1;
+}
+
+.modal-bottom {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  color: var(--gray-neutral-0);
+}
+
+.modal-thumb {
+  display: flex;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  background: var(--constant-bg-base-primary-night);
+  overflow: hidden;
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+
+  &.active {
+    border: 1px solid var(--constant-on-border-heavy);
+  }
+}
+
+.modal-gallery {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+}

package/src/components/app/ReportBody/Filters.tsx

@@ -0,0 +1,94 @@
+import notificationBoxIcon from "@/assets/svg/line-alerts-notification-box.svg";
+import refreshIcon from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
+import settingsIcon from "@/assets/svg/line-general-settings-1.svg";
+import zapIcon from "@/assets/svg/line-general-zap.svg";
+import { useReportContentContext } from "@/components/app/ReportBody/context";
+import { Button } from "@/components/commons/Button";
+import { Menu } from "@/components/commons/Menu";
+import { Toggle } from "@/components/commons/Toggle";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export const Filters = () => {
+  const { t } = useI18n("filters");
+  const { filter, setFilter } = useReportContentContext();
+
+  const { flaky, retry, new: isNew } = filter;
+  const hasFilter = flaky || retry || isNew;
+
+  return (
+    <Menu
+      menuTrigger={({ isOpened, onClick }) => (
+        <div className={hasFilter && styles.filtersBtnWithFilters}>
+          <Button
+            icon={settingsIcon.id}
+            text={t("more-filters")}
+            size="m"
+            style="outline"
+            isActive={isOpened}
+            onClick={onClick}
+          />
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("flaky") })}
+          onClick={() => {
+            setFilter("flaky", !flaky);
+          }}
+          leadingIcon={zapIcon.id}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={flaky}
+                label={t("enable-filter", { filter: t("flaky") })}
+                onChange={(value) => setFilter("flaky", value)}
+              />
+            </div>
+          }
+        >
+          {t("flaky")}
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("retry") })}
+          onClick={() => setFilter("retry", !retry)}
+          leadingIcon={refreshIcon.id}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={retry}
+                label={t("enable-filter", { filter: t("retry") })}
+                onChange={(value) => setFilter("retry", value)}
+              />
+            </div>
+          }
+        >
+          {t("retry")}
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("new") })}
+          onClick={() => setFilter("new", !isNew)}
+          leadingIcon={notificationBoxIcon.id}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={isNew}
+                label={t("enable-filter", { filter: t("new") })}
+                onChange={(value) => setFilter("new", value)}
+              />
+            </div>
+          }
+        >
+          {t("new")}
+        </Menu.Item>
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/app/ReportBody/HeaderActions.tsx

@@ -0,0 +1,21 @@
+import { useI18n } from "@/stores/locale";
+import { SearchBox } from "../../commons/SearchBox";
+import { Filters } from "./Filters";
+import { useReportContentContext } from "./context";
+import * as styles from "./styles.scss";
+
+const Search = () => {
+  const { setQuery, query } = useReportContentContext();
+  const { t } = useI18n("search");
+
+  return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setQuery} />;
+};
+
+export const HeaderActions = () => {
+  return (
+    <div className={styles.headerActions}>
+      <Search />
+      <Filters />
+    </div>
+  );
+};

package/src/components/app/ReportBody/SortBy.tsx

@@ -0,0 +1,134 @@
+import clsx from "clsx";
+import { ComponentChildren } from "preact";
+import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
+import sortAscIcon from "@/assets/svg/line-arrows-sort-line-asc.svg";
+import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
+import switchVerticalIcon from "@/assets/svg/line-arrows-switch-vertical-1.svg";
+import { useI18n } from "@/stores/locale";
+import { DropdownButton } from "../../commons/Button";
+import { Link } from "../../commons/Link";
+import { Menu } from "../../commons/Menu";
+import { SvgIcon } from "../../commons/SvgIcon";
+import { Text } from "../../commons/Typography";
+import { useReportContentContext } from "./context";
+import * as styles from "./styles.scss";
+
+const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
+  return <div className={styles.sortByBtnWrap}>{children}</div>;
+};
+
+export const SortBy = () => {
+  const { t: sortByLocale } = useI18n("sort-by");
+  const { t: sortByValuesLocale } = useI18n("sort-by.values");
+  const { t: sortByDirectionsLocale } = useI18n("sort-by.directions");
+  const { direction, sortBy, setSortBy, setDirection } = useReportContentContext();
+
+  const displayedSortByValue = sortByValuesLocale(sortBy);
+  const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
+
+  return (
+    <div>
+      <Text type="paragraph" size="m" className={styles.sortByText}>
+        {sortByLocale("sort-by-text")}
+        &nbsp;
+        <Menu
+          size="l"
+          menuTriggerWrapper="span"
+          menuTrigger={({ onClick, isOpened }) => (
+            <Text type="paragraph" size="m">
+              <Link onClick={onClick}>
+                {displayedSortByValue} {displayedDirection}
+                <SvgIcon
+                  size="s"
+                  id={lineChevronDownIcon.id}
+                  className={clsx(styles.sortByIcon, isOpened && styles.sortByIconReversed)}
+                />
+              </Link>
+            </Text>
+          )}
+        >
+          <Menu.Section>
+            <Menu
+              size="s"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={switchVerticalIcon.id}
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedSortByValue}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("sort-by-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark onClick={() => setSortBy("order")} isChecked={sortBy === "order"}>
+                  {sortByValuesLocale("order")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setSortBy("duration")} isChecked={sortBy === "duration"}>
+                  {sortByValuesLocale("duration")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setSortBy("status")} isChecked={sortBy === "status"}>
+                  {sortByValuesLocale("status")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                  {sortByValuesLocale("alphabet")}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+            <Menu
+              size="m"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={direction == "asc" ? sortAscIcon.id : sortDescIcon.id}
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedDirection}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("direction-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setDirection("asc")}
+                  leadingIcon={sortAscIcon.id}
+                  isChecked={direction === "asc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-asc`)}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setDirection("desc")}
+                  leadingIcon={sortDescIcon.id}
+                  isChecked={direction === "desc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-desc`)}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+          </Menu.Section>
+        </Menu>
+      </Text>
+    </div>
+  );
+};