@allurereport/web-awesome 3.8.2 → 3.10.0

package/src/components/KeyboardShortcuts/shortcutsConfig.ts

@@ -0,0 +1,91 @@
+import { formatHotkey, type HotkeyBinding } from "@allurereport/web-commons";
+
+export type ShortcutGroupId = "global" | "tree" | "testResult";
+
+export type ShortcutItem = {
+  binding: Pick<HotkeyBinding, "key" | "code" | "modifiers">;
+  labelKey: string;
+};
+
+export type ShortcutGroup = {
+  id: ShortcutGroupId;
+  titleKey: string;
+  items: ShortcutItem[];
+};
+
+export const shortcutGroups: ShortcutGroup[] = [
+  {
+    id: "global",
+    titleKey: "groups.global",
+    items: [
+      { binding: { key: "?", code: "Slash", modifiers: { shift: true } }, labelKey: "items.toggleHelp" },
+      { binding: { key: "s", code: "KeyS" }, labelKey: "items.focusSearch" },
+      { binding: { key: "Escape" }, labelKey: "items.blurSearch" },
+      { binding: { key: "[", code: "BracketLeft" }, labelKey: "items.focusTree" },
+      { binding: { key: "]", code: "BracketRight" }, labelKey: "items.focusTestResult" },
+      { binding: { key: "l", code: "KeyL", modifiers: { shift: true } }, labelKey: "items.toggleLayout" },
+      { binding: { key: "\\", code: "Backslash", modifiers: { ctrlOrMeta: true } }, labelKey: "items.toggleLayoutAlt" },
+      { binding: { key: "1" }, labelKey: "items.reportTabResults" },
+      { binding: { key: "2" }, labelKey: "items.reportTabCategories" },
+      { binding: { key: "3" }, labelKey: "items.reportTabQualityGate" },
+      { binding: { key: "4" }, labelKey: "items.reportTabGlobalAttachments" },
+      { binding: { key: "5" }, labelKey: "items.reportTabGlobalErrors" },
+      { binding: { key: "Tab" }, labelKey: "items.reportTabNext" },
+      { binding: { key: "Tab", modifiers: { shift: true } }, labelKey: "items.reportTabPrev" },
+    ],
+  },
+  {
+    id: "tree",
+    titleKey: "groups.tree",
+    items: [
+      { binding: { key: "j", code: "KeyJ" }, labelKey: "items.moveDown" },
+      { binding: { key: "k", code: "KeyK" }, labelKey: "items.moveUp" },
+      { binding: { key: "h", code: "KeyH" }, labelKey: "items.collapse" },
+      { binding: { key: "l", code: "KeyL" }, labelKey: "items.expand" },
+      { binding: { key: "p", code: "KeyP" }, labelKey: "items.parent" },
+      { binding: { key: "u", code: "KeyU" }, labelKey: "items.parentAlt" },
+      { binding: { key: "o", code: "KeyO" }, labelKey: "items.openNode" },
+      { binding: { key: "-", code: "Minus" }, labelKey: "items.collapseNode" },
+      { binding: { key: "+", code: "Equal", modifiers: { shift: true } }, labelKey: "items.expandNode" },
+      { binding: { key: "C", code: "KeyC" }, labelKey: "items.collapseAll" },
+      { binding: { key: "A", code: "KeyA" }, labelKey: "items.expandAll" },
+      { binding: { key: ">", code: "Period", modifiers: { shift: true } }, labelKey: "items.subtreeCycle" },
+      { binding: { key: "C", code: "KeyC", modifiers: { shift: true } }, labelKey: "items.subtreeCollapse" },
+      { binding: { key: "f", code: "KeyF" }, labelKey: "items.subtreeFirstLevel" },
+      { binding: { key: "A", code: "KeyA", modifiers: { shift: true } }, labelKey: "items.subtreeExpand" },
+      { binding: { key: " " }, labelKey: "items.toggleNode" },
+      { binding: { key: "Enter" }, labelKey: "items.openTest" },
+      { binding: { key: "g" }, labelKey: "items.firstTest" },
+      { binding: { key: "G", modifiers: { shift: true } }, labelKey: "items.lastTest" },
+      { binding: { key: "Home" }, labelKey: "items.treeTop" },
+      { binding: { key: "z", code: "KeyZ" }, labelKey: "items.scrollTreeTop" },
+      { binding: { key: "V", code: "KeyV" }, labelKey: "items.toggleReportVariables" },
+      { binding: { key: "M", code: "KeyM" }, labelKey: "items.toggleReportMetadata" },
+    ],
+  },
+  {
+    id: "testResult",
+    titleKey: "groups.testResult",
+    items: [
+      { binding: { key: "n", code: "KeyN" }, labelKey: "items.nextTest" },
+      { binding: { key: "ArrowDown" }, labelKey: "items.nextTest" },
+      { binding: { key: "j", code: "KeyJ" }, labelKey: "items.nextTest" },
+      { binding: { key: "N", code: "KeyN", modifiers: { shift: true } }, labelKey: "items.prevTest" },
+      { binding: { key: "ArrowUp" }, labelKey: "items.prevTest" },
+      { binding: { key: "k", code: "KeyK" }, labelKey: "items.prevTest" },
+      { binding: { key: "Tab" }, labelKey: "items.testTabNext" },
+      { binding: { key: "Tab", modifiers: { shift: true } }, labelKey: "items.testTabPrev" },
+      { binding: { key: "1" }, labelKey: "items.tabOverview" },
+      { binding: { key: "2" }, labelKey: "items.tabHistory" },
+      { binding: { key: "3" }, labelKey: "items.tabRetries" },
+      { binding: { key: "4" }, labelKey: "items.tabAttachments" },
+      { binding: { key: "5" }, labelKey: "items.tabEnvironments" },
+      { binding: { key: "l", code: "KeyL" }, labelKey: "items.toggleLabels" },
+      { binding: { key: "p", code: "KeyP" }, labelKey: "items.toggleParameters" },
+      { binding: { key: "i", code: "KeyI" }, labelKey: "items.toggleLinks" },
+      { binding: { key: "Escape" }, labelKey: "items.backToTree" },
+    ],
+  },
+];
+
+export const formatShortcut = (binding: Pick<HotkeyBinding, "key" | "code" | "modifiers">) => formatHotkey(binding);

package/src/components/KeyboardShortcuts/styles.scss

@@ -0,0 +1,69 @@
+.shortcuts {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.trigger {
+  pointer-events: auto;
+  box-shadow: var(--box-shadow, 0 2px 8px rgb(0 0 0 / 12%));
+}
+
+.panel {
+  pointer-events: auto;
+  width: min(360px, calc(100vw - 32px));
+  max-height: min(480px, calc(100vh - 96px));
+  overflow: auto;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-raised);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.group {
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+
+.groupTitle {
+  margin-bottom: 6px;
+  color: var(--color-text-secondary);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.keys {
+  flex-shrink: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-neutral);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.label {
+  text-align: right;
+}

package/src/components/MainReport/index.tsx

@@ -13,6 +13,7 @@ import { reportStatsStore, useI18n } from "@/stores";
 import { categoriesStore } from "@/stores/categories";
 import { currentEnvironment } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
+import { activePane, focusTreePane } from "@/stores/keyboard";
 import { isSplitMode } from "@/stores/layout";
 import { qualityGateStore } from "@/stores/qualityGate";
 import {
@@ -84,6 +85,7 @@ const MainReport = () => {
       if (isCurrentTab) {
         return;
       }
+      focusTreePane();
       setCurrentTab(id);
       if (id === ReportRootTab.Results) {
         if (currentTrId.value) {
@@ -127,83 +129,98 @@ const MainReport = () => {
     return null;
   };
 
+  const treePaneActive = isSplitMode.value && activePane.value === "tree";
+
   return (
-    <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
-      <ReportHeader />
+    <div
+      className={clsx(
+        styles.content,
+        isSplitMode.value && styles["scroll-inside"],
+        treePaneActive && styles["pane-active"],
+      )}
+      onMouseDown={() => focusTreePane()}
+    >
+      <div className={styles["main-report-header"]}>
+        <ReportHeader />
+      </div>
       <div className={styles["main-report-tabs"]}>
         <NavTabs initialTab={initialTab}>
           <RootTabRouteSync />
-          <NavTabsList>
-            <Loadable
-              source={reportStatsStore}
-              renderData={(stats) => (
-                <RootTab id={ReportRootTab.Results}>
-                  {t("results")} <Counter count={stats?.total ?? 0} />
-                </RootTab>
-              )}
-            />
-            <Loadable
-              source={categoriesStore}
-              renderData={(categories) => {
-                if (!categories || !categories.roots?.length) {
-                  return null;
-                }
-                return (
-                  <>
-                    <RootTab id={ReportRootTab.Categories}>
-                      {t("categories")} <Counter count={categories.roots?.length} />
-                    </RootTab>
-                  </>
-                );
-              }}
-            />
-            <Loadable
-              source={qualityGateStore}
-              renderData={(results) => {
-                const currentEnvResults = currentEnvironment.value
-                  ? (results[currentEnvironment.value] ?? [])
-                  : Object.values(results).flatMap((envResults) => envResults);
-
-                return (
-                  <RootTab id={ReportRootTab.QualityGate}>
-                    {t("qualityGates")}{" "}
-                    <Counter
-                      status={currentEnvResults.length > 0 ? "failed" : undefined}
-                      count={currentEnvResults.length}
-                    />
-                  </RootTab>
-                );
-              }}
-            />
-            <Loadable
-              source={globalsStore}
-              renderData={({ attachments = [], attachmentsByEnv = {}, errors = [], errorsByEnv = {} }) => {
-                const currentEnvAttachments = currentEnvironment.value
-                  ? (attachmentsByEnv[currentEnvironment.value] ?? [])
-                  : attachments;
-                const currentEnvErrors = currentEnvironment.value
-                  ? (errorsByEnv[currentEnvironment.value] ?? [])
-                  : errors;
-
-                return (
-                  <>
-                    <RootTab id={ReportRootTab.GlobalAttachments}>
-                      {t("globalAttachments")} <Counter count={currentEnvAttachments.length} />
+          <div className={styles["main-report-tabs-layout"]}>
+            <div className={styles["main-report-tabs-nav"]}>
+              <NavTabsList>
+                <Loadable
+                  source={reportStatsStore}
+                  renderData={(stats) => (
+                    <RootTab id={ReportRootTab.Results}>
+                      {t("results")} <Counter count={stats?.total ?? 0} />
                     </RootTab>
-                    <RootTab id={ReportRootTab.GlobalErrors}>
-                      {t("globalErrors")}{" "}
-                      <Counter
-                        status={currentEnvErrors.length > 0 ? "failed" : undefined}
-                        count={currentEnvErrors.length}
-                      />
-                    </RootTab>
-                  </>
-                );
-              }}
-            />
-          </NavTabsList>
-          <div className={styles["main-report-tabs-content"]}>
-            <MainReportContent />
+                  )}
+                />
+                <Loadable
+                  source={categoriesStore}
+                  renderData={(categories) => {
+                    if (!categories || !categories.roots?.length) {
+                      return null;
+                    }
+                    return (
+                      <>
+                        <RootTab id={ReportRootTab.Categories}>
+                          {t("categories")} <Counter count={categories.roots?.length} />
+                        </RootTab>
+                      </>
+                    );
+                  }}
+                />
+                <Loadable
+                  source={qualityGateStore}
+                  renderData={(results) => {
+                    const currentEnvResults = currentEnvironment.value
+                      ? (results[currentEnvironment.value] ?? [])
+                      : Object.values(results).flatMap((envResults) => envResults);
+
+                    return (
+                      <RootTab id={ReportRootTab.QualityGate}>
+                        {t("qualityGates")}{" "}
+                        <Counter
+                          status={currentEnvResults.length > 0 ? "failed" : undefined}
+                          count={currentEnvResults.length}
+                        />
+                      </RootTab>
+                    );
+                  }}
+                />
+                <Loadable
+                  source={globalsStore}
+                  renderData={({ attachments = [], attachmentsByEnv = {}, errors = [], errorsByEnv = {} }) => {
+                    const currentEnvAttachments = currentEnvironment.value
+                      ? (attachmentsByEnv[currentEnvironment.value] ?? [])
+                      : attachments;
+                    const currentEnvErrors = currentEnvironment.value
+                      ? (errorsByEnv[currentEnvironment.value] ?? [])
+                      : errors;
+
+                    return (
+                      <>
+                        <RootTab id={ReportRootTab.GlobalAttachments}>
+                          {t("globalAttachments")} <Counter count={currentEnvAttachments.length} />
+                        </RootTab>
+                        <RootTab id={ReportRootTab.GlobalErrors}>
+                          {t("globalErrors")}{" "}
+                          <Counter
+                            status={currentEnvErrors.length > 0 ? "failed" : undefined}
+                            count={currentEnvErrors.length}
+                          />
+                        </RootTab>
+                      </>
+                    );
+                  }}
+                />
+              </NavTabsList>
+            </div>
+            <div className={styles["main-report-tabs-content"]}>
+              <MainReportContent />
+            </div>
           </div>
         </NavTabs>
       </div>

package/src/components/MainReport/styles.scss

@@ -1,21 +1,36 @@
+@use "../../styles/pane-active" as paneActive;
+
 .content {
+  position: relative;
   box-shadow: var(--shadow-small);
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
 }
 
 .scroll-inside {
-  overflow: auto;
-  height: 100%;
+  display: flex;
+  flex-direction: column;
   border-radius: 0;
-  scrollbar-width: thin;
+  @include paneActive.split-pane-indicator;
+
+  &.pane-active {
+    @include paneActive.split-pane-indicator-active;
+  }
+}
+
+.main-report-header {
+  flex-shrink: 0;
 }
 
 .main-report-tabs {
   padding: 0 24px;
 }
 
+.main-report-tabs-nav {
+  flex-shrink: 0;
+}
+
 .main-report-tabs-content {
-  border-top: 1px solid var(--on-border-primary);
+  border-top: 1px solid var(--color-border-default);
 }

package/src/components/Metadata/index.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonLink, Menu, Text, allureIcons } from "@allurereport/web-components";
+import { sanitizeExternalUrl } from "@allurereport/core-api";
+import { Button, ButtonLink, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -23,8 +24,8 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
       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} />
+      {envInfo?.map(({ name, values, value, url }, index) => (
+        <MetadataKeyValue key={`${name}-${index}`} size={size} title={name} value={value} values={values} url={url} />
       ))}
     </div>
   );
@@ -160,12 +161,31 @@ const MetaDataOwnerLabel: FunctionalComponent<{
 const MetaDataKeyLabel: FunctionalComponent<{
   name: string;
   size?: "s" | "m";
+  url?: string;
   value: string;
-}> = ({ name, size = "s", value }) => {
+}> = ({ name, size = "s", url, value }) => {
   if (name === "owner") {
     return <MetaDataOwnerLabel value={value} size={size} />;
   }
 
+  const safeUrl = sanitizeExternalUrl(url);
+
+  if (safeUrl) {
+    return (
+      <a
+        className={clsx(styles["report-metadata-keyvalue-wrapper"], styles["report-metadata-keyvalue-link"])}
+        href={safeUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Text type={"ui"} size={size} bold className={styles["report-metadata-keyvalue-value"]}>
+          {value}
+        </Text>
+        <SvgIcon id={allureIcons.lineGeneralLinkExternal} size="s" />
+      </a>
+    );
+  }
+
   return (
     <Menu
       size="xl"
@@ -186,10 +206,11 @@ const MetaDataKeyLabel: FunctionalComponent<{
 
 const MetadataKeyValue: FunctionalComponent<{
   title: string;
+  url?: string;
   value?: string;
   values?: string[];
   size?: "s" | "m";
-}> = ({ title, value, values, size = "m" }) => {
+}> = ({ title, url, value, values, size = "m" }) => {
   return (
     <div className={styles["report-metadata-keyvalue"]} data-testid={"metadata-item"}>
       <Text
@@ -208,7 +229,7 @@ const MetadataKeyValue: FunctionalComponent<{
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value ?? ""} name={title} />
+          <MetaDataKeyLabel value={value ?? ""} name={title} url={url} />
         </div>
       )}
     </div>

package/src/components/Metadata/styles.scss

@@ -6,7 +6,7 @@
 }
 
 .report-metadata-separator {
-  border-left: 1px solid var(--on-border-primary);
+  border-left: 1px solid var(--color-border-default);
   height: 24px;
   margin: 11px 0;
 }
@@ -22,8 +22,8 @@
   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);
+  border-top: 1px solid var(--color-border-default);
+  border-bottom: 1px solid var(--color-border-default);
   width: 100%;
 }
 
@@ -35,7 +35,7 @@
 }
 
 .metadata-item-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   margin-bottom: 6px;
 }
 
@@ -45,7 +45,7 @@
 
 .report-metadata {
   padding: 16px 0;
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .report-metadata-keyvalue {
@@ -77,7 +77,7 @@
 }
 
 .report-metadata-keyvalue-wrapper {
-  background: var(--on-border-primary);
+  background: var(--color-border-default);
   border-radius: 4px;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -85,6 +85,18 @@
   line-height: 16px;
 }
 
+.report-metadata-keyvalue-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .report-metadata-keyvalue-value {
   width: max-content;
   height: max-content;
@@ -118,7 +130,7 @@
   width: 4px;
   height: 12px;
   border-radius: 2px;
-  background: var(--on-text-secondary);
+  background: var(--color-text-secondary);
   margin-right: 8px;
   align-self: center;
   @include status-bg-and-text;
@@ -131,7 +143,7 @@
 
 .metadata-icon {
   margin-right: 8px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .metadata-tooltip {
@@ -145,7 +157,7 @@
 .metadata-tooltip-value {
   flex: 1 1 auto;
   min-width: 320px;
-  background: var(--bg-base-secondary);
+  background: var(--color-bg-secondary);
   max-height: 238px;
   padding: 8px 16px;
   overflow: hidden;

package/src/components/MetadataButton/index.tsx

@@ -20,6 +20,7 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
   title,
   titleTooltipText,
   truncateTitle = false,
+  className,
   ...rest
 }) => {
   const { ref: titleRef, isTruncated: isTitleTruncated } = useElementTruncation<HTMLSpanElement>([title], {
@@ -41,6 +42,7 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
         styles["report-metadata-header"],
         truncateTitle && styles["report-metadata-header-truncated"],
         isOpened && styles["report-metadata-header-opened"],
+        className,
       )}
       type={"button"}
       onClick={() => setIsOpen(!isOpened)}

package/src/components/MetadataButton/styles.scss

@@ -40,7 +40,7 @@
 
   &:hover {
     &:after {
-      background-color: var(--bg-control-flat-medium);
+      background-color: var(--color-control-bg-ghost-hover);
     }
 
     .report-metadata-header-arrow {

package/src/components/NavTabs/styles.scss

@@ -11,13 +11,13 @@
 }
 
 .tab {
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   cursor: pointer;
   user-select: none;
   flex-shrink: 0;
   transform: scale(1);
   outline: none;
-  background-color: var(--bg-base-primary);
+  background-color: var(--color-bg-primary);
   padding: 8px;
   border: none;
   border-radius: 4px;
@@ -38,11 +38,11 @@
   }
 
   &[aria-current] {
-    background-color: var(--bg-base-primary);
+    background-color: var(--color-bg-primary);
     cursor: default;
 
     &:after {
-      border-bottom: 2px solid var(--on-support-aldebaran);
+      border-bottom: 2px solid var(--color-intent-primary-text);
     }
 
     span {
@@ -51,11 +51,11 @@
   }
 
   &:hover:not([aria-current]) {
-    background-color: var(--bg-control-flat-medium);
+    background-color: var(--color-control-bg-ghost-hover);
   }
 
   &:active:not([aria-current]) {
-    background-color: var(--bg-control-flat-heavy);
+    background-color: var(--color-control-bg-ghost-active);
     transform: scale(0.94);
   }
 
@@ -64,10 +64,10 @@
   }
 
   &:focus-visible {
-    outline: 0 solid var(--ad-other-focus);
+    outline: 0 solid var(--color-focus-ring);
 
     &:not([aria-current]) {
-      background-color: var(--bg-control-flat-medium);
+      background-color: var(--color-control-bg-ghost-hover);
     }
   }
 }

package/src/components/ReportBody/styles.scss

@@ -6,8 +6,7 @@
   position: sticky;
   left: 0;
   top: 0;
-  left: 0;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   z-index: 10;
 }
 
@@ -37,7 +36,7 @@
 /* This is a hack because button do not have this state */
 .filtersBtnWithFilters > button::after {
   content: "";
-  background-color: var(--bg-support-aldebaran);
+  background-color: var(--color-intent-primary-bg);
   width: 6px;
   height: 6px;
   border-radius: 100px;
@@ -51,7 +50,7 @@
 }
 
 .sortByText {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .sortByBtnWrap {

package/src/components/ReportCategories/styles.scss

@@ -35,7 +35,7 @@
 .report-categories-result-icon {
   flex: 0 0 auto;
   margin-top: 3px;
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-chart);
 }
 
 .report-categories-result-content {