[QuickOpen] style matched fuzzy characters (#5292)

Author: atwalg2

src/components/QuickOpenModal.css

@@ -1,12 +1,13 @@
-.result-item .title .fuzzy-match {
+.result-item .title .highlight {
   font-weight: bold;
 }
 
-.result-item .subtitle .fuzzy-match {
+.result-item .subtitle .highlight {
   color: var(--grey-90);
+  font-weight: 500;
 }
 
-.theme-dark .result-item .title .fuzzy-match,
-.theme-dark .result-item .subtitle .fuzzy-match {
+.theme-dark .result-item .title .highlight,
+.theme-dark .result-item .subtitle .highlight {
   color: white;
 }

src/components/QuickOpenModal.js

@@ -3,11 +3,10 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import fuzzyAldrin from "fuzzaldrin-plus";
-
+import { basename } from "../utils/path";
 import actions from "../actions";
 import {
   getSources,
@@ -24,7 +23,7 @@ import {
   formatSources,
   parseLineColumn,
   formatShortcutResults,
-  groupFuzzyMatches
+  MODIFIERS
 } from "../utils/quick-open";
 import Modal from "./shared/Modal";
 import SearchInput from "./shared/SearchInput";
@@ -68,10 +67,6 @@ type GotoLocationType = {
   column?: number
 };
 
-type FuzzyMatch = { type: "match", value: string };
-type FuzzyMiss = { type: "miss", value: string };
-type FuzzyResult = FuzzyMatch | FuzzyMiss;
-
 function filter(values, query) {
   return fuzzyAldrin.filter(values, query, {
     key: "value",
@@ -328,32 +323,34 @@ export class QuickOpenModal extends Component<Props, State> {
   isSourcesQuery = () => this.props.searchType === "sources";
   isSourceSearch = () => this.isSourcesQuery() || this.isGotoSourceQuery();
 
-  renderHighlight = (part: FuzzyResult, i: number) => {
-    if (part.type === "match") {
-      return (
-        <span key={`${part.value}-${i}`} className="fuzzy-match">
-          {part.value}
-        </span>
-      );
-    }
-    return part.value;
+  /* eslint-disable react/no-danger */
+  renderHighlight = (candidateString: string, query: string, name: string) => {
+    const html = fuzzyAldrin.wrap(candidateString, query);
+
+    return <div dangerouslySetInnerHTML={{ __html: html }} />;
   };
 
   highlightMatching = (query: string, results: QuickOpenResult[]) => {
-    if (query === "") {
+    let newQuery = query;
+    if (newQuery === "") {
       return results;
     }
+    if (Object.keys(MODIFIERS).includes(query[0])) {
+      newQuery = query.slice(1, query.length);
+    }
+
     return results.map(result => {
-      const title = groupFuzzyMatches(result.title, query);
-      const subtitle =
-        result.subtitle != null
-          ? groupFuzzyMatches(result.subtitle, query)
-          : null;
       return {
         ...result,
-        title: title.map(this.renderHighlight),
-        ...(subtitle != null && !this.isSymbolSearch()
-          ? { subtitle: subtitle.map(this.renderHighlight) }
+        title: this.renderHighlight(result.title, basename(newQuery), "title"),
+        ...(result.subtitle != null && !this.isSymbolSearch()
+          ? {
+              subtitle: this.renderHighlight(
+                result.subtitle,
+                newQuery,
+                "subtitle"
+              )
+            }
           : null)
       };
     });

src/utils/quick-open.js

@@ -127,44 +127,3 @@ export function formatSources(sources: SourcesMap): Array<QuickOpenResult> {
     .filter(({ value }) => value != "")
     .toJS();
 }
-
-export function groupFuzzyMatches(input: string, query: string) {
-  const parts = input.toLowerCase().split("");
-  const queryChars = query.toLowerCase().split("");
-  const shared = parts.filter(char => queryChars.includes(char));
-  const output = [];
-  let matched;
-  let missed;
-  parts.forEach((char, i) => {
-    if (shared.includes(char)) {
-      if (!matched) {
-        matched = { type: "match", value: input[i] };
-        output.push(matched);
-        return;
-      }
-      matched = output[output.length - 1];
-      if (matched.type === "match") {
-        matched.value = `${matched.value}${input[i]}`;
-      } else {
-        matched = { type: "match", value: input[i] };
-        output.push(matched);
-      }
-      return;
-    }
-
-    if (!missed) {
-      missed = { type: "miss", value: input[i] };
-      output.push(missed);
-      return;
-    }
-
-    missed = output[output.length - 1];
-    if (missed.type === "miss") {
-      missed.value = `${missed.value}${input[i]}`;
-    } else {
-      missed = { type: "miss", value: input[i] };
-      output.push(missed);
-    }
-  });
-  return output;
-}

src/utils/tests/quick-open.spec.js

@@ -1,9 +1,5 @@
 import cases from "jest-in-case";
-import {
-  groupFuzzyMatches,
-  parseQuickOpenQuery,
-  parseLineColumn
-} from "../quick-open";
+import { parseQuickOpenQuery, parseLineColumn } from "../quick-open";
 
 cases(
   "parseQuickOpenQuery utility",
@@ -33,36 +29,3 @@ cases(
     }
   ]
 );
-
-cases(
-  "groupFuzzyMatches utility",
-  ({ input, query, value }) =>
-    expect(groupFuzzyMatches(input, query)).toEqual(value),
-  [
-    {
-      input: "anonymous",
-      query: "ano",
-      value: [
-        { type: "match", value: "anon" },
-        { type: "miss", value: "ym" },
-        { type: "match", value: "o" },
-        { type: "miss", value: "us" }
-      ]
-    },
-    {
-      input: "previousAttributes",
-      query: "prva",
-      value: [
-        { type: "match", value: "pr" },
-        { type: "miss", value: "e" },
-        { type: "match", value: "v" },
-        { type: "miss", value: "ious" },
-        { type: "match", value: "A" },
-        { type: "miss", value: "tt" },
-        { type: "match", value: "r" },
-        { type: "miss", value: "ibutes" }
-      ]
-    },
-    { input: "super", query: "x", value: [{ type: "miss", value: "super" }] }
-  ]
-);