disabled panel

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

@@ -1,4 +1,6 @@
 {
   "electron.openFolder": "Open Folder",
-  "electron.recentFolders": "Recent Folders"
+  "electron.recentFolders": "Recent Folders",
+  "electron.gitClone": "Clone a Git Repository",
+  "electron.openFolderMessage": "In order to use Git features, you can open a folder or clone a repository."
 }

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

@@ -0,0 +1,3 @@
+{
+    "gitui.openFolderMessage": "In order to use Git features, you can open a folder or clone a repository."
+}

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

@@ -7,6 +7,6 @@ export interface IFilePanelApi {
         switchToWorkspace: (workspace: string) => Promise<void>;
     } & StatusEvents
     methods: IFilePanel['methods'] & {
-        
+        clone: () => Promise<void>;
     }
 }

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

@@ -7,5 +7,7 @@ export interface IFs {
   methods: {
     selectFolder(path?: string, title?: string, button?: string): Promise<string> 
     openWindow(path?: string): Promise<void>,
+    getWorkingDir(): Promise<string>,
+    openFolderInSameWindow(path: string): Promise<void>,
   }
 }

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

@@ -1,12 +1,30 @@
-import React, { useEffect, useState } from 'react'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
+import React, { useEffect, useState, useContext } from 'react'
+import { FormattedMessage } from "react-intl"
+import { pluginActionsContext } from '../state/context'
+import { openCloneDialog, openFolderInSameWindow } from '../lib/pluginActions'
 
 export const Disabled = () => {
+  const platform = useContext(platformContext)
+ 
+  const openFolderElectron = async (path: string) => {
+    await openFolderInSameWindow(path)
+  }
+
+  const clone = async () => {
+    openCloneDialog()
+  }
 
   return (
+    (platform === appPlatformTypes.desktop) ?
+      <div className='p-1'>
+      <div><FormattedMessage id="gitui.openFolderMessage"/></div>
+      <div data-id="openFolderButton" onClick={async () => { await openFolderElectron(null) }} className='btn btn-primary w-100 my-1'><FormattedMessage id="electron.openFolder" /></div> 
+      <div data-id="cloneButton" onClick={async () => { await clone() }} className='btn btn-primary w-100'><FormattedMessage id="electron.gitClone" /></div> 
+      </div>
+      :
       <div data-id='disabled' className='text-sm w-100 alert alert-warning'>
         Git is currently disabled.<br></br>
         If you are using RemixD you can use git on the terminal.<br></br>
-    </div>
-  )
-
+      </div>)
 }

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useReducer, useState } from 'react'
+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 } from '../lib/gitactions'
 import { loadFiles, setCallBacks } from '../lib/listeners'
-import { openDiff, openFile, saveToken, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
+import { openDiff, openFile, openFolderInSameWindow, saveToken, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
 import { gitActionsContext, pluginActionsContext } from '../state/context'
 import { gitReducer } from '../state/gitreducer'
 import { defaultGitState, defaultLoaderState, gitState, loaderState } from '../types'
@@ -34,6 +34,7 @@ import { Init } from './panels/init'
 import { CustomRemixApi } from "@remix-api";
 import { Plugin } from "@remixproject/engine";
 import { Disabled } from './disabled'
+import { platformContext } from '@remix-ui/app'
 
 export const gitPluginContext = React.createContext<gitState>(defaultGitState)
 export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
@@ -51,6 +52,8 @@ export const GitUI = (props: IGitUi) => {
   const [needsInit, setNeedsInit] = useState<boolean>(true)
   const [appLoaded, setAppLoaded] = useState<boolean>(false)
 
+  const platform = useContext(platformContext)
+
   useEffect(() => {
     plugin.emit('statusChanged', {
       key: 'loading',
@@ -64,7 +67,7 @@ export const GitUI = (props: IGitUi) => {
 
   useEffect(() => {
     if (!appLoaded) return
-    setCallBacks(plugin, gitDispatch, loaderDispatch, setActivePanel)
+    setCallBacks(plugin, gitDispatch, loaderDispatch, setActivePanel, platform)
     setPlugin(plugin, gitDispatch, loaderDispatch)
     loaderDispatch({ type: 'plugin', payload: true })
 
@@ -159,11 +162,13 @@ export const GitUI = (props: IGitUi) => {
     saveToken,
     saveGitHubCredentials,
     getGitHubCredentialsFromLocalStorage,
-    showAlert
+    showAlert,
+    openFolderInSameWindow
   }
 
   return (
-    <>{(!gitState.canUseApp) ? <Disabled></Disabled> :
+    <>{(!gitState.canUseApp) ?
+      <Disabled></Disabled> :
       <div className="m-1">
         <gitPluginContext.Provider value={gitState}>
           <loaderContext.Provider value={loaderState}>

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

@@ -1,12 +1,13 @@
 
 import React from "react";
-import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails } from "../state/gitpayload";
+import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails, setDesktopWorkingDir } from "../state/gitpayload";
 import { gitActionDispatch } from "../types";
 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";
+import { appPlatformTypes } from "@remix-ui/app";
 
 let plugin: Plugin<any, CustomRemixApi>, gitDispatch: React.Dispatch<gitActionDispatch>, loaderDispatch: React.Dispatch<any>, loadFileQueue: AsyncDebouncedQueue
 let callBackEnabled: boolean = false
@@ -20,7 +21,7 @@ class AsyncDebouncedQueue {
     this.queues = new Map();
   }
 
-  enqueue(callback: AsyncCallback, customDelay?:number): void {
+  enqueue(callback: AsyncCallback, customDelay?: number): void {
     if (this.queues.has(callback)) {
       clearTimeout(this.queues.get(callback)!.timer);
     }
@@ -34,7 +35,7 @@ class AsyncDebouncedQueue {
   }
 }
 
-export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>, setAtivePanel: React.Dispatch<React.SetStateAction<string>>) => {
+export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>, setAtivePanel: React.Dispatch<React.SetStateAction<string>>, platform: appPlatformTypes) => {
   plugin = viewPlugin
   gitDispatch = gitDispatcher
   loaderDispatch = loaderDispatcher
@@ -65,7 +66,11 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       loadFiles()
     })
   });
+
   plugin.on('fs', 'workingDirChanged', async (path: string) => {
+    console.log('workingDirChanged', path)
+    gitDispatcher(setDesktopWorkingDir(path))
+    gitDispatch(setCanUseApp(path ? true : false))
     loadFileQueue.enqueue(async () => {
       loadFiles()
     })
@@ -79,8 +84,17 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       getRemotes()
     })
   })
+
   plugin.on("filePanel", "setWorkspace", async (x: any) => {
+    console.log('setWorkspace', x)
+    
+    if(platform == appPlatformTypes.desktop) {
+      const workingDir = await plugin.call('fs', 'getWorkingDir')
+      gitDispatch(setCanUseApp(workingDir? true : false))
+    }else{
       gitDispatch(setCanUseApp(x && !x.isLocalhost && x.name))
+    } 
+
     loadFileQueue.enqueue(async () => {
       loadFiles()
     })
@@ -95,6 +109,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
     })
   });
 
+
   plugin.on('dgitApi', 'checkout', async () => {
     loadFileQueue.enqueue(async () => {
       gitlog()

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

@@ -98,3 +98,10 @@ export const clearFileDecorator = async(path: string) => {
   await plugin.call('fileDecorator', 'clearFileDecorators', path)
 }
 
+export const openFolderInSameWindow = async (path: string) => {
+  await plugin.call('fs', 'openFolderInSameWindow', path)
+}
+
+export const openCloneDialog = async () => {
+  plugin.call('filePanel', 'clone')
+}

libs/remix-ui/git/src/state/actions.ts

@@ -42,6 +42,7 @@ export interface ActionPayloadTypes {
   SET_LOG: gitLog
   CLEAR_LOG: void
   SET_USER_EMAILS: userEmails
+  DESKTOP_SET_WORKING_DIR: string
 }
 
 export interface Action<T extends keyof ActionPayloadTypes> {

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

@@ -55,6 +55,7 @@ export interface pluginActions {
         token: string
     }>
     showAlert({ title, message }:{title: string, message: string}): Promise<void>
+    openFolderInSameWindow(path: string): Promise<void>
 }
 
 export const pluginActionsContext = React.createContext<pluginActions>(null)

libs/remix-ui/git/src/state/gitpayload.ts

@@ -218,3 +218,10 @@ export const clearLog = () => {
     type: 'CLEAR_LOG'
   }
 }
+
+export const setDesktopWorkingDir = (dir: string) => {
+  return {
+    type: 'DESKTOP_SET_WORKING_DIR',
+    payload: dir
+  }
+}

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

@@ -204,5 +204,11 @@ export const gitReducer = (state: gitState = defaultGitState, action: Actions):
         log: []
       }
 
+
+    case 'DESKTOP_SET_WORKING_DIR':
+      return {
+        ...state,
+        desktopWorkingDir: action.payload
+      }
   }
 }

libs/remix-ui/git/src/types/index.ts

@@ -38,6 +38,7 @@ export type gitState = {
     gitHubScopes: string[]
     gitHubAccessToken: string
     log: gitLog[]
+    desktopWorkingDir?: string
 }
 export type gitLog = {
     type: 'error' | 'warning' | 'info' | 'success',
@@ -69,7 +70,7 @@ export const defaultGitState: gitState = {
   deleted: [],
   modified: [],
   allchangesnotstaged: [],
-  canUseApp: true,
+  canUseApp: false,
   loading: false,
   storageUsed: {},
   reponame: "",
@@ -87,7 +88,8 @@ export const defaultGitState: gitState = {
   userEmails: [] as userEmails,
   gitHubScopes: [],
   gitHubAccessToken: "",
-  log: []
+  log: [],
+  desktopWorkingDir: null
 }
 
 export const defaultLoaderState: loaderState = {
@@ -222,4 +224,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
+export interface setDesktopWorkingDirAction {
+    type: string,
+    payload: string
+}
+
+export type gitActionDispatch = setDesktopWorkingDirAction | setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction