@allurereport/web-awesome 3.8.2 → 3.9.0

package/src/stores/locale.ts

@@ -25,6 +25,7 @@ const namespaces = [
   "ui",
   "welcome",
   "controls",
+  "shortcuts",
   "errors",
   "split",
   "modal",

package/src/stores/reportEnvSections.ts

@@ -0,0 +1,6 @@
+import { currentEnvironment } from "@/stores/env";
+
+export type ReportEnvSection = "variables" | "metadata";
+
+export const getReportEnvSectionId = (section: ReportEnvSection, envId = currentEnvironment.value ?? "default") =>
+  `report-${envId}-${section}`;

package/src/stores/reportRootTabs.ts

@@ -0,0 +1,95 @@
+import { categoriesStore } from "@/stores/categories";
+import { currentEnvironment } from "@/stores/env";
+import { globalsStore } from "@/stores/globals";
+import {
+  navigateToPlainTestResult,
+  navigateToRoot,
+  navigateToRootTabRoot,
+  navigateToRootTabTestResult,
+  rootTabRoute,
+} from "@/stores/router";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
+
+export const REPORT_ROOT_TAB = {
+  Results: "results",
+  Categories: "categories",
+  QualityGate: "qualityGate",
+  GlobalAttachments: "globalAttachments",
+  GlobalErrors: "globalErrors",
+} as const;
+
+export type ReportRootTabId = (typeof REPORT_ROOT_TAB)[keyof typeof REPORT_ROOT_TAB];
+
+const REPORT_ROOT_TAB_ORDER: ReportRootTabId[] = [
+  REPORT_ROOT_TAB.Results,
+  REPORT_ROOT_TAB.Categories,
+  REPORT_ROOT_TAB.QualityGate,
+  REPORT_ROOT_TAB.GlobalAttachments,
+  REPORT_ROOT_TAB.GlobalErrors,
+];
+
+export const getAvailableReportRootTabs = (): ReportRootTabId[] => {
+  const tabs: ReportRootTabId[] = [REPORT_ROOT_TAB.Results];
+  const categories = categoriesStore.value.data;
+
+  if (categories?.roots?.length) {
+    tabs.push(REPORT_ROOT_TAB.Categories);
+  }
+
+  tabs.push(REPORT_ROOT_TAB.QualityGate, REPORT_ROOT_TAB.GlobalAttachments, REPORT_ROOT_TAB.GlobalErrors);
+
+  return tabs;
+};
+
+export const getCurrentReportRootTab = (): ReportRootTabId => {
+  if (rootTabRoute.value.matches) {
+    const rootTab = rootTabRoute.value.params.rootTab as ReportRootTabId;
+
+    if (REPORT_ROOT_TAB_ORDER.includes(rootTab)) {
+      return rootTab;
+    }
+  }
+
+  return REPORT_ROOT_TAB.Results;
+};
+
+export const navigateToReportRootTab = (tab: ReportRootTabId) => {
+  if (!getAvailableReportRootTabs().includes(tab)) {
+    return;
+  }
+
+  const testResultId = currentTrId.value;
+  const trTab = trCurrentTab.value;
+
+  if (tab === REPORT_ROOT_TAB.Results) {
+    if (testResultId) {
+      navigateToPlainTestResult({ testResultId, tab: trTab });
+    } else {
+      navigateToRoot();
+    }
+    return;
+  }
+
+  if (testResultId) {
+    navigateToRootTabTestResult({ rootTab: tab, testResultId, tab: trTab });
+    return;
+  }
+
+  navigateToRootTabRoot({ rootTab: tab });
+};
+
+export const cycleReportRootTab = (direction: "next" | "prev") => {
+  const available = getAvailableReportRootTabs();
+  const current = getCurrentReportRootTab();
+  const index = available.indexOf(current);
+
+  if (index < 0) {
+    navigateToReportRootTab(available[0] ?? REPORT_ROOT_TAB.Results);
+    return;
+  }
+
+  const nextIndex =
+    direction === "next" ? (index + 1) % available.length : (index - 1 + available.length) % available.length;
+
+  navigateToReportRootTab(available[nextIndex]!);
+};

package/src/stores/search.ts

@@ -0,0 +1,147 @@
+import { ReportFetchError, errorMessageFromUnknown, fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import MiniSearch from "minisearch";
+import type { AwesomeSearchDocument } from "types";
+
+import type { StoreSignalState } from "@/stores/types";
+
+const SEARCH_FIELDS: (keyof AwesomeSearchDocument)[] = [
+  "id",
+  "name",
+  "fullName",
+  "owner",
+  "tags",
+  "labels",
+  "links",
+  "categories",
+  "parameters",
+  "statusMessage",
+  "historyId",
+];
+
+const STORE_FIELDS: (keyof AwesomeSearchDocument)[] = ["nodeId", "name"];
+
+export const createSearchIndex = (documents: AwesomeSearchDocument[]) => {
+  const searchIndex = new MiniSearch<AwesomeSearchDocument>({
+    fields: SEARCH_FIELDS,
+    storeFields: STORE_FIELDS,
+    searchOptions: {
+      combineWith: "AND",
+      prefix: true,
+      fuzzy: (term) => (term.length > 3 ? 0.2 : false),
+      maxFuzzy: 2,
+      boost: {
+        name: 4,
+        fullName: 3,
+        owner: 3,
+        tags: 2,
+        labels: 2,
+        links: 1.5,
+        categories: 1,
+        parameters: 1,
+        statusMessage: 0.75,
+        historyId: 0.5,
+      },
+    },
+  });
+
+  searchIndex.addAll(documents);
+
+  return searchIndex;
+};
+
+export const searchNodeIds = (searchIndex: MiniSearch<AwesomeSearchDocument>, query: string) => {
+  const normalizedQuery = query.trim();
+
+  if (!normalizedQuery) {
+    return new Set<string>();
+  }
+
+  return new Set(searchIndex.search(normalizedQuery).map(({ nodeId }) => nodeId));
+};
+
+export const searchIndexesStore = signal<StoreSignalState<Record<string, MiniSearch<AwesomeSearchDocument>>>>({
+  loading: false,
+  error: undefined,
+  data: {},
+});
+
+const loadingSearchEnvIds = new Set<string>();
+const failedSearchEnvIds = new Set<string>();
+
+const searchIndexPath = (env: string) => `widgets/${env}/search-index.json`;
+const isMissingSearchIndexError = (error: unknown) =>
+  error instanceof ReportFetchError && error.response.status === 404;
+
+export const resetSearchIndexes = () => {
+  loadingSearchEnvIds.clear();
+  failedSearchEnvIds.clear();
+  searchIndexesStore.value = {
+    loading: false,
+    error: undefined,
+    data: {},
+  };
+};
+
+export const fetchEnvSearchIndexes = async (envs: string[]) => {
+  const currentData = searchIndexesStore.peek().data ?? {};
+  const envsToFetch = envs.filter(
+    (env) => !currentData[env] && !loadingSearchEnvIds.has(env) && !failedSearchEnvIds.has(env),
+  );
+
+  if (envsToFetch.length === 0) {
+    return;
+  }
+
+  envsToFetch.forEach((env) => loadingSearchEnvIds.add(env));
+
+  searchIndexesStore.value = {
+    ...searchIndexesStore.peek(),
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const documentsByEnv = await Promise.allSettled(
+      envsToFetch.map(async (env) => ({
+        env,
+        documents: await fetchReportJsonData<AwesomeSearchDocument[]>(searchIndexPath(env), { bustCache: true }),
+      })),
+    );
+    const loadedSearchIndexes: Record<string, MiniSearch<AwesomeSearchDocument>> = {};
+    let error: string | undefined;
+
+    for (const [index, result] of documentsByEnv.entries()) {
+      if (result.status === "fulfilled") {
+        loadedSearchIndexes[result.value.env] = createSearchIndex(result.value.documents);
+        continue;
+      }
+
+      if (!error) {
+        error = errorMessageFromUnknown(result.reason);
+      }
+
+      if (isMissingSearchIndexError(result.reason)) {
+        failedSearchEnvIds.add(envsToFetch[index]);
+      }
+    }
+
+    searchIndexesStore.value = {
+      data: {
+        ...(searchIndexesStore.peek().data ?? {}),
+        ...loadedSearchIndexes,
+      },
+      loading: false,
+      error,
+    };
+  } catch (e) {
+    // Retry malformed/transient responses; only missing search indexes are permanently cached.
+    searchIndexesStore.value = {
+      ...searchIndexesStore.peek(),
+      error: errorMessageFromUnknown(e),
+      loading: false,
+    };
+  } finally {
+    envsToFetch.forEach((env) => loadingSearchEnvIds.delete(env));
+  }
+};

package/src/stores/testResultOverviewNav.ts

@@ -0,0 +1,119 @@
+import { moveFocus, type FlatTreeNode, type MoveDirection, type MoveFocusResult } from "@allurereport/web-commons";
+import { computed, effect, signal } from "@preact/signals";
+
+import { fixtureResultToTrStepItem, getBodyItems } from "@/components/TestResult/bodyItems";
+import { isTestResultHotkeysContext } from "@/stores/keyboard";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
+import { testResultStore } from "@/stores/testResults";
+import { collapsedTrees, isTreeOpened, setTreeOpened, toggleTree } from "@/stores/tree";
+import { flattenTestResultOverview } from "@/utils/flattenTestResultOverview";
+export const testResultFocusId = signal<string | undefined>(undefined);
+
+export const isTestResultOverviewNavigationContext = (): boolean =>
+  isTestResultHotkeysContext() && trCurrentTab.value === "overview";
+
+const buildFlatOverview = (): FlatTreeNode[] => {
+  const testResultId = currentTrId.value;
+
+  if (!testResultId) {
+    return [];
+  }
+
+  const testResult = testResultStore.value.data?.[testResultId];
+
+  if (!testResult) {
+    return [];
+  }
+
+  collapsedTrees.value;
+
+  const bodyItems = getBodyItems(testResult, "");
+  const setupBodyItems = (testResult.setup ?? []).map((fixture) => fixtureResultToTrStepItem(fixture));
+  const teardownBodyItems = (testResult.teardown ?? []).map((fixture) => fixtureResultToTrStepItem(fixture));
+
+  return flattenTestResultOverview({
+    testResultId,
+    hasSetup: setupBodyItems.length > 0,
+    setupBodyItems,
+    bodyItems,
+    hasTeardown: teardownBodyItems.length > 0,
+    teardownBodyItems,
+    isGroupOpened: (id, openedByDefault) => isTreeOpened(id, openedByDefault),
+  });
+};
+
+export const flatTestResultOverview = computed(() => buildFlatOverview());
+
+export const getFlatTestResultNode = (id: string | undefined) =>
+  flatTestResultOverview.value.find((node) => node.id === id);
+
+export const moveTestResultFocus = (direction: MoveDirection): MoveFocusResult =>
+  moveFocus(flatTestResultOverview.value, testResultFocusId.value, direction);
+
+export const setTestResultFocusId = (id: string | undefined) => {
+  testResultFocusId.value = id;
+};
+
+export const ensureTestResultFocusId = () => {
+  const flat = flatTestResultOverview.value;
+
+  if (flat.length === 0) {
+    testResultFocusId.value = undefined;
+    return;
+  }
+
+  const currentId = testResultFocusId.value;
+  const currentExists = currentId ? flat.some((node) => node.id === currentId) : false;
+
+  if (currentExists) {
+    return;
+  }
+
+  testResultFocusId.value = flat[0]?.id;
+};
+
+effect(() => {
+  if (!isTestResultOverviewNavigationContext()) {
+    return;
+  }
+
+  flatTestResultOverview.value;
+  ensureTestResultFocusId();
+});
+
+effect(() => {
+  currentTrId.value;
+  trCurrentTab.value;
+
+  if (trCurrentTab.value !== "overview") {
+    testResultFocusId.value = undefined;
+  }
+});
+
+const resolveOpenedByDefault = (node: FlatTreeNode) => node.openedByDefault ?? true;
+
+export const applyTestResultFocusMove = (result: MoveFocusResult) => {
+  const node = result.nextId ? getFlatTestResultNode(result.nextId) : undefined;
+
+  if (result.collapse && node?.nodeId) {
+    setTreeOpened(node.nodeId, false, resolveOpenedByDefault(node));
+  }
+
+  if (result.expand && node?.nodeId) {
+    setTreeOpened(node.nodeId, true, resolveOpenedByDefault(node));
+  }
+
+  if (result.nextId) {
+    setTestResultFocusId(result.nextId);
+  }
+};
+
+export const toggleTestResultFocusNode = () => {
+  const node = getFlatTestResultNode(testResultFocusId.value);
+
+  if (!node?.nodeId) {
+    return;
+  }
+
+  toggleTree(node.nodeId, resolveOpenedByDefault(node));
+};

package/src/stores/testResultTabs.ts

@@ -0,0 +1,62 @@
+import { navigateToTestResultTab } from "@/stores/router";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
+
+export const TEST_RESULT_TAB = {
+  Overview: "overview",
+  History: "history",
+  Retries: "retries",
+  Attachments: "attachments",
+  Environments: "environments",
+} as const;
+
+export type TestResultTabId = (typeof TEST_RESULT_TAB)[keyof typeof TEST_RESULT_TAB];
+
+const TEST_RESULT_TAB_ORDER: TestResultTabId[] = [
+  TEST_RESULT_TAB.Overview,
+  TEST_RESULT_TAB.History,
+  TEST_RESULT_TAB.Retries,
+  TEST_RESULT_TAB.Attachments,
+  TEST_RESULT_TAB.Environments,
+];
+
+export const getCurrentTestResultTab = (): TestResultTabId => {
+  const tab = trCurrentTab.value as TestResultTabId;
+
+  if (TEST_RESULT_TAB_ORDER.includes(tab)) {
+    return tab;
+  }
+
+  return TEST_RESULT_TAB.Overview;
+};
+
+export const navigateToTestResultTabById = (tab: TestResultTabId) => {
+  const testResultId = currentTrId.value;
+
+  if (!testResultId) {
+    return;
+  }
+
+  if (tab === TEST_RESULT_TAB.Overview) {
+    navigateToTestResultTab({ testResultId, tab: "" });
+    return;
+  }
+
+  navigateToTestResultTab({ testResultId, tab });
+};
+
+export const cycleTestResultTab = (direction: "next" | "prev") => {
+  const testResultId = currentTrId.value;
+
+  if (!testResultId) {
+    return;
+  }
+
+  const current = getCurrentTestResultTab();
+  const index = TEST_RESULT_TAB_ORDER.indexOf(current);
+  const nextIndex =
+    direction === "next"
+      ? (index + 1) % TEST_RESULT_TAB_ORDER.length
+      : (index - 1 + TEST_RESULT_TAB_ORDER.length) % TEST_RESULT_TAB_ORDER.length;
+
+  navigateToTestResultTabById(TEST_RESULT_TAB_ORDER[nextIndex]!);
+};

package/src/stores/timeline.ts

@@ -6,7 +6,7 @@ import type { StoreSignalState } from "@/stores/types";
 
 export type TimlineTr = Pick<
   TestResult,
-  "id" | "name" | "status" | "flaky" | "hidden" | "environment" | "start" | "duration"
+  "id" | "name" | "status" | "flaky" | "isRetry" | "environment" | "start" | "duration"
 > & {
   environmentName?: string;
   host: string;

package/src/stores/tree.ts

@@ -7,7 +7,9 @@ import type { StoreSignalState } from "@/stores/types";
 import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
 import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
 
-import { treeFilters } from "./treeFilters/store";
+import { currentEnvironment } from "./env";
+import { fetchEnvSearchIndexes, searchIndexesStore, searchNodeIds } from "./search";
+import { treeNonQueryFilters, treeQueryFilterValue } from "./treeFilters/store";
 import { sortBy } from "./treeSort";
 
 export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
@@ -117,13 +119,48 @@ const treeEntries = computed(() => (treeStore.value.data ? Object.entries(treeSt
 const alwaysTruePredicate = () => true;
 
 const filterPredicate = computed(() => {
-  if (treeFilters.value.length === 0) {
+  if (treeNonQueryFilters.value.length === 0) {
     return alwaysTruePredicate;
   }
 
-  return buildFilterPredicate(treeFilters.value);
+  return buildFilterPredicate(treeNonQueryFilters.value);
 });
 
+effect(() => {
+  if (!treeQueryFilterValue.value?.trim()) {
+    return;
+  }
+
+  const treeEnvIds = Object.keys(treeStore.value.data ?? {});
+  const envsToFetch = currentEnvironment.value ? [currentEnvironment.value] : treeEnvIds;
+
+  if (envsToFetch.length === 0) {
+    return;
+  }
+
+  fetchEnvSearchIndexes(envsToFetch);
+});
+
+const searchFilterPredicate = (env: string) => {
+  const query = treeQueryFilterValue.value?.trim();
+
+  if (!query) {
+    return alwaysTruePredicate;
+  }
+
+  const searchIndex = searchIndexesStore.value.data?.[env];
+
+  if (!searchIndex) {
+    fetchEnvSearchIndexes([env]);
+
+    return alwaysTruePredicate;
+  }
+
+  const matchingNodeIds = searchNodeIds(searchIndex, query);
+
+  return (leaf: { nodeId: string }) => matchingNodeIds.has(leaf.nodeId);
+};
+
 export const filteredTree = computed(() => {
   return treeEntries.value.reduce(
     (acc, [key, value]) => {
@@ -132,12 +169,13 @@ export const filteredTree = computed(() => {
       }
 
       const { root, leavesById, groupsById } = value;
+      const envSearchFilterPredicate = searchFilterPredicate(key);
 
       const tree = createRecursiveTree({
         group: root as AwesomeTreeGroup,
         leavesById,
         groupsById,
-        filterPredicate: filterPredicate.value,
+        filterPredicate: (leaf) => filterPredicate.value(leaf) && envSearchFilterPredicate(leaf),
         sortBy: sortBy.value,
       });
 

package/src/stores/treeFilters/store.ts

@@ -114,38 +114,9 @@ const treeStatusFilter = computed<AwesomeStringFieldFilter>(() => ({
   },
 }));
 
-export const treeQueryFilter = computed<AwesomeFilterGroupSimple>(() => {
-  return {
-    type: "group",
-    logicalOperator: "AND",
-    value: [
-      {
-        type: "field",
-        logicalOperator: "OR",
-        value: {
-          key: "name",
-          value: urlQueryFilter.value,
-          type: "string",
-          strict: false,
-        },
-      },
-      {
-        type: "field",
-        logicalOperator: "OR",
-        value: {
-          key: "id",
-          value: urlQueryFilter.value,
-          type: "string",
-          strict: false,
-        },
-      },
-    ],
-  };
-});
+export const treeQueryFilterValue = computed(() => urlQueryFilter.value);
 
-export const treeQueryFilterValue = computed(() => treeQueryFilter.value.value[0].value.value as string);
-
-export const setTreeQueryFilter = (query: string) => {
+export const setTreeQueryFilter = (query?: string) => {
   setQueryFilter(query);
 };
 
@@ -217,13 +188,9 @@ export const treeQuickFilters = computed<AwesomeFilter[]>(() => [
   treeCategoriesFilter.value,
 ]);
 
-export const treeFilters = computed(() => {
+export const treeNonQueryFilters = computed(() => {
   const filters: AwesomeFilter[] = [];
 
-  if (treeQueryFilterValue.value) {
-    filters.push(treeQueryFilter.value);
-  }
-
   const hasBothRetryAndFlaky = urlRetryFilter.value && urlFlakyFilter.value;
 
   if (hasBothRetryAndFlaky) {

package/src/styles/_pane-active.scss

@@ -0,0 +1,8 @@
+// border-top on the white pane card (visible above header/content; inset shadow is covered by children).
+@mixin split-pane-indicator {
+  border-top: 3px solid transparent;
+}
+
+@mixin split-pane-indicator-active {
+  border-top-color: var(--bg-support-aldebaran);
+}

package/src/styles.scss

@@ -39,7 +39,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-base-secondary);
+  background: var(--color-bg-canvas);
   background-blend-mode: saturation;
   flex-direction: column;
   gap: 16px;