Skip to content

Commit b87bfc7

Browse files
bunsenstraatbunsenstraat
authored
Merge pull request #5060 from ethereum/paginationforgit
Paginationforgit
2 parents 9f0f83f + 997d6a7 commit b87bfc7

File tree

19 files changed

+221
-53
lines changed

19 files changed

+221
-53
lines changed

‎apps/remix-ide-e2e/src/tests/dgit_github.test.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,4 +310,66 @@ module.exports = {
310310
}
311311
})
312312
},
313+
// pagination test
314+
'clone repo #group3': function (browser: NightwatchBrowser) {
315+
browser.
316+
clickLaunchIcon('dgit')
317+
.waitForElementVisible('*[data-id="clone-url"]')
318+
.setValue('*[data-id="clone-url"]', 'https://github.com/ethereum/awesome-remix')
319+
.waitForElementVisible('*[data-id="clone-branch"]')
320+
.setValue('*[data-id="clone-branch"]', 'master')
321+
.waitForElementVisible('*[data-id="clone-btn"]')
322+
.click('*[data-id="clone-btn"]')
323+
.clickLaunchIcon('filePanel')
324+
.waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME.md"]')
325+
},
326+
'Update settings for git #group3': function (browser: NightwatchBrowser) {
327+
browser.
328+
clickLaunchIcon('dgit')
329+
.setValue('*[data-id="githubToken"]', 'invalidtoken')
330+
.setValue('*[data-id="gitubUsername"]', 'git')
331+
.setValue('*[data-id="githubEmail"]', '[email protected]')
332+
.click('*[data-id="saveGitHubCredentials"]')
333+
.modalFooterOKClick('github-credentials-error')
334+
},
335+
'check the commits panel for pagination #group3': function (browser: NightwatchBrowser) {
336+
browser
337+
.waitForElementVisible('*[data-id="commits-panel"]')
338+
.click('*[data-id="commits-panel"]')
339+
.elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
340+
console.log('Number of commit-summary elements:', (result.value as any).length);
341+
browser.assert.ok((result.value as any).length == 1)
342+
})
343+
},
344+
'load more commits #group3': function (browser: NightwatchBrowser) {
345+
browser
346+
.waitForElementVisible('*[data-id="load-more-commits"]')
347+
.click('*[data-id="load-more-commits"]')
348+
.waitForElementVisible('*[data-id="loader-indicator"]')
349+
.waitForElementNotPresent('*[data-id="loader-indicator"]')
350+
.elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
351+
console.log('Number of commit-summary elements:', (result.value as any).length);
352+
browser.assert.ok((result.value as any).length > 2)
353+
})
354+
},
355+
'load more branches from remote #group3': function (browser: NightwatchBrowser) {
356+
browser
357+
.click('*[data-id="branches-panel"]')
358+
.waitForElementVisible({
359+
selector: '//*[@data-id="branches-panel-content-remote-branches"]',
360+
locateStrategy: 'xpath'
361+
})
362+
.elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
363+
console.log('Number of branches elements:', (result.value as any).length);
364+
browser.assert.ok((result.value as any).length == 1)
365+
})
366+
.waitForElementVisible('*[data-id="remote-sync-origin"]')
367+
.click('*[data-id="remote-sync-origin"]')
368+
.waitForElementVisible('*[data-id="loader-indicator"]')
369+
.waitForElementNotPresent('*[data-id="loader-indicator"]')
370+
.elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
371+
console.log('Number of branches elements:', (result.value as any).length);
372+
browser.assert.ok((result.value as any).length > 2)
373+
})
374+
}
313375
}

‎libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CustomTooltip } from "@remix-ui/helper"
44
import React, { useEffect, useState } from "react"
55
import { FormattedMessage } from "react-intl"
66
import { gitActionsContext } from "../../state/context"
7-
import { branch, gitMatomoEventTypes, remote } from "../../types"
7+
import { branch, defaultGitState, gitMatomoEventTypes, remote } from "../../types"
88
import { gitPluginContext } from "../gitui"
99
import GitUIButton from "./gituibutton"
1010
import { syncStateContext } from "./sourceControlBase"
@@ -54,7 +54,7 @@ export const SourceControlButtons = () => {
5454
const refresh = async() => {
5555
await sendToMatomo(gitMatomoEventTypes.REFRESH)
5656
await actions.getFileStatusMatrix(null)
57-
await actions.gitlog()
57+
actions.setStateGitLogCount(defaultGitState.gitLogCount)
5858
}
5959

6060
const buttonsDisabled = () => {

‎libs/remix-ui/git/src/components/gitui.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useEffect, useReducer, useState } from 'react'
2-
import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog } from '../lib/gitactions'
1+
import React, { useEffect, useReducer, useState, useContext } from 'react'
2+
import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog, setStateGitLogCount } from '../lib/gitactions'
33
import { loadFiles, setCallBacks } from '../lib/listeners'
44
import { openDiff, openFile, saveToken, sendToMatomo, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
55
import { gitActionsContext, pluginActionsContext } from '../state/context'
@@ -70,6 +70,11 @@ export const GitUI = (props: IGitUi) => {
7070

7171
}, [appLoaded])
7272

73+
useEffect(() => {
74+
if (!appLoaded) return
75+
gitlog(gitState.gitLogCount)
76+
}, [gitState.timestamp, gitState.gitLogCount])
77+
7378
useEffect(() => {
7479
if (!appLoaded) return
7580
async function checkconfig() {
@@ -155,7 +160,8 @@ export const GitUI = (props: IGitUi) => {
155160
clearGitLog,
156161
getFileStatusMatrix,
157162
gitlog,
158-
init
163+
init,
164+
setStateGitLogCount
159165
}
160166

161167
const pluginActionsProviderValue = {

‎libs/remix-ui/git/src/components/navigation/branchedetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
6464
return (
6565
<>
6666
<div className="d-flex flex-row w-100 mb-2 mt-2">
67-
<div data-id={`branches-${context.currentBranch.name === branch.name ? 'current-' : ''}branch-${branch.name}`} onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
67+
<div data-type='branches-branch' data-id={`branches-${context.currentBranch.name === branch.name ? 'current-' : ''}branch-${branch.name}`} onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
6868
{
6969
activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
7070
}

‎libs/remix-ui/git/src/components/navigation/loaderindicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const LoaderIndicator = ({ type, isLoadingCondition }: LoaderIndicatorProps) =>
1313
const isLoading = loading || isLoadingCondition
1414
if (!isLoading) return null
1515
return (
16-
<i style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
16+
<i data-id='loader-indicator' style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
1717
);
1818
};
1919

‎libs/remix-ui/git/src/components/panels/branches.tsx‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,81 @@
11
import React, { useEffect, useState } from "react";
2-
import { Alert } from "react-bootstrap";
32
import { gitActionsContext } from "../../state/context";
4-
import { remote } from "../../types";
3+
import { branch, remote } from "../../types";
54
import GitUIButton from "../buttons/gituibutton";
65
import { gitPluginContext } from "../gitui";
76
import { LocalBranchDetails } from "./branches/localbranchdetails";
87
import { RemoteBranchDetails } from "./branches/remotebranchedetails";
98
import { faSync } from "@fortawesome/free-solid-svg-icons";
109
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
1110

11+
const pageLength = 5;
12+
1213
export const Branches = () => {
1314
const context = React.useContext(gitPluginContext)
1415
const actions = React.useContext(gitActionsContext)
16+
const [localBranchPage, setLocalBranchPage] = useState(1);
17+
const [remoteBranchPage, setRemoteBranchPage] = useState(1);
1518
const [newBranch, setNewBranch] = useState({ value: "" });
19+
const [localBranches, setLocalBranches] = useState<branch[]>([]);
20+
const [remoteBranches, setRemoteBranches] = useState<branch[]>([]);
21+
const [currentBranch, setCurrentBranch] = useState<branch | null>(null);
1622

1723
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
1824
setNewBranch({ value: e.currentTarget.value });
1925
};
2026

27+
useEffect(() => {
28+
if (context.branches) {
29+
30+
if (context.currentBranch && context.currentBranch.name !== '') {
31+
setCurrentBranch(context.branches.filter((branch, index) => !branch.remote && branch.name === context.currentBranch.name)[0]);
32+
setLocalBranches(context.branches.filter((branch, index) => !branch.remote && branch.name !== context.currentBranch.name));
33+
} else {
34+
setLocalBranches(context.branches.filter((branch, index) => !branch.remote));
35+
}
36+
if (context.upstream) {
37+
setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name));
38+
} else {
39+
setRemoteBranches([]);
40+
}
41+
} else {
42+
setLocalBranches([]);
43+
setRemoteBranches([]);
44+
}
45+
}, [context.branches, context.defaultRemote, context.upstream, context.currentBranch]);
46+
2147
return (
2248
<>
2349
<div data-id='branches-panel-content' className="pt-2">
2450
{context.branches && context.branches.length ?
2551
<div>
2652
<div data-id='branches-panel-content-local-branches'>
27-
<label className="text-uppercase">local branches</label>
28-
{context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
53+
<label className="text-uppercase">local branches </label><div className="badge badge-info badge-pill ml-2">{localBranches.length}</div>
54+
{currentBranch && <LocalBranchDetails branch={currentBranch}></LocalBranchDetails>}
55+
{context.branches && localBranches.slice(0, localBranchPage * pageLength).map((branch, index) => {
2956
return (
3057
<LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
3158
);
3259
})}
60+
{context.branches && localBranches.length > localBranchPage * pageLength && <GitUIButton className="btn btn-sm" onClick={() => {
61+
setLocalBranchPage(localBranchPage + 1)
62+
}}>Show more</GitUIButton>}
3363
</div>
3464
<hr />
3565
{context.upstream ?
3666
<>
3767
<div data-id='branches-panel-content-remote-branches'>
38-
<label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
39-
{context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
40-
return (
41-
<RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
42-
);
43-
})}
68+
<label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label><div className="badge badge-info badge-pill ml-2">{remoteBranches.length}</div>
69+
{context.branches && remoteBranches
70+
.slice(0, remoteBranchPage * pageLength)
71+
.map((branch, index) => {
72+
return (
73+
<RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
74+
);
75+
})}
76+
{context.branches && remoteBranches.length > remoteBranchPage * pageLength && <><GitUIButton className="btn btn-sm" onClick={() => {
77+
setRemoteBranchPage(remoteBranchPage + 1);
78+
}}>Show more</GitUIButton><br></br></>}
4479
<GitUIButton data-id={`remote-sync-${context.upstream.name}`} className="btn btn-sm" onClick={async () => {
4580
await actions.fetch({
4681
remote: context.upstream

‎libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
8181
})}
8282
</div>
8383
</div>
84-
{hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
84+
{hasNextPage && <GitUIButton data-id='load-more-local-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
8585
</>
8686
</Accordion.Collapse>
8787
</Accordion>)

‎libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
107107
})}
108108

109109
</div>
110-
{hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
110+
{hasNextPage && <GitUIButton data-id='load-more-remote-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
111111
</>
112112
</Accordion.Collapse>
113113
</Accordion>)

‎libs/remix-ui/git/src/components/panels/clone.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const Clone = (props: CloneProps) => {
7878
<FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
7979
</InputGroup>
8080

81-
<input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
81+
<input name='clonebranch' data-id="clone-branch" onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
8282
<GitUIButton disabledCondition={!cloneUrl} data-id='clone-btn' className='btn btn-primary mt-1 w-100' onClick={async () => {
8383
clone()
8484
}}>clone</GitUIButton>

‎libs/remix-ui/git/src/components/panels/commits.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { checkout, ReadCommitResult } from "isomorphic-git";
1+
import { ReadCommitResult } from "isomorphic-git";
22
import React from "react";
33
import { gitActionsContext } from "../../state/context";
44
import GitUIButton from "../buttons/gituibutton";
55
import { gitPluginContext } from "../gitui";
6-
import LoaderIndicator from "../navigation/loaderindicator";
76
import { BranchDifferences } from "./branches/branchdifferences";
87
import { CommitDetails } from "./commits/commitdetails";
9-
import { CommitSummary } from "./commits/commitsummary";
108

119
export const Commits = () => {
1210
const [hasNextPage, setHasNextPage] = React.useState(true)
@@ -21,15 +19,18 @@ export const Commits = () => {
2119
}
2220
};
2321

24-
const loadNextPage = () => {
25-
actions.fetch({
22+
const loadNextPage = async () => {
23+
24+
await actions.fetch({
2625
remote: null,
2726
ref: context.currentBranch,
2827
relative: true,
2928
depth: 5,
30-
singleBranch: true
29+
singleBranch: true,
30+
quiet: true
3131
})
3232

33+
await actions.setStateGitLogCount(context.gitLogCount + 5)
3334
}
3435

3536
const getRemote = () => {
@@ -56,7 +57,7 @@ export const Commits = () => {
5657
})}
5758
</div>
5859
</div>
59-
{hasNextPage && <GitUIButton disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
60+
{hasNextPage && <GitUIButton data-id='load-more-commits' disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
6061
</>
6162
: <div className="text-muted">No commits</div>}
6263
</>

0 commit comments

Comments
 (0)