🔨 Consolidate the project text search components (#5016)

src/components/ProjectSearch/TextSearch.css → src/components/ProjectSearch.css

@@ -2,6 +2,19 @@
  * 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/>. */
 
+.search-container {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  width: calc(100% - 1px);
+  height: calc(100% - 31px);
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+  background-color: var(--theme-body-background);
+  overflow-y: hidden;
+}
+
 .project-text-search {
   flex-grow: 1;
   display: flex;

src/components/ProjectSearch.js

@@ -0,0 +1,314 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 PropTypes from "prop-types";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import classnames from "classnames";
+import { bindActionCreators } from "redux";
+import actions from "../actions";
+
+import { highlightMatches } from "../utils/project-search";
+
+import { statusType } from "../reducers/project-text-search";
+import { getRelativePath } from "../utils/sources-tree";
+import {
+  getSources,
+  getActiveSearch,
+  getTextSearchResults,
+  getTextSearchStatus,
+  getTextSearchQuery
+} from "../selectors";
+
+import Svg from "./shared/Svg";
+import ManagedTree from "./shared/ManagedTree";
+import SearchInput from "./shared/SearchInput";
+
+import type { List } from "immutable";
+import type { Location } from "../types";
+import type { ActiveSearchType } from "../reducers/types";
+import type { StatusType } from "../reducers/project-text-search";
+
+import "./ProjectSearch.css";
+
+type Match = {
+  type: "MATCH",
+  sourceId: string,
+  line: number,
+  column: number,
+  match: string,
+  value: string,
+  text: string
+};
+
+type Result = {
+  type: "RESULT",
+  filepath: string,
+  matches: Array<Match>,
+  sourceId: string
+};
+
+type Item = Result | Match;
+
+type State = {
+  inputValue: string,
+  inputFocused: boolean
+};
+
+type Props = {
+  sources: Object,
+  query: string,
+  results: List<Result>,
+  status: StatusType,
+  activeSearch: ActiveSearchType,
+  setActiveSearch: (activeSearch?: ActiveSearchType) => void,
+  closeProjectSearch: () => void,
+  searchSources: (query: string) => void,
+  selectLocation: (location: Location, tabIndex?: string) => void
+};
+
+function getFilePath(item: Item, index?: number) {
+  return item.type === "RESULT"
+    ? `${item.sourceId}-${index || "$"}`
+    : `${item.sourceId}-${item.line}-${item.column}-${index || "$"}`;
+}
+
+export class ProjectSearch extends Component<Props, State> {
+  focusedItem: ?{
+    setExpanded?: any,
+    file?: any,
+    expanded?: any,
+    match?: Match
+  };
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.query || "",
+      inputFocused: false
+    };
+  }
+
+  componentDidMount() {
+    const { shortcuts } = this.context;
+
+    shortcuts.on(
+      L10N.getStr("projectTextSearch.key"),
+      this.toggleProjectTextSearch
+    );
+    shortcuts.on("Enter", this.onEnterPress);
+  }
+
+  componentWillUnmount() {
+    const { shortcuts } = this.context;
+    shortcuts.off(
+      L10N.getStr("projectTextSearch.key"),
+      this.toggleProjectTextSearch
+    );
+    shortcuts.off("Enter", this.onEnterPress);
+  }
+
+  toggleProjectTextSearch = (key: string, e: KeyboardEvent) => {
+    const { closeProjectSearch, setActiveSearch } = this.props;
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (this.isProjectSearchEnabled()) {
+      return closeProjectSearch();
+    }
+    return setActiveSearch("project");
+  };
+
+  isProjectSearchEnabled = () => this.props.activeSearch === "project";
+
+  selectMatchItem = (matchItem: Match) => {
+    this.props.selectLocation({ ...matchItem });
+  };
+
+  getResults = (): Result[] => {
+    const { results } = this.props;
+    return results
+      .toJS()
+      .map(result => ({
+        type: "RESULT",
+        ...result,
+        matches: result.matches.map(m => ({ type: "MATCH", ...m }))
+      }))
+      .filter(result => result.filepath && result.matches.length > 0);
+  };
+
+  getResultCount = () =>
+    this.getResults().reduce((count, file) => count + file.matches.length, 0);
+
+  onKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      return;
+    }
+
+    e.stopPropagation();
+
+    if (e.key !== "Enter") {
+      return;
+    }
+    this.focusedItem = null;
+    this.props.searchSources(this.state.inputValue);
+  };
+
+  onEnterPress = () => {
+    if (this.focusedItem && !this.state.inputFocused) {
+      const { setExpanded, file, expanded, match } = this.focusedItem;
+      if (setExpanded) {
+        setExpanded(file, !expanded);
+      } else if (match) {
+        this.selectMatchItem(match);
+      }
+    }
+  };
+
+  inputOnChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    this.setState({ inputValue });
+  };
+
+  renderFile = (
+    file: Result,
+    focused: boolean,
+    expanded: boolean,
+    setExpanded: Function
+  ) => {
+    if (focused) {
+      this.focusedItem = { setExpanded, file, expanded };
+    }
+
+    const matchesLength = file.matches.length;
+    const matches = ` (${matchesLength} match${matchesLength > 1 ? "es" : ""})`;
+
+    return (
+      <div
+        className={classnames("file-result", { focused })}
+        key={file.sourceId}
+        onClick={e => setExpanded(file, !expanded)}
+      >
+        <Svg name="arrow" className={classnames({ expanded })} />
+        <img className="file" />
+        <span className="file-path">{getRelativePath(file.filepath)}</span>
+        <span className="matches-summary">{matches}</span>
+      </div>
+    );
+  };
+
+  renderMatch = (match: Match, focused: boolean) => {
+    if (focused) {
+      this.focusedItem = { match };
+    }
+    return (
+      <div
+        className={classnames("result", { focused })}
+        onClick={() => setTimeout(() => this.selectMatchItem(match), 50)}
+      >
+        <span className="line-number" key={match.line}>
+          {match.line}
+        </span>
+        {highlightMatches(match)}
+      </div>
+    );
+  };
+
+  renderItem = (
+    item: Item,
+    depth: number,
+    focused: boolean,
+    _: any,
+    expanded: boolean,
+    { setExpanded }: { setExpanded: Function }
+  ) => {
+    if (item.type === "RESULT") {
+      return this.renderFile(item, focused, expanded, setExpanded);
+    }
+    return this.renderMatch(item, focused);
+  };
+
+  renderResults = () => {
+    const results = this.getResults();
+    const { status } = this.props;
+    if (results.length && status === statusType.done) {
+      return (
+        <ManagedTree
+          getRoots={() => results}
+          getChildren={file => file.matches || []}
+          itemHeight={24}
+          autoExpandAll={true}
+          autoExpandDepth={1}
+          getParent={item => null}
+          getPath={getFilePath}
+          renderItem={this.renderItem}
+        />
+      );
+    }
+    if (
+      status === statusType.fetching ||
+      (this.props.query && !results.length)
+    ) {
+      return (
+        <div className="no-result-msg absolute-center">
+          {L10N.getStr("projectTextSearch.noResults")}
+        </div>
+      );
+    }
+  };
+
+  renderSummary = () =>
+    this.props.query !== ""
+      ? L10N.getFormatStr("sourceSearch.resultsSummary1", this.getResultCount())
+      : "";
+
+  renderInput() {
+    return (
+      <SearchInput
+        query={this.state.inputValue}
+        count={this.getResultCount()}
+        placeholder={L10N.getStr("projectTextSearch.placeholder")}
+        size="big"
+        summaryMsg={this.renderSummary()}
+        onChange={this.inputOnChange}
+        onFocus={() => this.setState({ inputFocused: true })}
+        onBlur={() => this.setState({ inputFocused: false })}
+        onKeyDown={this.onKeyDown}
+        handleClose={this.props.closeProjectSearch}
+        ref="searchInput"
+      />
+    );
+  }
+
+  render() {
+    if (!this.isProjectSearchEnabled()) {
+      return null;
+    }
+
+    return (
+      <div className="search-container">
+        <div className="project-text-search">
+          <div className="header">{this.renderInput()}</div>
+          {this.renderResults()}
+        </div>
+      </div>
+    );
+  }
+}
+ProjectSearch.contextTypes = {
+  shortcuts: PropTypes.object
+};
+
+export default connect(
+  state => ({
+    sources: getSources(state),
+    activeSearch: getActiveSearch(state),
+    results: getTextSearchResults(state),
+    query: getTextSearchQuery(state),
+    status: getTextSearchStatus(state)
+  }),
+  dispatch => bindActionCreators(actions, dispatch)
+)(ProjectSearch);