loaders

apps/remix-ide/src/app/files/dgitProvider.ts

@@ -736,6 +736,7 @@ class DGitProvider extends Plugin {
   }
 
   async push(input) {
+    console.log('push input', input)
     const cmd = {
       force: input.force,
       ref: input.ref,
@@ -752,11 +753,12 @@ class DGitProvider extends Plugin {
         ...cmd,
         ...await this.addIsomorphicGitConfig(input),
       }
+      console.log('push cmd', cmd2)
       const result = await git.push({
         ...await this.addIsomorphicGitConfigFS(),
         ...cmd2
       })
-      console.log('push result', result)
+      console.log('push result', cmd2, result)
       return result
 
     }
@@ -797,6 +799,9 @@ class DGitProvider extends Plugin {
       remoteRef: input.remoteRef,
       author: await this.getCommandUser(input),
       remote: input.remote,
+      depth: input.depth || 5,
+      singleBranch: input.singleBranch,
+      relative: input.relative,
       input
     }
     let result
@@ -811,11 +816,7 @@ class DGitProvider extends Plugin {
         ...await this.addIsomorphicGitConfigFS(),
         ...cmd2
       })
-      console.log('fetch result', result)
-      console.log({
-        ...await this.addIsomorphicGitConfigFS(),
-        ...cmd2
-      })
+      console.log('fetch result', cmd2, result)
     }
 
     setTimeout(async () => {

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

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react'
+import { gitPluginContext } from '../gitui'
+
+interface ButtonWithContextProps {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode;
+  disabledCondition?: boolean; // Optional additional disabling condition
+  // You can add other props if needed, like 'type', 'className', etc.
+  [key: string]: any; // Allow additional props to be passed
+}
+
+// This component extends a button, disabling it when loading is true
+const GitUIButton = ({children, disabledCondition = false, ...rest }:ButtonWithContextProps) => {
+  const { loading } = React.useContext(gitPluginContext)
+
+  const isDisabled = loading || disabledCondition
+  return (
+    <button disabled={loading} {...rest}>
+      {children}
+    </button>
+  );
+};
+
+export default GitUIButton;

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

@@ -1,9 +1,11 @@
 import { faArrowDown, faArrowUp, faArrowsUpDown, faArrowRotateRight } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { CustomTooltip } from "@remix-ui/helper"
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { FormattedMessage } from "react-intl"
+import { gitActionsContext } from "../../state/context"
 import { branch, remote } from "../../types"
+import { gitPluginContext } from "../gitui"
 
 interface SourceControlButtonsProps {
   remote?: remote,
@@ -11,17 +13,88 @@ interface SourceControlButtonsProps {
 }
 
 export const SourceControlButtons = (props: SourceControlButtonsProps) => {
-  const { remote, branch } = props
+  const [branch, setBranch] = useState(props.branch)
+  const [remote, setRemote] = useState(props.remote)
+  const context = React.useContext(gitPluginContext)
+  const actions = React.useContext(gitActionsContext)
+  const [commitsAhead, setCommitsAhead] = useState([])
+  const [commitsBehind, setCommitsBehind] = useState([])
 
-  return (<span className='d-flex justify-content-end align-items-center w-25'>
+
+  useEffect(() => {
+    console.log('BRANCH DIFF SourceControlButtons', context.branchDifferences, remote, branch)
+    setDefaultRemote()
+    if (remote && branch && context.branchDifferences && context.branchDifferences[`${remote.remote}/${branch.name}`]) {
+      setCommitsAhead(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits)
+      setCommitsBehind(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits)
+    }
+  }, [context.branchDifferences, branch, remote])
+
+
+  const setDefaultRemote = () => {
+    if (context.remotes.length > 0) {
+      // find remote called origin
+      const origin = context.remotes.find(remote => remote.remote === 'origin')
+      if (origin) {
+        setRemote(origin)
+      } else {
+        setRemote(context.remotes[0])
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!props.branch) {
+      setBranch(context.currentBranch)
+    }
+    if (!props.remote) {
+      setRemote(context.defaultRemote)
+    }else{
+      setDefaultRemote()
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('context', context.defaultRemote, context.currentBranch)
+    if (!props.branch) {
+      setBranch(context.currentBranch)
+    }
+    if (!props.remote) {
+      setRemote(context.defaultRemote)
+    }else{
+      setDefaultRemote()
+    }
+  }, [context.defaultRemote, context.currentBranch])
+
+  useEffect(() => {
+    console.log('SC BUTTONS', branch, remote)
+  }, [])
+
+
+
+  const pull = async () => {
+    await actions.pull(remote.remote, branch.name)
+  }
+
+  const push = async () => {
+    await actions.pull(remote.remote, branch.name)
+  }
+
+  const sync = async () => {
+    await actions.pull(remote.remote, branch.name)
+    await actions.push(remote.remote, branch.name)
+  }
+
+
+  return (<span className='d-flex justify-content-end align-items-center'>
     <CustomTooltip tooltipText={<FormattedMessage id="git.pull" />}>
-      <button onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></button>
+      <>{commitsBehind.length}<button onClick={pull} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></button></>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.push" />}>
-      <button onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></button>
+      <>{commitsAhead.length}<button onClick={push} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></button></>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.sync" />}>
-      <button onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></button>
+      <button onClick={sync} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></button>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.refresh" />}>
       <button onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowRotateRight} className="" /></button>

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

@@ -133,8 +133,6 @@ export const GitUI = (props: IGitUi) => {
           <loaderContext.Provider value={loaderState}>
             <gitActionsContext.Provider value={gitActionsProviderValue}>
               <pluginActionsContext.Provider value={pluginActionsProviderValue}>
-                {gitState.loading && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}
-                {!gitState.loading &&
                   <Accordion activeKey={activePanel} defaultActiveKey="0">
                     <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
 
@@ -188,7 +186,7 @@ export const GitUI = (props: IGitUi) => {
 
 
 
-                  </Accordion>}
+                  </Accordion>
               </pluginActionsContext.Provider>
             </gitActionsContext.Provider>
           </loaderContext.Provider>

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

@@ -46,7 +46,6 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
         }
 
         {branch.remote?.url && <>
-          <FontAwesomeIcon className='ml-auto pointer' icon={faSync} onClick={() => checkout(branch)}></FontAwesomeIcon>
           <FontAwesomeIcon className='ml-2 pointer' icon={faGlobe} onClick={() => openRemote()}></FontAwesomeIcon></>}
       </div>
     </>

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

@@ -1,10 +1,8 @@
 import { faCaretUp, faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight, faCircleCheck, faArrowsUpDown } 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 { FormattedMessage } from "react-intl";
 import { pluginActionsContext } from "../../state/context";
-import { SourceControlMenu } from "./menu/sourcecontrolmenu";
+import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
 
 export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
     const pluginactions = React.useContext(pluginActionsContext)
@@ -26,24 +24,7 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">COMMANDS</label>
-
-
                 </span>
-                {
-                    activePanel === eventKey ?
-                        <span className='d-flex justify-content-end align-items-center w-25'>
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.pull" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></button>
-                            </CustomTooltip>
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.push" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></button>
-                            </CustomTooltip>
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.sync" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></button>
-                            </CustomTooltip>
-                        </span> : null
-                }
-
             </div>
         </>
     );

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

@@ -4,7 +4,8 @@ import { CustomTooltip } from "@remix-ui/helper";
 import React, { useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { pluginActionsContext } from "../../state/context";
-import { branch } from "../../types";
+import { branch, remote } from "../../types";
+import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
 import { gitPluginContext } from "../gitui";
 
 export interface CommitsNavigationProps {
@@ -13,9 +14,10 @@ export interface CommitsNavigationProps {
     activePanel: string,
     callback: (eventKey: string) => void
     branch?: branch,
+    remote?: remote
 }
 
-export const CommitsNavigation = ({ eventKey, activePanel, callback, title }: CommitsNavigationProps) => {
+export const CommitsNavigation = ({ eventKey, activePanel, callback, title, branch, remote }: CommitsNavigationProps) => {
     const pluginactions = React.useContext(pluginActionsContext)
     const [pullEnabled, setPullEnabled] = React.useState(true)
     const [pushEnabled, setPushEnabled] = React.useState(true)
@@ -44,27 +46,8 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title }: Co
 
                 </span>
 
-                {
-                    activePanel === eventKey ?
-                        <span className='d-flex justify-content-end align-items-center w-25'>
-                            {pullEnabled ? 
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.pull" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></button>
-                            </CustomTooltip>: null}
-                            {pushEnabled ? 
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.push" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></button>
-                            </CustomTooltip>: null}
-                            {syncEnabled ? 
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.sync" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></button>
-                            </CustomTooltip>: null}
-                            {fetchEnabled ? 
-                            <CustomTooltip tooltipText={<FormattedMessage id="git.fetch" />}>
-                                <button onClick={async () => { await pluginactions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowRotateRight} className="" /></button>
-                            </CustomTooltip>: null}             
-                        </span> : null
-                }
+                <SourceControlButtons branch={branch} remote={remote}></SourceControlButtons>
+
 
             </div>
         </>

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

@@ -1,4 +1,4 @@
-import { faCaretDown, faCaretRight, faArrowRightArrowLeft, faGlobe, faToggleOff, faToggleOn, faTrash, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretRight, faArrowRightArrowLeft, faGlobe, faToggleOff, faToggleOn, faTrash, faCheck, faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
 import { gitActionsContext } from "../../state/context";
@@ -51,7 +51,10 @@ export const RemotesDetailsNavigation = (props: RemotesDetailsNavigationProps) =
           :
           <FontAwesomeIcon className='ml-auto mr-1 pointer' icon={faToggleOn} onClick={setAsDefault} ></FontAwesomeIcon>
         }
-        <FontAwesomeIcon className='ml-auto mr-1 pointer' icon={faTrash} onClick={() => actions.removeRemote(remote)}></FontAwesomeIcon>
+        <FontAwesomeIcon className='ml-auto pointer mr-1' icon={faSync} onClick={async () => {
+          await actions.fetch(remote.remote)
+        }}></FontAwesomeIcon>
+        <FontAwesomeIcon className='ml-auto mr-1 pointer text-danger' icon={faTrash} onClick={() => actions.removeRemote(remote)}></FontAwesomeIcon>
         {remote?.url && <FontAwesomeIcon className='ml-2 pointer' icon={faGlobe} onClick={() => openRemote()}></FontAwesomeIcon>}
       </div>
     </>

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

@@ -30,10 +30,9 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
 
 
                 </span>
-                {
-                    activePanel === eventKey ?
-                        <SourceControlButtons/> : null
-                }
+
+                <SourceControlButtons />
+
 
             </div>
         </>

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Alert } from "react-bootstrap";
 import { gitActionsContext } from "../../state/context";
 import { remote } from "../../types";
+import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
 import { LocalBranchDetails } from "./branches/localbranchdetails";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
@@ -44,13 +45,13 @@ export const Branches = () => {
                                 id="newbranchname"
                             />
                         </div>
-                        <button
+                        <GitUIButton
                             onClick={async () => actions.createBranch(newBranch.value)}
                             className="btn w-md-25 w-100 btn-primary"
                             id="createbranch-btn"
                         >
                             create new branch
-                        </button>
+                        </GitUIButton>
                     </div> : <div className="text-muted">No branches</div>}
             </div>
         </>

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

@@ -3,26 +3,35 @@ import { Accordion } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { CommitDetails } from "../commits/commitdetails";
 import { CommitsNavigation } from "../../navigation/commits";
+import { branch, remote } from "../../../types";
+import { gitActionsContext } from "../../../state/context";
 
 export interface BrancheDifferenceProps {
   commits: ReadCommitResult[];
-  title: string
+  title: string,
+  remote?: remote,
+  branch?: branch
 }
 
 export const BranchDifferenceDetails = (props: BrancheDifferenceProps) => {
-  const { commits, title } = props;
+  const { commits, title, branch, remote } = props;
   const [activePanel, setActivePanel] = useState<string>("");
+  const actions = React.useContext(gitActionsContext)
 
   if (commits.length === 0) return null
 
+  const getCommitChanges = async (commit: ReadCommitResult) => {
+    await actions.getCommitChanges(commit.oid, commit.commit.parent[0])
+  }
+
   return (
   <Accordion activeKey={activePanel} defaultActiveKey="">
-    <CommitsNavigation title={title} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
+    <CommitsNavigation 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 key={index} checkout={()=>{}} commit={commit}></CommitDetails>
+          <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={()=>{}} commit={commit}></CommitDetails>
         );
       })}
     </div>

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

@@ -35,8 +35,8 @@ export const BranchDifferences = (props: BrancheDetailsProps) => {
         {!showSummary && context.remotes.map((remote, index) => {
           return (
             <div key={index}>
-                <BranchDifferenceDetails title={`ahead of ${remote.remote} by ${commitsAhead(remote).length} commit(s)`} commits={commitsAhead(remote)}></BranchDifferenceDetails>
-                <BranchDifferenceDetails title={`behind ${remote.remote} by ${commitsBehind(remote).length} commit(s)`} commits={commitsBehind(remote)}></BranchDifferenceDetails>
+                <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>
           );

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

@@ -54,6 +54,10 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
     }
   };
 
+  const getCommitChanges = async (commit: ReadCommitResult) => {
+    await actions.getCommitChanges(commit.oid, commit.commit.parent[0])
+  }
+
   return (<Accordion activeKey={activePanel} defaultActiveKey="">
     <BrancheDetailsNavigation checkout={checkout} branch={branch} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
     <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
@@ -63,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} checkout={checkoutCommit} commit={commit}></CommitDetails>)
+                return (<CommitDetails key={index} getCommitChanges={getCommitChanges} checkout={checkoutCommit} commit={commit}></CommitDetails>)
               })
             }
           })}

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

@@ -67,6 +67,15 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
     }
   };
 
+  const getCommitChanges = async (commit: ReadCommitResult) => {
+    const changes = await actions.getCommitChanges(commit.oid, commit.commit.parent[0], branch, branch.remote)
+    console.log('CHANGES', changes)
+    if(!changes) {
+      // try to fetch the data
+      await actions.fetch(branch.remote.remote, branch.name,null,20, true, false, true)
+    }
+  }
+
   return (<Accordion activeKey={activePanel} defaultActiveKey="">
     <BrancheDetailsNavigation checkout={checkout} branch={branch} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
     <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
@@ -76,7 +85,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
             if (key == branch.name) {
               return value.map((page, index) => {
                 return page.commits.map((commit, index) => {
-                return(<CommitDetails key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>)
+                  return (<CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>)
                 })
               })
             }

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

@@ -6,6 +6,7 @@ import { gitActionsContext } from "../../state/context";
 import { gitPluginContext } from "../gitui";
 import { Repositories } from "./repositories";
 import { RemixUiCheckbox } from "@remix-ui/checkbox";
+import GitUIButton from "../buttons/gituibutton";
 
 export const Clone = () => {
     const context = React.useContext(gitPluginContext)
@@ -68,9 +69,9 @@ export const Clone = () => {
 
 
             <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-1 mt-2" placeholder="branch" type="text" id="clonebranch" />
-            <button disabled={!cloneUrl || !cloneBranch} data-id='clonebtn' className='btn btn-primary mt-1 w-100' onClick={async () => {
+            <GitUIButton disabledCondition={!cloneUrl || !cloneBranch} data-id='clonebtn' className='btn btn-primary mt-1 w-100' onClick={async () => {
                 clone()
-            }}>clone</button>
+            }}>clone</GitUIButton>
             <hr />
             <Repositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
             <hr />

libs/remix-ui/git/src/components/panels/commands/fetch.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { gitActionsContext } from "../../../state/context";
+import GitUIButton from "../../buttons/gituibutton";
+import { gitPluginContext } from "../../gitui";
 
 
 export const Fetch = () => {
   const actions = React.useContext(gitActionsContext)
-  const fetch = async () => {
-    await actions.fetch()
-  }
-
+  const context = React.useContext(gitPluginContext)
   
   return (
     <>
-      <button type="button" onClick={async () => fetch()} className="btn btn-primary w-100">Fetch</button>
+      <div className="btn-group w-100" role="group">
+        <GitUIButton type="button" onClick={async () => actions.fetch()} className="btn btn-primary mr-1">Fetch {context.upstream}</GitUIButton>
+        <GitUIButton type="button" onClick={async () => actions.fetch(null, null, context.currentBranch.name, null, true )} className="btn btn-primary">Fetch {context.currentBranch.name}</GitUIButton>
+      </div>
     </>)
 }

libs/remix-ui/git/src/components/panels/commands/merge.tsx

@@ -3,6 +3,7 @@ import { gitActionsContext } from "../../../state/context";
 import { gitPluginContext } from "../../gitui";
 import { selectStyles, selectTheme } from "../../../types/styles";
 import Select from 'react-select'
+import GitUIButton from "../../buttons/gituibutton";
 
 export const Merge = () => {
   const context = React.useContext(gitPluginContext)
@@ -46,8 +47,7 @@ export const Merge = () => {
 
 
       <div className="btn-group w-100" role="group" aria-label="Basic example">
-        <button type="button" onClick={async () => merge()} className="btn btn-primary mr-1">Merge</button>
-
+        <GitUIButton type="button" onClick={async () => merge()} className="btn btn-primary mr-1">Merge</GitUIButton>
       </div>
 
 

libs/remix-ui/git/src/components/panels/commands/pushpull.tsx

@@ -4,6 +4,7 @@ import { gitPluginContext } from "../../gitui";
 import { selectStyles, selectTheme } from "../../../types/styles";
 import Select, { Options, OptionsOrGroups } from 'react-select'
 import { setUpstream } from "../../../state/gitpayload";
+import GitUIButton from "../../buttons/gituibutton";
 
 export const PushPull = () => {
   const context = React.useContext(gitPluginContext)
@@ -50,11 +51,12 @@ export const PushPull = () => {
   }
 
   const push = async () => {
-    actions.push()
+    console.log('PUSH', context.upstream, localBranch, remoteBranch, force)
+    actions.push(context.upstream, localBranch, remoteBranch, force)
   }
 
   const pull = async () => {
-    actions.pull()
+    actions.pull(context.upstream, localBranch, remoteBranch)
   }
 
 
@@ -96,10 +98,10 @@ export const PushPull = () => {
 
 
 
-      <div className="btn-group w-100" role="group" aria-label="Basic example">
+      <div className="btn-group w-100" role="group">
    
-        <button type="button" onClick={async () => pull()} className="btn btn-primary mr-1">Pull</button>
-        <button type="button" onClick={async () => push()} className="btn btn-primary">Push</button>
+        <GitUIButton type="button" onClick={async () => pull()} className="btn btn-primary mr-1">Pull</GitUIButton>
+        <GitUIButton type="button" onClick={async () => push()} className="btn btn-primary">Push</GitUIButton>
       </div>
 
 

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

@@ -8,6 +8,7 @@ import { CommitSummary } from "./commits/commitsummary";
 
 
 export const Commits = () => {
+    const [hasNextPage, setHasNextPage] = React.useState(true)
     const context = React.useContext(gitPluginContext)
     const actions = React.useContext(gitActionsContext)
 
@@ -21,6 +22,16 @@ export const Commits = () => {
         }
     };
 
+    const loadNextPage = () => {
+        console.log('LOAD NEXT PAGE', context.commits.length)
+        actions.fetch(null, context.currentBranch.name, null, 5, true, true)
+        //actions.getBranchCommits(branch, lastPageNumber+1)
+    }
+
+    const getCommitChanges = async (commit: ReadCommitResult) => {
+        await actions.getCommitChanges(commit.oid, commit.commit.parent[0])
+    }
+
 
     return (
         <>
@@ -29,11 +40,13 @@ export const Commits = () => {
                     <div className="pt-1">
                         {context.commits && context.commits.map((commit, index) => {
                             return (
-                                <CommitDetails key={index} checkout={checkout} commit={commit}></CommitDetails>
+                                <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
                             );
                         })}
                     </div>
-                </div></>
+                </div>
+                    {hasNextPage && <a href="#" className="cursor-pointer mb-1 ml-2" onClick={loadNextPage}>Load more</a>}
+                </>
                 : <div className="text-muted">No commits</div>}
         </>
     )

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

@@ -9,19 +9,19 @@ import { CommitDetailsItems } from "./commitdetailsitem";
 export interface CommitDetailsProps {
   commit: ReadCommitResult;
   checkout: (oid: string) => void;
+  getCommitChanges: (commit: ReadCommitResult) => void;
 }
 
 export const CommitDetails = (props: CommitDetailsProps) => {
-  const { commit, checkout } = props;
+  const { commit, checkout, getCommitChanges } = props;
   const actions = React.useContext(gitActionsContext)
   const context = React.useContext(gitPluginContext)
   const [activePanel, setActivePanel] = useState<string>("");
 
   useEffect(() => {
-    console.log(commit)
     if (activePanel === "0") {
-      console.log(commit.oid, commit.commit.parent)
-      actions.getCommitChanges(commit.oid, commit.commit.parent[0])
+      console.log(context)
+      getCommitChanges(commit)
     }
   }, [activePanel])
 

libs/remix-ui/git/src/lib/gitactions.ts

@@ -373,31 +373,46 @@ export const clone = async (url: string, branch: string, depth: number, singleBr
   dispatch(setLoading(false))
 }
 
-export const fetch = async (remote?: string, ref?: string, remoteRef?: string) => {
+export const fetch = async (remote?: string, ref?: string, remoteRef?: string, depth?: number, singleBranch?: boolean, relative?: boolean, quiet?: boolean) => {
+  dispatch(setLoading(true))
+  await disableCallBacks()
+  await plugin.call('notification', 'toast', `Fetching ${remote || ''} ${ref || ''} ${remoteRef || ''}`)
   try {
-    await plugin.call('dGitProvider' as any, 'fetch', { remote, ref, remoteRef })
+    await plugin.call('dGitProvider' as any, 'fetch', { remote, ref, remoteRef, depth, singleBranch, relative });
+    if(!quiet){
       await gitlog()
       await getBranches()
+    }
   } catch (e: any) {
     await parseError(e)
   }
+  dispatch(setLoading(false))
+  await enableCallBacks()
 }
 
 export const pull = async (remote?: string, ref?: string, remoteRef?: string) => {
+  dispatch(setLoading(true))
+  await disableCallBacks()
   try {
     await plugin.call('dGitProvider' as any, 'pull', { remote, ref, remoteRef })
     await gitlog()
   } catch (e: any) {
     await parseError(e)
   }
+  dispatch(setLoading(false))
+  await enableCallBacks()
 }
 
 export const push = async (remote?: string, ref?: string, remoteRef?: string, force?: boolean) => {
+  dispatch(setLoading(true))
+  await disableCallBacks()
   try {
     await plugin.call('dGitProvider' as any, 'push', { remote, ref, remoteRef, force })
   } catch (e: any) {
     await parseError(e)
   }
+  dispatch(setLoading(false))
+  await enableCallBacks()
 }
 
 const tokenWarning = async () => {
@@ -690,10 +705,16 @@ export const diff = async (commitChange: commitChange) => {
   */
 }
 
-export const getCommitChanges = async (oid1: string, oid2: string) => {
+export const getCommitChanges = async (oid1: string, oid2: string, branch?: branch, remote?: remote) => {
+  console.log(oid1, oid2, branch, remote)
+  try{
     const result: commitChange[] = await plugin.call('dGitProvider', 'getCommitChanges', oid1, oid2)
     dispatch(setCommitChanges(result))
     return result
+  }catch(e){
+    console.log(e)
+    return false
+  }
 }
 
 async function getRepoDetails(url: string) {
@@ -709,6 +730,7 @@ async function getRepoDetails(url: string) {
 
 
 export const fetchBranch = async (branch: branch, page: number) => {
+  if(!branch.remote || !branch.remote.url) return
   const token = await tokenWarning();
   console.log('fetch', branch)
   const { owner, repo } = await getRepoDetails(branch.remote.url);

libs/remix-ui/git/src/lib/listeners.ts

@@ -184,6 +184,7 @@ export const enableCallBacks = async () => {
 }
 
 const synTimerStart = async () => {
+    console.trace('synTimerStart')
     if (!callBackEnabled) return
     clearTimeout(syncTimer)
     syncTimer = setTimeout(async () => {

libs/remix-ui/git/src/state/context.tsx

@@ -11,13 +11,13 @@ export interface gitActions  {
     addall(): Promise<void>
     push(remote?: string, ref?: string, remoteRef?: string, force?: boolean): Promise<void>
     pull(remote?: string, ref?: string, remoteRef?: string): Promise<void>
-    fetch(remote?: string, ref?: string, remoteRef?: string): Promise<void>
+    fetch(remote?: string, ref?: string, remoteRef?: string, depth?: number, singleBranch?: boolean, relative?: boolean, quiet?: boolean): Promise<void>
     repositories(): Promise<any>
     checkoutfile(file: string): Promise<void>
     checkout(cmd: any): Promise<void>
     createBranch(branch: string): Promise<void>
     remoteBranches(owner: string, repo: string): Promise<any>
-    getCommitChanges(oid1: string, oid2: string): Promise<commitChange[]>
+    getCommitChanges(oid1: string, oid2: string, branch?: branch, remote?: remote): Promise<commitChange[] | boolean>
     getBranchCommits(branch: branch, page: number): Promise<void>
     getGitHubUser(): Promise<any>
     diff(commitChange: commitChange): Promise<void>

package.json

@@ -158,7 +158,7 @@
     "http-server": "^14.1.1",
     "intro.js": "^4.1.0",
     "isbinaryfile": "^3.0.2",
-    "isomorphic-git": "^1.25.0",
+    "isomorphic-git": "^1.25.7",
     "jquery": "^3.3.1",
     "js-yaml": "^4.1.0",
     "jspdf": "^2.5.1",

yarn.lock

@@ -19155,10 +19155,10 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-git@^1.25.0:
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-git/-/isomorphic-git-1.25.0.tgz#3a04d7e70f75ebdbb991f9fa87cfec90e3742c9f"
-  integrity sha512-F8X7z74gL+jN4bd6qB6a3Z0QQzonWPkiQ3nK/oFWlrc2pIwVM9Uksl3YMFh99ltswsqoCoOthgasybX08/fiGg==
+isomorphic-git@^1.25.7:
+  version "1.25.7"
+  resolved "https://registry.yarnpkg.com/isomorphic-git/-/isomorphic-git-1.25.7.tgz#f6f6fae81ee67d3982edad8c90ca0f096e39267c"
+  integrity sha512-KE10ejaIsEpQ+I/apS33qqTjyzCXgOniEaL32DwNbXtboKG8H3cu+RiBcdp3G9w4MpOOTQfGPsWp4i8UxRfDLg==
   dependencies:
     async-lock "^1.1.0"
     clean-git-ref "^2.0.1"