From 990615ed41ac9ac5d574bbc34ea3f18050c34520 Mon Sep 17 00:00:00 2001
From: Mengwei Ding <mengwei.ding@gmail.com>
Date: Thu, 31 Jan 2019 01:17:15 +0800
Subject: [PATCH] [Code] Implement the new designed repository search page
 (#29400)

---
 x-pack/plugins/code/model/search.ts           |  3 +
 .../components/admin_page/project_item.tsx    | 80 ++++++++++---------
 .../components/admin_page/project_tab.tsx     |  2 +-
 .../search_page/repository_item.tsx           | 24 ------
 .../public/components/search_page/search.tsx  | 16 +++-
 .../server/search/repository_search_client.ts |  9 ++-
 6 files changed, 65 insertions(+), 69 deletions(-)
 delete mode 100644 x-pack/plugins/code/public/components/search_page/repository_item.tsx

diff --git a/x-pack/plugins/code/model/search.ts b/x-pack/plugins/code/model/search.ts
index ff846d66dfd96..b02a61949510a 100644
--- a/x-pack/plugins/code/model/search.ts
+++ b/x-pack/plugins/code/model/search.ts
@@ -64,6 +64,9 @@ export interface SearchResult {
 
 export interface RepositorySearchResult extends SearchResult {
   repositories: Repository[];
+  from?: number;
+  page?: number;
+  totalPage?: number;
 }
 
 export interface SymbolSearchResult extends SearchResult {
diff --git a/x-pack/plugins/code/public/components/admin_page/project_item.tsx b/x-pack/plugins/code/public/components/admin_page/project_item.tsx
index a4d625d50b7c7..fc6aff146d3fa 100644
--- a/x-pack/plugins/code/public/components/admin_page/project_item.tsx
+++ b/x-pack/plugins/code/public/components/admin_page/project_item.tsx
@@ -44,19 +44,19 @@ const stateColor = {
 
 class CodeProjectItem extends React.PureComponent<{
   project: Repository;
-  isAdmin: boolean;
-  status: RepoStatus;
-  deleteRepo: (uri: string) => void;
-  indexRepo: (uri: string) => void;
-  initRepoCommand: (uri: string) => void;
-  openSettings: (uri: string, url: string) => void;
+  enableManagement: boolean;
+  status?: RepoStatus;
+  deleteRepo?: (uri: string) => void;
+  indexRepo?: (uri: string) => void;
+  initRepoCommand?: (uri: string) => void;
+  openSettings?: (uri: string, url: string) => void;
 }> {
   public render() {
-    const { project, status } = this.props;
+    const { project, status, enableManagement } = this.props;
     const { name, org, nextUpdateTimestamp, uri, url } = project;
-    const onClickDelete = () => this.props.deleteRepo(uri);
-    const onClickIndex = () => this.props.indexRepo(uri);
-    const onClickSettings = () => this.props.openSettings(uri, url);
+    const onClickDelete = () => this.props.deleteRepo && this.props.deleteRepo(uri);
+    const onClickIndex = () => this.props.indexRepo && this.props.indexRepo(uri);
+    const onClickSettings = () => this.props.openSettings && this.props.openSettings(uri, url);
     let footer = null;
     let disableRepoLink = false;
     let hasError = false;
@@ -89,6 +89,37 @@ class CodeProjectItem extends React.PureComponent<{
 
     const Panel = hasError ? ErrorProjectItemPanel : ProjectItemPanel;
 
+    const projectManagement = (
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="none">
+          <EuiFlexItem grow={false}>
+            <div className="code-project-button" onClick={onClickSettings} role="button">
+              <EuiIcon type="gear" />
+              <EuiText size="xs" color="subdued">
+                Settings
+              </EuiText>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <div className="code-project-button" onClick={onClickIndex} role="button">
+              <EuiIcon type="indexSettings" />
+              <EuiText size="xs" color="subdued">
+                Index
+              </EuiText>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <div className="code-project-button" onClick={onClickDelete} role="button">
+              <EuiIcon type="trash" color="danger" />
+              <EuiText size="xs" color="subdued">
+                Delete
+              </EuiText>
+            </div>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    );
+
     return (
       <Panel>
         {this.renderProgress()}
@@ -108,34 +139,7 @@ class CodeProjectItem extends React.PureComponent<{
               </a>
             </EuiText>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="none">
-              <EuiFlexItem grow={false}>
-                <div className="code-project-button" onClick={onClickSettings} role="button">
-                  <EuiIcon type="gear" />
-                  <EuiText size="xs" color="subdued">
-                    Settings
-                  </EuiText>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <div className="code-project-button" onClick={onClickIndex} role="button">
-                  <EuiIcon type="indexSettings" />
-                  <EuiText size="xs" color="subdued">
-                    Index
-                  </EuiText>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <div className="code-project-button" onClick={onClickDelete} role="button">
-                  <EuiIcon type="trash" color="danger" />
-                  <EuiText size="xs" color="subdued">
-                    Delete
-                  </EuiText>
-                </div>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+          {enableManagement && projectManagement}
         </EuiFlexGroup>
       </Panel>
     );
diff --git a/x-pack/plugins/code/public/components/admin_page/project_tab.tsx b/x-pack/plugins/code/public/components/admin_page/project_tab.tsx
index e5c2529dff307..5a9caa4ae4bb2 100644
--- a/x-pack/plugins/code/public/components/admin_page/project_tab.tsx
+++ b/x-pack/plugins/code/public/components/admin_page/project_tab.tsx
@@ -167,7 +167,7 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
         key={repo.uri}
         project={repo}
         status={status[repo.uri]}
-        isAdmin={isAdmin}
+        enableManagement={isAdmin}
       />
     ));
 
diff --git a/x-pack/plugins/code/public/components/search_page/repository_item.tsx b/x-pack/plugins/code/public/components/search_page/repository_item.tsx
deleted file mode 100644
index fcedf2aa9e6de..0000000000000
--- a/x-pack/plugins/code/public/components/search_page/repository_item.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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.
- */
-
-import { EuiPanel, EuiTitle } from '@elastic/eui';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-
-export const RepoItem = (props: any) => (
-  <EuiPanel>
-    <EuiTitle size="xs">
-      <h2>
-        <Link to={`/${props.uri}`}>{props.uri}</Link>
-      </h2>
-    </EuiTitle>
-  </EuiPanel>
-);
-
-export const ScopeSelectorContainer = styled.div`
-  text-align: center;
-`;
diff --git a/x-pack/plugins/code/public/components/search_page/search.tsx b/x-pack/plugins/code/public/components/search_page/search.tsx
index 17d690744ab96..634f67b4a3930 100644
--- a/x-pack/plugins/code/public/components/search_page/search.tsx
+++ b/x-pack/plugins/code/public/components/search_page/search.tsx
@@ -15,11 +15,11 @@ import { DocumentSearchResult, SearchScope } from '../../../model';
 import { changeSearchScope } from '../../actions';
 import { RootState } from '../../reducers';
 import { history } from '../../utils/url';
+import { ProjectItem } from '../admin_page/project_item';
 import { ShortcutsProvider } from '../shortcuts';
 import { CodeResult } from './code_result';
 import { EmptyPlaceholder } from './empty_placeholder';
 import { Pagination } from './pagination';
-import { RepoItem } from './repository_item';
 import { SearchBar } from './search_bar';
 import { SideBar } from './side_bar';
 
@@ -140,16 +140,26 @@ class SearchPage extends React.PureComponent<Props, State> {
       repositorySearchResults &&
       repositorySearchResults.total > 0
     ) {
-      const { repositories: repos } = repositorySearchResults;
+      const { repositories: repos, from, total } = repositorySearchResults;
       const resultComps =
         repos &&
         repos.map((repo: any) => (
           <EuiFlexItem key={repo.uri}>
-            <RepoItem uri={repo.uri} />
+            <ProjectItem key={repo.uri} project={repo} enableManagement={false} />
           </EuiFlexItem>
         ));
+      const to = from + repos.length;
+      const statsComp = (
+        <EuiTitle size="m">
+          <h1>
+            Showing {from + 1} - {to} of {total} results.
+          </h1>
+        </EuiTitle>
+      );
       mainComp = (
         <MainContentContainer>
+          {statsComp}
+          <EuiSpacer />
           <RepositoryResultContainer>{resultComps}</RepositoryResultContainer>
         </MainContentContainer>
       );
diff --git a/x-pack/plugins/code/server/search/repository_search_client.ts b/x-pack/plugins/code/server/search/repository_search_client.ts
index 3e49af33db08a..ae7b1cdd1a671 100644
--- a/x-pack/plugins/code/server/search/repository_search_client.ts
+++ b/x-pack/plugins/code/server/search/repository_search_client.ts
@@ -65,11 +65,14 @@ export class RepositorySearchClient extends AbstractSearchClient {
         const repo: Repository = hit._source[RepositoryReservedField];
         return repo;
       });
-    const result: RepositorySearchResult = {
+    const total = rawRes.hits.total.value;
+    return {
       repositories: repos,
       took: rawRes.took,
-      total: rawRes.hits.total.value,
+      total,
+      from,
+      page: req.page,
+      totalPage: Math.ceil(total / resultsPerPage),
     };
-    return result;
   }
 }