feat: get ahead/behind commits and show count

electron/app/git/git.ts

@@ -73,7 +73,7 @@ export async function fetchGitRepo(localPath: string) {
       branches: [...localBranches.all, ...remoteBranchSummary.all],
       currentBranch: localBranches.current || remoteBranchSummary.current,
       branchMap: {},
-      commits: [],
+      commits: {ahead: 0, behind: 0},
       hasRemoteRepo: false,
     };
 
@@ -105,10 +105,16 @@ export async function fetchGitRepo(localPath: string) {
   }
 
   try {
-    const commits = (await git.raw('cherry', '-v')).split('\n').filter(el => el);
-    gitRepo.commits = commits;
+    const [aheadCommits, behindCommits] = (
+      await git.raw('rev-list', '--left-right', '--count', `${gitRepo.currentBranch}...origin/${gitRepo.currentBranch}`)
+    )
+      .trim()
+      .split('\t');
+
+    gitRepo.commits.ahead = parseInt(aheadCommits, 10);
+    gitRepo.commits.behind = parseInt(behindCommits, 10);
   } catch (e) {
-    gitRepo.commits = [];
+    return gitRepo;
   }
 
   return gitRepo;
@@ -214,9 +220,18 @@ export async function setRemote(localPath: string, remoteURL: string) {
   await git.fetch();
 }
 
-export async function getCommits(localPath: string) {
+export async function getCommits(localPath: string, branchName: string) {
   const git: SimpleGit = simpleGit({baseDir: localPath});
 
-  const commits = (await git.raw('cherry', '-v')).split('\n').filter(el => el);
-  return commits;
+  try {
+    const [aheadCommits, behindCommits] = (
+      await git.raw('rev-list', '--left-right', '--count', `${branchName}...origin/${branchName}`)
+    )
+      .trim()
+      .split('\t');
+
+    return {aheadCommits, behindCommits};
+  } catch (e) {
+    return {aheadCommits: 0, behindCommits: 0};
+  }
 }

electron/app/git/ipc.ts

@@ -113,7 +113,7 @@ ipcMain.on('git.getRemotePath', async (event, localPath: string) => {
   event.sender.send('git.getRemotePath.result', result);
 });
 
-ipcMain.on('git.getCommits', async (event, localPath: string) => {
-  const result = await getCommits(localPath);
+ipcMain.on('git.getCommits', async (event, payload: {localPath: string; branchName: string}) => {
+  const result = await getCommits(payload.localPath, payload.branchName);
   event.sender.send('git.getCommits.result', result);
 });

src/components/organisms/GitPane/BottomActions.styled.tsx

@@ -33,4 +33,19 @@ export const PublishBranchButton = styled(Dropdown.Button)`
 
 export const PushButton = styled(RawButton)`
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > span {
+    margin-right: 10px;
+  }
+`;
+
+export const PushPullContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  margin-right: 4px;
 `;

src/components/organisms/GitPane/BottomActions.tsx

@@ -3,7 +3,7 @@ import {useMeasure} from 'react-use';
 
 import {Menu, Tooltip} from 'antd';
 
-import {DownOutlined} from '@ant-design/icons';
+import {ArrowDownOutlined, ArrowUpOutlined, DownOutlined} from '@ant-design/icons';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
 import {
@@ -45,7 +45,7 @@ const BottomActions: React.FC = () => {
       return true;
     }
 
-    return Boolean(!gitRepo.commits.length);
+    return Boolean(!gitRepo.commits.ahead && !gitRepo.commits.behind);
   }, [gitRepo]);
 
   const publishHandler = useCallback(async () => {
@@ -102,6 +102,10 @@ const BottomActions: React.FC = () => {
     setPushPublishLoading(false);
   };
 
+  if (!gitRepo) {
+    return null;
+  }
+
   return (
     <S.BottomActionsContainer ref={bottomActionsRef}>
       <Tooltip
@@ -130,22 +134,34 @@ const BottomActions: React.FC = () => {
           type="primary"
           overlay={<Menu items={menuItems} />}
           onClick={publishHandler}
-          disabled={!gitRepo?.hasRemoteRepo}
+          disabled={!gitRepo.hasRemoteRepo}
         >
           Publish branch
         </S.PublishBranchButton>
       ) : (
         <Tooltip
           mouseEnterDelay={TOOLTIP_DELAY}
-          title={isPushDisabled ? GitPushDisabledTooltip : <GitPushEnabledTooltip commits={gitRepo?.commits || []} />}
+          title={
+            isPushDisabled ? GitPushDisabledTooltip : <GitPushEnabledTooltip commitsNumber={gitRepo.commits.ahead} />
+          }
         >
           <S.PushButton
-            disabled={!gitRepo?.hasRemoteRepo || isPushDisabled}
+            disabled={!gitRepo.hasRemoteRepo || isPushDisabled}
             loading={pushPublishLoading}
             type="primary"
             onClick={pushHandler}
           >
-            Push
+            Sync
+            {gitRepo.commits.behind > 0 ? (
+              <S.PushPullContainer>
+                {gitRepo.commits.behind} <ArrowDownOutlined />
+              </S.PushPullContainer>
+            ) : null}
+            {gitRepo.commits.ahead > 0 ? (
+              <S.PushPullContainer>
+                {gitRepo.commits.ahead} <ArrowUpOutlined />
+              </S.PushPullContainer>
+            ) : null}
           </S.PushButton>
         </Tooltip>
       )}

src/constants/tooltips.tsx

@@ -96,6 +96,6 @@ export const GitPushDisabledTooltip = 'There are no commits to push';
 export const GitCommitEnabledTooltip = ({branchName}: {branchName: string}) => (
   <div>Commit staged files to {branchName}</div>
 );
-export const GitPushEnabledTooltip = ({commits}: {commits: string[]}) => (
-  <div>Push {commits.length} commits to remote</div>
+export const GitPushEnabledTooltip = ({commitsNumber}: {commitsNumber: number}) => (
+  <div>Push {commitsNumber} commits to remote</div>
 );

src/models/git.ts

@@ -8,7 +8,10 @@ export type GitRepo = {
   currentBranch: string;
   branches: string[];
   branchMap: Record<string, GitBranch>;
-  commits: string[];
+  commits: {
+    ahead: number; // number of commits on local but not on remote ( push )
+    behind: number; // number of commits on remote but not on local ( pull )
+  };
   hasRemoteRepo: boolean;
 };
 

src/redux/git/git.slice.ts

@@ -13,6 +13,7 @@ export const gitSlice = createSlice({
     clearRepo: (state: Draft<GitSliceState>) => {
       state.repo = undefined;
     },
+
     setSelectedItem: (state: Draft<GitSliceState>, action: PayloadAction<GitChangedFile>) => {
       state.selectedItem = action.payload;
     },
@@ -21,6 +22,13 @@ export const gitSlice = createSlice({
       state.changedFiles = action.payload;
     },
 
+    setCommits: (state: Draft<GitSliceState>, action: PayloadAction<{ahead: number; behind: number}>) => {
+      if (state.repo) {
+        state.repo.commits.ahead = action.payload.ahead;
+        state.repo.commits.behind = action.payload.behind;
+      }
+    },
+
     setCurrentBranch: (state: Draft<GitSliceState>, action: PayloadAction<string>) => {
       if (state.repo) {
         state.repo.currentBranch = action.payload;
@@ -35,12 +43,6 @@ export const gitSlice = createSlice({
       state.repo.hasRemoteRepo = action.payload;
     },
 
-    setLocalCommits: (state: Draft<GitSliceState>, action: PayloadAction<string[]>) => {
-      if (state.repo) {
-        state.repo.commits = action.payload;
-      }
-    },
-
     setRepo: (state: Draft<GitSliceState>, action: PayloadAction<GitRepo | undefined>) => {
       state.repo = action.payload;
     },
@@ -54,13 +56,6 @@ export const gitSlice = createSlice({
   },
 });
 
-export const {
-  clearRepo,
-  setChangedFiles,
-  setCurrentBranch,
-  setHasRemoteRepo,
-  setLocalCommits,
-  setSelectedItem,
-  setRepo,
-} = gitSlice.actions;
+export const {clearRepo, setChangedFiles, setCommits, setCurrentBranch, setHasRemoteRepo, setSelectedItem, setRepo} =
+  gitSlice.actions;
 export default gitSlice.reducer;

src/redux/services/gitFolderMonitor.ts

@@ -1,7 +1,7 @@
 import {FSWatcher, watch} from 'chokidar';
 import {sep} from 'path';
 
-import {setChangedFiles, setCurrentBranch, setLocalCommits, setRepo} from '@redux/git';
+import {setChangedFiles, setCommits, setCurrentBranch, setRepo} from '@redux/git';
 import {updateProjectsGitRepo} from '@redux/reducers/appConfig';
 
 import {promiseFromIpcRenderer} from '@utils/promises';
@@ -49,8 +49,11 @@ export async function monitorGitFolder(rootFolderPath: string | null, thunkAPI:
 
       // commit was made/undoed
       if (path === `${absolutePath}${sep}logs${sep}refs${sep}heads${sep}${gitRepo.currentBranch}`) {
-        promiseFromIpcRenderer('git.getCommits', 'git.getCommits.result', rootFolderPath).then(commits => {
-          thunkAPI.dispatch(setLocalCommits(commits));
+        promiseFromIpcRenderer('git.getCommits', 'git.getCommits.result', {
+          localPath: rootFolderPath,
+          branchName: gitRepo.currentBranch,
+        }).then(commits => {
+          thunkAPI.dispatch(setCommits({ahead: commits.aheadCommits, behind: commits.behindCommits}));
         });
       }