[Code] Implement the new designed repository search page (#29400)

elastic · Jan 30, 2019 · 990615e · 990615e
1 parent dbb0730
commit 990615e
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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;
   }
 }