feat(elements): add file picker (#3404)

Author: xandervedder

packages/elements/package.json

@@ -26,7 +26,7 @@
     "start": "vite",
     "build": "vite build && cross-env IIFE_BUILD=true vite build",
     "test": "npm run test:unit && npm run test:integration",
-    "test:unit": "vitest run",
+    "test:unit": "vitest",
     "test:integration": "playwright test",
     "test:integration:update": "playwright test --update-snapshots",
     "test:integration:headless": "cross-env HEADLESS=true playwright test",

packages/elements/src/components/app/app.component.ts

@@ -26,6 +26,8 @@ import type { Theme } from '../../lib/theme.js';
 import { globals, tailwind } from '../../style/index.js';
 import { RealTimeElement } from '../real-time-element.js';
 import theme from './theme.scss?inline';
+import { type MutationTestReportFilePickerComponent } from '../file-picker/file-picker.component.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 
 interface BaseContext {
   path: string[];
@@ -86,6 +88,8 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     return getComputedStyle(this).getPropertyValue('--mut-body-bg');
   }
 
+  #filePickerRef = createRef<MutationTestReportFilePickerComponent>();
+
   @property()
   public get title(): string {
     if (this.context.result) {
@@ -343,13 +347,18 @@ export class MutationTestReportAppComponent extends RealTimeElement {
   public render() {
     if (this.context.result ?? this.errorMessage) {
       return html`
+        <mte-file-picker ${ref(this.#filePickerRef)} .rootModel="${this.rootModel}"></mte-file-picker>
         <div class="container bg-white pb-4 font-sans text-gray-800 motion-safe:transition-max-width">
           <div class="space-y-4 transition-colors">
             ${this.renderErrorMessage()}
             <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right pt-6" .theme="${this.theme}">
             </mte-theme-switch>
             ${this.renderTitle()} ${this.renderTabs()}
-            <mte-breadcrumb .view="${this.context.view}" .path="${this.context.path}"></mte-breadcrumb>
+            <mte-breadcrumb
+              @mte-file-picker-open="${() => this.#filePickerRef.value?.open()}"
+              .view="${this.context.view}"
+              .path="${this.context.path}"
+            ></mte-breadcrumb>
             <mte-result-status-bar
               .detected="${this.rootModel?.systemUnderTestMetrics.metrics.totalDetected}"
               .noCoverage="${this.rootModel?.systemUnderTestMetrics.metrics.noCoverage}"

packages/elements/src/components/breadcrumb.ts

@@ -1,13 +1,16 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+
 import { toAbsoluteUrl } from '../lib/html-helpers.js';
 import { View } from '../lib/router.js';
+import { searchIcon } from '../lib/svg-icons.js';
 import { tailwind } from '../style/index.js';
+import { createCustomEvent } from '../lib/custom-events.js';
 
 @customElement('mte-breadcrumb')
 export class MutationTestReportBreadcrumbComponent extends LitElement {
-  @property({ attribute: false })
+  @property({ type: Array, attribute: false })
   public declare path: string[] | undefined;
 
   @property()
@@ -27,37 +30,38 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
   public render() {
     return html`<nav class="my-4 flex rounded-md border border-primary-600 bg-primary-100 p-3 text-gray-700" aria-label="Breadcrumb">
       <ol class="inline-flex items-center">
-        ${this.path && this.path.length > 0 ? this.renderLink(this.rootName, []) : this.renderActiveItem(this.rootName)}
-        ${this.renderBreadcrumbItems()}
+        ${this.path && this.path.length > 0 ? this.#renderLink(this.rootName, []) : this.#renderActiveItem(this.rootName)}
+        ${this.#renderBreadcrumbItems()}
       </ol>
+      ${this.#renderSearchIcon()}
     </nav> `;
   }
 
-  private renderBreadcrumbItems() {
+  #renderBreadcrumbItems() {
     if (this.path) {
       const path = this.path;
       return repeat(
         path,
         (item) => item,
         (item, index) => {
           if (index === path.length - 1) {
-            return this.renderActiveItem(item);
+            return this.#renderActiveItem(item);
           } else {
-            return this.renderLink(item, path.slice(0, index + 1));
+            return this.#renderLink(item, path.slice(0, index + 1));
           }
         },
       );
     }
     return undefined;
   }
 
-  private renderActiveItem(title: string) {
+  #renderActiveItem(title: string) {
     return html`<li aria-current="page">
       <span class="ml-1 text-sm font-medium text-gray-800 md:ml-2">${title}</span>
     </li> `;
   }
 
-  private renderLink(title: string, path: string[]) {
+  #renderLink(title: string, path: string[]) {
     return html`<li class="after:text-gray-800 after:content-['/'] md:after:pl-1">
       <a
         href="${toAbsoluteUrl(this.view, ...path)}"
@@ -66,4 +70,12 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
       >
     </li>`;
   }
+
+  #renderSearchIcon() {
+    return html` <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="open file picker">${searchIcon}</button> `;
+  }
+
+  #dispatchFilePickerOpenEvent() {
+    this.dispatchEvent(createCustomEvent('mte-file-picker-open', undefined));
+  }
 }

packages/elements/src/components/file-icon/file-icon.component.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { determineLanguage, ProgrammingLanguage } from '../../lib/code-helpers.js';
 import style from './file-icon.css?inline';
 import { classMap } from 'lit/directives/class-map.js';
+
 @customElement('mte-file-icon')
 export class MutationTestReportFileIconComponent extends LitElement {
   @property({ attribute: 'file-name' })