diff --git a/x-pack/package.json b/x-pack/package.json
index 36fca944ad3e70f..15885797ce08509 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -78,7 +78,6 @@
"@types/proper-lockfile": "^3.0.0",
"@types/react": "^16.8.0",
"@types/react-dom": "^16.8.0",
- "@types/react-infinite-scroller": "^1.2.0",
"@types/react-redux": "^6.0.6",
"@types/react-router-dom": "^4.3.1",
"@types/react-test-renderer": "^16.8.0",
@@ -288,7 +287,6 @@
"react-dom": "^16.8.0",
"react-dropzone": "^4.2.9",
"react-fast-compare": "^2.0.4",
- "react-infinite-scroller": "^1.2.4",
"react-markdown": "^3.4.1",
"react-markdown-renderer": "^1.4.0",
"react-portal": "^3.2.0",
diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx
index cfe26c281a844ca..e253023393cdcd5 100644
--- a/x-pack/plugins/code/public/components/main/commit_history.tsx
+++ b/x-pack/plugins/code/public/components/main/commit_history.tsx
@@ -5,6 +5,7 @@
*/
import {
+ EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
@@ -15,8 +16,13 @@ import {
import _ from 'lodash';
import moment from 'moment';
import React from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
import { CommitInfo } from '../../../model/commit';
import { CommitLink } from '../diff_page/commit_link';
+import { RootState } from '../../reducers';
+import { hasMoreCommitsSelector, treeCommitsSelector } from '../../selectors';
+import { fetchMoreCommits } from '../../actions';
const COMMIT_ID_LENGTH = 8;
@@ -75,20 +81,29 @@ export const CommitHistoryLoading = () => (
);
-export const CommitHistory = (props: {
+export const PageButtons = (props: { loading: boolean; disabled: boolean; onClick: () => void }) => (
+
+
+
+ More
+
+
+
+);
+
+export const CommitHistoryComponent = (props: {
commits: CommitInfo[];
repoUri: string;
header: React.ReactNode;
- hideLoading?: boolean;
+ loadingCommits?: boolean;
+ showPagination?: boolean;
+ hasMoreCommit?: boolean;
+ fetchMoreCommits: any;
}) => {
- if (!props.commits) {
- return (
-
-
Commits
- {!props.hideLoading && }
-
- );
- }
const commits = _.groupBy(props.commits, commit => moment(commit.updated).format('YYYYMMDD'));
const commitDates = Object.keys(commits).sort((a, b) => b.localeCompare(a)); // sort desc
const commitList = commitDates.map(cd => (
@@ -103,6 +118,30 @@ export const CommitHistory = (props: {
{props.header}
{commitList}
+ {!props.showPagination && props.loadingCommits &&
}
+ {props.showPagination && (
+
props.fetchMoreCommits(props.repoUri)}
+ loading={props.loadingCommits}
+ />
+ )}
);
};
+
+const mapStateToProps = (state: RootState) => ({
+ file: state.file.file,
+ commits: treeCommitsSelector(state) || [],
+ loadingCommits: state.file.loadingCommits,
+ hasMoreCommit: hasMoreCommitsSelector(state),
+});
+
+const mapDispatchToProps = {
+ fetchMoreCommits,
+};
+export const CommitHistory = connect(
+ mapStateToProps,
+ mapDispatchToProps
+ // @ts-ignore
+)(CommitHistoryComponent);
diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
index c9b0c9c3323c2b5..b34fdaf0dcd6e90 100644
--- a/x-pack/plugins/code/public/components/main/content.tsx
+++ b/x-pack/plugins/code/public/components/main/content.tsx
@@ -7,7 +7,6 @@
import { EuiButton, EuiButtonGroup, EuiFlexGroup, EuiTitle } from '@elastic/eui';
import 'github-markdown-css/github-markdown.css';
import React from 'react';
-import InfiniteScroll from 'react-infinite-scroller';
import Markdown from 'react-markdown';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
@@ -23,12 +22,7 @@ import {
Repository,
} from '../../../model';
import { CommitInfo, ReferenceInfo } from '../../../model/commit';
-import {
- changeSearchScope,
- FetchFileResponse,
- fetchMoreCommits,
- SearchOptions,
-} from '../../actions';
+import { changeSearchScope, FetchFileResponse, SearchOptions } from '../../actions';
import { MainRouteParams, PathTypes } from '../../common/types';
import { RepoState, RepoStatus, RootState } from '../../reducers';
import {
@@ -41,7 +35,7 @@ import {
import { encodeRevisionString, history } from '../../utils/url';
import { Editor } from '../editor/editor';
import { CloneStatus } from './clone_status';
-import { CommitHistory, CommitHistoryLoading } from './commit_history';
+import { CommitHistory } from './commit_history';
import { Directory } from './directory';
import { ErrorPanel } from './error_panel';
import { NotFound } from './not_found';
@@ -58,8 +52,8 @@ interface Props extends RouteComponentProps {
hasMoreCommits: boolean;
loadingCommits: boolean;
onSearchScopeChanged: (s: SearchScope) => void;
+ repoScope: string[];
searchOptions: SearchOptions;
- fetchMoreCommits(repoUri: string): void;
currentRepository?: Repository;
}
const LANG_MD = 'markdown';
@@ -278,7 +272,7 @@ class CodeContent extends React.PureComponent {
return this.renderProgress();
}
- const { file, commits, match, tree, hasMoreCommits, loadingCommits } = this.props;
+ const { file, commits, match, tree } = this.props;
const { path, pathType, resource, org, repo, revision } = match.params;
const repoUri = `${resource}/${org}/${repo}`;
switch (pathType) {
@@ -362,24 +356,15 @@ class CodeContent extends React.PureComponent {
case PathTypes.commits:
return (
- !loadingCommits && this.props.fetchMoreCommits(repoUri)}
- hasMore={hasMoreCommits}
- useWindow={false}
- loader={}
- >
-
- Commit History
-
- }
- />
-
+
+ Commit History
+
+ }
+ showPagination={true}
+ />
);
}
@@ -401,7 +386,6 @@ const mapStateToProps = (state: RootState) => ({
});
const mapDispatchToProps = {
- fetchMoreCommits,
onSearchScopeChanged: changeSearchScope,
};
diff --git a/yarn.lock b/yarn.lock
index d55a687b621f1f5..51ccb20e5579d7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3403,13 +3403,6 @@
dependencies:
"@types/react" "*"
-"@types/react-infinite-scroller@^1.2.0":
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz#1cd747ef8f50d3c883e375c0491a906e5436fcb2"
- integrity sha512-64bpbqdSgtmy1zSZ2AQoFzguwZO7TyKjqJRTEnfNMCAQbnrX90kz+rYufZyY9CmzhwpXMwRO8xR9fMQnbYUkgQ==
- dependencies:
- "@types/react" "*"
-
"@types/react-intl@^2.3.15":
version "2.3.17"
resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"
@@ -21049,13 +21042,6 @@ react-hotkeys@2.0.0-pre4:
dependencies:
prop-types "^15.6.1"
-react-infinite-scroller@^1.2.4:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
- integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
- dependencies:
- prop-types "^15.5.8"
-
react-input-autosize@^2.1.2, react-input-autosize@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"