[Code] Add search bar to admin page (#36091) (#36366)

* [Code] Add search bar to admin page

* [Code] refactoring the search_bar component

x-pack/plugins/code/public/components/admin_page/admin.tsx

@@ -9,9 +9,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import url from 'url';
-import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs } from '@elastic/eui';
-import { Repository } from '../../../model';
+import { EuiTab, EuiTabs } from '@elastic/eui';
+import { Repository, SearchScope } from '../../../model';
+import { changeSearchScope, SearchOptions } from '../../actions';
 import { RootState } from '../../reducers';
+import { SearchBar } from '../search_bar';
 import { EmptyProject } from './empty_project';
 import { LanguageSeverTab } from './language_server_tab';
 import { ProjectTab } from './project_tab';
@@ -23,6 +25,9 @@ enum AdminTabs {
 }
 
 interface Props extends RouteComponentProps {
+  searchOptions: SearchOptions;
+  query: string;
+  onSearchScopeChanged: (s: SearchScope) => void;
   repositories: Repository[];
   repositoryLoading: boolean;
 }
@@ -45,6 +50,9 @@ class AdminPage extends React.PureComponent<Props, State> {
       tab: getTab() as AdminTabs,
     };
   }
+
+  public searchBar: any = null;
+
   public tabs = [
     {
       id: AdminTabs.projects,
@@ -114,19 +122,39 @@ class AdminPage extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <EuiFlexGroup direction="row">
-        <EuiFlexItem className="codeContainer__adminWrapper">
-          {this.renderTabs()}
-          {this.renderTabContent()}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <div className="codeContainer__root">
+        <div className="codeContainer__rootInner">
+          <div className="codeContainer__adminWrapper">
+            <SearchBar
+              repoScope={this.props.searchOptions.repoScope.map(r => r.uri)}
+              query={this.props.query}
+              onSearchScopeChanged={this.props.onSearchScopeChanged}
+              ref={element => (this.searchBar = element)}
+            />
+            <div className="codeContainer__adminMain">
+              {this.renderTabs()}
+              {this.renderTabContent()}
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 }
 
 const mapStateToProps = (state: RootState) => ({
+  ...state.search,
   repositories: state.repository.repositories,
   repositoryLoading: state.repository.loading,
 });
 
-export const Admin = withRouter(connect(mapStateToProps)(AdminPage));
+const mapDispatchToProps = {
+  onSearchScopeChanged: changeSearchScope,
+};
+
+export const Admin = withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(AdminPage)
+);

x-pack/plugins/code/public/components/diff_page/diff.tsx

@@ -14,8 +14,7 @@ import { CommitDiff, FileDiff } from '../../../common/git_diff';
 import { SearchScope } from '../../../model';
 import { changeSearchScope } from '../../actions';
 import { RootState } from '../../reducers';
-import { SearchBar } from '../search_page/search_bar';
-import { ShortcutsProvider } from '../shortcuts';
+import { SearchBar } from '../search_bar';
 import { DiffEditor } from './diff_editor';
 
 const COMMIT_ID_LENGTH = 16;
@@ -222,7 +221,6 @@ export class DiffPage extends React.Component<Props> {
           </EuiFlexGroup>
         </Container>
         <Container>{diffs}</Container>
-        <ShortcutsProvider />
       </div>
     );
   }

x-pack/plugins/code/public/components/main/search_bar.tsx

@@ -28,6 +28,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   defaultSearchScope?: Repository;
 }
 
+// TODO(mengwei): refactor this with the SearchBar in ../search_bar/
 export class CodeSearchBar extends React.Component<Props> {
   public state = {
     searchScope: SearchScope.DEFAULT,

x-pack/plugins/code/public/components/search_bar/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './search_bar';

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

@@ -11,7 +11,7 @@ import url from 'url';
 import { SearchScope } from '../../../model';
 import { SearchScopeText } from '../../common/types';
 import { history } from '../../utils/url';
-import { Shortcut } from '../shortcuts';
+import { ShortcutsProvider, Shortcut } from '../shortcuts';
 
 import {
   AutocompleteSuggestion,
@@ -68,6 +68,7 @@ export class SearchBar extends React.PureComponent<Props> {
 
     return (
       <div className="codeSearchbar__container">
+        <ShortcutsProvider />
         <Shortcut
           keyCode="p"
           help={SearchScopeText[SearchScope.REPOSITORY]}

x-pack/plugins/code/public/components/search_page/search.tsx

@@ -16,11 +16,10 @@ import { changeSearchScope, SearchOptions } from '../../actions';
 import { RootState } from '../../reducers';
 import { history } from '../../utils/url';
 import { ProjectItem } from '../admin_page/project_item';
-import { ShortcutsProvider } from '../shortcuts';
+import { SearchBar } from '../search_bar';
 import { CodeResult } from './code_result';
 import { EmptyPlaceholder } from './empty_placeholder';
 import { Pagination } from './pagination';
-import { SearchBar } from './search_bar';
 import { SideBar } from './side_bar';
 
 interface Props {
@@ -198,7 +197,6 @@ class SearchPage extends React.PureComponent<Props, State> {
     return (
       <div className="codeContainer__root">
         <div className="codeContainer__rootInner">
-          <ShortcutsProvider />
           <SideBar
             query={this.props.query}
             scope={scope}
@@ -214,7 +212,7 @@ class SearchPage extends React.PureComponent<Props, State> {
               repoScope={this.props.searchOptions.repoScope.map(r => r.uri)}
               query={this.props.query}
               onSearchScopeChanged={this.props.onSearchScopeChanged}
-              ref={element => (this.searchBar = element)}
+              ref={(element: any) => (this.searchBar = element)}
             />
             {mainComp}
           </div>

x-pack/plugins/code/public/style/_layout.scss

@@ -1,6 +1,13 @@
-.euiFlexItem.codeContainer__adminWrapper {
-  padding: $euiSize $euiSizeXL;
+.codeContainer__adminWrapper {
+  width: 100%;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.codeContainer__adminMain {
+  padding: $euiSize $euiSizeXL;
 }
 
 .codeContainer__root {