@allurereport/web-awesome 3.3.1 → 3.4.1

package/src/components/MetadataButton/styles.scss

@@ -12,6 +12,7 @@
   background: none;
   padding: 0;
   width: max-content;
+  text-align: left;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -48,9 +49,28 @@
   }
 }
 
+.report-metadata-header-truncated {
+  width: 100%;
+  min-width: 0;
+}
+
+.report-metadata-title-container {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .report-metadata-header-opened {
   .report-metadata-header-arrow {
     transform: rotate(0);
     opacity: 0;
   }
 }
+
+.report-metadata-title-truncated {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/Modal/index.tsx

@@ -1,4 +1,5 @@
 import { Modal, type ModalTranslations } from "@allurereport/web-components";
+
 import { useI18n } from "@/stores";
 import { isModalOpen, modalData } from "@/stores/modal";
 
@@ -8,6 +9,7 @@ export const ModalComponent = () => {
   const translations: ModalTranslations = {
     tooltipDownload: t("downloadAttachment"),
     tooltipPreview: t("previewAttachment"),
+    tooltipSyntaxHighlight: t("syntaxHighlight"),
     openInNewTabButton: t("openInNewTab"),
   };
 

package/src/components/NavTabs/index.tsx

@@ -1,6 +1,7 @@
 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 = {
@@ -43,7 +44,7 @@ export const NavTab = (props: {
   "isCurrentTab"?: boolean;
 }) => {
   const { currentTab, setCurrentTab } = useNavTabsContext();
-  const { id, children, onClick, "data-testid": dataTestId, "isCurrentTab": overrideIsCurrentTab } = props;
+  const { id, children, onClick, "data-testid": dataTestId, isCurrentTab: overrideIsCurrentTab } = props;
   const isCurrentTab = overrideIsCurrentTab !== undefined ? overrideIsCurrentTab : currentTab === id;
   const handleTabClick = () => {
     if (onClick) {

package/src/components/ReportBody/HeaderActions.tsx

@@ -1,5 +1,6 @@
 import { ReportFilters } from "../ReportFilters";
 import { ReportSearch } from "../ReportSearch";
+
 import * as styles from "./styles.scss";
 
 export const HeaderActions = () => {

package/src/components/ReportBody/SortBy.tsx

@@ -1,8 +1,10 @@
 import { DropdownButton, Link, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
+
 import { useI18n } from "@/stores/locale";
 import { type SortByDirection, type SortByField, type SortBy as TSortBy, setSortBy, sortBy } from "@/stores/treeSort";
+
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {

package/src/components/ReportBody/index.tsx

@@ -1,14 +1,17 @@
 import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
+
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
+
 import { ReportTab, ReportTabsList } from "../ReportTabs";
 import { TreeList } from "../Tree";
+import { ReportContentProvider } from "./context";
 import { HeaderActions } from "./HeaderActions";
 import { SortBy } from "./SortBy";
-import { ReportContentProvider } from "./context";
+
 import * as styles from "./styles.scss";
 
 const ALL_TAB = "total";

package/src/components/ReportCategories/index.tsx

@@ -1,7 +1,9 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
+
 import { CategoriesTree } from "@/components/Categories/CategoriesTree";
 import { useI18n } from "@/stores";
 import { categoriesStore } from "@/stores/categories";
+
 import * as styles from "./styles.scss";
 
 export const ReportCategories = () => {

package/src/components/ReportFilters/BaseFilters.tsx

@@ -19,7 +19,9 @@ import {
 } from "@allurereport/web-components";
 import { createPortal } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
 import { useI18n } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 const FilterBtn = (props: {

package/src/components/ReportFilters/CategoriesFilter.tsx

@@ -1,6 +1,8 @@
 import { computed } from "@preact/signals";
+
 import { useI18n } from "@/stores";
 import { treeCategories } from "@/stores/treeFilters/store";
+
 import type { AwesomeArrayFieldFilter } from "../../stores/treeFilters/model";
 import { ArrayFieldFilter } from "./BaseFilters";
 

package/src/components/ReportFilters/RetryFlaky.tsx

@@ -1,6 +1,8 @@
 import { allureIcons } from "@allurereport/web-components";
+
 import { useI18n } from "@/stores";
 import type { AwesomeBooleanField, AwesomeFieldFilter } from "@/stores/treeFilters/model";
+
 import { BooleanFieldFilter } from "./BaseFilters";
 
 type RetryOrFlakyFilter = AwesomeFieldFilter & {

package/src/components/ReportFilters/TagsFilter.tsx

@@ -1,6 +1,8 @@
 import { computed } from "@preact/signals";
+
 import { useI18n } from "@/stores";
 import { treeTags } from "@/stores/treeFilters/store";
+
 import type { AwesomeArrayFieldFilter } from "../../stores/treeFilters/model";
 import { ArrayFieldFilter } from "./BaseFilters";
 

package/src/components/ReportFilters/TransitionFilter.tsx

@@ -1,6 +1,8 @@
 import { allureIcons } from "@allurereport/web-components";
 import { useMemo } from "preact/hooks";
+
 import { useI18n } from "@/stores";
+
 import type { AwesomeFilterGroupSimple } from "../../stores/treeFilters/model";
 import { MultipleChoiceFieldFilter } from "./BaseFilters";
 

package/src/components/ReportFilters/index.tsx

@@ -1,4 +1,5 @@
 import { For } from "@preact/signals/utils";
+
 import type { AwesomeFilter } from "@/stores/treeFilters/model";
 import { setTreeFilter, treeQuickFilters } from "@/stores/treeFilters/store";
 import {
@@ -8,11 +9,13 @@ import {
   isTagFilter,
   isTransitionFilter,
 } from "@/stores/treeFilters/utils";
+
 import { BooleanFieldFilter } from "./BaseFilters";
 import { CategoriesFilter } from "./CategoriesFilter";
 import { RetryFlakyFilter } from "./RetryFlaky";
 import { TagsFilter } from "./TagsFilter";
 import { TransitionFilter } from "./TransitionFilter";
+
 import * as styles from "./styles.scss";
 
 const Filter = (props: { filter: AwesomeFilter; onChange: (filter: AwesomeFilter) => void }) => {

package/src/components/ReportGlobalAttachments/index.tsx

@@ -1,9 +1,12 @@
 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 = () => {

package/src/components/ReportGlobalErrors/index.tsx

@@ -1,7 +1,9 @@
 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 = () => {

package/src/components/ReportHeader/ReportHeaderLabelList.tsx

@@ -1,4 +1,5 @@
 import { Label } from "@allurereport/web-components";
+
 import * as styles from "@/components/ReportHeader/styles.scss";
 
 export const ReportHeaderLabelList = () => {

package/src/components/ReportHeader/ReportHeaderLogo.tsx

@@ -1,8 +1,10 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { ReportLogo } from "@allurereport/web-components";
-import * as styles from "@/components/ReportHeader/styles.scss";
+
 import type { AwesomeReportOptions } from "../../../types";
 
+import * as styles from "@/components/ReportHeader/styles.scss";
+
 export const ReportHeaderLogo = () => {
   const { logo } = getReportOptions<AwesomeReportOptions>() ?? {};
 

package/src/components/ReportHeader/ReportHeaderPie.tsx

@@ -1,5 +1,7 @@
 import { Loadable, SuccessRatePieChart } from "@allurereport/web-components";
+
 import { pieChartStore } from "@/stores/chart";
+
 import * as styles from "./styles.scss";
 
 export const ReportHeaderPie = () => (

package/src/components/ReportHeader/index.tsx

@@ -1,11 +1,13 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
 import type { AwesomeReportOptions } from "types";
+
 import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
 import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { TrStatus } from "@/components/TestResult/TrStatus";
 import { currentLocaleIso, useI18n } from "@/stores";
 import { globalsStore } from "@/stores/globals";
+
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {

package/src/components/ReportMetadata/MetadataItem.tsx

@@ -1,6 +1,7 @@
 import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
 import type { FunctionalComponent } from "preact";
+
 import * as styles from "./styles.scss";
 
 export type MetadataProps = {

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,12 +1,14 @@
 import { type Statistic, capitalize, statusesList } from "@allurereport/core-api";
 import { computed } from "@preact/signals";
 import type { FunctionalComponent } from "preact";
+
 import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
-import * as styles from "@/components/ReportMetadata/styles.scss";
 import { useI18n } from "@/stores/locale";
 
+import * as styles from "@/components/ReportMetadata/styles.scss";
+
 export interface MetadataSummaryProps {
   stats: Statistic;
 }

package/src/components/ReportMetadata/MetadataTestType.tsx

@@ -1,7 +1,9 @@
 import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
 import type { FunctionComponent } from "preact";
+
 import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+
 import * as styles from "@/components/ReportMetadata/styles.scss";
 
 export const MetadataTestType: FunctionComponent<MetadataProps> = ({ status, count }) => {

package/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -1,6 +1,8 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
+
 import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {

package/src/components/ReportMetadata/index.tsx

@@ -1,16 +1,21 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
-import { Loadable } from "@allurereport/web-components";
+import { Button, Loadable } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect } from "preact/hooks";
+
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
 import { reportStatsStore, statsByEnvStore, useI18n } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { envInfoStore } from "@/stores/envInfo";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
 import { fetchVariables, variables } from "@/stores/variables";
+
 import * as styles from "./styles.scss";
 
+const REPORT_VISIBLE_LIMIT = 8;
+
 export interface MetadataItem extends EnvironmentItem {
   value?: string;
 }
@@ -29,39 +34,78 @@ export type MetadataVariablesProps = {
 };
 
 const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo = [] }) => {
-  const [isOpened, setIsOpen] = useState(true);
-  const convertedEnvInfo = envInfo.map((env) => {
-    return { ...env, value: env.values.join(", ") };
-  });
+  const envKey = currentEnvironment.value ?? "default";
+  const sectionId = `report-${envKey}-metadata`;
+  const showAllId = `report-${envKey}-metadata-showAll`;
+  const isOpened = !collapsedTrees.value.has(sectionId);
+  const showAll = collapsedTrees.value.has(showAllId);
+  const list = envInfo.map((env) => ({ ...env, value: env.values.join(", ") }));
+  const totalCount = list.length;
+  const visibleList = totalCount <= REPORT_VISIBLE_LIMIT ? list : showAll ? list : list.slice(0, REPORT_VISIBLE_LIMIT);
+  const { t } = useI18n("ui");
 
   return (
     <div class={styles["report-metadata"]}>
-      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} title={"Metadata"} counter={envInfo.length} />
-      {isOpened && <MetadataList envInfo={convertedEnvInfo} />}
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={() => toggleTree(sectionId)}
+        title={t("metadata")}
+        counter={envInfo.length}
+      />
+      {isOpened && (
+        <>
+          <MetadataList envInfo={visibleList} />
+          {totalCount > REPORT_VISIBLE_LIMIT && (
+            <Button
+              style="ghost"
+              size="s"
+              text={showAll ? t("showLess") : t("showMore")}
+              onClick={() => toggleTree(showAllId)}
+            />
+          )}
+        </>
+      )}
     </div>
   );
 };
 
 const MetadataVariables: FunctionalComponent<MetadataVariablesProps> = (props) => {
   const { t } = useI18n("ui");
-  const [isOpened, setIsOpen] = useState(true);
-  const convertedEnvInfo = Object.entries(props.variables).map(([key, value]) => {
-    return {
-      name: key,
-      value,
-    } as MetadataItem;
-  });
+  const envKey = currentEnvironment.value ?? "default";
+  const sectionId = `report-${envKey}-variables`;
+  const showAllId = `report-${envKey}-variables-showAll`;
+  const isOpened = !collapsedTrees.value.has(sectionId);
+  const showAll = collapsedTrees.value.has(showAllId);
+  const fullList = Object.entries(props.variables).map(([key, value]) => ({
+    name: key,
+    value,
+  })) as MetadataItem[];
+  const totalCount = fullList.length;
+  const visibleList =
+    totalCount <= REPORT_VISIBLE_LIMIT ? fullList : showAll ? fullList : fullList.slice(0, REPORT_VISIBLE_LIMIT);
 
   return (
     <div class={styles["report-metadata"]} data-testid={"report-variables"}>
       <MetadataButton
         isOpened={isOpened}
-        setIsOpen={setIsOpen}
+        setIsOpen={() => toggleTree(sectionId)}
         title={t("variables")}
         counter={Object.keys(props.variables).length}
         data-testid={"report-variables-button"}
       />
-      {isOpened && <MetadataList envInfo={convertedEnvInfo} />}
+      {isOpened && (
+        <>
+          <MetadataList envInfo={visibleList} />
+          {totalCount > REPORT_VISIBLE_LIMIT && (
+            <Button
+              style="ghost"
+              size="s"
+              text={showAll ? t("showLess") : t("showMore")}
+              onClick={() => toggleTree(showAllId)}
+            />
+          )}
+        </>
+      )}
     </div>
   );
 };

package/src/components/ReportQualityGateResults/index.tsx

@@ -2,11 +2,13 @@ import { DEFAULT_ENVIRONMENT } from "@allurereport/core-api";
 import type { QualityGateValidationResult } from "@allurereport/plugin-api";
 import { Loadable, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { useState } from "preact/hooks";
+
 import { MetadataButton } from "@/components/MetadataButton";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
-import { currentEnvironment } from "@/stores/env";
+import { currentEnvironment, environmentNameById } from "@/stores/env";
 import { qualityGateStore } from "@/stores/qualityGate";
+
 import * as styles from "./styles.scss";
 
 const QualityGateResultsList = ({ results }: { results: QualityGateValidationResult[] }) => (
@@ -84,7 +86,9 @@ export const ReportQualityGateResults = () => {
                   <MetadataButton
                     isOpened={isOpened}
                     setIsOpen={toggleEnv}
-                    title={`${tEnvironments("environment", { count: 1 })}: "${env}"`}
+                    title={`${tEnvironments("environment", { count: 1 })}: "${environmentNameById(env)}"`}
+                    titleTooltipText={environmentNameById(env)}
+                    truncateTitle
                     counter={envResults.length}
                     data-testid={"quality-gate-results-section-env-button"}
                   />

package/src/components/ReportSearch/index.tsx

@@ -1,4 +1,5 @@
 import { SearchBox } from "@allurereport/web-components";
+
 import { useI18n } from "@/stores/locale";
 import { setTreeQueryFilter, treeQueryFilterValue } from "@/stores/treeFilters/store";
 

package/src/components/ReportTabs/index.tsx

@@ -2,8 +2,11 @@ import { Text } from "@allurereport/web-components";
 import { useComputed } from "@preact/signals";
 import { type ComponentChildren } from "preact";
 import { useCallback } from "preact/hooks";
+
 import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
+
 import type { AwesomeStatus } from "../../../types.js";
+
 import * as styles from "./styles.scss";
 
 export const ReportTabsList = (props: { children: ComponentChildren }) => {

package/src/components/SectionPicker/index.tsx

@@ -1,6 +1,8 @@
 import { DropdownButton, Menu, SvgIcon, allureIcons } from "@allurereport/web-components";
+
 import { useI18n } from "@/stores";
 import { availableSections, currentSection, setSection } from "@/stores/sections";
+
 import * as styles from "./styles.scss";
 
 export type SectionItem = {

package/src/components/SectionSwitcher/index.tsx

@@ -1,8 +1,11 @@
 import type { VNode } from "preact";
+
 import { Charts } from "@/components/Charts";
 import { Report } from "@/components/Report";
 import { currentSection } from "@/stores/sections";
+
 import { Timeline } from "../Timeline";
+
 import * as styles from "./styles.scss";
 
 export const SectionSwitcher = () => {

package/src/components/SideBySide/index.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "preact";
 import { useEffect, useMemo, useRef } from "preact/hooks";
 import Split from "split.js";
+
 import * as styles from "./styles.scss";
 
 const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element }) => {

package/src/components/SplitLayout/index.tsx

@@ -2,6 +2,7 @@ import { Loadable, PageLoader, Text } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
+
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
@@ -10,6 +11,7 @@ import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
 const MainReportWrapper = () => {

package/src/components/TestResult/TestStepsEmpty/index.tsx

@@ -1,5 +1,7 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 const TrStepsEmpty = () => {

package/src/components/TestResult/TrAttachmentsView/index.tsx

@@ -2,8 +2,10 @@ import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import cx from "clsx";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
+
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 export type TrAttachmentViewProps = {

package/src/components/TestResult/TrDescription/index.tsx

@@ -2,17 +2,22 @@ import { proseStyles, resolveCssVarDeclarations, sanitizeIframeHtml, themeStore
 import type { FunctionalComponent } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { MetadataButton } from "@/components/MetadataButton";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
 export type TrDescriptionProps = {
+  id?: string;
   descriptionHtml: AwesomeTestResult["descriptionHtml"];
 };
 
 const MIN_HEIGHT = 120;
 
-export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ descriptionHtml }) => {
-  const [isOpen, setIsOpen] = useState(true);
+export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ id, descriptionHtml }) => {
+  const descriptionId = id !== null ? `${id}-description` : null;
+  const isOpen = !collapsedTrees.value.has(descriptionId);
   const [blobUrl, setBlobUrl] = useState("");
   const [height, setHeight] = useState(MIN_HEIGHT);
   const currentTheme = themeStore.value.current;
@@ -55,7 +60,15 @@ export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ descrip
   return (
     <div className={styles["test-result-description"]} data-testid="test-result-description">
       <div className={styles["test-result-description-wrapper"]}>
-        <MetadataButton title="Description" setIsOpen={setIsOpen} isOpened={isOpen} />
+        <MetadataButton
+          title="Description"
+          setIsOpen={() => {
+            if (descriptionId !== null) {
+              toggleTree(descriptionId);
+            }
+          }}
+          isOpened={isOpen}
+        />
         {isOpen && (
           <div className={styles["test-result-description-text"]}>
             {blobUrl && (

package/src/components/TestResult/TrDropdown/index.tsx

@@ -2,6 +2,7 @@ import { ArrowButton, Counter, SvgIcon, Text, allureIcons } from "@allurereport/
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
+
 import * as styles from "./styles.scss";
 
 export const TrDropdown: FunctionalComponent<{

package/src/components/TestResult/TrEmpty/index.tsx

@@ -1,8 +1,10 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
-import * as baseStyles from "@/components/BaseLayout/styles.scss";
+
 import { TrInfo } from "@/components/TestResult/TrInfo";
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
+import * as baseStyles from "@/components/BaseLayout/styles.scss";
 
 const TrThumb = () => {
   const { t } = useI18n("empty");

package/src/components/TestResult/TrEnvironmentItem/index.tsx

@@ -3,11 +3,14 @@ import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcon
 import cx from "clsx";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
+
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
 import { navigateToTestResult, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
+
 import type { AwesomeTestResult } from "../../../../types";
+
 import * as styles from "./styles.scss";
 
 export const TrEnvironmentItem: FunctionalComponent<{