Workspace selection fixes

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

@@ -9,6 +9,7 @@
   "filePanel.clone": "Clone",
   "filePanel.download": "Download",
   "filePanel.backup": "Backup",
+  "filePanel.localFileSystem": "Connect to Local Filesystem",
   "filePanel.restore": "Restore",
   "filePanel.name": "Name",
   "filePanel.save": "Save",
@@ -28,6 +29,7 @@
   "filePanel.workspace.chooseTemplate": "Choose a template",
   "filePanel.workspace.backup": "Backup All Workspaces",
   "filePanel.workspace.restore": "Restore Workspaces from the Backup",
+  "filePanel.workspace.localFileSystem": "Connect to Local Filesystem using Remixd",
   "filePanel.workspace.clone": "Clone Git Repository",
   "filePanel.workspace.cloneMessage": "Please provide a valid git repository url.",
   "filePanel.workspace.enterGitUrl": "Enter git repository url",
@@ -92,7 +94,7 @@
   "filePanel.cancel": "Cancel",
   "filePanel.selectFolder": "Select or create folder",
   "filePanel.createNewWorkspace": "create a new workspace",
-  "filePanel.connectToLocalhost": "connect to localhost",
+  "filePanel.connectToLocalhost": "Connect to Local Filesystem",
   "filePanel.copiedToClipboard": "Copied to clipboard {path}",
   "filePanel.downloadFailed": "Download Failed",
   "filePanel.downloadFailedMsg": "Unexpected error while downloading: {error}",

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -53,6 +53,20 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         icon: 'fa-solid fa-link',
         placement: 'top',
         platforms: [appPlatformTypes.web, appPlatformTypes.desktop]
+      },
+      {
+        action: 'connectToLocalFileSystem',
+        title: 'Connect to local filesystem using remixd',
+        icon: 'fa-solid fa-desktop',
+        placement: 'top',
+        platforms: [appPlatformTypes.web]
+      },
+      {
+        action: 'initializeWorkspaceAsGitRepo',
+        title: 'Initialize workspace as a git repository',
+        icon: 'fa-brands fa-git-alt',
+        placement: 'top',
+        platforms: [appPlatformTypes.web, appPlatformTypes.desktop]
       }
     ].filter(
       (item) =>
@@ -136,6 +150,29 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                   </label>
                 </CustomTooltip>
               )
+            } else if (action === 'initializeWorkspaceAsGitRepo') {
+              return (
+                <CustomTooltip
+                  placement={placement as Placement}
+                  tooltipId="uploadFolderTooltip"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
+                  <label
+                    id={action}
+                    style={{ fontSize: '1.1rem', cursor: 'pointer' }}
+                    data-id={'fileExplorerUploadFolder' + action}
+                    className={icon + ' mx-1 remixui_menuItem'}
+                    key={`index-${action}-${placement}-${icon}`}
+                    onClick={() => {
+                      _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                      props.handleGitInit()
+                    }}
+                  >
+                  </label>
+                </CustomTooltip>
+              )
             } else {
               return (
                 <CustomTooltip
@@ -158,6 +195,9 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                         props.createNewFolder()
                       } else if (action === 'publishToGist' || action == 'updateGist') {
                         props.publishToGist()
+                      } else if (action === 'connectToLocalFileSystem') {
+                        _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                        props.connectToLocalFileSystem()
                       } else if (action === 'importFromIpfs') {
                         _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
                         props.importFromIpfs('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -581,6 +581,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   }
 
+  const handleGitInit = async () => {
+    const isActive = await plugin.call('manager', 'isActive', 'dgit')
+    if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+    await plugin.call('dgitApi', 'init')
+  }
+
   return (
     <div className="h-100 remixui_treeview" data-id="filePanelFileExplorerTree">
       <div ref={treeRef} tabIndex={0} style={{
@@ -609,6 +615,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
                   uploadFolder={uploadFolder}
                   importFromIpfs={props.importFromIpfs}
                   importFromHttps={props.importFromHttps}
+                  connectToLocalFileSystem={() => props.connectToLocalFileSystem()}
+                  handleGitInit={handleGitInit}
                 />
               </div>
             </span>

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

@@ -17,6 +17,7 @@ export interface HamburgerMenuProps {
   downloadWorkspaces: () => void
   restoreBackup: () => void
   hideIconsMenu: (showMenu: boolean) => void
+  handleRemixdWorkspace: () => void
   showIconsMenu: boolean
   hideWorkspaceOptions: boolean
   hideLocalhostOptions: boolean
@@ -139,6 +140,17 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
         }}
         platforms={[appPlatformTypes.web]}
       ></HamburgerMenuItem>
+      <Dropdown.Divider className="border mb-0 mt-0 remixui_menuhr" style={{ pointerEvents: 'none' }} />
+      <HamburgerMenuItem
+        kind="localFileSystem"
+        fa="far fa-desktop"
+        hideOption={hideWorkspaceOptions}
+        actionOnClick={() => {
+          props.handleRemixdWorkspace()
+          props.hideIconsMenu(!showIconsMenu)
+        }}
+        platforms={[appPlatformTypes.web]}
+      ></HamburgerMenuItem>
     </>
   )
 }

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

@@ -2,6 +2,8 @@ import { branch } from '@remix-ui/git'
 import { customAction } from '@remixproject/plugin-api'
 import { createContext, SyntheticEvent } from 'react'
 import { BrowserState } from '../reducers/workspace'
+import { Plugin } from '@remixproject/engine'
+import { CustomRemixApi } from '@remix-api'
 
 export const FileSystemContext = createContext<{
   fs: any,

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

@@ -917,6 +917,86 @@ export function Workspace() {
     _paq.push(['trackEvent', 'Workspace', 'GIT', 'login'])
   }
 
+  const IsGitRepoDropDownMenuItem = (props: { isGitRepo: boolean, mName: string}) => {
+    return (
+      <>
+        {props.isGitRepo ? (
+          <div className="d-flex justify-content-between">
+            <span>{currentWorkspace === props.mName ? <span>&#10003; {props.mName} </span> : <span className="pl-3">{props.mName}</span>}</span>
+            <i className="fas fa-code-branch pt-1"></i>
+          </div>
+        ) : (
+          <span>{currentWorkspace === props.mName ? <span>&#10003; {props.mName} </span> : <span className="pl-3">{props.mName}</span>}</span>
+        )}
+      </>
+    )
+  }
+
+  const ShowNonLocalHostMenuItems = () => {
+    const cachedFilter = global.fs.browser.workspaces.filter(x => !x.name.includes('localhost'))
+    return (
+      <>
+        {
+          currentWorkspace === LOCALHOST && cachedFilter.length > 0 ? cachedFilter.map(({ name, isGitRepo }, index) => (
+            <Dropdown.Item
+              key={index}
+              onClick={() => {
+                switchWorkspace(name)
+              }}
+              data-id={`dropdown-item-${name}`}
+            >
+              <IsGitRepoDropDownMenuItem isGitRepo={isGitRepo} mName={name} />
+            </Dropdown.Item>
+          )) : <ShowAllMenuItems />
+        }
+      </>
+    )
+  }
+
+  const ShowAllMenuItems = () => {
+    return (
+      <>
+        { global.fs.browser.workspaces.map(({ name, isGitRepo }, index) => (
+          <Dropdown.Item
+            key={index}
+            onClick={() => { switchWorkspace(name) }}
+            data-id={`dropdown-item-${name}`}
+          >
+            <IsGitRepoDropDownMenuItem isGitRepo={isGitRepo} mName={name} />
+          </Dropdown.Item>
+        ))}
+      </>
+    )
+  }
+  const [togglerText, setTogglerText] = useState<'Connecting' | 'Connected to Local FileSystem'>('Connecting')
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTogglerText('Connected to Local FileSystem')
+    }, 1000)
+  }, [selectedWorkspace])
+
+  const WorkspaceDropdownToggle = () => {
+    const [togglerText, setTogglerText] = useState<'Connecting' | 'Connected to Local FileSystem'>('Connecting')
+
+    useEffect(() => {
+      setTimeout(() => {
+        setTogglerText('Connected to Local FileSystem')
+      }, 1000)
+    }, [selectedWorkspace])
+
+    return (
+      <Dropdown.Toggle
+        as={CustomToggle}
+        id="dropdown-custom-components"
+        className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
+        icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
+      >
+        {selectedWorkspace ? selectedWorkspace.name === LOCALHOST ? togglerText : selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
+      </Dropdown.Toggle>
+    )
+  }
+
   return (
     <div className="d-flex flex-column justify-content-between h-100">
       <div
@@ -948,6 +1028,7 @@ export function Workspace() {
                           <HamburgerMenu
                             selectedWorkspace={selectedWorkspace}
                             createWorkspace={createWorkspace}
+                            handleRemixdWorkspace={()=>switchWorkspace(LOCALHOST)}
                             createBlankWorkspace={createBlankWorkspace}
                             renameCurrentWorkspace={renameCurrentWorkspace}
                             downloadCurrentWorkspace={downloadCurrentWorkspace}
@@ -1024,54 +1105,25 @@ export function Workspace() {
                         className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
                         icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
                       >
-                        {selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
+                        {selectedWorkspace ? selectedWorkspace.name === LOCALHOST ? togglerText : selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
                       </Dropdown.Toggle>
-
                       <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
-                        <Dropdown.Item
-                          onClick={() => {
-                            createWorkspace()
-                          }}
-                        >
-                          {
-                            <span className="pl-3">
-                              {' '}
-                            - <FormattedMessage id="filePanel.createNewWorkspace" /> -{' '}
-                            </span>
-                          }
-                        </Dropdown.Item>
                         <Dropdown.Item
                           onClick={() => {
                             switchWorkspace(LOCALHOST)
                           }}
                         >
                           {currentWorkspace === LOCALHOST ? (
-                            <span>&#10003; localhost </span>
+                            <span>&#10003; Connected to Local Filesystem </span>
                           ) : (
-                            <span className="pl-3">
-                              {' '}
-                              <FormattedMessage id="filePanel.connectToLocalhost" />{' '}
-                            </span>
+                            // <span className="pl-3">
+                            //   {' '}
+                            //   <FormattedMessage id="filePanel.connectToLocalhost" />{' '}
+                            // </span>
+                            null
                           )}
                         </Dropdown.Item>
-                        {global.fs.browser.workspaces.map(({ name, isGitRepo }, index) => (
-                          <Dropdown.Item
-                            key={index}
-                            onClick={() => {
-                              switchWorkspace(name)
-                            }}
-                            data-id={`dropdown-item-${name}`}
-                          >
-                            {isGitRepo ? (
-                              <div className="d-flex justify-content-between">
-                                <span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
-                                <i className="fas fa-code-branch pt-1"></i>
-                              </div>
-                            ) : (
-                              <span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
-                            )}
-                          </Dropdown.Item>
-                        ))}
+                        <ShowNonLocalHostMenuItems />
                         {(global.fs.browser.workspaces.length <= 0 || currentWorkspace === NO_WORKSPACE) && (
                           <Dropdown.Item
                             onClick={() => {
@@ -1105,8 +1157,7 @@ export function Workspace() {
                 <FileExplorer
                   fileState={global.fs.browser.fileState}
                   name={currentWorkspace}
-                  menuItems={['createNewFile', 'createNewFolder', selectedWorkspace && selectedWorkspace.isGist ? 'updateGist' : 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '', 'importFromIpfs',
-                    'importFromHttps']}
+                  menuItems={['createNewFile', 'createNewFolder', selectedWorkspace && selectedWorkspace.isGist ? 'updateGist' : 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '', 'importFromIpfs','importFromHttps', 'connectToLocalFileSystem', 'initializeWorkspaceAsGitRepo']}
                   contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
                   removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
                   files={global.fs.browser.files}
@@ -1166,6 +1217,7 @@ export function Workspace() {
                   renamePath={editModeOn}
                   importFromIpfs={importFromUrl}
                   importFromHttps={importFromUrl}
+                  connectToLocalFileSystem={()=>switchWorkspace(LOCALHOST)}
                   canPaste={canPaste}
                   hasCopied={hasCopied}
                   setHasCopied={setHasCopied}

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

@@ -159,6 +159,8 @@ export interface FileExplorerProps {
     dragStatus: (status: boolean) => void
     importFromIpfs: any
     importFromHttps: any
+    connectToLocalFileSystem?: any
+    handleGitInit?: () => Promise<void>
     handleMultiCopies: any
     feTarget: { key: string, type: 'file' | 'folder' }[]
     setFeTarget: Dispatch<React.SetStateAction<{
@@ -180,6 +182,8 @@ export interface FileExplorerMenuProps {
   uploadFolder: (target: EventTarget & HTMLInputElement) => void
   importFromIpfs: any
   importFromHttps: any
+  connectToLocalFileSystem?: any
+  handleGitInit?: () => Promise<void>
   tooltipPlacement?: Placement
 }
 export interface FileExplorerContextMenuProps {