[pull] main from microsoft:main

packages/html-reporter/src/labels.css

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+.label {
+  display: inline-block;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  border: 1px solid transparent;
+  border-radius: 2em;
+  background-color: var(--color-scale-gray-4);
+  color: white;
+  margin: 0 10px;
+  flex: none;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.label-anchor {
+  text-decoration: none;
+  color: var(--color-fg-default);
+}
+
+@media(prefers-color-scheme: light) {
+  .label-color-0 {
+    background-color: var(--color-scale-blue-0);
+    color: var(--color-scale-blue-6);
+    border: 1px solid var(--color-scale-blue-4);
+  }
+  .label-color-1 {
+    background-color: var(--color-scale-yellow-0);
+    color: var(--color-scale-yellow-6);
+    border: 1px solid var(--color-scale-yellow-4);
+  }
+  .label-color-2 {
+    background-color: var(--color-scale-purple-0);
+    color: var(--color-scale-purple-6);
+    border: 1px solid var(--color-scale-purple-4);
+  }
+  .label-color-3 {
+    background-color: var(--color-scale-pink-0);
+    color: var(--color-scale-pink-6);
+    border: 1px solid var(--color-scale-pink-4);
+  }
+  .label-color-4 {
+    background-color: var(--color-scale-coral-0);
+    color: var(--color-scale-coral-6);
+    border: 1px solid var(--color-scale-coral-4);
+  }
+  .label-color-5 {
+    background-color: var(--color-scale-orange-0);
+    color: var(--color-scale-orange-6);
+    border: 1px solid var(--color-scale-orange-4);
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  .label-color-0 {
+    background-color: var(--color-scale-blue-9);
+    color: var(--color-scale-blue-2);
+    border: 1px solid var(--color-scale-blue-4);
+  }
+  .label-color-1 {
+    background-color: var(--color-scale-yellow-9);
+    color: var(--color-scale-yellow-2);
+    border: 1px solid var(--color-scale-yellow-4);
+  }
+  .label-color-2 {
+    background-color: var(--color-scale-purple-9);
+    color: var(--color-scale-purple-2);
+    border: 1px solid var(--color-scale-purple-4);
+  }
+  .label-color-3 {
+    background-color: var(--color-scale-pink-9);
+    color: var(--color-scale-pink-2);
+    border: 1px solid var(--color-scale-pink-4);
+  }
+  .label-color-4 {
+    background-color: var(--color-scale-coral-9);
+    color: var(--color-scale-coral-2);
+    border: 1px solid var(--color-scale-coral-4);
+  }
+  .label-color-5 {
+    background-color: var(--color-scale-orange-9);
+    color: var(--color-scale-orange-2);
+    border: 1px solid var(--color-scale-orange-4);
+  }
+}
+
+.label-row .label {
+  margin: 0;
+}
+
+.label-row .label:not(:first-child) {
+  margin-left: 6px;
+}

packages/html-reporter/src/labels.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { clsx } from '@web/uiUtils';
+import { hashStringToInt } from './utils';
+import { navigate, ProjectLink, SearchParamsContext } from './links';
+import { filterWithQuery } from './filter';
+import './labels.css';
+
+export const Label: React.FC<{
+  label: string,
+  trimAtSymbolPrefix?: boolean,
+  href?: string,
+  onClick?: (e: React.MouseEvent, label: string) => void,
+  colorIndex?: number,
+}> = ({ label, href, onClick, colorIndex, trimAtSymbolPrefix }) => {
+  const baseLabel = <span className={clsx('label', 'label-color-' + (colorIndex !== undefined ? colorIndex : hashStringToInt(label)))} onClick={onClick ? e => onClick(e, label) : undefined}>
+    {trimAtSymbolPrefix && label.startsWith('@') ? label.slice(1) : label}
+  </span>;
+
+  return href
+    ? <a className='label-anchor' href={href}>{baseLabel}</a>
+    : baseLabel;
+};
+
+export const ProjectAndTagLabelsView: React.FC<{
+  projectNames: string[],
+  activeProjectName: string,
+  otherLabels: string[],
+  useLinks?: boolean,
+  style?: React.CSSProperties,
+}> = ({ projectNames, activeProjectName, otherLabels, useLinks, style }) => {
+  return (projectNames.length > 0 || otherLabels.length > 0) && <span className='label-row' style={style ?? {}}>
+    <ProjectLink projectNames={projectNames} projectName={activeProjectName} />
+    {!!useLinks ? <LabelsLinkView labels={otherLabels} /> : <LabelsClickView labels={otherLabels} />}
+  </span>;
+};
+
+const LabelsClickView: React.FC<{
+  labels: string[],
+}> = ({ labels }) => {
+  const searchParams = React.useContext(SearchParamsContext);
+
+  const onClickHandle = React.useCallback((e: React.MouseEvent, label: string) => {
+    e.preventDefault();
+    const q = searchParams.get('q')?.toString() || '';
+    navigate(filterWithQuery(q, label, e.metaKey || e.ctrlKey));
+  }, [searchParams]);
+
+  return <>
+    {labels.map(label => <Label key={label} label={label} trimAtSymbolPrefix={true} onClick={onClickHandle} />)}
+  </>;
+};
+
+const LabelsLinkView: React.FC<{
+  labels: string[],
+}> = ({ labels }) => <>
+  {labels.map((label, index) => <Label key={index} label={label} trimAtSymbolPrefix={true} href={`#?q=${label}`} />)}
+</>;

packages/html-reporter/src/links.css

@@ -14,87 +14,6 @@
   limitations under the License.
 */
 
-.label {
-  display: inline-block;
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  border: 1px solid transparent;
-  border-radius: 2em;
-  background-color: var(--color-scale-gray-4);
-  color: white;
-  margin: 0 10px;
-  flex: none;
-  font-weight: 600;
-}
-
-@media(prefers-color-scheme: light) {
-  .label-color-0 {
-    background-color: var(--color-scale-blue-0);
-    color: var(--color-scale-blue-6);
-    border: 1px solid var(--color-scale-blue-4);
-  }
-  .label-color-1 {
-    background-color: var(--color-scale-yellow-0);
-    color: var(--color-scale-yellow-6);
-    border: 1px solid var(--color-scale-yellow-4);
-  }
-  .label-color-2 {
-    background-color: var(--color-scale-purple-0);
-    color: var(--color-scale-purple-6);
-    border: 1px solid var(--color-scale-purple-4);
-  }
-  .label-color-3 {
-    background-color: var(--color-scale-pink-0);
-    color: var(--color-scale-pink-6);
-    border: 1px solid var(--color-scale-pink-4);
-  }
-  .label-color-4 {
-    background-color: var(--color-scale-coral-0);
-    color: var(--color-scale-coral-6);
-    border: 1px solid var(--color-scale-coral-4);
-  }
-  .label-color-5 {
-    background-color: var(--color-scale-orange-0);
-    color: var(--color-scale-orange-6);
-    border: 1px solid var(--color-scale-orange-4);
-  }
-}
-
-@media(prefers-color-scheme: dark) {
-  .label-color-0 {
-    background-color: var(--color-scale-blue-9);
-    color: var(--color-scale-blue-2);
-    border: 1px solid var(--color-scale-blue-4);
-  }
-  .label-color-1 {
-    background-color: var(--color-scale-yellow-9);
-    color: var(--color-scale-yellow-2);
-    border: 1px solid var(--color-scale-yellow-4);
-  }
-  .label-color-2 {
-    background-color: var(--color-scale-purple-9);
-    color: var(--color-scale-purple-2);
-    border: 1px solid var(--color-scale-purple-4);
-  }
-  .label-color-3 {
-    background-color: var(--color-scale-pink-9);
-    color: var(--color-scale-pink-2);
-    border: 1px solid var(--color-scale-pink-4);
-  }
-  .label-color-4 {
-    background-color: var(--color-scale-coral-9);
-    color: var(--color-scale-coral-2);
-    border: 1px solid var(--color-scale-coral-4);
-  }
-  .label-color-5 {
-    background-color: var(--color-scale-orange-9);
-    color: var(--color-scale-orange-2);
-    border: 1px solid var(--color-scale-orange-4);
-  }
-}
-
 .attachment-body {
   white-space: pre-wrap;
   background-color: var(--color-canvas-subtle);

packages/html-reporter/src/links.tsx

@@ -23,6 +23,7 @@ import { linkifyText } from '@web/renderUtils';
 import { clsx, useFlash } from '@web/uiUtils';
 import { trace } from './icons';
 import { Expandable } from './expandable';
+import { Label } from './labels';
 
 export function navigate(href: string | URL) {
   window.history.pushState({}, '', href);
@@ -64,9 +65,7 @@ export const ProjectLink: React.FunctionComponent<{
   const encoded = encodeURIComponent(projectName);
   const value = projectName === encoded ? projectName : `"${encoded.replace(/%22/g, '%5C%22')}"`;
   return <Link href={`#?q=p:${value}`}>
-    <span className={clsx('label', `label-color-${projectNames.indexOf(projectName) % 6}`)} style={{ margin: '6px 0 0 6px' }}>
-      {projectName}
-    </span>
+    <Label label={projectName} colorIndex={projectNames.indexOf(projectName) % 6} />
   </Link>;
 };
 

packages/html-reporter/src/testCaseView.css

@@ -67,9 +67,3 @@
     margin: 0 !important;
   }
 }
-
-.test-case-project-labels-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}

packages/html-reporter/src/testCaseView.tsx

@@ -20,16 +20,17 @@ import * as React from 'react';
 import { TabbedPane } from './tabbedPane';
 import { AutoChip } from './chip';
 import './common.css';
-import { Link, ProjectLink, SearchParamsContext, testResultHref, TraceLink } from './links';
+import { Link, SearchParamsContext, testResultHref, TraceLink } from './links';
 import { statusIcon } from './statusIcon';
 import './testCaseView.css';
 import { TestResultView } from './testResultView';
 import { linkifyText } from '@web/renderUtils';
-import { hashStringToInt, msToString } from './utils';
+import { msToString } from './utils';
 import { clsx } from '@web/uiUtils';
 import { CopyToClipboardContainer } from './copyToClipboard';
 import { HeaderView } from './headerView';
 import type { MetadataWithCommitInfo } from '@playwright/isomorphic/types';
+import { ProjectAndTagLabelsView } from './labels';
 
 export const TestCaseView: React.FC<{
   projectNames: string[],
@@ -43,7 +44,6 @@ export const TestCaseView: React.FC<{
   const searchParams = React.useContext(SearchParamsContext);
 
   const filterParam = searchParams.has('q') ? '&q=' + searchParams.get('q') : '';
-  const labels = React.useMemo(() => test.tags, [test]);
   const visibleTestAnnotations = test.annotations.filter(a => !a.type.startsWith('_')) ?? [];
 
   return <>
@@ -66,10 +66,7 @@ export const TestCaseView: React.FC<{
       <TraceLink test={test} trailingSeparator={true} />
       <div className='test-case-duration'>{msToString(test.duration)}</div>
     </div>
-    {(!!test.projectName || labels) && <div className='test-case-project-labels-row'>
-      {!!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
-      {labels && <LabelsLinkView labels={labels} />}
-    </div>}
+    <ProjectAndTagLabelsView style={{ marginLeft: '6px' }} projectNames={projectNames} activeProjectName={test.projectName} otherLabels={test.tags} />
     {test.results.length === 0 && visibleTestAnnotations.length !== 0 && <AutoChip header='Annotations' dataTestId='test-case-annotations'>
       {visibleTestAnnotations.map((annotation, index) => <TestCaseAnnotationView key={index} annotation={annotation} />)}
     </AutoChip>}
@@ -107,19 +104,3 @@ function retryLabel(index: number) {
     return 'Run';
   return `Retry #${index}`;
 }
-
-const LabelsLinkView: React.FC<React.PropsWithChildren<{
-  labels: string[],
-}>> = ({ labels }) => {
-  return labels.length > 0 ? (
-    <>
-      {labels.map(label => (
-        <a key={label} style={{ textDecoration: 'none', color: 'var(--color-fg-default)' }} href={`#?q=${label}`} >
-          <span style={{ margin: '6px 0 0 6px', cursor: 'pointer' }} className={clsx('label', 'label-color-' + hashStringToInt(label))}>
-            {label.slice(1)}
-          </span>
-        </a>
-      ))}
-    </>
-  ) : null;
-};