Paginationforgit

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

@@ -310,4 +310,66 @@ module.exports = {
                 }
             })
     },
+    // pagination test
+    'clone repo #group3': function (browser: NightwatchBrowser) {
+        browser.
+            clickLaunchIcon('dgit')
+            .waitForElementVisible('*[data-id="clone-url"]')
+            .setValue('*[data-id="clone-url"]', 'https://github.com/ethereum/awesome-remix')
+            .waitForElementVisible('*[data-id="clone-branch"]')
+            .setValue('*[data-id="clone-branch"]', 'master')
+            .waitForElementVisible('*[data-id="clone-btn"]')
+            .click('*[data-id="clone-btn"]')
+            .clickLaunchIcon('filePanel')
+            .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME.md"]')
+    },
+    'Update settings for git #group3': function (browser: NightwatchBrowser) {
+        browser.
+            clickLaunchIcon('dgit')
+            .setValue('*[data-id="githubToken"]', 'invalidtoken')
+            .setValue('*[data-id="gitubUsername"]', 'git')
+            .setValue('*[data-id="githubEmail"]', 'git@example.com')
+            .click('*[data-id="saveGitHubCredentials"]')
+            .modalFooterOKClick('github-credentials-error')
+    },
+    'check the commits panel for pagination #group3': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-id="commits-panel"]')
+            .click('*[data-id="commits-panel"]')
+            .elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
+                console.log('Number of commit-summary elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length == 1)
+            })
+    },
+    'load more commits #group3': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-id="load-more-commits"]')
+            .click('*[data-id="load-more-commits"]')
+            .waitForElementVisible('*[data-id="loader-indicator"]')
+            .waitForElementNotPresent('*[data-id="loader-indicator"]')
+            .elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
+                console.log('Number of commit-summary elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length > 2)
+            })
+    },
+    'load more branches from remote #group3': function (browser: NightwatchBrowser) {
+        browser
+            .click('*[data-id="branches-panel"]')
+            .waitForElementVisible({
+                selector: '//*[@data-id="branches-panel-content-remote-branches"]',
+                locateStrategy: 'xpath'
+            })
+            .elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
+                console.log('Number of branches elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length == 1)
+            })
+            .waitForElementVisible('*[data-id="remote-sync-origin"]')
+            .click('*[data-id="remote-sync-origin"]')
+            .waitForElementVisible('*[data-id="loader-indicator"]')
+            .waitForElementNotPresent('*[data-id="loader-indicator"]')
+            .elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
+                console.log('Number of branches elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length > 2)
+            })
+    }
 }

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

@@ -4,7 +4,7 @@ import { CustomTooltip } from "@remix-ui/helper"
 import React, { useEffect, useState } from "react"
 import { FormattedMessage } from "react-intl"
 import { gitActionsContext } from "../../state/context"
-import { branch, gitMatomoEventTypes, remote } from "../../types"
+import { branch, defaultGitState, gitMatomoEventTypes, remote } from "../../types"
 import { gitPluginContext } from "../gitui"
 import GitUIButton from "./gituibutton"
 import { syncStateContext } from "./sourceControlBase"
@@ -54,7 +54,7 @@ export const SourceControlButtons = () => {
   const refresh = async() => {
     await sendToMatomo(gitMatomoEventTypes.REFRESH)
     await actions.getFileStatusMatrix(null)
-    await actions.gitlog()
+    actions.setStateGitLogCount(defaultGitState.gitLogCount)
   }
 
   const buttonsDisabled = () => {

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useReducer, useState } from 'react'
-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'
+import React, { useEffect, useReducer, useState, useContext } from 'react'
+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'
 import { loadFiles, setCallBacks } from '../lib/listeners'
 import { openDiff, openFile, saveToken, sendToMatomo, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
 import { gitActionsContext, pluginActionsContext } from '../state/context'
@@ -70,6 +70,11 @@ export const GitUI = (props: IGitUi) => {
 
   }, [appLoaded])
 
+  useEffect(() => {
+    if (!appLoaded) return
+    gitlog(gitState.gitLogCount)
+  }, [gitState.timestamp, gitState.gitLogCount])
+
   useEffect(() => {
     if (!appLoaded) return
     async function checkconfig() {
@@ -155,7 +160,8 @@ export const GitUI = (props: IGitUi) => {
     clearGitLog,
     getFileStatusMatrix,
     gitlog,
-    init
+    init,
+    setStateGitLogCount
   }
 
   const pluginActionsProviderValue = {

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

@@ -64,7 +64,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
   return (
     <>
       <div className="d-flex flex-row w-100 mb-2 mt-2">
-        <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'>
+        <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'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }

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

@@ -13,7 +13,7 @@ const LoaderIndicator = ({ type, isLoadingCondition }: LoaderIndicatorProps) =>
   const isLoading = loading || isLoadingCondition
   if (!isLoading) return null
   return (
-    <i style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
+    <i data-id='loader-indicator' style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
   );
 };
 

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

@@ -1,46 +1,81 @@
 import React, { useEffect, useState } from "react";
-import { Alert } from "react-bootstrap";
 import { gitActionsContext } from "../../state/context";
-import { remote } from "../../types";
+import { branch, remote } from "../../types";
 import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
 import { LocalBranchDetails } from "./branches/localbranchdetails";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import { faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+const pageLength = 5;
+
 export const Branches = () => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
+  const [localBranchPage, setLocalBranchPage] = useState(1);
+  const [remoteBranchPage, setRemoteBranchPage] = useState(1);
   const [newBranch, setNewBranch] = useState({ value: "" });
+  const [localBranches, setLocalBranches] = useState<branch[]>([]);
+  const [remoteBranches, setRemoteBranches] = useState<branch[]>([]);
+  const [currentBranch, setCurrentBranch] = useState<branch | null>(null);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewBranch({ value: e.currentTarget.value });
   };
 
+  useEffect(() => {
+    if (context.branches) {
+
+      if (context.currentBranch && context.currentBranch.name !== '') {
+        setCurrentBranch(context.branches.filter((branch, index) => !branch.remote && branch.name === context.currentBranch.name)[0]);
+        setLocalBranches(context.branches.filter((branch, index) => !branch.remote && branch.name !== context.currentBranch.name));
+      } else {
+        setLocalBranches(context.branches.filter((branch, index) => !branch.remote));
+      }
+      if (context.upstream) {
+        setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name));
+      } else {
+        setRemoteBranches([]);
+      }
+    } else {
+      setLocalBranches([]);
+      setRemoteBranches([]);
+    }
+  }, [context.branches, context.defaultRemote, context.upstream, context.currentBranch]);
+
   return (
     <>
       <div data-id='branches-panel-content' className="pt-2">
         {context.branches && context.branches.length ?
           <div>
             <div data-id='branches-panel-content-local-branches'>
-              <label className="text-uppercase">local branches</label>
-              {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
+              <label className="text-uppercase">local branches </label><div className="badge badge-info badge-pill ml-2">{localBranches.length}</div>
+              {currentBranch && <LocalBranchDetails branch={currentBranch}></LocalBranchDetails>}
+              {context.branches && localBranches.slice(0, localBranchPage * pageLength).map((branch, index) => {
                 return (
                   <LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
                 );
               })}
+              {context.branches && localBranches.length > localBranchPage * pageLength && <GitUIButton className="btn btn-sm" onClick={() => {
+                setLocalBranchPage(localBranchPage + 1)
+              }}>Show more</GitUIButton>}
             </div>
             <hr />
             {context.upstream ?
               <>
                 <div data-id='branches-panel-content-remote-branches'>
-                  <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
-                  {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
-                    return (
-                      <RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
-                    );
-                  })}
+                  <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>
+                  {context.branches && remoteBranches
+                    .slice(0, remoteBranchPage * pageLength)
+                    .map((branch, index) => {
+                      return (
+                        <RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
+                      );
+                    })}
+                  {context.branches && remoteBranches.length > remoteBranchPage * pageLength && <><GitUIButton className="btn btn-sm" onClick={() => {
+                    setRemoteBranchPage(remoteBranchPage + 1);
+                  }}>Show more</GitUIButton><br></br></>}
                   <GitUIButton data-id={`remote-sync-${context.upstream.name}`} className="btn btn-sm" onClick={async () => {
                     await actions.fetch({
                       remote: context.upstream

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

@@ -81,7 +81,7 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
             })}
           </div>
         </div>
-        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-local-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

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

@@ -107,7 +107,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
           })}
 
         </div>
-        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-remote-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

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

@@ -78,7 +78,7 @@ export const Clone = (props: CloneProps) => {
           <FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
         </InputGroup>
 
-        <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
+        <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" />
         <GitUIButton disabledCondition={!cloneUrl} data-id='clone-btn' className='btn btn-primary mt-1 w-100' onClick={async () => {
           clone()
         }}>clone</GitUIButton>

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

@@ -1,12 +1,10 @@
-import { checkout, ReadCommitResult } from "isomorphic-git";
+import { ReadCommitResult } from "isomorphic-git";
 import React from "react";
 import { gitActionsContext } from "../../state/context";
 import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
-import LoaderIndicator from "../navigation/loaderindicator";
 import { BranchDifferences } from "./branches/branchdifferences";
 import { CommitDetails } from "./commits/commitdetails";
-import { CommitSummary } from "./commits/commitsummary";
 
 export const Commits = () => {
   const [hasNextPage, setHasNextPage] = React.useState(true)
@@ -21,15 +19,18 @@ export const Commits = () => {
     }
   };
 
-  const loadNextPage = () => {
-    actions.fetch({
+  const loadNextPage = async () => {
+
+    await actions.fetch({
       remote: null,
       ref: context.currentBranch,
       relative: true,
       depth: 5,
-      singleBranch: true
+      singleBranch: true,
+      quiet: true
     })
 
+    await actions.setStateGitLogCount(context.gitLogCount + 5)
   }
 
   const getRemote = () => {
@@ -56,7 +57,7 @@ export const Commits = () => {
             })}
           </div>
         </div>
-        {hasNextPage && <GitUIButton disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-commits' disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
         </>
         : <div className="text-muted">No commits</div>}
     </>

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

@@ -61,7 +61,7 @@ export const CommitSummary = (props: CommitSummaryProps) => {
 
   return (
     <>
-      <div data-id={`commit-summary-${removeLineBreaks(commit.commit.message)}-${isAheadOfRepo ? 'ahead' : ''}`} className="long-and-truncated ml-2">
+      <div data-type='commit-summary' data-id={`commit-summary-${removeLineBreaks(commit.commit.message)}-${isAheadOfRepo ? 'ahead' : ''}`} className="long-and-truncated ml-2">
         {commit.commit.message}
       </div>
       {commit.commit.author.name || ""}

libs/remix-ui/git/src/components/panels/remoteselect.tsx

@@ -1,11 +1,10 @@
-import { branch, checkout, ReadCommitResult } from "isomorphic-git";
 import React, { useEffect, useState } from "react";
 import { gitActionsContext } from "../../state/context";
 import { gitPluginContext } from "../gitui";
 import { default as dateFormat } from "dateformat";
 import { RemotesDetailsNavigation } from "../navigation/remotesdetails";
 import { Accordion } from "react-bootstrap";
-import { remote } from "../../types";
+import { branch, remote } from "../../types";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import GitUIButton from "../buttons/gituibutton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,27 +15,48 @@ export interface RemoteSelectProps {
   openDefault: boolean
 }
 
+const pageLength = 5;
+
 export const Remoteselect = (props: RemoteSelectProps) => {
   const { remote, openDefault } = props;
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [activePanel, setActivePanel] = useState<string>("");
+  const [remoteBranchPage, setRemoteBranchPage] = useState(1);
+  const [remoteBranches, setRemoteBranches] = useState<branch[]>([]);
 
   useEffect(() => {
     setActivePanel(openDefault ? "0" : "")
   }, [openDefault])
 
+  useEffect(() => {
+    if (context.branches) {
+      if (remote && remote.name) {
+        setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name))
+      } else {
+        setRemoteBranches([]);
+      }
+    } else {
+      setRemoteBranches([]);
+    }
+  }, [context.branches, context.defaultRemote, context.upstream, remote]);
+
   return (
     <>
       <Accordion activeKey={activePanel} defaultActiveKey=''>
         <RemotesDetailsNavigation callback={setActivePanel} eventKey="0" activePanel={activePanel} remote={remote} />
         <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
           <>
-            {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name).map((branch, index) => {
-              return (
-                <RemoteBranchDetails allowCheckout={false} key={index} branch={branch}></RemoteBranchDetails>
-              );
-            })}
+            {context.branches && remoteBranches
+              .slice(0, remoteBranchPage * pageLength)
+              .map((branch, index) => {
+                return (
+                  <RemoteBranchDetails allowCheckout={false} key={index} branch={branch}></RemoteBranchDetails>
+                );
+              })}
+            {context.branches && remoteBranches.length > remoteBranchPage * pageLength && <><GitUIButton className="btn btn-sm" onClick={() => {
+              setRemoteBranchPage(remoteBranchPage + 1);
+            }}>Show more</GitUIButton><br></br></>}
             <GitUIButton data-id={`remote-sync-${remote.name}`} className="btn btn-sm" onClick={async () => {
               await actions.fetch({
                 remote