@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/components/Metadata/styles.scss

@@ -0,0 +1,146 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: inline-grid;
+  grid-template-columns: 30% 60%;
+  gap: 10%;
+  align-items: center;
+}
+
+.report-metadata-values {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.report-metadata-s {
+  font-size: 12px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.report-metadata-keyvalue-wrapper {
+  background: var(--on-border-primary);
+  border-radius: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 2px 4px;
+  line-height: 16px;
+}
+
+.report-metadata-keyvalue-value {
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 5%;
+  grid-template-columns: repeat(2, 45%);
+}
+
+.metadata-test-type {
+  display: flex;
+}
+
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text;
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}
+
+.metadata-tooltip {
+  padding: 12px 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.metadata-tooltip-value {
+  flex: 1 1 auto;
+  min-width: 320px;
+  background: var(--bg-base-secondary);
+  max-height: 238px;
+  padding: 8px 16px;
+  overflow: hidden;
+  overflow-y: auto;
+  border-radius: 8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/src/components/MetadataButton/index.tsx

@@ -0,0 +1,32 @@
+import { 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 {
+  isOpened?: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  counter?: number;
+  title?: string;
+}
+
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+  return (
+    <div
+      className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      onClick={() => setIsOpen(!isOpened)}
+    >
+      <Text size={"m"} bold>
+        {title}
+      </Text>
+      {counter && <Counter count={counter} size="s" />}
+      <ArrowButton
+        isOpened={isOpened}
+        iconSize={"s"}
+        buttonSize={"s"}
+        className={styles["report-metadata-header-arrow"]}
+      />
+    </div>
+  );
+};

package/src/components/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/Modal/index.tsx

@@ -0,0 +1,174 @@
+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 { ClassicTestResult } from "types";
+import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
+import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
+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: 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} />,
+    });
+  };
+
+  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>
+  );
+};
+
+export type ModalProps = {
+  testResult: ClassicTestResult;
+};
+
+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/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/Overview/Overview.module.scss

@@ -0,0 +1,29 @@
+.overview {
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.overview-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
+}
+
+.overview-grid-item {
+  padding: 4px;
+  width: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper-squeezer {
+  width: 50%;
+}

package/src/components/Overview/index.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @stylistic/quotes */
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { ChartType } from "@allurereport/charts-api";
+import type { UIChartData } from "@allurereport/web-commons";
+import {
+  Grid,
+  GridItem,
+  HeatMapWidget,
+  Loadable,
+  PageLoader,
+  ThemeProvider,
+  TreeMapChartWidget,
+} from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { themeStore, useI18n } from "@/stores";
+import { chartsStore, fetchChartsData } from "@/stores/charts";
+import * as styles from "./Overview.module.scss";
+
+const getChartWidgetByType = (
+  chartData: UIChartData,
+  { t, empty }: Record<string, (key: string, options?: any) => string>,
+) => {
+  switch (chartData.type) {
+    case ChartType.CoverageDiff: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.CoverageDiff}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.SuccessRateDistribution: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.SuccessRateDistribution}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.ProblemsDistribution: {
+      return (
+        <HeatMapWidget
+          title={chartData.title}
+          data={chartData.data}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+const Overview = () => {
+  const { t } = useI18n("charts");
+  const { t: empty } = useI18n("empty");
+
+  useEffect(() => {
+    fetchChartsData();
+  }, []);
+
+  return (
+    <ThemeProvider theme={themeStore.value}>
+      <Loadable
+        source={chartsStore}
+        renderLoader={() => <PageLoader />}
+        renderData={(data) => {
+          const charts = Object.entries(data).map(([chartId, value]) => {
+            const chartWidget = getChartWidgetByType(value, { t, empty });
+
+            return (
+              <GridItem key={chartId} className={styles["overview-grid-item"]}>
+                {chartWidget}
+              </GridItem>
+            );
+          });
+
+          return (
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                {charts}
+              </Grid>
+            </div>
+          );
+        }}
+      />
+    </ThemeProvider>
+  );
+};
+
+export default Overview;