cherry-pick(#31945): feat(ui-mode): add annotations tab (#31968)

<img width="867" alt="image"

src="https://github.com/user-attachments/assets/7d714723-1d3f-49b2-944a-0a476d79aee8">

packages/html-reporter/src/links.tsx

@@ -20,7 +20,7 @@ import * as icons from './icons';
 import { TreeItem } from './treeItem';
 import { CopyToClipboard } from './copyToClipboard';
 import './links.css';
-import { linkifyText } from './renderUtils';
+import { linkifyText } from '@web/renderUtils';
 
 export function navigate(href: string) {
   window.history.pushState({}, '', href);

packages/html-reporter/src/testCaseView.tsx

@@ -23,7 +23,7 @@ import { ProjectLink } from './links';
 import { statusIcon } from './statusIcon';
 import './testCaseView.css';
 import { TestResultView } from './testResultView';
-import { linkifyText } from './renderUtils';
+import { linkifyText } from '@web/renderUtils';
 import { hashStringToInt, msToString } from './utils';
 
 export const TestCaseView: React.FC<{

packages/trace-viewer/src/ui/annotationsTab.css

@@ -0,0 +1,28 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.annotations-tab {
+  flex: auto;
+  line-height: 24px;
+  white-space: pre;
+  overflow: auto;
+  user-select: text;
+}
+
+.annotation-item {
+  margin: 4px 8px;
+  text-wrap: wrap;
+}

packages/trace-viewer/src/ui/annotationsTab.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import './annotationsTab.css';
+import { PlaceholderPanel } from './placeholderPanel';
+import { linkifyText } from '@web/renderUtils';
+
+type Annotation = { type: string; description?: string; };
+
+export const AnnotationsTab: React.FunctionComponent<{
+  annotations: Annotation[],
+}> = ({ annotations }) => {
+
+  if (!annotations.length)
+    return <PlaceholderPanel text='No annotations' />;
+
+  return <div className='annotations-tab'>
+    {annotations.map((annotation, i) => {
+      return <div className='annotation-item' key={`annotation-${i}`}>
+        <span style={{ fontWeight: 'bold' }}>{annotation.type}</span>
+        {annotation.description && <span>: {linkifyText(annotation.description)}</span>}
+      </div>;
+    })}
+  </div>;
+};

packages/trace-viewer/src/ui/uiModeTraceView.tsx

@@ -100,6 +100,7 @@ export const TraceView: React.FC<{
     fallbackLocation={item.testFile}
     isLive={model?.isLive}
     status={item.treeItem?.status}
+    annotations={item.testCase?.annotations || []}
     onOpenExternally={onOpenExternally}
     revealSource={revealSource}
   />;

packages/trace-viewer/src/ui/workbench.tsx

@@ -33,6 +33,7 @@ import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
 import { Timeline } from './timeline';
 import { MetadataView } from './metadataView';
 import { AttachmentsTab } from './attachmentsTab';
+import { AnnotationsTab } from './annotationsTab';
 import type { Boundaries } from '../geometry';
 import { InspectorTab } from './inspectorTab';
 import { ToolbarButton } from '@web/components/toolbarButton';
@@ -52,12 +53,13 @@ export const Workbench: React.FunctionComponent<{
   onSelectionChanged?: (action: modelUtil.ActionTraceEventInContext) => void,
   isLive?: boolean,
   status?: UITestStatus,
+  annotations?: { type: string; description?: string; }[];
   inert?: boolean,
   showRouteActionsSetting?: Setting<boolean>,
   openPage?: (url: string, target?: string) => Window | any,
   onOpenExternally?: (location: modelUtil.SourceLocation) => void,
   revealSource?: boolean,
-}> = ({ showRouteActionsSetting, model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert, openPage, onOpenExternally, revealSource }) => {
+}> = ({ showRouteActionsSetting, model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, annotations, inert, openPage, onOpenExternally, revealSource }) => {
   const [selectedAction, setSelectedActionImpl] = React.useState<modelUtil.ActionTraceEventInContext | undefined>(undefined);
   const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
   const [highlightedAction, setHighlightedAction] = React.useState<modelUtil.ActionTraceEventInContext | undefined>();
@@ -227,6 +229,17 @@ export const Workbench: React.FunctionComponent<{
     sourceTab,
     attachmentsTab,
   ];
+
+  if (annotations !== undefined) {
+    const annotationsTab: TabbedPaneTabModel = {
+      id: 'annotations',
+      title: 'Annotations',
+      count: annotations.length,
+      render: () => <AnnotationsTab annotations={annotations} />
+    };
+    tabs.push(annotationsTab);
+  }
+
   if (showSourcesFirst) {
     const sourceTabIndex = tabs.indexOf(sourceTab);
     tabs.splice(sourceTabIndex, 1);