feat(file-picker): add fuzzy search to file picker

Also restyles the file picker list slightly
stryker-mutator · Nov 21, 2024 · 051ad98 · 051ad98
1 parent 8310717
commit 051ad98
Show file tree

Hide file tree

Showing 19 changed files with 264 additions and 195 deletions.
diff --git a/libs/eslint-plugin-mte/index.js b/libs/eslint-plugin-mte/index.js
@@ -22,12 +22,11 @@ export default [
       reportUnusedDisableDirectives: 'error',
     },
     rules: {
+      eqeqeq: 'error',
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
-      // Not useful for a lot of stuff, but mainly `.shadowRoot`
-      '@typescript-eslint/no-non-null-assertion': 'off',
     },
   },
   {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements/.vscode/launch.json b/packages/elements/.vscode/launch.json
@@ -18,6 +18,29 @@
       "url": "http://localhost:5173",
       "webRoot": "${workspaceFolder}",
       "sourceMaps": true
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Run unit tests",
+      "program": "${workspaceFolder:parent}/node_modules/vitest/vitest.mjs",
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
+    },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to unit test browser",
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug unit tests",
+      "configurations": ["Attach to unit test browser", "Run unit tests"],
+      "stopAll": true
     }
   ]
 }
diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -59,6 +59,7 @@
     "esbuild": "0.24.0",
     "eslint-config-mte": "*",
     "express": "4.21.1",
+    "fuzzysort": "3.1.0",
     "lit": "3.2.1",
     "mutation-testing-metrics": "3.3.0",
     "mutation-testing-real-time": "3.3.0",

diff --git a/packages/elements/src/components/app/app.component.ts b/packages/elements/src/components/app/app.component.ts
@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
 import type { PropertyValues } from 'lit';
-import { html, nothing, unsafeCSS, isServer } from 'lit';
+import { html, isServer, nothing, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import type {
   FileUnderTestModel,
   Metrics,
@@ -24,10 +26,9 @@ import { mutantChanges } from '../../lib/mutant-changes.js';
 import { locationChange$, View } from '../../lib/router.js';
 import type { Theme } from '../../lib/theme.js';
 import { globals, tailwind } from '../../style/index.js';
+import { type MutationTestReportFilePickerComponent } from '../file-picker/file-picker.component.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[];
@@ -360,11 +361,11 @@ export class MutationTestReportAppComponent extends RealTimeElement {
               .path="${this.context.path}"
             ></mte-breadcrumb>
             <mte-result-status-bar
-              .detected="${this.rootModel?.systemUnderTestMetrics.metrics.totalDetected}"
-              .noCoverage="${this.rootModel?.systemUnderTestMetrics.metrics.noCoverage}"
-              .pending="${this.rootModel?.systemUnderTestMetrics.metrics.pending}"
-              .survived="${this.rootModel?.systemUnderTestMetrics.metrics.survived}"
-              .total="${this.rootModel?.systemUnderTestMetrics.metrics.totalValid}"
+              detected="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalDetected)}"
+              noCoverage="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.noCoverage)}"
+              pending="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.pending)}"
+              survived="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.survived)}"
+              total="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalValid)}"
             ></mte-result-status-bar>
             ${this.context.view === 'mutant' && this.context.result
               ? html`<mte-mutant-view

diff --git a/packages/elements/src/components/breadcrumb.ts b/packages/elements/src/components/breadcrumb.ts
@@ -72,7 +72,9 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
   }
 
   #renderSearchIcon() {
-    return html` <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="open file picker">${searchIcon}</button> `;
+    return html`
+      <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="Open file picker (Ctrl-K)">${searchIcon}</button>
+    `;
   }
 
   #dispatchFilePickerOpenEvent() {