switch branches and checkout to new branch

2 years ago · 6a370e714a
parent 018a324daf
commit 6a370e714a
6 changed files with 93 additions and 61 deletions
--- a/apps/remix-ide/src/app/files/dgitProvider.js
+++ b/apps/remix-ide/src/app/files/dgitProvider.js
@ -107,15 +107,17 @@ class DGitProvider extends Plugin {
    }, 1000)
  }

-  async checkout (cmd) {
+  async checkout (cmd, refresh = true) {
    await git.checkout({
      ...await this.getGitConfig(),
      ...cmd
    })
+    if (refresh) {
        setTimeout(async () => {
        await this.call('fileManager', 'refresh')
      }, 1000)
    }
+  }

  async log (cmd) {
    const status = await git.log({
@ -135,14 +137,16 @@ class DGitProvider extends Plugin {
    return remotes
  }

-  async branch (cmd) {
+  async branch (cmd, refresh = true) {
    const status = await git.branch({
      ...await this.getGitConfig(),
      ...cmd
    })
+    if (refresh) {
        setTimeout(async () => {
        await this.call('fileManager', 'refresh')
      }, 1000)
+    }
    return status
  }

--- a/libs/remix-ui/workspace/src/lib/actions/index.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/index.ts
@ -488,11 +488,3 @@ 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')
-}
--- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
@ -451,28 +451,29 @@ export const switchToBranch = async (branch: string) => {
  const gitConfig = {
    ref: branch
  }
-  const promise = plugin.call('dGitProvider', 'checkout', gitConfig)
+  const promise = plugin.call('dGitProvider', 'checkout', gitConfig, false)

  dispatch(cloneRepositoryRequest())
  promise.then(async () => {
    await fetchWorkspaceDirectory(ROOT_PATH)
    dispatch(cloneRepositorySuccess())
  }).catch((e) => {
-    const checkoutModal = {
-      id: 'checkoutGitBranch',
-      title: 'Checkout Git Branch',
-      message: 'An error occurred: ' + e,
-      modalType: 'modal',
-      okLabel: 'OK',
-      okFn: async () => {
-        // await deleteWorkspace(repoName)
-        dispatch(cloneRepositoryFailed())
-      },
-      hideFn: async () => {
-        // await deleteWorkspace(repoName)
    dispatch(cloneRepositoryFailed())
+  })
+  return promise
+}
+
+export const switchToNewBranch = async (branch: string) => {
+  const gitConfig = {
+    ref: branch
  }
-    }
-    plugin.call('notification', 'modal', checkoutModal)
+  const promise = plugin.call('dGitProvider', 'branch', gitConfig, false)
+
+  dispatch(cloneRepositoryRequest())
+  promise.then(async () => {
+    dispatch(cloneRepositorySuccess())
+  }).catch((e) => {
+    dispatch(cloneRepositoryFailed())
  })
+  return promise
 }
--- a/libs/remix-ui/workspace/src/lib/contexts/index.ts
+++ b/libs/remix-ui/workspace/src/lib/contexts/index.ts
@ -34,6 +34,7 @@ export const FileSystemContext = createContext<{
  dispatchMoveFile: (src: string, dest: string) => Promise<void>,
  dispatchMoveFolder: (src: string, dest: string) => Promise<void>,
  dispatchShowAllBranches: () => Promise<void>,
-  dispatchSwitchToBranch: (branch: string) => Promise<void>
+  dispatchSwitchToBranch: (branch: string) => Promise<void>,
+  dispatchSwitchToNewBranch: (branch: string) => Promise<void>
    }>(null)
    
--- a/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
+++ b/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
@ -8,8 +8,7 @@ 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,
-  showAllBranches,
-  switchToBranch
+  showAllBranches, switchToBranch, switchToNewBranch
 } from '../actions'
 import { Modal, WorkspaceProps, WorkspaceTemplate } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -148,6 +147,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
    await switchToBranch(branch)
  }

+  const dispatchSwitchToNewBranch = async (branch: string) => {
+    await switchToNewBranch(branch)
+  }
+
  useEffect(() => {
    dispatchInitWorkspace()
  }, [])
@ -254,7 +257,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
    dispatchMoveFile,
    dispatchMoveFolder,
    dispatchShowAllBranches,
-    dispatchSwitchToBranch
+    dispatchSwitchToBranch,
+    dispatchSwitchToNewBranch
  }
  return (
    <FileSystemContext.Provider value={value}>
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext, SyntheticEvent } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef, useContext, SyntheticEvent, ChangeEvent, KeyboardEvent } from 'react' // eslint-disable-line
 import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { CustomIconsToggle, CustomMenu, CustomToggle } from '@remix-ui/helper'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
@ -18,6 +18,7 @@ export function Workspace () {
  const [showIconsMenu, hideIconsMenu] = useState<boolean>(false)
  const [showBranches, setShowBranches] = useState<boolean>(false)
  const [branchFilter, setBranchFilter] = useState<string>('')
+  const [selectedBranch, setSelectedBranch] = useState<string>('')
  const displayOzCustomRef = useRef<HTMLDivElement>()
  const mintableCheckboxRef = useRef()
  const burnableCheckboxRef = useRef()
@ -30,6 +31,7 @@ export function Workspace () {
  const workspaceCreateTemplateInput = useRef()
  const cloneUrlRef = useRef<HTMLInputElement>()
  const initGitRepoRef = useRef<HTMLInputElement>()
+  const filteredBranches = selectedWorkspace ? (selectedWorkspace.branches || []).filter(branch => branch.name.includes(branchFilter) && branch.remote).slice(0, 20) : []

  useEffect(() => {
    let workspaceName = localStorage.getItem('currentWorkspace')
@ -65,6 +67,7 @@ export function Workspace () {
    const workspace = global.fs.browser.workspaces.find(workspace => workspace.name === currentWorkspace)

    setSelectedWorkspace(workspace)
+    workspace && setSelectedBranch(workspace.currentBranch)
  }, [currentWorkspace])

  const renameCurrentWorkspace = () => {
@ -205,7 +208,9 @@ export function Workspace () {
    setShowBranches(isOpen)
  }

-  const handleBranchFilerChange = (branchFilter: string) => {
+  const handleBranchFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const branchFilter = e.target.value
+
    setBranchFilter(branchFilter)
  }

@ -213,8 +218,22 @@ export function Workspace () {
    global.dispatchShowAllBranches()
  }

-  const switchToBranch = (branch: string) => {
-    global.dispatchSwitchToBranch(branch)
+  const switchToBranch = async (branch: string) => {
+    try {
+      await global.dispatchSwitchToBranch(branch)
+      setSelectedBranch(branch)
+    } catch (e) {
+      global.modal('Checkout Git Branch', e.message, 'OK', () => {})
+    }
+  }
+
+  const switchToNewBranch = async () => {
+    try {
+      await global.dispatchSwitchToNewBranch(branchFilter)
+      setSelectedBranch(branchFilter)
+    } catch (e) {
+      global.modal('Checkout Git Branch', e.message, 'OK', () => {})
+    }
  }

  const createModalMessage = () => {
@ -606,6 +625,7 @@ export function Workspace () {
                        </Dropdown.Item>
                      ))
                    }
+                    <Dropdown.Item onClick={() => { switchWorkspace(LOCALHOST) }}>{currentWorkspace === LOCALHOST ? <span>&#10003; localhost </span> : <span className="pl-3"> { LOCALHOST } </span>}</Dropdown.Item>
                    { ((global.fs.browser.workspaces.length <= 0) || currentWorkspace === NO_WORKSPACE) && <Dropdown.Item onClick={() => { switchWorkspace(NO_WORKSPACE) }}>{ <span className="pl-3">NO_WORKSPACE</span> }</Dropdown.Item> }
                  </Dropdown.Menu>
                </Dropdown>
@ -705,7 +725,7 @@ export function Workspace () {
            <div className="pt-1 mr-1">
              <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-' }
+                  { global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : selectedBranch || '-none-' }
                </Dropdown.Toggle>

                <Dropdown.Menu as={CustomMenu} className='custom-dropdown-items branches-dropdown' data-id="custom-dropdown-items">
@ -715,21 +735,31 @@ export function Workspace () {
                    </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) }} />
+                    <input
+                      className='form-control border checkout-input bg-light'
+                      placeholder='Find or create a branch.'
+                      style={{ minWidth: 225 }}
+                      onChange={handleBranchFilterChange}
+                    />
                  </div>
-                  <div className='border-top'>
+                  <div className='border-top' style={{ maxHeight: 120, overflowY: 'scroll' }}>
                    {
-                      (selectedWorkspace.branches || []).filter(branch => branch.name.includes(branchFilter) && branch.remote).slice(0, 4).map((branch, index) => {
+                      filteredBranches.length > 0 ? filteredBranches.map((branch, index) => {
                        return (
-                          <Dropdown.Item key={index}>
+                          <Dropdown.Item key={index} onClick={() => { switchToBranch(branch.name) }}>
                            { 
-                              selectedWorkspace.currentBranch === branch.name ?
-                              <span onClick={() => { switchToBranch(branch.name) }}>&#10003; { branch.name } </span> :
-                              <span className="pl-3" onClick={() => { switchToBranch(branch.name) }}>{ branch.name }</span>
+                              selectedBranch === branch.name ?
+                              <span>&#10003; { branch.name } </span> :
+                              <span className="pl-3">{ branch.name }</span>
                            }
                          </Dropdown.Item>
                        )
-                      })
+                      }) : 
+                      <Dropdown.Item onClick={switchToNewBranch}>
+                        <div className="pl-1 pr-1">
+                          <i className="fas fa-code-branch pr-2"></i><span>Create branch: { branchFilter } from '{selectedBranch}'</span>
+                        </div>
+                      </Dropdown.Item>
                    }
                  </div>
                  {