feature(code/frontend): search filter default repo options (#35202)

Author: WangQianliang

x-pack/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap

@@ -39,6 +39,7 @@ const Icon = styled(EuiIcon)`
 interface State {
   isFlyoutOpen: boolean;
   repoScope: Repository[];
+  query: string;
 }
 
 interface Props {
@@ -47,10 +48,12 @@ interface Props {
   repoSearchResults: any[];
   searchLoading: boolean;
   searchOptions: ISearchOptions;
+  defaultRepoOptions: Repository[];
 }
 
 export class SearchOptions extends Component<Props, State> {
   public state: State = {
+    query: '',
     isFlyoutOpen: false,
     repoScope: this.props.searchOptions.repoScope,
   };
@@ -109,9 +112,15 @@ export class SearchOptions extends Component<Props, State> {
             <EuiComboBox
               placeholder="Search to add repos"
               async={true}
-              options={this.props.repoSearchResults.map(repo => ({
-                label: repo.name,
-              }))}
+              options={
+                this.state.query
+                  ? this.props.repoSearchResults.map(repo => ({
+                      label: repo.name,
+                    }))
+                  : this.props.defaultRepoOptions.map(repo => ({
+                      label: repo.name,
+                    }))
+              }
               selectedOptions={[]}
               isLoading={this.props.searchLoading}
               onChange={this.onRepoChange}
@@ -144,6 +153,7 @@ export class SearchOptions extends Component<Props, State> {
   }
 
   private onRepoSearchChange = (searchValue: string) => {
+    this.setState({ query: searchValue });
     if (searchValue) {
       this.props.repositorySearch({ query: searchValue });
     }
@@ -153,7 +163,11 @@ export class SearchOptions extends Component<Props, State> {
     this.setState(prevState => ({
       repoScope: unique([
         ...prevState.repoScope,
-        ...repos.map((r: any) => this.props.repoSearchResults.find(rs => rs.name === r.label)),
+        ...repos.map((r: any) =>
+          [...this.props.repoSearchResults, ...this.props.defaultRepoOptions].find(
+            rs => rs.name === r.label
+          )
+        ),
       ]),
     }));
   };

x-pack/plugins/code/public/components/query_bar/components/options.tsx

@@ -40,6 +40,7 @@ test('render correctly with empty query string', () => {
       onSelect={emptyFn}
       onSearchScopeChanged={emptyFn}
       searchScope={SearchScope.DEFAULT}
+      defaultRepoOptions={[]}
     />
   );
   expect(toJson(queryBarComp)).toMatchSnapshot();
@@ -100,6 +101,7 @@ test('render correctly with input query string changed', done => {
         onSelect={emptyFn}
         onSearchScopeChanged={emptyFn}
         searchScope={SearchScope.DEFAULT}
+        defaultRepoOptions={[]}
       />
     </MemoryRouter>
   );

x-pack/plugins/code/public/components/query_bar/components/query_bar.test.tsx

@@ -17,7 +17,7 @@ import {
 import { matchPairs } from '../lib/match_pairs';
 import { SuggestionsComponent } from './typeahead/suggestions_component';
 
-import { SearchScope } from '../../../../model';
+import { SearchScope, Repository } from '../../../../model';
 import { SearchScopePlaceholderText } from '../../../common/types';
 import { RootState } from '../../../reducers';
 import {
@@ -55,6 +55,7 @@ interface Props {
   searchLoading: boolean;
   searchScope: SearchScope;
   searchOptions: ISearchOptions;
+  defaultRepoOptions: Repository[];
 }
 
 interface State {
@@ -460,6 +461,7 @@ export class CodeQueryBar extends Component<Props, State> {
                       role="textbox"
                     />
                     <SearchOptions
+                      defaultRepoOptions={this.props.defaultRepoOptions}
                       repositorySearch={this.props.repositorySearch}
                       saveSearchOptions={this.props.saveSearchOptions}
                       repoSearchResults={this.props.repoSearchResults}
@@ -494,6 +496,7 @@ const mapStateToProps = (state: RootState) => ({
   searchLoading: state.search.isScopeSearchLoading,
   searchScope: state.search.scope,
   searchOptions: state.search.searchOptions,
+  defaultRepoOptions: state.repository.repositories.slice(0, 5),
 });
 
 const mapDispatchToProps = {

x-pack/plugins/code/public/components/query_bar/components/query_bar.tsx

@@ -26,6 +26,7 @@ import {
   Match,
   resetRepoTree,
   revealPosition,
+  fetchRepos,
 } from '../actions';
 import { loadRepo, loadRepoFailed, loadRepoSuccess } from '../actions/status';
 import { PathTypes } from '../common/types';
@@ -137,6 +138,8 @@ export function* watchLoadRepo() {
 }
 
 function* handleMainRouteChange(action: Action<Match>) {
+  // in source view page, we need repos as default repo scope options when no query input
+  yield put(fetchRepos());
   const { location } = action.payload!;
   const search = location.search.startsWith('?') ? location.search.substring(1) : location.search;
   const queryParams = queryString.parse(search);