Add git status to workspaces list

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

@@ -19,7 +19,7 @@ const profile = {
   icon: 'assets/img/fileManager.webp',
   permission: true,
   version: packageJson.version,
-  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'dirList', 'fileList', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles'],
+  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'dirList', 'fileList', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles', 'isGitRepo'],
   kind: 'file-system'
 }
 const errorMsg = {
@@ -810,6 +810,13 @@ class FileManager extends Plugin {
       return provider.workspace
     }
   }
+
+  async isGitRepo (directory: string): Promise<boolean> {
+    const path = directory + '/.git'
+    const exists = await this.exists(path)
+
+    return exists
+  }
 }
 
 module.exports = FileManager

libs/remix-ui/workspace/src/lib/actions/payload.ts

@@ -7,7 +7,7 @@ export const setCurrentWorkspace = (workspace: string) => {
   }
 }
 
-export const setWorkspaces = (workspaces: string[]) => {
+export const setWorkspaces = (workspaces: { name: string; isGitRepo: boolean; }[]) => {
   return {
     type: 'SET_WORKSPACES',
     payload: workspaces

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -302,24 +302,29 @@ export const uploadFile = async (target, targetFolder: string, cb?: (err: Error,
   })
 }
 
-export const getWorkspaces = async (): Promise<string[]> | undefined => {
+export const getWorkspaces = async (): Promise<{name: string, isGitRepo: boolean}[]> | undefined => {
   try {
-    const workspaces: string[] = await new Promise((resolve, reject) => {
+    const workspaces: {name: string, isGitRepo: boolean}[] = await new Promise((resolve, reject) => {
       const workspacesPath = plugin.fileProviders.workspace.workspacesPath
 
       plugin.fileProviders.browser.resolveDirectory('/' + workspacesPath, (error, items) => {
         if (error) {
           return reject(error)
         }
-        resolve(Object.keys(items)
+        Promise.all(Object.keys(items)
           .filter((item) => items[item].isDirectory)
-          .map((folder) => folder.replace(workspacesPath + '/', '')))
+          .map(async (folder) => {
+            const isGitRepo: boolean = await plugin.fileProviders.browser.exists('/' + folder + '/.git')
+            return {
+              name: folder.replace(workspacesPath + '/', ''),
+              isGitRepo
+            }
+          })).then(workspacesList => resolve(workspacesList))
       })
     })
-
     await plugin.setWorkspaces(workspaces)
     return workspaces
-  } catch (e) {}
+ } catch (e) {}
 }
 
 export const cloneRepository = async (url: string) => {

libs/remix-ui/workspace/src/lib/reducers/workspace.ts

@@ -50,7 +50,8 @@ export interface BrowserState {
   popup: string,
   focusEdit: string,
   focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[],
-  initializingFS: boolean
+  initializingFS: boolean,
+  isGitRepo: boolean
 }
 
 export const browserInitialState: BrowserState = {
@@ -98,7 +99,8 @@ export const browserInitialState: BrowserState = {
   popup: '',
   focusEdit: '',
   focusElement: [],
-  initializingFS: true
+  initializingFS: true,
+  isGitRepo: false
 }
 
 export const browserReducer = (state = browserInitialState, action: Action) => {
@@ -118,7 +120,7 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
     }
 
     case 'SET_WORKSPACES': {
-      const payload = action.payload as string[]
+      const payload = action.payload as { name: string; isGitRepo: boolean; }[]
 
       return {
         ...state,

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
+import { Dropdown } from 'react-bootstrap'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import { FileSystemContext } from './contexts'
 import './css/remix-ui-workspace.css'
@@ -9,6 +10,8 @@ export function Workspace () {
   const LOCALHOST = ' - connect to localhost - '
   const NO_WORKSPACE = ' - none - '
   const [currentWorkspace, setCurrentWorkspace] = useState<string>(NO_WORKSPACE)
+  // const [toggleSelectWorkspace, setToggleSelectWorkspace] = useState<string | JSX.Element>("")
+  const [dropdownWorkspacesList, setDropdownWorkspacesList] = useState<{string: string | JSX.Element}[]>([])
   const global = useContext(FileSystemContext)
   const workspaceRenameInput = useRef()
   const workspaceCreateInput = useRef()
@@ -38,6 +41,10 @@ export function Workspace () {
         switchWorkspace(NO_WORKSPACE)
       }
     }
+    const dropdownList = global.fs.browser.workspaces.map((workspace) => {
+
+    })
+    setDropdownWorkspacesList(dropdownList)
   }, [global.fs.browser.workspaces])
 
   const renameCurrentWorkspace = () => {
@@ -248,7 +255,25 @@ export function Workspace () {
                     title='Clone Git Repository'>
                   </span>
                 </span>
-              <select id="workspacesSelect" value={currentWorkspace} data-id="workspacesSelect" onChange={(e) => switchWorkspace(e.target.value)} className="form-control custom-select">
+                {/* <Dropdown
+                  onSelect={value => {
+                    const { code, title } = [{ code: 'NG', title: 'Nigeria' }].find(({ code }) => value === code)
+
+                    setSelectedCountry(value)
+                    setToggleContents(<><i className="fas fa-code-branch"></i> {title}</>)
+                  }}
+                >
+                  <Dropdown.Toggle variant="secondary" id="dropdown-flags" className="text-left" style={{ width: 300 }}>
+                    {toggleContents}
+                  </Dropdown.Toggle>
+
+                  <Dropdown.Menu>
+                    {[{ code: 'NG', title: 'Nigeria' }].map(({ code, title }) => (
+                      <Dropdown.Item key={code} eventKey={code}><i className="fas fa-code-branch"></i> {title}</Dropdown.Item>
+                    ))}
+                  </Dropdown.Menu>
+                </Dropdown> */}
+              <select id="workspacesSelect" value={currentWorkspace} data-id="workspacesSelect" onChange={(e) => switchWorkspace(e.target.value)} className="form-select">
                 {
                   global.fs.browser.workspaces
                     .map((folder, index) => {