ahead of

apps/remix-ide/src/app/tabs/locales/en/git.json

@@ -3,6 +3,7 @@
   "git.pull": "pull",
   "git.commit": "commit",
   "git.sync": "sync",
+  "git.syncchanges": "sync changes",
   "git.publish": "publish",
   "git.ignore": "ignore",
   "git.createBranch": "create branch",

apps/remix-ide/src/remixAppManager.js

@@ -77,7 +77,8 @@ let requiredModules = [ // services + layout views + system views
   'doc-viewer',
   'doc-gen',
   'remix-templates',
-  'solhint'
+  'solhint',
+  'dgit'
 ]
 
 

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

@@ -112,7 +112,7 @@ export const CommitMessage = () => {
       </button>
       <button data-id='syncButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Sync ?'':'d-none'}`} disabled={!syncEnabled()} onClick={async () => await commit()} >
         <FontAwesomeIcon icon={faSync} className="mr-1" aria-hidden="true" />
-                Sync {upDownArrows()}
+                Sync Changes {upDownArrows()}
       </button>
       <button data-id='publishBranchButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.PublishBranch ?'':'d-none'}`} onClick={async () => await publishBranch()} >
         <FontAwesomeIcon icon={faCloudArrowUp} className="mr-1" aria-hidden="true" />

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

@@ -147,7 +147,7 @@ export const GitUI = (props: IGitUi) => {
                   </>
                 </Accordion.Collapse>
                 <hr></hr>
-                <CommitsNavigation title={`COMMITS`} eventKey="3" activePanel={activePanel} callback={setActivePanel} />
+                <CommitsNavigation title={`COMMITS`} eventKey="3" activePanel={activePanel} callback={setActivePanel} showButtons={true} />
                 <Accordion.Collapse className='bg-light' eventKey="3">
                   <>
                     <Commits />

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

@@ -10,10 +10,11 @@ interface CommitDetailsNavigationProps {
     eventKey: string
     activePanel: string
     callback: (eventKey: string) => void
+    isAheadOfRepo: boolean
 }
 
 export const CommitDetailsNavigation = (props: CommitDetailsNavigationProps) => {
-  const { commit, checkout, eventKey, activePanel, callback } = props;
+  const { commit, checkout, eventKey, activePanel, callback, isAheadOfRepo } = props;
   const handleClick = () => {
     if (!callback) return
     if (activePanel === eventKey) {
@@ -24,7 +25,7 @@ export const CommitDetailsNavigation = (props: CommitDetailsNavigationProps) =>
   }
   return (
     <>
-      <div onClick={() => handleClick()} role={'button'} className='pointer mb-2 mt-2 w-100 d-flex flex-row commit-navigation'>
+      <div onClick={() => handleClick()} role={'button'} className={`pointer mb-2 mt-2 w-100 d-flex flex-row commit-navigation ${isAheadOfRepo? 'text-success':''}`}>
         {
           activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
         }

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

@@ -1,4 +1,4 @@
-import { faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight, faArrowsUpDown } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight, faArrowsUpDown, faCloudArrowUp, faCloudArrowDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CustomTooltip } from "@remix-ui/helper";
 import React, { useEffect } from "react";
@@ -11,15 +11,18 @@ import { gitPluginContext } from "../gitui";
 import LoaderIndicator from "./loaderindicator";
 
 export interface CommitsNavigationProps {
-    title: string,
-    eventKey: string,
-    activePanel: string,
-    callback: (eventKey: string) => void
-    branch?: branch,
-    remote?: remote
+  title: string,
+  eventKey: string,
+  activePanel: string,
+  callback: (eventKey: string) => void
+  branch?: branch,
+  remote?: remote
+  showButtons?: boolean
+  ahead?: boolean,
+  behind?: boolean,
 }
 
-export const CommitsNavigation = ({ eventKey, activePanel, callback, title, branch, remote }: CommitsNavigationProps) => {
+export const CommitsNavigation = ({ eventKey, activePanel, callback, title, branch, remote, showButtons, ahead, behind }: CommitsNavigationProps) => {
   const pluginactions = React.useContext(pluginActionsContext)
   const [pullEnabled, setPullEnabled] = React.useState(true)
   const [pushEnabled, setPushEnabled] = React.useState(true)
@@ -38,19 +41,21 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
 
   return (
     <>
-      <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={`d-flex justify-content-between ${activePanel === eventKey ? 'bg-light' : ''} ${ahead || behind? 'text-success':''}`}>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-100'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
-          <label className="pl-1 nav form-check-label">{title}</label>
+          {ahead? <FontAwesomeIcon className='ml-1' icon={faCloudArrowUp}></FontAwesomeIcon> : null}
+          {behind? <FontAwesomeIcon className='ml-1' icon={faCloudArrowDown}></FontAwesomeIcon> : null}
+          <label className={`pl-1 nav form-check-label ${ahead || behind? 'text-success':''}`}>{title}</label>
           <LoaderIndicator></LoaderIndicator>
 
         </span>
-
-        <SourceControlBase branch={branch} remote={remote}>
-          <SourceControlButtons/>
-        </SourceControlBase>
+        {showButtons ?
+          <SourceControlBase branch={branch} remote={remote}>
+            <SourceControlButtons />
+          </SourceControlBase> : null}
 
       </div>
     </>

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

@@ -1,5 +1,6 @@
 import { faCaretDown, faCaretRight, faArrowRightArrowLeft, faGlobe, faToggleOff, faToggleOn, faTrash, faCheck, faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { CustomTooltip } from "@remix-ui/helper";
 import React, { useContext, useEffect } from "react";
 import { gitActionsContext } from "../../state/context";
 import { branch, remote } from "../../types";
@@ -42,13 +43,15 @@ export const RemotesDetailsNavigation = (props: RemotesDetailsNavigationProps) =
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
-          <div className={`long-and-truncated ml-1 ${context.defaultRemote && context.defaultRemote?.url === remote.url ? 'text-success' : ''}`}>
-            {remote.remote}  <FontAwesomeIcon className='' icon={faArrowRightArrowLeft}></FontAwesomeIcon> {remote.url}
-          </div>
+          <CustomTooltip tooltipText={remote.url} placement="top">
+            <div className={`long-and-truncated ml-1 ${context.defaultRemote && context.defaultRemote?.url === remote.url ? 'text-success' : ''}`}>
+              {remote.remote}  <FontAwesomeIcon className='' icon={faArrowRightArrowLeft}></FontAwesomeIcon> {remote.url}
+            </div>
+          </CustomTooltip>
 
         </div>
         {context.defaultRemote && context.defaultRemote?.url === remote.url ?
-          <GitUIButton className="btn btn-sm" onClick={()=>{}} disabledCondition={true}><FontAwesomeIcon className='text-success' icon={faCheck} ></FontAwesomeIcon></GitUIButton>
+          <GitUIButton className="btn btn-sm" onClick={() => { }} disabledCondition={true}><FontAwesomeIcon className='text-success' icon={faCheck} ></FontAwesomeIcon></GitUIButton>
           :
           <GitUIButton className="btn btn-sm" onClick={setAsDefault}><FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon></GitUIButton>
         }

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

@@ -11,10 +11,12 @@ export interface BrancheDifferenceProps {
   title: string,
   remote?: remote,
   branch?: branch
+  ahead?: boolean,
+  behind?: boolean
 }
 
 export const BranchDifferenceDetails = (props: BrancheDifferenceProps) => {
-  const { commits, title, branch, remote } = props;
+  const { commits, title, branch, remote, ahead, behind } = props;
   const [activePanel, setActivePanel] = useState<string>("");
   const actions = React.useContext(gitActionsContext)
 
@@ -26,12 +28,12 @@ export const BranchDifferenceDetails = (props: BrancheDifferenceProps) => {
 
   return (
     <Accordion activeKey={activePanel} defaultActiveKey="">
-      <CommitsNavigation branch={branch} remote={remote} title={title} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
+      <CommitsNavigation ahead={ahead} behind={behind} branch={branch} remote={remote} title={title} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
       <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
         <div className="ml-1">
           {commits && commits.map((commit, index) => {
             return (
-              <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={()=>{}} commit={commit}></CommitDetails>
+              <CommitDetails branch={branch} getCommitChanges={getCommitChanges} key={index} checkout={()=>{}} commit={commit}></CommitDetails>
             );
           })}
         </div>

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

@@ -7,42 +7,41 @@ import { BranchDifferenceDetails } from "./branchdifferencedetails";
 export interface BrancheDetailsProps {
   branch: branch;
   showSummary?: boolean;
-  remote?: remote;
 }
 
 export const BranchDifferences = (props: BrancheDetailsProps) => {
-  const { branch, showSummary, remote } = props;
+  const { branch, showSummary } = props;
   const context = React.useContext(gitPluginContext)
 
   useEffect(() => {
     console.log('GET BRANCH DIFF', branch)
   }, [])
 
+  const getRemote = (): remote | null => {
+    return context.upstream ? context.upstream : context.defaultRemote ? context.defaultRemote : null
+  }
+
   useEffect(() => {
     console.log('BRANCH DIFF', context.branchDifferences)
   }, [context.branchDifferences])
 
   const commitsAhead = (remote: remote) => {
+    if(!remote) return [];
     return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits || [];
   }
 
   const commitsBehind = (remote: remote) => {
+    if(!remote) return [];
     return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits || [];
   }
 
+  if(!getRemote()) return null;
+
   return (
-    <>
-      {!showSummary && context.remotes.map((remote, index) => {
-        return (
-          <div key={index}>
-            <BranchDifferenceDetails branch={branch} remote={remote} title={`ahead of ${remote.remote} by ${commitsAhead(remote).length} commit(s)`} commits={commitsAhead(remote)}></BranchDifferenceDetails>
-            <BranchDifferenceDetails branch={branch} remote={remote} title={`behind ${remote.remote} by ${commitsBehind(remote).length} commit(s)`} commits={commitsBehind(remote)}></BranchDifferenceDetails>
-            {commitsAhead(remote).length === 0 && commitsBehind(remote).length === 0? null: <hr></hr>}
-          </div>
-        );
-      })}
-      {showSummary && <div>summary</div>}
-
-    </>
-  );
+
+    <div>
+      <BranchDifferenceDetails ahead={true} branch={branch} remote={getRemote()} title={`ahead of ${getRemote().remote} by ${commitsAhead(getRemote()).length} commit(s)`} commits={commitsAhead(getRemote())}></BranchDifferenceDetails>
+      <BranchDifferenceDetails behind={true} branch={branch} remote={getRemote()} title={`behind ${getRemote().remote} by ${commitsBehind(getRemote()).length} commit(s)`} commits={commitsBehind(getRemote())}></BranchDifferenceDetails>
+      {commitsAhead(getRemote()).length === 0 && commitsBehind(getRemote()).length === 0 ? null : <hr></hr>}
+    </div>)
 }

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

@@ -67,7 +67,7 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
           {context.localBranchCommits && Object.entries(context.localBranchCommits).map(([key, value]) => {
             if (key == branch.name) {
               return value.map((commit, index) => {
-                return (<CommitDetails key={index} getCommitChanges={getCommitChanges} checkout={checkoutCommit} commit={commit}></CommitDetails>)
+                return (<CommitDetails branch={branch} key={index} getCommitChanges={getCommitChanges} checkout={checkoutCommit} commit={commit}></CommitDetails>)
               })
             }
           })}

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

@@ -87,7 +87,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
             if (key == branch.name) {
               return value.map((page, index) => {
                 return page.commits.map((commit, index) => {
-                  return (<CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>)
+                  return (<CommitDetails branch={branch} getCommitChanges={getCommitChanges} key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>)
                 })
               })
             }

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

@@ -44,7 +44,7 @@ export const Commits = () => {
           <div className="pt-1">
             {context.commits && context.commits.map((commit, index) => {
               return (
-                <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
+                <CommitDetails branch={context.currentBranch} getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
               );
             })}
           </div>

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

@@ -5,15 +5,17 @@ import { CommitDetailsNavigation } from "../../navigation/commitdetails";
 import { gitActionsContext } from "../../../state/context";
 import { gitPluginContext } from "../../gitui";
 import { CommitDetailsItems } from "./commitdetailsitem";
+import { branch, remote } from "@remix-ui/git";
 
 export interface CommitDetailsProps {
   commit: ReadCommitResult;
   checkout: (oid: string) => void;
   getCommitChanges: (commit: ReadCommitResult) => void;
+  branch: branch
 }
 
 export const CommitDetails = (props: CommitDetailsProps) => {
-  const { commit, checkout, getCommitChanges } = props;
+  const { commit, checkout, getCommitChanges, branch } = props;
   const actions = React.useContext(gitActionsContext)
   const context = React.useContext(gitPluginContext)
   const [activePanel, setActivePanel] = useState<string>("");
@@ -25,14 +27,27 @@ export const CommitDetails = (props: CommitDetailsProps) => {
     }
   }, [activePanel])
 
+  const getRemote = (): remote | null => {
+    return context.upstream ? context.upstream : context.defaultRemote ? context.defaultRemote : null
+  }
+
+  const commitsAhead = (remote: remote) => {
+    if(!remote) return [];
+    return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits || [];
+  }
+
+  const isAheadOfRepo = () => {
+    return commitsAhead(getRemote()).findIndex((c) => c.oid === commit.oid) > -1
+  }
+
   return (<Accordion activeKey={activePanel} defaultActiveKey="">
-    <CommitDetailsNavigation commit={commit} checkout={checkout} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
+    <CommitDetailsNavigation isAheadOfRepo={isAheadOfRepo()} commit={commit} checkout={checkout} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
     <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
       <>
         {context.commitChanges && context.commitChanges.filter(
           (change) => change.hashModified === commit.oid && change.hashOriginal === commit.commit.parent[0]
         ).map((change, index) => {
-          return (<CommitDetailsItems key={index} commitChange={change}></CommitDetailsItems>)
+          return (<CommitDetailsItems isAheadOfRepo={isAheadOfRepo()} key={index} commitChange={change}></CommitDetailsItems>)
         })}
 
       </>

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

@@ -7,10 +7,11 @@ import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 
 export interface CCommitDetailsItemsProps {
   commitChange: commitChange;
+  isAheadOfRepo: boolean;
 }
 
 export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
-  const { commitChange } = props;
+  const { commitChange, isAheadOfRepo } = props;
   const actions = React.useContext(gitActionsContext)
   const pluginActions = React.useContext(pluginActionsContext)
 
@@ -32,7 +33,7 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
     </>)
   }
   return (<>
-    <div className="d-flex w-100 d-flex flex-row commitdetailsitem">
+    <div className={`d-flex w-100 d-flex flex-row commitdetailsitem ${isAheadOfRepo? 'text-success':''}`}>
       <div className='pointer gitfile long-and-truncated' onClick={async () => await openChanges(commitChange)}>
         <span className='font-weight-bold long-and-truncated'>{path.basename(commitChange.path)}</span>
         <div className='text-secondary long-and-truncated'> {commitChange.path}</div>