[QuickOpen] Filter file search if a project directory root is set (#5784)

Author: darkwing

src/actions/tests/ui.spec.js

@@ -1,11 +1,17 @@
-import { createStore, selectors, actions } from "../../utils/test-head";
+import {
+  createStore,
+  selectors,
+  actions,
+  makeSource
+} from "../../utils/test-head";
 
 const {
   getActiveSearch,
   getFrameworkGroupingState,
   getPaneCollapse,
   getHighlightedLineRange,
-  getProjectDirectoryRoot
+  getProjectDirectoryRoot,
+  getRelativeSources
 } = selectors;
 
 describe("ui", () => {
@@ -90,4 +96,20 @@ describe("setProjectDirectoryRoot", () => {
     dispatch(actions.setProjectDirectoryRoot("/example.com/bar"));
     expect(getProjectDirectoryRoot(getState())).toBe("/example.com/bar");
   });
+
+  it("should filter sources", async () => {
+    const store = createStore({});
+    const { dispatch, getState } = store;
+    await dispatch(actions.newSource(makeSource("js/scopes.js")));
+    await dispatch(actions.newSource(makeSource("lib/vendor.js")));
+    dispatch(actions.setProjectDirectoryRoot("/js"));
+    const filteredSources = getRelativeSources(getState());
+    const firstSource = filteredSources[0];
+
+    expect(firstSource.url).toEqual(
+      "http://localhost:8000/examples/js/scopes.js"
+    );
+
+    expect(firstSource.relativeUrl).toEqual("scopes.js");
+  });
 });

src/components/QuickOpenModal.js

@@ -7,9 +7,10 @@ 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,
+  getRelativeSources,
   getQuickOpenEnabled,
   getQuickOpenQuery,
   getQuickOpenType,
@@ -418,7 +419,7 @@ function mapStateToProps(state) {
 
   return {
     enabled: getQuickOpenEnabled(state),
-    sources: formatSources(getSources(state)),
+    sources: formatSources(getRelativeSources(state)),
     selectedSource,
     symbols: formatSymbols(getSymbols(state, selectedSource)),
     symbolsLoading: isSymbolsLoading(state, selectedSource),

src/reducers/ast.js

@@ -31,7 +31,7 @@ export type SymbolsMap = Map<string, Symbols>;
 export type EmptyLinesMap = Map<string, EmptyLinesType>;
 
 export type SourceMetaDataType = {
-  framework: ?string
+  framework: string | void
 };
 
 export type SourceMetaDataMap = Map<string, SourceMetaDataType>;

src/selectors/getRelativeSources.js

@@ -0,0 +1,40 @@
+// @flow
+
+import { getProjectDirectoryRoot, getSources } from "../selectors";
+import type { State } from "../reducers/types";
+import type { Source } from "../types";
+import { getSourcePath } from "../utils/source";
+
+export type RelativeSource = Source & {
+  +relativeUrl: string
+};
+
+function getRelativeUrl(url, root) {
+  if (!root) {
+    return getSourcePath(url);
+  }
+
+  // + 1 removes the leading "/"
+  return url.slice(url.indexOf(root) + root.length + 1);
+}
+
+function formatSource(source: Source, root): RelativeSource {
+  return {
+    ...source,
+    relativeUrl: getRelativeUrl(source.url, root)
+  };
+}
+
+/*
+ * Gets the sources that are below a project root
+ */
+export function getRelativeSources(state: State): RelativeSource[] {
+  const sources = getSources(state);
+  const root = getProjectDirectoryRoot(state);
+
+  return sources
+    .valueSeq()
+    .toJS()
+    .filter(({ url }) => url && url.includes(root))
+    .map(source => formatSource(source, root));
+}

src/selectors/index.js

@@ -29,3 +29,4 @@ export { getVisibleBreakpoints } from "./visibleBreakpoints";
 export { isSelectedFrameVisible } from "./isSelectedFrameVisible";
 export { getCallStackFrames } from "./getCallStackFrames";
 export { getVisibleSelectedFrame } from "./visibleSelectedFrame";
+export { getRelativeSources } from "./getRelativeSources";

src/selectors/visibleBreakpoints.js

@@ -2,10 +2,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
+// @flow
+
 import { getBreakpoints } from "../reducers/breakpoints";
 import { getSelectedSource } from "../reducers/sources";
 import { isGeneratedId } from "devtools-source-map";
 
+import type { State } from "../reducers/types";
+
 function getLocation(breakpoint, isGeneratedSource) {
   return isGeneratedSource
     ? breakpoint.generatedLocation || breakpoint.location
@@ -33,12 +37,13 @@ function isVisible(breakpoint, selectedSource) {
   const location = getLocation(breakpoint, isGeneratedSource);
   return location.sourceId === sourceId;
 }
+
 /*
  * Finds the breakpoints, which appear in the selected source.
  *
  * This
  */
-export function getVisibleBreakpoints(state: OuterState) {
+export function getVisibleBreakpoints(state: State) {
   const selectedSource = getSelectedSource(state);
   if (!selectedSource) {
     return null;

src/utils/quick-open.js

@@ -4,13 +4,13 @@
 
 // @flow
 import { endTruncateStr } from "./utils";
-import { isPretty, getSourcePath } from "./source";
+import { isPretty, getFilename } from "./source";
 
 import type { Location as BabelLocation } from "@babel/types";
-import type { SourcesMap } from "../reducers/sources";
 import type { Symbols } from "../reducers/ast";
 import type { QuickOpenType } from "../reducers/quick-open";
 import type { SymbolDeclaration } from "../workers/parser";
+import type { RelativeSource } from "../selectors/getRelativeSources";
 
 export const MODIFIERS = {
   "@": "functions",
@@ -49,6 +49,19 @@ export function parseLineColumn(query: string) {
   }
 }
 
+export function formatSourcesForList(source: RelativeSource) {
+  const title = getFilename(source);
+  const subtitle = endTruncateStr(source.relativeUrl, 100);
+
+  return {
+    value: source.relativeUrl,
+    title,
+    subtitle,
+    id: source.id,
+    url: source.url
+  };
+}
+
 export type QuickOpenResult = {|
   id: string,
   value: string,
@@ -106,25 +119,11 @@ export function formatShortcutResults(): Array<QuickOpenResult> {
   ];
 }
 
-export function formatSources(sources: SourcesMap): Array<QuickOpenResult> {
+export function formatSources(
+  sources: RelativeSource[]
+): Array<QuickOpenResult> {
   return sources
-    .valueSeq()
     .filter(source => !isPretty(source))
-    .map(source => {
-      const sourcePath = getSourcePath(source.url);
-      return {
-        value: sourcePath,
-        title: sourcePath
-          .split("/")
-          .pop()
-          .split("?")[0],
-        subtitle: endTruncateStr(sourcePath, 100)
-          .replace(sourcePath.split("/").pop(), "")
-          .slice(1, -1),
-        id: source.id,
-        url: source.url
-      };
-    })
-    .filter(({ value }) => value != "")
-    .toJS();
+    .map(source => formatSourcesForList(source))
+    .filter(({ value }) => value != "");
 }