From d2e2362958a75f6d3a7b7757e9bfdb9c586b4bd9 Mon Sep 17 00:00:00 2001 From: Simon Knott Date: Wed, 5 Mar 2025 16:35:18 +0100 Subject: [PATCH] cherry-pick(#35044): chore(ui/html): hide _ attachments (#35044) Signed-off-by: Simon Knott Co-authored-by: Dmitry Gozman --- packages/html-reporter/src/testResultView.tsx | 2 +- packages/trace-viewer/src/ui/attachmentsTab.tsx | 12 ++---------- packages/trace-viewer/src/ui/modelUtil.ts | 16 +++++++--------- packages/trace-viewer/src/ui/workbench.tsx | 5 +---- 4 files changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx index 23f147f8daafa..060a1aaba4f01 100644 --- a/packages/html-reporter/src/testResultView.tsx +++ b/packages/html-reporter/src/testResultView.tsx @@ -72,7 +72,7 @@ export const TestResultView: React.FC<{ result: TestResult, }> = ({ test, result }) => { const { screenshots, videos, traces, otherAttachments, diffs, errors, otherAttachmentAnchors, screenshotAnchors } = React.useMemo(() => { - const attachments = result.attachments; + const attachments = result.attachments.filter(a => !a.name.startsWith('_')); const screenshots = new Set(attachments.filter(a => a.contentType.startsWith('image/'))); const screenshotAnchors = [...screenshots].map(a => `attachment-${attachments.indexOf(a)}`); const videos = attachments.filter(a => a.contentType.startsWith('video/')); diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx index 4536fd43254bc..fbe67b6d933a6 100644 --- a/packages/trace-viewer/src/ui/attachmentsTab.tsx +++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx @@ -17,7 +17,7 @@ import * as React from 'react'; import './attachmentsTab.css'; import { ImageDiffView } from '@web/shared/imageDiffView'; -import type { MultiTraceModel } from './modelUtil'; +import type { Attachment, MultiTraceModel } from './modelUtil'; import { PlaceholderPanel } from './placeholderPanel'; import type { AfterActionTraceEventAttachment } from '@trace/trace'; import { CodeMirrorWrapper, lineHeight } from '@web/components/codeMirrorWrapper'; @@ -26,8 +26,6 @@ import { Expandable } from '@web/components/expandable'; import { linkifyText } from '@web/renderUtils'; import { clsx, useFlash } from '@web/uiUtils'; -type Attachment = AfterActionTraceEventAttachment & { traceUrl: string }; - type ExpandableAttachmentProps = { attachment: Attachment; reveal?: any; @@ -97,14 +95,8 @@ export const AttachmentsTab: React.FunctionComponent<{ revealedAttachment?: [AfterActionTraceEventAttachment, number], }> = ({ model, revealedAttachment }) => { const { diffMap, screenshots, attachments } = React.useMemo(() => { - const attachments = new Set(); + const attachments = new Set(model?.visibleAttachments ?? []); const screenshots = new Set(); - - for (const action of model?.actions || []) { - const traceUrl = action.context.traceUrl; - for (const attachment of action.attachments || []) - attachments.add({ ...attachment, traceUrl }); - } const diffMap = new Map(); for (const attachment of attachments) { diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts index 4300733ec10bc..6e5ad33bf9f9d 100644 --- a/packages/trace-viewer/src/ui/modelUtil.ts +++ b/packages/trace-viewer/src/ui/modelUtil.ts @@ -57,6 +57,8 @@ export type ErrorDescription = { prompt?: trace.AfterActionTraceEventAttachment & { traceUrl: string }; }; +export type Attachment = trace.AfterActionTraceEventAttachment & { traceUrl: string }; + export class MultiTraceModel { readonly startTime: number; readonly endTime: number; @@ -68,6 +70,8 @@ export class MultiTraceModel { readonly options: trace.BrowserContextEventOptions; readonly pages: PageEntry[]; readonly actions: ActionTraceEventInContext[]; + readonly attachments: Attachment[]; + readonly visibleAttachments: Attachment[]; readonly events: (trace.EventTraceEvent | trace.ConsoleMessageTraceEvent)[]; readonly stdio: trace.StdioTraceEvent[]; readonly errors: trace.ErrorTraceEvent[]; @@ -103,6 +107,8 @@ export class MultiTraceModel { this.hasSource = contexts.some(c => c.hasSource); this.hasStepData = contexts.some(context => context.origin === 'testRunner'); this.resources = [...contexts.map(c => c.resources)].flat(); + this.attachments = this.actions.flatMap(action => action.attachments?.map(attachment => ({ ...attachment, traceUrl: action.context.traceUrl })) ?? []); + this.visibleAttachments = this.attachments.filter(attachment => !attachment.name.startsWith('_')); this.events.sort((a1, a2) => a1.time - a2.time); this.resources.sort((a1, a2) => a1._monotonicTime! - a2._monotonicTime!); @@ -130,18 +136,10 @@ export class MultiTraceModel { } private _errorDescriptorsFromTestRunner(): ErrorDescription[] { - const errorPrompts: Record = {}; - for (const action of this.actions) { - for (const attachment of action.attachments ?? []) { - if (attachment.name.startsWith('_prompt-')) - errorPrompts[attachment.name] = { ...attachment, traceUrl: action.context.traceUrl }; - } - } - return this.errors.filter(e => !!e.message).map((error, i) => ({ stack: error.stack, message: error.message, - prompt: errorPrompts[`_prompt-${i}`], + prompt: this.attachments.find(a => a.name === `_prompt-${i}`), })); } } diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx index 5fe2f978a6c6e..f9efcd7a98ab3 100644 --- a/packages/trace-viewer/src/ui/workbench.tsx +++ b/packages/trace-viewer/src/ui/workbench.tsx @@ -163,9 +163,6 @@ export const Workbench: React.FunctionComponent<{ const consoleModel = useConsoleTabModel(model, selectedTime); const networkModel = useNetworkTabModel(model, selectedTime); const errorsModel = useErrorsTabModel(model); - const attachments = React.useMemo(() => { - return model?.actions.map(a => a.attachments || []).flat() || []; - }, [model]); const sdkLanguage = model?.sdkLanguage || 'javascript'; @@ -241,7 +238,7 @@ export const Workbench: React.FunctionComponent<{ const attachmentsTab: TabbedPaneTabModel = { id: 'attachments', title: 'Attachments', - count: attachments.length, + count: model?.visibleAttachments.length, render: () => };