add init method

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

@@ -15,5 +15,6 @@
   "git.refresh": "refresh",
   "git.unstageall": "unstage all",
   "git.stageall": "stage all",
-  "git.noremote": "this repo has no remotes"
+  "git.noremote": "this repo has no remotes",
+  "git.init": "Initialize repository"
 }

libs/remix-api/src/lib/plugins/fileSystem-api.ts

@@ -0,0 +1,10 @@
+import { commitChange } from "@remix-ui/git";
+import { IFileSystem } from "@remixproject/plugin-api"
+
+// Extended interface with 'diff' method
+export interface IExtendedFileSystem extends IFileSystem {
+  methods: IFileSystem['methods'] & {
+    /** Compare the differences between two files */
+    diff(change: commitChange): Promise<void>
+  };
+}

libs/remix-api/src/lib/plugins/filedecorator-api.ts

@@ -0,0 +1,11 @@
+import { fileDecoration } from '@remix-ui/file-decorators'
+import { StatusEvents } from '@remixproject/plugin-utils'
+
+export interface IFileDecoratorApi {
+  events: {
+  } & StatusEvents
+  methods: {
+    clearFileDecorators(path?: string): void
+    setFileDecorators(decorators: fileDecoration[]): void
+  }
+}

libs/remix-api/src/lib/remix-api.ts

@@ -2,6 +2,8 @@ import { IGitApi } from "@remix-ui/git"
 import { IRemixApi } from "@remixproject/plugin-api"
 import { StatusEvents } from "@remixproject/plugin-utils"
 import { IConfigApi } from "./plugins/config-api"
+import { IFileDecoratorApi } from "./plugins/filedecorator-api"
+import { IExtendedFileSystem } from "./plugins/fileSystem-api"
 import { INotificationApi } from "./plugins/notification-api"
 import { ISettings } from "./plugins/settings-api"
 
@@ -10,6 +12,8 @@ export interface ICustomRemixApi extends IRemixApi {
   config: IConfigApi
   notification: INotificationApi
   settings: ISettings
+  fileDecorator: IFileDecoratorApi
+  fileManager: IExtendedFileSystem
 }
 
 export declare type CustomRemixApi = Readonly<ICustomRemixApi>

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 } from '../lib/gitactions'
+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 } from '../lib/gitactions'
 import { loadFiles, setCallBacks } from '../lib/listeners'
 import { openDiff, openFile, saveToken, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
 import { gitActionsContext, pluginActionsContext } from '../state/context'
@@ -30,12 +30,15 @@ import { BranchHeader } from './branchHeader'
 import { SourceControl } from './panels/sourcontrol'
 import { GitHubCredentials } from './panels/githubcredentials'
 import { Setup } from './panels/setup'
+import { Init } from './panels/init'
+import { CustomRemixApi } from "@remix-api";
+import { Plugin } from "@remixproject/engine";
 
 export const gitPluginContext = React.createContext<gitState>(defaultGitState)
 export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
 
 interface IGitUi {
-  plugin: ViewPlugin
+  plugin: Plugin<any, CustomRemixApi>
 }
 
 export const GitUI = (props: IGitUi) => {
@@ -44,6 +47,7 @@ export const GitUI = (props: IGitUi) => {
   const [loaderState, loaderDispatch] = useReducer(loaderReducer, defaultLoaderState)
   const [activePanel, setActivePanel] = useState<string>("0")
   const [setup, setSetup] = useState<boolean>(false)
+  const [needsInit, setNeedsInit] = useState<boolean>(true)
 
   useEffect(() => {
     setCallBacks(plugin, gitDispatch, loaderDispatch)
@@ -62,7 +66,7 @@ export const GitUI = (props: IGitUi) => {
       setSetup(!(username && email))
     }
     checkconfig()
-  },[gitState.gitHubAccessToken, gitState.gitHubUser, gitState.userEmails])
+  }, [gitState.gitHubAccessToken, gitState.gitHubUser, gitState.userEmails])
 
   useEffect(() => {
 
@@ -90,6 +94,8 @@ export const GitUI = (props: IGitUi) => {
       updatestate()
     })
 
+    setNeedsInit(!(gitState.currentBranch && gitState.currentBranch.name !== ''))
+
   }, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes, gitState.gitHubAccessToken])
 
 
@@ -121,7 +127,8 @@ export const GitUI = (props: IGitUi) => {
     removeRemote,
     sendToGitLog,
     clearGitLog,
-    getFileStatusMatrix
+    getFileStatusMatrix,
+    init
   }
 
   const pluginActionsProviderValue = {
@@ -139,16 +146,18 @@ export const GitUI = (props: IGitUi) => {
       <gitPluginContext.Provider value={gitState}>
         <loaderContext.Provider value={loaderState}>
           <gitActionsContext.Provider value={gitActionsProviderValue}>
-            <BranchHeader/>
+            <BranchHeader />
             <pluginActionsContext.Provider value={pluginActionsProviderValue}>
-              {setup? <Setup></Setup>: null}
+              {setup && !needsInit ? <Setup></Setup> : null}
+              {needsInit ? <Init></Init> : null}
+              {!setup && !needsInit ?
                 <Accordion activeKey={activePanel} defaultActiveKey="0">
                   <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
 
                   <Accordion.Collapse className='bg-light' eventKey="0">
                     <>
-                    <SourceControlBase><CommitMessage/></SourceControlBase>
-                    <SourceControl/>
+                      <SourceControlBase><CommitMessage /></SourceControlBase>
+                      <SourceControl />
                     </>
                   </Accordion.Collapse>
                   <hr></hr>
@@ -169,7 +178,7 @@ export const GitUI = (props: IGitUi) => {
                   <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
                   <Accordion.Collapse className='bg-light' eventKey="2">
                     <>
-                    <Branches/></>
+                      <Branches /></>
                   </Accordion.Collapse>
                   <hr></hr>
                   <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
@@ -197,12 +206,12 @@ export const GitUI = (props: IGitUi) => {
                   <LogNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
                   <Accordion.Collapse className='bg-light' eventKey="6">
                     <>
-                    <LogViewer/>
+                      <LogViewer />
                     </>
                   </Accordion.Collapse>
 
                 </Accordion>
-   
+                : null}
             </pluginActionsContext.Provider>
           </gitActionsContext.Provider>
         </loaderContext.Provider>

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

@@ -0,0 +1,29 @@
+import { CustomTooltip } from '@remix-ui/helper';
+import { pull } from 'lodash';
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { gitActionsContext } from '../../state/context';
+import GitUIButton from '../buttons/gituibutton';
+
+export const Init = () => {
+
+  const actions = React.useContext(gitActionsContext)
+
+  const init = async () => {
+    actions.init()
+  }
+
+  return (
+    <>
+      <div>
+        <div className='mt-1 mb-2'>
+          <GitUIButton
+            onClick={init}
+            className="btn w-md-25 w-100 btn-primary"
+            id="initgit-btn"
+          ><FormattedMessage id='git.init'/></GitUIButton>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -45,6 +45,13 @@ export const setPlugin = (p: Plugin, dispatcher: React.Dispatch<gitActionDispatc
   console.log('setPlugin')
 }
 
+export const init = async () => {
+  console.log('gitInit')
+  await plugin.call('dgitApi', "init");
+  await gitlog();
+  await getBranches();
+}
+
 export const getBranches = async () => {
   console.log('getBranches')
   const branches = await plugin.call('dgitApi', "branches")
@@ -110,25 +117,17 @@ export const gitlog = async () => {
 export const showCurrentBranch = async () => {
   try {
     const branch = await currentBranch();
-    const currentcommitoid = await getCommitFromRef("HEAD");
+    console.log('branch :>>', branch)
 
-    if (typeof branch === "undefined" || branch.name === "") {
-
-      branch.name = `HEAD detached at ${currentcommitoid}`;
-      //canCommit = false;
-      dispatch(setCanCommit(false));
-    } else {
-      //canCommit = true;
-      dispatch(setCanCommit(true));
+    dispatch(setCanCommit((branch && branch.name !== "")));
     dispatch(setCurrentBranch(branch));
-    }
+
   } catch (e) {
     // show empty branch
   }
 }
 
 export const currentBranch = async () => {
-  // eslint-disable-next-line no-useless-catch
   try {
     const branch: branch =
       (await plugin.call('dgitApi', "currentbranch")) || {
@@ -525,13 +524,13 @@ export const remoteCommits = async (url: string, branch: string, length: number)
 export const saveGitHubCredentials = async (credentials: { username: string, email: string, token: string }) => {
   console.log('saveGitHubCredentials', credentials)
   try {
-    const storedEmail = await plugin.call('config', 'getAppParameter','settings/github-email')
-    const storedUsername = await plugin.call('config', 'getAppParameter','settings/github-user-name')
-    const storedToken = await plugin.call('config', 'getAppParameter','settings/gist-access-token')
+    const storedEmail = await plugin.call('config', 'getAppParameter', 'settings/github-email')
+    const storedUsername = await plugin.call('config', 'getAppParameter', 'settings/github-user-name')
+    const storedToken = await plugin.call('config', 'getAppParameter', 'settings/gist-access-token')
 
-    if(storedUsername !== credentials.username)  await plugin.call('config', 'setAppParameter', 'settings/github-user-name', credentials.username)
-    if(storedEmail !== credentials.email) await plugin.call('config', 'setAppParameter', 'settings/github-email', credentials.email)
-    if(storedToken !== credentials.token) await plugin.call('config', 'setAppParameter', 'settings/gist-access-token', credentials.token)
+    if (storedUsername !== credentials.username) await plugin.call('config', 'setAppParameter', 'settings/github-user-name', credentials.username)
+    if (storedEmail !== credentials.email) await plugin.call('config', 'setAppParameter', 'settings/github-email', credentials.email)
+    if (storedToken !== credentials.token) await plugin.call('config', 'setAppParameter', 'settings/gist-access-token', credentials.token)
 
   } catch (e) {
     console.log(e)
@@ -574,7 +573,7 @@ export const loadGitHubUserFromToken = async () => {
         const storedEmail = await plugin.call('config', 'getAppParameter', 'settings/github-email')
         if (primaryEmail && storedEmail !== primaryEmail.email) await plugin.call('config', 'setAppParameter', 'settings/github-email', primaryEmail.email)
         const storedUsername = await plugin.call('config', 'getAppParameter', 'settings/github-user-name')
-        if(data.user && data.user.login && (storedUsername !== data.user.login)) await plugin.call('config', 'setAppParameter', 'settings/github-user-name', data.user.login)
+        if (data.user && data.user.login && (storedUsername !== data.user.login)) await plugin.call('config', 'setAppParameter', 'settings/github-user-name', data.user.login)
 
         dispatch(setGitHubUser(data.user))
         dispatch(setRateLimit(data.ratelimit))

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

@@ -6,6 +6,7 @@ import { Plugin } from "@remixproject/engine";
 import { getBranches, getFileStatusMatrix, loadGitHubUserFromToken, getRemotes, gitlog, setPlugin } from "./gitactions";
 import { Profile } from "@remixproject/plugin-utils";
 import { CustomRemixApi } from "@remix-api";
+import { statusChanged } from "./pluginActions";
 
 let plugin: Plugin<any, CustomRemixApi>, gitDispatch: React.Dispatch<gitActionDispatch>, loaderDispatch: React.Dispatch<any>, loadFileQueue: AsyncDebouncedQueue
 let callBackEnabled: boolean = false
@@ -103,7 +104,9 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
    
   })
   plugin.on('dgitApi', 'init', async () => {
-    
+    loadFileQueue.enqueue(async () => {
+      loadFiles()
+    }, 10)
   })
   plugin.on('dgitApi', 'add', async () => {
     loadFileQueue.enqueue(async () => {
@@ -200,7 +203,14 @@ const syncFromWorkspace = async (callback: Function, isLocalhost = false) => {
 
 export const loadFiles = async (filepaths: string[] = null) => {
   try {
+    const branch = await plugin.call('dgitApi', "currentbranch")
+    console.log('load files', branch)
+    if(branch) {
       await getFileStatusMatrix(filepaths);
+    }else{
+      await plugin.call('fileDecorator', 'clearFileDecorators')
+      statusChanged(0)
+    }
   } catch (e) {
     // TODO: handle error
     console.error(e);

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

@@ -1,13 +1,14 @@
-import { ViewPlugin } from "@remixproject/engine-web"
+
 import { commitChange, fileStatusResult, gitActionDispatch, gitState } from "../types"
 import { fileDecoration, fileDecorationType } from "@remix-ui/file-decorators"
 import { removeSlash } from "../utils"
-import path from "path"
-import { getFilesByStatus, getFilesWithNotModifiedStatus } from "./fileHelpers"
+import { getFilesByStatus } from "./fileHelpers"
+import { CustomRemixApi } from "@remix-api";
+import { Plugin } from "@remixproject/engine";
 
-let plugin: ViewPlugin, gitDispatch: React.Dispatch<gitActionDispatch>, loaderDispatch: React.Dispatch<any>
+let plugin: Plugin<any, CustomRemixApi>, gitDispatch: React.Dispatch<gitActionDispatch>, loaderDispatch: React.Dispatch<any>
 
-export const setPlugin = (p: ViewPlugin, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>) => {
+export const setPlugin = (p: Plugin<any, CustomRemixApi>, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>) => {
   plugin = p
   gitDispatch = gitDispatcher
   loaderDispatch = loaderDispatcher

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

@@ -31,6 +31,7 @@ export interface gitActions {
     sendToGitLog: (message: gitLog) => Promise<void>
     clearGitLog: () => Promise<void>
     getFileStatusMatrix(filespaths:[]): Promise<void>
+    init(): Promise<void>
 }
 
 export const gitActionsContext = React.createContext<gitActions>(null)