fix(code/frontend): fix project filter press enter location change (#…

…29919)
elastic · Feb 20, 2019 · d537525 · d537525
1 parent 71257ce
commit d537525
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 41 deletions.
diff --git a/x-pack/plugins/code/public/actions/search.ts b/x-pack/plugins/code/public/actions/search.ts
@@ -5,21 +5,22 @@
  */
 
 import { createAction } from 'redux-actions';
-import { DocumentSearchResult, SearchScope } from '../../model';
+import { DocumentSearchResult, Repository, SearchScope } from '../../model';
 
 export interface DocumentSearchPayload {
   query: string;
   page?: string;
   languages?: string;
   repositories?: string;
+  repoScope?: string;
 }
 
 export interface RepositorySearchPayload {
   query: string;
 }
 
 export interface SearchOptions {
-  repoScopes: string[];
+  repoScope: Repository[];
 }
 
 // For document search page

diff --git a/x-pack/plugins/code/public/components/diff_page/diff.tsx b/x-pack/plugins/code/public/components/diff_page/diff.tsx
@@ -90,6 +90,7 @@ interface Props extends RouteComponentProps<{ resource: string; org: string; rep
   commit: CommitDiff | null;
   query: string;
   onSearchScopeChanged: (s: SearchScope) => void;
+  repoScope: string[];
 }
 
 export enum DiffLayout {
@@ -192,6 +193,7 @@ export class DiffPage extends React.Component<Props> {
     return (
       <div>
         <SearchBar
+          repoScope={this.props.repoScope}
           query={this.props.query}
           onSearchScopeChanged={this.props.onSearchScopeChanged}
         />
@@ -229,6 +231,7 @@ export class DiffPage extends React.Component<Props> {
 const mapStateToProps = (state: RootState) => ({
   commit: state.commit.commit,
   query: state.search.query,
+  repoScope: state.search.searchOptions.repoScope.map(r => r.uri),
 });
 
 const mapDispatchToProps = {

diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -77,6 +77,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   hasMoreCommits: boolean;
   loadingCommits: boolean;
   onSearchScopeChanged: (s: SearchScope) => void;
+  repoScope: string[];
   fetchMoreCommits(repoUri: string): void;
 }
 
@@ -224,6 +225,7 @@ class CodeContent extends React.PureComponent<Props> {
           routeParams={this.props.match.params}
           onSearchScopeChanged={this.props.onSearchScopeChanged}
           buttons={this.renderButtons()}
+          repoScope={this.props.repoScope}
         />
         {this.renderContent()}
       </Root>
@@ -373,6 +375,7 @@ const mapStateToProps = (state: RootState) => ({
   hasMoreCommits: hasMoreCommitsSelector(state),
   loadingCommits: state.file.loadingCommits,
   repoStatus: statusSelector(state),
+  repoScope: state.search.searchOptions.repoScope.map(r => r.uri),
 });
 
 const mapDispatchToProps = {

diff --git a/x-pack/plugins/code/public/components/main/search_bar.tsx b/x-pack/plugins/code/public/components/main/search_bar.tsx
@@ -24,6 +24,7 @@ const SearchBarContainer = styled.div`
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   onSearchScopeChanged: (s: SearchScope) => void;
+  repoScope: string[];
 }
 
 export class CodeSearchBar extends React.Component<Props> {
@@ -42,10 +43,14 @@ export class CodeSearchBar extends React.Component<Props> {
     if (query.trim().length === 0) {
       return;
     }
+    let qs = '';
+    if (this.props.repoScope) {
+      qs = `&repoScope=${this.props.repoScope.join(',')}`;
+    }
     if (this.state.searchScope === SearchScope.REPOSITORY) {
-      history.push(`/search?q=${query}&scope=${SearchScope.REPOSITORY}`);
+      history.push(`/search?q=${query}&scope=${SearchScope.REPOSITORY}${qs}`);
     } else {
-      history.push(`/search?q=${query}`);
+      history.push(`/search?q=${query}${qs}`);
     }
   };
 

diff --git a/x-pack/plugins/code/public/components/main/top_bar.tsx b/x-pack/plugins/code/public/components/main/top_bar.tsx
@@ -35,13 +35,17 @@ interface Props {
   routeParams: MainRouteParams;
   onSearchScopeChanged: (s: SearchScope) => void;
   buttons: React.ReactNode;
+  repoScope: string[];
 }
 
 export class TopBar extends React.Component<Props> {
   public render() {
     return (
       <TopBarContainer>
-        <SearchBar onSearchScopeChanged={this.props.onSearchScopeChanged} />
+        <SearchBar
+          onSearchScopeChanged={this.props.onSearchScopeChanged}
+          repoScope={this.props.repoScope}
+        />
         <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <Breadcrumb routeParams={this.props.routeParams} />

diff --git a/...plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/...plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`render correctly with empty query string 1`] = `
   searchLoading={false}
   searchOptions={
     Object {
-      "repoScopes": Array [],
+      "repoScope": Array [],
     }
   }
   searchScope="default"
@@ -645,7 +645,7 @@ exports[`render correctly with empty query string 1`] = `
                       searchLoading={false}
                       searchOptions={
                         Object {
-                          "repoScopes": Array [],
+                          "repoScope": Array [],
                         }
                       }
                     >
@@ -757,7 +757,7 @@ exports[`render correctly with input query string changed 1`] = `
       searchLoading={false}
       searchOptions={
         Object {
-          "repoScopes": Array [],
+          "repoScope": Array [],
         }
       }
       searchScope="default"
@@ -1400,7 +1400,7 @@ exports[`render correctly with input query string changed 1`] = `
                           searchLoading={false}
                           searchOptions={
                             Object {
-                              "repoScopes": Array [],
+                              "repoScope": Array [],
                             }
                           }
                         >

diff --git a/x-pack/plugins/code/public/components/query_bar/components/options.tsx b/x-pack/plugins/code/public/components/query_bar/components/options.tsx
@@ -15,16 +15,18 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiTextColor,
   EuiTitle,
 } from '@elastic/eui';
 import { EuiIcon } from '@elastic/eui';
 import { unique } from 'lodash';
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import { Repository } from '../../../../model';
 import { SearchOptions as ISearchOptions } from '../../../actions';
 
 const SelectedRepo = styled.div`
-  max-width: 60%;
+  max-width: 90%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -36,7 +38,7 @@ const Icon = styled(EuiIcon)`
 
 interface State {
   isFlyoutOpen: boolean;
-  repoScopes: any[];
+  repoScope: Repository[];
 }
 
 interface Props {
@@ -50,30 +52,35 @@ interface Props {
 export class SearchOptions extends Component<Props, State> {
   public state: State = {
     isFlyoutOpen: false,
-    repoScopes: this.props.searchOptions.repoScopes,
+    repoScope: this.props.searchOptions.repoScope,
   };
 
   public applyAndClose = () => {
-    this.props.saveSearchOptions({ repoScopes: this.state.repoScopes });
+    this.props.saveSearchOptions({ repoScope: this.state.repoScope });
     this.setState({ isFlyoutOpen: false });
   };
 
   public removeRepoScope = (r: string) => () => {
     this.setState(prevState => ({
-      repoScopes: prevState.repoScopes.filter(rs => rs !== r),
+      repoScope: prevState.repoScope.filter(rs => rs.uri !== r),
     }));
   };
 
   public render() {
     let optionsFlyout;
     if (this.state.isFlyoutOpen) {
-      const selectedRepos = this.state.repoScopes.map((r: string) => {
+      const selectedRepos = this.state.repoScope.map(r => {
         return (
-          <div key={r}>
+          <div key={r.uri}>
             <EuiPanel paddingSize="s">
-              <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-                <SelectedRepo>{r}</SelectedRepo>
-                <Icon type="cross" onClick={this.removeRepoScope(r)} />
+              <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
+                <SelectedRepo>
+                  <EuiText>
+                    <EuiTextColor color="subdued">{r.org}/</EuiTextColor>
+                    <b>{r.name}</b>
+                  </EuiText>
+                </SelectedRepo>
+                <Icon type="cross" onClick={this.removeRepoScope(r.uri)} />
               </EuiFlexGroup>
             </EuiPanel>
             <EuiSpacer size="s" />
@@ -98,9 +105,7 @@ export class SearchOptions extends Component<Props, State> {
               placeholder="Search to add repos"
               async={true}
               options={this.props.repoSearchResults.map(repo => ({
-                id: repo.name,
                 label: repo.name,
-                uri: repo.uri,
               }))}
               selectedOptions={[]}
               isLoading={this.props.searchLoading}
@@ -134,13 +139,18 @@ export class SearchOptions extends Component<Props, State> {
   }
 
   private onRepoSearchChange = (searchValue: string) => {
-    this.props.repositorySearch({ query: searchValue });
+    if (searchValue) {
+      this.props.repositorySearch({ query: searchValue });
+    }
   };
 
   private onRepoChange = (repos: any) => {
-    this.setState({
-      repoScopes: unique(repos.map((r: any) => r.uri)),
-    });
+    this.setState(prevState => ({
+      repoScope: unique([
+        ...prevState.repoScope,
+        ...repos.map((r: any) => this.props.repoSearchResults.find(rs => rs.name === r.label)),
+      ]),
+    }));
   };
 
   private toggleOptionsFlyout = () => {

diff --git a/x-pack/plugins/code/public/components/query_bar/components/query_bar.test.tsx b/x-pack/plugins/code/public/components/query_bar/components/query_bar.test.tsx
@@ -30,7 +30,7 @@ test('render correctly with empty query string', () => {
       saveSearchOptions={emptyFn}
       repoSearchResults={[]}
       searchLoading={false}
-      searchOptions={{ repoScopes: [] }}
+      searchOptions={{ repoScope: [] }}
       query=""
       disableAutoFocus={false}
       appName="mockapp"
@@ -85,7 +85,7 @@ test('render correctly with input query string changed', done => {
         saveSearchOptions={emptyFn}
         repoSearchResults={[]}
         searchLoading={false}
-        searchOptions={{ repoScopes: [] }}
+        searchOptions={{ repoScope: [] }}
         query="mockquery"
         disableAutoFocus={false}
         appName="mockapp"

diff --git a/x-pack/plugins/code/public/components/query_bar/components/query_bar.tsx b/x-pack/plugins/code/public/components/query_bar/components/query_bar.tsx
@@ -186,7 +186,11 @@ export class CodeQueryBar extends Component<Props, State> {
 
     const res = await Promise.all(
       this.props.suggestionProviders.map((provider: SuggestionsProvider) => {
-        return provider.getSuggestions(query, this.props.searchScope);
+        return provider.getSuggestions(
+          query,
+          this.props.searchScope,
+          this.props.searchOptions.repoScope.map(repo => repo.uri)
+        );
       })
     );
 
@@ -461,7 +465,7 @@ const mapStateToProps = (state: RootState) => ({
     : [],
   searchLoading: state.search.isLoading,
   searchScope: state.search.scope,
-  searchOptions: state.search.searchOptions || { repoScopes: [] },
+  searchOptions: state.search.searchOptions,
 });
 
 const mapDispatchToProps = {

diff --git a/x-pack/plugins/code/public/components/query_bar/suggestions/file_suggestions_provider.ts b/x-pack/plugins/code/public/components/query_bar/suggestions/file_suggestions_provider.ts
@@ -18,11 +18,19 @@ export class FileSuggestionsProvider extends AbstractSuggestionsProvider {
     return scope === SearchScope.DEFAULT || scope === SearchScope.FILE;
   }
 
-  protected async fetchSuggestions(query: string): Promise<AutocompleteSuggestionGroup> {
+  protected async fetchSuggestions(
+    query: string,
+    repoScope: string[]
+  ): Promise<AutocompleteSuggestionGroup> {
+    const queryParams: { q: string; repoScope?: string } = { q: query };
+    if (repoScope) {
+      const qs = repoScope.join('&repoScope=');
+      queryParams.repoScope = qs;
+    }
     const res = await kfetch({
       pathname: `../api/code/suggestions/doc`,
       method: 'get',
-      query: { q: query },
+      query: queryParams,
     });
     const suggestions = Array.from(res.results as SearchResultItem[])
       .slice(0, this.MAX_SUGGESTIONS_PER_GROUP)

diff --git a/x-pack/plugins/code/public/components/query_bar/suggestions/suggestions_provider.ts b/x-pack/plugins/code/public/components/query_bar/suggestions/suggestions_provider.ts
@@ -8,18 +8,23 @@ import { AutocompleteSuggestionGroup, AutocompleteSuggestionType } from '.';
 import { SearchScope } from '../../../../model';
 
 export interface SuggestionsProvider {
-  getSuggestions(query: string, scope: SearchScope): Promise<AutocompleteSuggestionGroup>;
+  getSuggestions(
+    query: string,
+    scope: SearchScope,
+    repoScope?: string[]
+  ): Promise<AutocompleteSuggestionGroup>;
 }
 
 export abstract class AbstractSuggestionsProvider implements SuggestionsProvider {
   protected MAX_SUGGESTIONS_PER_GROUP = 5;
 
   public async getSuggestions(
     query: string,
-    scope: SearchScope
+    scope: SearchScope,
+    repoScope?: string[]
   ): Promise<AutocompleteSuggestionGroup> {
     if (this.matchSearchScope(scope)) {
-      return await this.fetchSuggestions(query);
+      return await this.fetchSuggestions(query, repoScope);
     } else {
       // This is an abstract class. Do nothing here. You should override this.
       return new Promise<AutocompleteSuggestionGroup>((resolve, reject) => {
@@ -33,7 +38,10 @@ export abstract class AbstractSuggestionsProvider implements SuggestionsProvider
     }
   }
 
-  protected async fetchSuggestions(_: string): Promise<AutocompleteSuggestionGroup> {
+  protected async fetchSuggestions(
+    query: string,
+    repoScope?: string[]
+  ): Promise<AutocompleteSuggestionGroup> {
     // This is an abstract class. Do nothing here. You should override this.
     return new Promise<AutocompleteSuggestionGroup>((resolve, reject) => {
       resolve({

diff --git a/x-pack/plugins/code/public/components/query_bar/suggestions/symbol_suggestions_provider.ts b/x-pack/plugins/code/public/components/query_bar/suggestions/symbol_suggestions_provider.ts
@@ -23,11 +23,19 @@ export class SymbolSuggestionsProvider extends AbstractSuggestionsProvider {
     return scope === SearchScope.DEFAULT || scope === SearchScope.SYMBOL;
   }
 
-  protected async fetchSuggestions(query: string): Promise<AutocompleteSuggestionGroup> {
+  protected async fetchSuggestions(
+    query: string,
+    repoScope?: string[]
+  ): Promise<AutocompleteSuggestionGroup> {
+    const queryParams: { q: string; repoScope?: string } = { q: query };
+    if (repoScope) {
+      const qs = repoScope.join('&repoScope=');
+      queryParams.repoScope = qs;
+    }
     const res = await kfetch({
       pathname: `../api/code/suggestions/symbol`,
       method: 'get',
-      query: { q: query },
+      query: queryParams,
     });
     const suggestions = Array.from(res.symbols as DetailSymbolInformation[])
       .slice(0, this.MAX_SUGGESTIONS_PER_GROUP)