From 54e3c9fbca15b2d801b87e0bd314e18077be0a7c Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 31 Jul 2024 18:51:10 +0200
Subject: [PATCH 1/5] pagination

---
 .../buttons/sourcecontrolbuttons.tsx          |  4 +-
 libs/remix-ui/git/src/components/gitui.tsx    | 12 +++--
 .../git/src/components/panels/branches.tsx    | 54 +++++++++++++++----
 libs/remix-ui/git/src/lib/gitactions.ts       | 23 +++++---
 libs/remix-ui/git/src/lib/listeners.ts        | 12 ++---
 libs/remix-ui/git/src/state/actions.ts        |  2 +
 libs/remix-ui/git/src/types/index.ts          | 13 ++++-
 7 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx b/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx
index 250e44628c..ba9e10af21 100644
--- a/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx
+++ b/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 = () => {
diff --git a/libs/remix-ui/git/src/components/gitui.tsx b/libs/remix-ui/git/src/components/gitui.tsx
index f5d1460487..7072165169 100644
--- a/libs/remix-ui/git/src/components/gitui.tsx
+++ b/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 = {
diff --git a/libs/remix-ui/git/src/components/panels/branches.tsx b/libs/remix-ui/git/src/components/panels/branches.tsx
index 789550589e..30fde0168c 100644
--- a/libs/remix-ui/git/src/components/panels/branches.tsx
+++ b/libs/remix-ui/git/src/components/panels/branches.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Alert } from "react-bootstrap";
 import { gitActionsContext } from "../../state/context";
 import { remote } from "../../types";
 import GitUIButton from "../buttons/gituibutton";
@@ -8,39 +7,76 @@ import { LocalBranchDetails } from "./branches/localbranchdetails";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import { faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { branch } from "@remix-api";
+
+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
diff --git a/libs/remix-ui/git/src/lib/gitactions.ts b/libs/remix-ui/git/src/lib/gitactions.ts
index 1805289dfc..8d9cc4f97a 100644
--- a/libs/remix-ui/git/src/lib/gitactions.ts
+++ b/libs/remix-ui/git/src/lib/gitactions.ts
@@ -1,6 +1,6 @@
 import { ReadBlobResult, ReadCommitResult } from "isomorphic-git";
 import React from "react";
-import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences } from "../state/gitpayload";
+import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences, setGitLogCount, setTimestamp } from "../state/gitpayload";
 import { GitHubUser, branch, commitChange, gitActionDispatch, statusMatrixType, gitState, branchDifference, remote, gitLog, fileStatusResult, customGitApi, IGitApi, cloneInputType, fetchInputType, pullInputType, pushInputType, checkoutInput, rmInput, addInput, repository, userEmails, storage, gitMatomoEventTypes } from '../types';
 import { removeSlash } from "../utils";
 import { disableCallBacks, enableCallBacks } from "./listeners";
@@ -41,7 +41,7 @@ export const setPlugin = (p: Plugin, dispatcher: React.Dispatch<gitActionDispatc
 export const init = async () => {
   await sendToMatomo(gitMatomoEventTypes.INIT)
   await plugin.call('dgitApi', "init");
-  await gitlog();
+  dispatch(setTimestamp(Date.now()))
   await getBranches();
 }
 
@@ -81,13 +81,13 @@ export const getFileStatusMatrix = async (filepaths: string[]) => {
   dispatch(setLoading(false))
 }
 
-export const getCommits = async () => {
+export const getCommits = async (depth: number) => {
 
   try {
     const commits: ReadCommitResult[] = await plugin.call(
       'dgitApi',
       "log",
-      { ref: "HEAD" }
+      { ref: "HEAD", depth: depth }
     );
 
     return commits;
@@ -96,11 +96,12 @@ export const getCommits = async () => {
   }
 }
 
-export const gitlog = async () => {
+export const gitlog = async (depth: number) => {
+  console.log('gitlog start')
   dispatch(setLoading(true))
   let commits = []
   try {
-    commits = await getCommits()
+    commits = await getCommits(depth)
   } catch (e) {
   }
   dispatch(setCommits(commits))
@@ -108,6 +109,10 @@ export const gitlog = async () => {
   dispatch(setLoading(false))
 }
 
+export const setStateGitLogCount = async (count: number) => {
+  dispatch(setGitLogCount(count))
+}
+
 export const showCurrentBranch = async () => {
   try {
     const branch = await currentBranch();
@@ -342,7 +347,7 @@ export const fetch = async (input: fetchInputType) => {
   try {
     await plugin.call('dgitApi', 'fetch', input);
     if (!input.quiet) {
-      await gitlog()
+      dispatch(setTimestamp(Date.now()))
       await getBranches()
     }
   } catch (e: any) {
@@ -359,7 +364,7 @@ export const pull = async (input: pullInputType) => {
   await disableCallBacks()
   try {
     await plugin.call('dgitApi', 'pull', input)
-    await gitlog()
+    dispatch(setTimestamp(Date.now()))
   } catch (e: any) {
     console.log(e)
     await parseError(e)
@@ -393,6 +398,8 @@ const tokenWarning = async () => {
 
 const parseError = async (e: any) => {
   console.trace(e)
+  if(!e.message) return
+
   // if message conttains 401 Unauthorized, show token warning
   if (e.message.includes('401')) {
     await sendToMatomo(gitMatomoEventTypes.ERROR, ['401'])
diff --git a/libs/remix-ui/git/src/lib/listeners.ts b/libs/remix-ui/git/src/lib/listeners.ts
index a873b303f7..161bfd5af2 100644
--- a/libs/remix-ui/git/src/lib/listeners.ts
+++ b/libs/remix-ui/git/src/lib/listeners.ts
@@ -1,6 +1,6 @@
 
 import React from "react";
-import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails } from "../state/gitpayload";
+import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails, setTimestamp } from "../state/gitpayload";
 import { gitActionDispatch, gitUIPanels, storage } from "../types";
 import { Plugin } from "@remixproject/engine";
 import { getBranches, getFileStatusMatrix, loadGitHubUserFromToken, getRemotes, gitlog, setPlugin, setStorage } from "./gitactions";
@@ -72,7 +72,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       loadFiles()
     })
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -84,7 +84,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
 
   plugin.on('dgitApi', 'checkout', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -111,7 +111,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
   })
   plugin.on('dgitApi', 'commit', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     }, 10)
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -123,7 +123,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
   })
   plugin.on('dgitApi', 'branch', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -145,7 +145,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       getBranches()
     })
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
   })
   plugin.on('manager', 'pluginActivated', async (p: Profile<any>) => {
diff --git a/libs/remix-ui/git/src/state/actions.ts b/libs/remix-ui/git/src/state/actions.ts
index 6aa8b95bff..821c049cd0 100644
--- a/libs/remix-ui/git/src/state/actions.ts
+++ b/libs/remix-ui/git/src/state/actions.ts
@@ -44,6 +44,8 @@ export interface ActionPayloadTypes {
   CLEAR_LOG: void
   SET_USER_EMAILS: userEmails
   SET_STORAGE: storage
+  SET_TIMESTAMP: number
+  SET_GIT_LOG_COUNT: number
 }
 
 export interface Action<T extends keyof ActionPayloadTypes> {
diff --git a/libs/remix-ui/git/src/types/index.ts b/libs/remix-ui/git/src/types/index.ts
index 31e34db978..f3fd48e499 100644
--- a/libs/remix-ui/git/src/types/index.ts
+++ b/libs/remix-ui/git/src/types/index.ts
@@ -185,6 +185,8 @@ export type gitState = {
     gitHubScopes: string[]
     gitHubAccessToken: string
     log: gitLog[]
+    timestamp: number
+    gitLogCount: number
 }
 export type gitLog = {
     type: 'error' | 'warning' | 'info' | 'success',
@@ -304,7 +306,9 @@ export const defaultGitState: gitState = {
   userEmails: [] as userEmails,
   gitHubScopes: [],
   gitHubAccessToken: "",
-  log: []
+  log: [],
+  timestamp: 0,
+  gitLogCount: 22
 }
 
 export const defaultLoaderState: loaderState = {
@@ -494,4 +498,9 @@ export interface clearLogAction {
     type: string
 }
 
-export type gitActionDispatch = setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction
\ No newline at end of file
+export interface setTimeStampAction {
+    type: string,
+    payload: number
+}
+
+export type gitActionDispatch = setTimeStampAction | setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction

From 8c064680ee137b9d26e432a18503c3ac2915db47 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 31 Jul 2024 18:51:15 +0200
Subject: [PATCH 2/5] pagination

---
 .../git/src/components/panels/branches.tsx    |  3 +-
 .../git/src/components/panels/commits.tsx     |  9 +++--
 .../src/components/panels/remoteselect.tsx    | 34 +++++++++++++++----
 libs/remix-ui/git/src/state/context.tsx       |  3 +-
 libs/remix-ui/git/src/state/gitpayload.ts     | 14 ++++++++
 libs/remix-ui/git/src/state/gitreducer.tsx    | 13 ++++++-
 libs/remix-ui/git/src/types/index.ts          |  2 +-
 7 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/libs/remix-ui/git/src/components/panels/branches.tsx b/libs/remix-ui/git/src/components/panels/branches.tsx
index 30fde0168c..38804b57aa 100644
--- a/libs/remix-ui/git/src/components/panels/branches.tsx
+++ b/libs/remix-ui/git/src/components/panels/branches.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 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";
-import { branch } from "@remix-api";
 
 const pageLength = 5;
 
diff --git a/libs/remix-ui/git/src/components/panels/commits.tsx b/libs/remix-ui/git/src/components/panels/commits.tsx
index 8fa50a9d99..a7ed6d42e8 100644
--- a/libs/remix-ui/git/src/components/panels/commits.tsx
+++ b/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)
@@ -22,14 +20,15 @@ export const Commits = () => {
   };
 
   const loadNextPage = () => {
+    actions.setStateGitLogCount(context.gitLogCount + 5)
     actions.fetch({
       remote: null,
       ref: context.currentBranch,
       relative: true,
       depth: 5,
-      singleBranch: true
+      singleBranch: true,
+      quiet: true
     })
-
   }
 
   const getRemote = () => {
diff --git a/libs/remix-ui/git/src/components/panels/remoteselect.tsx b/libs/remix-ui/git/src/components/panels/remoteselect.tsx
index 1bff2867b9..8b2f6d526c 100644
--- a/libs/remix-ui/git/src/components/panels/remoteselect.tsx
+++ b/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
diff --git a/libs/remix-ui/git/src/state/context.tsx b/libs/remix-ui/git/src/state/context.tsx
index 4608406a7f..e403201dde 100644
--- a/libs/remix-ui/git/src/state/context.tsx
+++ b/libs/remix-ui/git/src/state/context.tsx
@@ -31,8 +31,9 @@ export interface gitActions {
     sendToGitLog: (message: gitLog) => Promise<void>
     clearGitLog: () => Promise<void>
     getFileStatusMatrix(filespaths:[]): Promise<void>
-    gitlog(): Promise<void>
+    gitlog(depth: number): Promise<void>
     init(): Promise<void>
+    setStateGitLogCount(count: number): Promise<void>
 }
 
 export const gitActionsContext = React.createContext<gitActions>(null)
diff --git a/libs/remix-ui/git/src/state/gitpayload.ts b/libs/remix-ui/git/src/state/gitpayload.ts
index 1c93a40a90..cf6063ffc3 100644
--- a/libs/remix-ui/git/src/state/gitpayload.ts
+++ b/libs/remix-ui/git/src/state/gitpayload.ts
@@ -231,3 +231,17 @@ export const setStoragePayload = (storage: storage) => {
     payload: storage
   }
 }
+
+export const setTimestamp = (timestamp: number) => {
+  return {
+    type: 'SET_TIMESTAMP',
+    payload: timestamp
+  }
+}
+
+export const setGitLogCount = (count: number) => {
+  return {
+    type: 'SET_GIT_LOG_COUNT',
+    payload: count
+  }
+}
diff --git a/libs/remix-ui/git/src/state/gitreducer.tsx b/libs/remix-ui/git/src/state/gitreducer.tsx
index 592360a94a..d256c6bf0a 100644
--- a/libs/remix-ui/git/src/state/gitreducer.tsx
+++ b/libs/remix-ui/git/src/state/gitreducer.tsx
@@ -215,6 +215,17 @@ export const gitReducer = (state: gitState = defaultGitState, action: Actions):
       ...state,
       storage: action.payload
     }
-
+  case 'SET_TIMESTAMP':
+    return {
+      ...state,
+      timestamp: action.payload
+    }
+  
+  case 'SET_GIT_LOG_COUNT':
+    return {
+      ...state,
+      gitLogCount: action.payload
+    }
   }
+
 }
diff --git a/libs/remix-ui/git/src/types/index.ts b/libs/remix-ui/git/src/types/index.ts
index f3fd48e499..f872203e79 100644
--- a/libs/remix-ui/git/src/types/index.ts
+++ b/libs/remix-ui/git/src/types/index.ts
@@ -21,7 +21,7 @@ export interface IGitApi {
         clone(input: cloneInputType): Promise<any>
         branches(input?: branchesInput): Promise<branch[]>,
         remotes(): Promise<remote[]>,
-        log(cmd: { ref: string }): Promise<ReadCommitResult[]>,
+        log(cmd: { ref: string, depth?: number }): Promise<ReadCommitResult[]>,
         remotecommits(input: remoteCommitsInputType): Promise<pagedCommits[]>
         fetch(input: fetchInputType): Promise<any>
         pull(input: pullInputType): Promise<any>

From 20fe46d7bf3c692a770523307be55450a910ac45 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 12 Aug 2024 16:58:09 +0200
Subject: [PATCH 3/5] fix loadnextpage

---
 libs/remix-ui/git/src/components/panels/commits.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/git/src/components/panels/commits.tsx b/libs/remix-ui/git/src/components/panels/commits.tsx
index a7ed6d42e8..ace0ae1c7d 100644
--- a/libs/remix-ui/git/src/components/panels/commits.tsx
+++ b/libs/remix-ui/git/src/components/panels/commits.tsx
@@ -19,9 +19,9 @@ export const Commits = () => {
     }
   };
 
-  const loadNextPage = () => {
-    actions.setStateGitLogCount(context.gitLogCount + 5)
-    actions.fetch({
+  const loadNextPage = async () => {
+    
+    await actions.fetch({
       remote: null,
       ref: context.currentBranch,
       relative: true,
@@ -29,6 +29,8 @@ export const Commits = () => {
       singleBranch: true,
       quiet: true
     })
+
+    await actions.setStateGitLogCount(context.gitLogCount + 5)
   }
 
   const getRemote = () => {

From 9351ea9c32b454df722f1b572c1b178bccf9a479 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 12 Aug 2024 17:38:28 +0200
Subject: [PATCH 4/5] lint

---
 libs/remix-ui/git/src/components/panels/commits.tsx | 2 +-
 libs/remix-ui/git/src/lib/gitactions.ts             | 2 +-
 libs/remix-ui/git/src/state/gitreducer.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/git/src/components/panels/commits.tsx b/libs/remix-ui/git/src/components/panels/commits.tsx
index ace0ae1c7d..b2acadbf9c 100644
--- a/libs/remix-ui/git/src/components/panels/commits.tsx
+++ b/libs/remix-ui/git/src/components/panels/commits.tsx
@@ -20,7 +20,7 @@ export const Commits = () => {
   };
 
   const loadNextPage = async () => {
-    
+
     await actions.fetch({
       remote: null,
       ref: context.currentBranch,
diff --git a/libs/remix-ui/git/src/lib/gitactions.ts b/libs/remix-ui/git/src/lib/gitactions.ts
index 8d9cc4f97a..aa6997877a 100644
--- a/libs/remix-ui/git/src/lib/gitactions.ts
+++ b/libs/remix-ui/git/src/lib/gitactions.ts
@@ -398,7 +398,7 @@ const tokenWarning = async () => {
 
 const parseError = async (e: any) => {
   console.trace(e)
-  if(!e.message) return
+  if (!e.message) return
 
   // if message conttains 401 Unauthorized, show token warning
   if (e.message.includes('401')) {
diff --git a/libs/remix-ui/git/src/state/gitreducer.tsx b/libs/remix-ui/git/src/state/gitreducer.tsx
index d256c6bf0a..a44fc91b39 100644
--- a/libs/remix-ui/git/src/state/gitreducer.tsx
+++ b/libs/remix-ui/git/src/state/gitreducer.tsx
@@ -220,7 +220,7 @@ export const gitReducer = (state: gitState = defaultGitState, action: Actions):
       ...state,
       timestamp: action.payload
     }
-  
+
   case 'SET_GIT_LOG_COUNT':
     return {
       ...state,

From 997d6a76b801a9b622544f9b62c7d36ad0033846 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 14 Aug 2024 14:39:38 +0200
Subject: [PATCH 5/5] add test

---
 .../src/tests/dgit_github.test.ts             | 62 +++++++++++++++++++
 .../components/navigation/branchedetails.tsx  |  2 +-
 .../components/navigation/loaderindicator.tsx |  2 +-
 .../panels/branches/localbranchdetails.tsx    |  2 +-
 .../panels/branches/remotebranchedetails.tsx  |  2 +-
 .../git/src/components/panels/clone.tsx       |  2 +-
 .../git/src/components/panels/commits.tsx     |  2 +-
 .../panels/commits/commitsummary.tsx          |  2 +-
 8 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_github.test.ts b/apps/remix-ide-e2e/src/tests/dgit_github.test.ts
index da38485359..9b67794bab 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_github.test.ts
+++ b/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)
+            })
+    }
 }
diff --git a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx b/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
index 2407e5a071..9de954fc94 100644
--- a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
+++ b/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>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/loaderindicator.tsx b/libs/remix-ui/git/src/components/navigation/loaderindicator.tsx
index 8c13e101b3..ee5e44aff0 100644
--- a/libs/remix-ui/git/src/components/navigation/loaderindicator.tsx
+++ b/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>
   );
 };
 
diff --git a/libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx b/libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx
index 2b996a3d34..da592229b3 100644
--- a/libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx
+++ b/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>)
diff --git a/libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx b/libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx
index d80e999ee1..da97dea0f2 100644
--- a/libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx
+++ b/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>)
diff --git a/libs/remix-ui/git/src/components/panels/clone.tsx b/libs/remix-ui/git/src/components/panels/clone.tsx
index e7719fe68e..ab3ed7d6cb 100644
--- a/libs/remix-ui/git/src/components/panels/clone.tsx
+++ b/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>
diff --git a/libs/remix-ui/git/src/components/panels/commits.tsx b/libs/remix-ui/git/src/components/panels/commits.tsx
index b2acadbf9c..db2907a1da 100644
--- a/libs/remix-ui/git/src/components/panels/commits.tsx
+++ b/libs/remix-ui/git/src/components/panels/commits.tsx
@@ -57,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>}
     </>
diff --git a/libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx b/libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx
index bff01b4712..bd1e3a7dbd 100644
--- a/libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx
+++ b/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 || ""}