Filter branches list and view all branches on dgit

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

@@ -125,10 +125,10 @@ class DGitProvider extends Plugin {
     return status
   }
 
-  async remotes () {
+  async remotes (config) {
     let remotes = []
     try {
-      remotes = await git.listRemotes({ ...await this.getGitConfig() })
+      remotes = await git.listRemotes({ ...config ? config : await this.getGitConfig() })
     } catch (e) {
       // do nothing
     }
@@ -155,7 +155,7 @@ class DGitProvider extends Plugin {
 
   async branches (config) {
     const cmd = config ? config : await this.getGitConfig()
-    const remotes = await this.remotes()
+    const remotes = await this.remotes(config)
     let branches = []
     branches = (await git.listBranches(cmd)).map((branch) => { return { remote: undefined, name: branch } })
     for (const remote of remotes) {

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

@@ -488,3 +488,11 @@ export const moveFolder = async (src: string, dest: string) => {
     dispatch(displayPopUp('Oops! An error ocurred while performing moveDir operation.' + error))
   }
 }
+
+
+export const showAllBranches = async () => {
+  const isActive = await plugin.call('manager', 'isActive', 'dgit')
+
+  if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+  plugin.call('menuicons', 'select', 'dgit')
+}

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

@@ -338,7 +338,6 @@ export const getWorkspaces = async (): Promise<{name: string, isGitRepo: boolean
               let currentBranch = null
 
               branches = await getGitRepoBranches(folder)
-              console.log('branches: ', branches)
               currentBranch = await getGitRepoCurrentBranch(folder)
 
               return {

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -32,6 +32,7 @@ export const FileSystemContext = createContext<{
   dispatchHandleRestoreBackup: () => Promise<void>
   dispatchCloneRepository: (url: string) => Promise<void>,
   dispatchMoveFile: (src: string, dest: string) => Promise<void>,
-  dispatchMoveFolder: (src: string, dest: string) => Promise<void>
+  dispatchMoveFolder: (src: string, dest: string) => Promise<void>,
+  dispatchShowAllBranches: () => Promise<void>
     }>(null)
     

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

@@ -84,6 +84,7 @@
     border-radius: .25rem;
     background: var(--custom-select);
   }
+
   .custom-dropdown-items a {
     border-radius: .25rem;
     text-transform: none;
@@ -133,3 +134,7 @@
     color: var(--text)
   }
 
+  .checkout-input {
+    font-size: 10px !important;
+  }
+  

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

@@ -7,7 +7,9 @@ import { FileSystemContext } from '../contexts'
 import { browserReducer, browserInitialState } from '../reducers/workspace'
 import { initWorkspace, fetchDirectory, removeInputField, deleteWorkspace, clearPopUp, publishToGist, createNewFile, setFocusElement, createNewFolder,
   deletePath, renamePath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace,
-  fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder } from '../actions'
+  fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder,
+  showAllBranches
+} from '../actions'
 import { Modal, WorkspaceProps, WorkspaceTemplate } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Workspace } from '../remix-ui-workspace'
@@ -136,6 +138,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
   const dispatchMoveFolder = async (src: string, dest: string) => {
     await moveFolder(src, dest)
   }
+  
+  const dispatchShowAllBranches = async () => {
+    await showAllBranches()
+  }
 
   useEffect(() => {
     dispatchInitWorkspace()
@@ -241,7 +247,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchHandleRestoreBackup,
     dispatchCloneRepository,
     dispatchMoveFile,
-    dispatchMoveFolder
+    dispatchMoveFolder,
+    dispatchShowAllBranches
   }
   return (
     <FileSystemContext.Provider value={value}>

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

@@ -16,6 +16,8 @@ export function Workspace () {
   const [selectedWorkspace, setSelectedWorkspace] = useState<{ name: string, isGitRepo: boolean, branches?: { remote: any; name: string; }[], currentBranch?: string }>(null)
   const [showDropdown, setShowDropdown] = useState<boolean>(false)
   const [showIconsMenu, hideIconsMenu] = useState<boolean>(false)
+  const [showBranches, setShowBranches] = useState<boolean>(false)
+  const [branchFilter, setBranchFilter] = useState<string>('')  
   const displayOzCustomRef = useRef<HTMLDivElement>()
   const mintableCheckboxRef = useRef()
   const burnableCheckboxRef = useRef()
@@ -198,6 +200,18 @@ export function Workspace () {
     // @ts-ignore
     workspaceCreateInput.current.value = `${workspaceCreateTemplateInput.current.value + '_upgradeable'}_${Date.now()}`
   }
+  
+  const toggleBranches = (isOpen: boolean) => {
+    setShowBranches(isOpen)
+  }
+
+  const handleBranchFilerChange = (branchFilter: string) => {
+    setBranchFilter(branchFilter)
+  }
+
+  const showAllBranches = () => {
+    global.dispatchShowAllBranches()
+  }
 
   const createModalMessage = () => {
     return (
@@ -685,18 +699,31 @@ export function Workspace () {
           <div className='d-flex justify-space-between p-1'>
             <div className="mr-auto text-uppercase text-dark pt-2 pl-2">DGIT</div>
             <div className="pt-1 mr-1">
-              <Dropdown style={{ height: 30, minWidth: 80 }}>
+              <Dropdown style={{ height: 30, minWidth: 80 }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
                 <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control h-100 p-0 pl-2 pr-2 text-dark" icon={null}>
-                  { selectedWorkspace.currentBranch || '-none-'}
+                  { selectedWorkspace.currentBranch || '-none-' }
                 </Dropdown.Toggle>
 
-                <Dropdown.Menu as={CustomMenu} className='custom-dropdown-items' data-id="custom-dropdown-items">
+                <Dropdown.Menu as={CustomMenu} className='custom-dropdown-items branches-dropdown' data-id="custom-dropdown-items">
+                  <div className='d-flex text-dark' style={{ fontSize: 14, fontWeight: 'bold' }}>
+                    <span className='mt-2 ml-2 mr-auto'>Switch branches</span>
+                    <div className='pt-2 pr-2' onClick={() => { toggleBranches(false) }}><i className='fa fa-close'></i>
+                    </div>
+                  </div>
+                  <div className='border-top py-2'>
+                    <input className='form-control border checkout-input bg-light' placeholder='Find or create a branch.' style={{ minWidth: 225 }} onChange={(e) => { handleBranchFilerChange(e.target.value) }} />
+                  </div>
+                  <div className='border-top'>
+                    {
+                      (selectedWorkspace.branches || []).filter(branch => branch.name.includes(branchFilter) && branch.remote).slice(0, 4).map((branch, index) => {
+                        return (
+                          <Dropdown.Item key={index}><span>{ selectedWorkspace.currentBranch === branch.name ? <span>&#10003; { branch.name } </span> : <span className="pl-3">{ branch.name }</span> }</span></Dropdown.Item>
+                        )
+                      })
+                    }
+                  </div>
                   {
-                    (selectedWorkspace.branches || []).map((branch, index) => {
-                      return (
-                        <Dropdown.Item key={index}><span>{ selectedWorkspace.currentBranch === branch.name ? <span>&#10003; { branch.name } </span> : <span className="pl-3">{ branch.name }</span> }</span></Dropdown.Item>
-                      )
-                    })
+                    (selectedWorkspace.branches || []).length > 4 && <div className='text-center border-top pt-2'><a href='#' style={{ fontSize: 12 }} onClick={showAllBranches}>view all branches</a></div>
                   }
                 </Dropdown.Menu>
               </Dropdown>