@allurereport/web-awesome 3.0.0-beta.7 → 3.0.0-beta.9

package/src/components/app/TestResult/TestResultOverview.tsx

@@ -1,40 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import * as styles from "@/components/app/BaseLayout/styles.scss";
-import { TestResultDescription } from "@/components/app/TestResult/TestResultDescription";
-import { TestResultError } from "@/components/app/TestResult/TestResultError";
-import { TestResultLinks } from "@/components/app/TestResult/TestResultLinks";
-import { TestResultMetadata } from "@/components/app/TestResult/TestResultMetadata";
-import { TestResultParameters } from "@/components/app/TestResult/TestResultParameters";
-import { TestResultSetup } from "@/components/app/TestResult/TestResultSetup";
-import { TestResultSteps } from "@/components/app/TestResult/TestResultSteps";
-import { TestResultTeardown } from "@/components/app/TestResult/TestResultTeardown";
-import type { AllureAwesomeTestResult } from "../../../../types.js";
-
-export type TestResultOverviewProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
-  const { message, trace, parameters, groupedLabels, links, description, setup, steps, teardown } = testResult || {};
-
-  return (
-    <>
-      {Boolean(message) && (
-        <div className={styles["test-result-errors"]}>
-          <TestResultError message={message} trace={trace} />
-        </div>
-      )}
-      {Boolean(parameters?.length) && <TestResultParameters parameters={parameters} />}
-      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
-        <TestResultMetadata testResult={testResult} />
-      )}
-      {Boolean(links?.length) && <TestResultLinks links={links} />}
-      {Boolean(description) && <TestResultDescription description={description} />}
-      <div className={styles["test-results"]}>
-        {Boolean(setup?.length) && <TestResultSetup setup={setup} />}
-        {Boolean(steps?.length) && <TestResultSteps steps={steps} />}
-        {Boolean(teardown?.length) && <TestResultTeardown teardown={teardown} />}
-      </div>
-    </>
-  );
-};

package/src/components/app/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

@@ -1,50 +0,0 @@
-import { formatDuration } from "@allurereport/core-api";
-import { clsx } from "clsx";
-import { useState } from "preact/hooks";
-import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
-import LineGeneralLinkExternal from "@/assets/svg/line-general-link-external.svg";
-import { ArrowButton } from "@/components/app/ArrowButton";
-import { TestResultError } from "@/components/app/TestResult/TestResultError";
-import * as styles from "@/components/app/TestResult/TestResultRetriesView/styles.scss";
-import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
-import { IconButton } from "@/components/commons/Button";
-import { Text } from "@/components/commons/Typography";
-import { navigateTo } from "@/index";
-import { timestampToDate } from "@/utils/time";
-
-export const TestResultRetriesItem = ({ testResultItem }) => {
-  const { id, status, message, trace, stop, duration } = testResultItem;
-  const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration);
-  const navigateUrl = `/testresult/${id}`;
-
-  return (
-    <div>
-      <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
-        {Boolean(message) && <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />}
-        <div className={styles["test-result-retries-item-wrap"]}>
-          <TreeItemIcon status={status} className={styles["test-result-retries-item-status"]} />
-          <Text className={styles["test-result-retries-item-text"]}>{convertedStop}</Text>
-          <div className={styles["test-result-retries-item-info"]}>
-            <Text type="ui" size={"s"} className={styles["item-time"]}>
-              {formattedDuration}
-            </Text>
-            <IconButton
-              icon={LineGeneralLinkExternal.id}
-              style={"ghost"}
-              size={"s"}
-              className={styles["test-result-retries-item-link"]}
-              onClick={() => navigateTo(navigateUrl)}
-            />
-          </div>
-        </div>
-      </div>
-      {isOpened && message && (
-        <div className={styles["test-result-retries-item-content"]}>
-          <TestResultError message={message} trace={trace} />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/app/TestResult/TestResultRetriesView/index.tsx

@@ -1,24 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import * as styles from "@/components/app/TestResult/TestResultHistory/styles.scss";
-import { TestResultRetriesItem } from "@/components/app/TestResult/TestResultRetriesView/TestResultRetriesItem";
-import { useI18n } from "@/stores";
-
-export type TestResultRetriesViewProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultRetriesView: FunctionalComponent<TestResultRetriesViewProps> = ({ testResult }) => {
-  const { retries } = testResult ?? {};
-  const { t } = useI18n("empty");
-
-  return (
-    <div className={styles["test-result-history"]}>
-      {retries.length ? (
-        retries?.map((item, key) => <TestResultRetriesItem testResultItem={item} key={key} />)
-      ) : (
-        <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
-      )}
-    </div>
-  );
-};

package/src/components/app/TestResult/TestResultSeverity/index.tsx

@@ -1,34 +0,0 @@
-import clsx from "clsx";
-import i18n from "i18next";
-import ChevronDownDouble from "@/assets/svg/line-arrows-chevron-down-double.svg";
-import ChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
-import ChevronUpDouble from "@/assets/svg/line-arrows-chevron-up-double.svg";
-import ChevronUp from "@/assets/svg/line-arrows-chevron-up.svg";
-import EqualIcon from "@/assets/svg/line-general-equal.svg";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
-import { useI18n } from "@/stores/locale";
-import { capitalize } from "@/utils/capitalize";
-import * as styles from "./styles.scss";
-
-const icons = {
-  blocker: ChevronUpDouble.id,
-  critical: ChevronUp.id,
-  normal: EqualIcon.id,
-  minor: ChevronDown.id,
-  trivial: ChevronDownDouble.id,
-};
-
-export const TestResultSeverity = ({ severity = "normal" }: { severity?: string }) => {
-  const { t } = useI18n("severity");
-  const statusClass = clsx(styles[`severity-${severity}`]);
-
-  return (
-    <div className={styles["test-result-severity"]}>
-      <SvgIcon className={statusClass} id={icons[severity]}></SvgIcon>
-      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
-        {capitalize(t(severity))}
-      </Text>
-    </div>
-  );
-};

package/src/components/app/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -1,12 +0,0 @@
-import { Spinner } from "@/components/commons/Spinner";
-
-export const AttachmentVideo = ({ attachment }) => {
-  if (!attachment) {
-    return <Spinner />;
-  }
-  return (
-    <video controls loop muted>
-      <source src={attachment?.src} type={attachment?.contentType} />
-    </video>
-  );
-};

package/src/components/app/TestResult/TestResultSteps/testResultStepInfo.tsx

@@ -1,33 +0,0 @@
-import { formatDuration } from "@allurereport/core-api";
-import LineArrowsCornerDownRight from "@/assets/svg/line-arrows-corner-down-right.svg";
-import LineFilesFileAttachment from "@/assets/svg/line-files-file-attachment-2.svg";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
-
-export const TestResultStepInfo = ({ item }) => {
-  const { steps } = item;
-  const formattedDuration = formatDuration(item?.duration as number);
-  const stepLength = steps?.length;
-  const attachmentLength = steps?.filter((step) => step.type === "attachment")?.length;
-
-  return (
-    <div className={styles["item-info"]}>
-      {Boolean(stepLength) && (
-        <div className={styles["item-info-step"]}>
-          <SvgIcon id={LineArrowsCornerDownRight.id} className={styles["item-info-step-icon"]} />
-          <Text size={"s"}>{stepLength}</Text>
-        </div>
-      )}
-      {Boolean(attachmentLength) && (
-        <div className={styles["item-info-step"]}>
-          <SvgIcon id={LineFilesFileAttachment.id} className={styles["item-info-step-icon"]} />
-          <Text size={"s"}>{attachmentLength}</Text>
-        </div>
-      )}
-      <Text type="ui" size={"s"} className={styles["item-time"]}>
-        {formattedDuration}
-      </Text>
-    </div>
-  );
-};

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

@@ -1,35 +0,0 @@
-import { clsx } from "clsx";
-import { FunctionalComponent } from "preact";
-import AlertCircle from "@/assets/svg/solid-alert-circle.svg";
-import CheckCircle from "@/assets/svg/solid-check-circle.svg";
-import HelpCircle from "@/assets/svg/solid-help-circle.svg";
-import MinusCircle from "@/assets/svg/solid-minus-circle.svg";
-import XCircle from "@/assets/svg/solid-x-circle.svg";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import * as styles from "./styles.scss";
-
-interface TestStatusIconProps {
-  status?: "failed" | "broken" | "passed" | "skipped" | "unknown";
-  className?: string;
-  classNameIcon?: string;
-}
-
-const icons = {
-  failed: XCircle.id,
-  broken: AlertCircle.id,
-  passed: CheckCircle.id,
-  skipped: MinusCircle.id,
-  unknown: HelpCircle.id,
-};
-
-const TreeItemIcon: FunctionalComponent<TestStatusIconProps> = ({ status = "unknown", className, classNameIcon }) => {
-  const statusClass = clsx(styles[`status-${status}`], classNameIcon);
-
-  return (
-    <div data-testid={`tree-leaf-status-${status}`} className={clsx(styles["tree-item-icon"], className)}>
-      <SvgIcon className={statusClass} id={icons[status]}></SvgIcon>
-    </div>
-  );
-};
-
-export default TreeItemIcon;

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

@@ -1,176 +0,0 @@
-import { clsx } from "clsx";
-import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
-import { Spinner } from "../Spinner";
-import { SvgIcon } from "../SvgIcon";
-import { Text } from "../Typography";
-import * as styles from "./styles.scss";
-
-type BaseBtnProps = {
-  /**
-   * Text to be displayed on the button
-   * Should not contain any JSX, only plain text
-   */
-  text?: string;
-  /**
-   * Indicates if the button is in a pending state
-   */
-  isPending?: boolean;
-  /**
-   * Size of the button
-   *
-   * @default m
-   *
-   * - `s` - Small button
-   * - `m` - Medium button
-   * - `l` - Large button
-   */
-  size?: "s" | "m" | "l";
-  /**
-   * Style of the button
-   *
-   * @default primary
-   *
-   * - `primary` - Primary button
-   * - `outline` - Outline button
-   * - `ghost` - Ghost button
-   * - `flat` - Flat button
-   * - `raised` - Raised button
-   */
-  style?: "primary" | "outline" | "ghost" | "flat" | "raised";
-  /**
-   * - `danger` - Indicates if the button is a danger button
-   * - `positive` - Indicates if the button is a positive button
-   *
-   * @default "default"
-   */
-  action?: "default" | "danger" | "positive";
-  /**
-   * Icon to be displayed on the button
-   */
-  icon?: string;
-  /**
-   * Custom icon size on the button
-   */
-  iconSize?: "xs" | "s" | "m";
-  /**
-   * Indicates if the button should take the full width of its container
-   */
-  fullWidth?: boolean;
-  /**
-   * Indicates if the button is an icon button
-   */
-  isIconButton?: boolean;
-  /**
-   * Indicates if the button is a dropdown button
-   */
-  isDropdownButton?: boolean;
-  /**
-   * Callback to be called when the button is pressed
-   */
-  onClick?: (e: MouseEvent) => void;
-  /**
-   * Type of the button
-   * same as HTML Button type
-   */
-  type?: HTMLButtonElement["type"];
-  /**
-   * Indicates if the button is disabled or not
-   * this tells screen readers to ignore the button
-   * But the button is still focusable in order to show the tooltip
-   */
-  isDisabled?: boolean;
-  /**
-   * For visual "active" state
-   *
-   * Used for dropdown buttons mainly
-   */
-  isActive?: boolean;
-  /**
-   * Indicates if the button is focusable
-   *
-   * @default true
-   */
-  focusable?: boolean;
-  className?: string;
-};
-
-const BaseBtn = (props: BaseBtnProps) => {
-  const {
-    text,
-    type = "button",
-    icon,
-    iconSize = "m",
-    onClick,
-    isPending = false,
-    size = "m",
-    style = "primary",
-    action = "default",
-    fullWidth = false,
-    isDisabled = false,
-    isIconButton = false,
-    isDropdownButton = false,
-    isActive = false,
-    focusable = true,
-    className,
-    ...rest
-  } = props;
-
-  const isButtonDisabled = isDisabled || isPending;
-
-  return (
-    <button
-      {...rest}
-      tabIndex={focusable ? 0 : -1}
-      className={clsx(
-        styles.button,
-        isIconButton && styles.buttonIcon,
-        styles[`size_${size}`],
-        styles[`icon_size_${iconSize}`],
-        styles[`style_${style}`],
-        action === "danger" && styles.danger,
-        action === "positive" && styles.positive,
-        isPending && styles.pending,
-        fullWidth && styles.fullWidth,
-        !isButtonDisabled && isActive && styles.active,
-        className,
-      )}
-      disabled={isButtonDisabled}
-      onClick={onClick}
-      type={type}
-    >
-      <Text type="ui" size={size === "s" ? "s" : "m"} bold className={styles.content}>
-        {icon && <SvgIcon size="s" className={isIconButton ? styles.contentIcon : styles.leadingIcon} id={icon} />}
-        {!isIconButton && <span className={styles.text}>{text}</span>}
-        {isDropdownButton && <SvgIcon id={lineChevronDownIcon.id} size="s" className={styles.dropdownIcon} />}
-        <span className={styles.spinner} aria-hidden={!isPending}>
-          <Spinner />
-        </span>
-      </Text>
-    </button>
-  );
-};
-
-export type ButtonProps = Omit<BaseBtnProps, "text" | "isIconButton" | "isDropdownButton"> &
-  Pick<Required<BaseBtnProps>, "text">;
-
-export const Button = (props: ButtonProps) => <BaseBtn {...props} />;
-
-export type IconButtonProps = Omit<
-  BaseBtnProps,
-  "text" | "icon" | "autoFocus" | "fullWidth" | "isIconButton" | "isDropdownButton"
-> &
-  Pick<Required<BaseBtnProps>, "icon">;
-
-export const IconButton = (props: IconButtonProps) => <BaseBtn {...props} isIconButton />;
-
-type DropdownButtonProps = Omit<
-  BaseBtnProps,
-  "type" | "autoFocus" | "isDropdownButton" | "isIconButton" | "text" | "icon" | "isActive"
-> &
-  Pick<Required<BaseBtnProps>, "text"> & {
-    isExpanded?: boolean;
-  };
-
-export const DropdownButton = (props: DropdownButtonProps) => (
-  <BaseBtn {...props} isDropdownButton isActive={props.isExpanded} />
-);