Generate tooltip library

libs/remix-ui/tooltip-popup/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/tooltip-popup/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/tooltip-popup/README.md

@@ -0,0 +1,7 @@
+# remix-ui-tooltip-popup
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-tooltip-popup` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/tooltip-popup/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/tooltip-popup'

libs/remix-ui/tooltip-popup/src/lib/tooltip-popup.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
+import { TooltipPopupProps } from '../types'
+import './tooltip-popup.module.css'
+
+const popover = (title?: string, content?: string | React.ReactNode) => (
+  <Popover id="popover-basic" className='bg-light border-secondary'>
+    <Popover.Title as="h3" className='bg-dark border-0'>{ title || 'Tooltip' }</Popover.Title>
+      <Popover.Content>
+        { content }
+      </Popover.Content>
+  </Popover>
+)
+
+export function TooltipPopup(props: TooltipPopupProps) {
+  return (
+    <OverlayTrigger trigger="click" placement={"bottom"} overlay={popover(props.title, props.children || props.content)}>
+      <i className={`${props.icon} remixui_menuicon pr-0 mr-2`}></i>
+    </OverlayTrigger>
+  )
+}
+
+export default TooltipPopup

libs/remix-ui/tooltip-popup/src/types/index.ts

@@ -0,0 +1,6 @@
+export interface TooltipPopupProps {
+  children?: React.ReactNode,
+  title?: string,
+  content?: string,
+  icon: string
+}

libs/remix-ui/tooltip-popup/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/tooltip-popup/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

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

@@ -323,5 +323,9 @@ export const getWorkspaces = async (): Promise<string[]> | undefined => {
 }
 
 export const cloneRepository = async (url: string) => {
-  console.log('url: ', url)
+  const config = plugin.registry.get('config').api
+  const token = config.get('currentFile')
+  const repoConfig = { url, token }
+
+  plugin.call('dGitProvider', 'clone', repoConfig)
 }

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

@@ -1,23 +0,0 @@
-import React from 'react'
-import { OverlayTrigger, Popover } from 'react-bootstrap';
-
-const popover = (
-  <Popover id="popover-basic" className='bg-light border-secondary'>
-    <Popover.Title as="h3" className='bg-dark border-0'>Clone Repository</Popover.Title>
-      <Popover.Content>
-        <div className="remixui_cloneContainer">
-          <input
-            className="form-control"
-            placeholder="Enter github repository url"
-            title="Enter github repository url"
-          />
-        </div>
-      </Popover.Content>
-  </Popover>
-)
-
-export const CloneRepository = () => (
-  <OverlayTrigger trigger="click" placement={"bottom"} overlay={popover}>
-    <i className="fas fa-cloud-download remixui_menuicon pr-0 mr-2"></i>
-  </OverlayTrigger>
-)

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

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
-import './css/remix-ui-workspace.css'
 import { FileSystemContext } from './contexts'
-import { CloneRepository } from './components/clone'
+import { TooltipPopup } from '@remix-ui/tooltip-popup'
+import './css/remix-ui-workspace.css'
 
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
 
@@ -14,6 +14,7 @@ export function Workspace () {
   const workspaceRenameInput = useRef()
   const workspaceCreateInput = useRef()
   const workspaceCreateTemplateInput = useRef()
+  const cloneUrlRef = useRef<HTMLInputElement>()
 
   useEffect(() => {
     resetFocus()
@@ -125,6 +126,18 @@ export function Workspace () {
     workspaceCreateInput.current.value = `${workspaceCreateTemplateInput.current.value || 'remixDefault'}_${Date.now()}`
   }
 
+  const handleTypingUrl = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      const url = cloneUrlRef.current.value
+
+      if (url) {
+        global.dispatchCloneRepository()
+      } else {
+        console.log('Please provide a valid github repository url.')
+      }
+    }
+  }
+
   const createModalMessage = () => {
     return (
       <>
@@ -215,8 +228,17 @@ export function Workspace () {
                     className='far fa-upload remixui_menuicon'
                     title='Restore Workspaces Backup'>
                   </span>
-                  <CloneRepository>
-                  </CloneRepository>
+                  <TooltipPopup icon='fas fa-cloud-download' title='Clone Repository'>
+                    <div className="remixui_cloneContainer">
+                      <input
+                        ref={cloneUrlRef}
+                        className="form-control"
+                        placeholder="Enter github repository url"
+                        title="Enter github repository url"
+                        onKeyDown={handleTypingUrl}
+                      />
+                    </div>
+                  </TooltipPopup>
                 </span>
               <select id="workspacesSelect" value={currentWorkspace} data-id="workspacesSelect" onChange={(e) => switchWorkspace(e.target.value)} className="form-control custom-select">
                 {

nx.json

@@ -169,14 +169,9 @@
     },
     "remix-ui-permission-handler": {
       "tags": []
+    },
+    "remix-ui-tooltip-popup": {
+      "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }

tsconfig.base.json

@@ -87,7 +87,8 @@
       "@remix-ui/run-tab": ["libs/remix-ui/run-tab/src/index.ts"],
       "@remix-ui/permission-handler": [
         "libs/remix-ui/permission-handler/src/index.ts"
-      ]
+      ],
+      "@remix-ui/tooltip-popup": ["libs/remix-ui/tooltip-popup/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -1,5 +1,35 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1253,36 +1283,21 @@
           }
         }
       }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
     },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
+    "remix-ui-tooltip-popup": {
+      "root": "libs/remix-ui/tooltip-popup",
+      "sourceRoot": "libs/remix-ui/tooltip-popup/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/tooltip-popup/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     }
-  },
-  "defaultProject": "remix-ide"
+  }
 }