play btn to run scripts

apps/remix-ide/src/app/editor/editor.js

@@ -5,6 +5,7 @@ import { EditorUI } from '@remix-ui/editor' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
 import { PluginViewWrapper } from '@remix-ui/helper'
+import { exists } from 'fs'
 
 const EventManager = require('../../lib/events')
 
@@ -74,30 +75,15 @@ class Editor extends Plugin {
 
   updateComponent(state) {
     return <EditorUI
-    editorAPI={state.api}
-    themeType={state.currentThemeType}
-    currentFile={state.currentFile}
-    events={state.events}
-    plugin={state.plugin}
-  />
+      editorAPI={state.api}
+      themeType={state.currentThemeType}
+      currentFile={state.currentFile}
+      events={state.events}
+      plugin={state.plugin}
+    />
   }
 
   render () {
-    
-/*     if (this.el) return this.el
-
-    this.el = document.createElement('div')
-    this.el.setAttribute('id', 'editorView')
-    this.el.currentContent = () => this.currentContent() // used by e2e test
-    this.el.setCurrentContent = (value) => {
-      if (this.sessions[this.currentFile]) {
-        this.sessions[this.currentFile].setValue(value)
-        this._onChange(this.currentFile)
-      }
-    }
-    this.el.gotoLine = (line, column) => this.gotoLine(line, column || 0)
-    this.el.getCursorPosition = () => this.getCursorPosition() */
-
     return <div ref={(element)=>{ 
       this.ref = element
       this.ref.currentContent = () => this.currentContent() // used by e2e test
@@ -113,7 +99,7 @@ class Editor extends Plugin {
       this.ref.clearDecorationsByPlugin = (filePath, plugin, typeOfDecoration) => this.clearDecorationsByPlugin(filePath, plugin, typeOfDecoration)      
       this.ref.keepDecorationsFor = (name, typeOfDecoration) => this.keepDecorationsFor(name, typeOfDecoration)
     }} id='editorView'>
-      <PluginViewWrapper plugin={this} />
+        <PluginViewWrapper plugin={this} />
       </div>
   }
 
@@ -229,15 +215,20 @@ class Editor extends Plugin {
         try {
           // we can't use the fileManager plugin call directly
           // because it's itself called in a plugin context, and that causes a timeout in the plugin stack
-          const contentDep = await readFile(pathDep)
-          if (contentDep !== null) {
-            this.emit('addModel', contentDep, 'typescript', pathDep, false)
+          const pathExists = await exists(pathDep)
+          let contentDep = ''
+          if (pathExists) {
+            contentDep = await readFile(pathDep)
+            if (contentDep !== '') {
+              this.emit('addModel', contentDep, 'typescript', pathDep, false)
+            }
+          } else {
+            console.log("The file ", pathDep, " can't be found.")
           }
         } catch (e) {
           console.log(e)
         }
       }
-      
     }
   }
 

apps/remix-ide/src/remixAppManager.js

@@ -25,7 +25,8 @@ const sensitiveCalls = {
 export function isNative(name) {
   // nativePlugin allows to bypass the permission request
   const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'solidity-logic', 'solidityStaticAnalysis', 'solidityUnitTesting', 
-    'layout', 'notification', 'hardhat-provider', 'ganache-provider', 'foundry-provider', 'basic-http-provider', 'injected-optimism-provider', 'injected-arbitrum-one-provider']
+    'layout', 'notification', 'hardhat-provider', 'ganache-provider', 'foundry-provider', 'basic-http-provider', 'injected-optimism-provider',
+    'tabs', 'injected-arbitrum-one-provider']
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }
 

libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx

@@ -45,6 +45,7 @@ const DragBar = (props: IRemixDragBarUi) => {
   }, [props.resetTrigger])
 
   const handleResize = () => {
+    if (!props.refObject.current) return
     setOffSet(props.refObject.current.offsetLeft)
     setDragBarPosX(props.refObject.current.offsetLeft + props.refObject.current.offsetWidth)
   }

libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx

@@ -23,6 +23,7 @@ const DragBar = (props: IRemixDragBarUi) => {
     props.setHideStatus(false)
   }
   const handleResize = () => {
+    if (!props.refObject.current) return
     setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
   }
 

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -863,7 +863,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </OverlayTrigger>
           </button>
           <div className='d-flex align-items-center'>            
-            <button id="compileAndRunBtn" data-id="compilerContainerCompileAndRunBtn" className="btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3" onClick={compileAndRun} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}>
+            <button
+              id="compileAndRunBtn"
+              data-id="compilerContainerCompileAndRunBtn"
+              className="btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3"
+              onClick={compileAndRun}
+              disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
+            >
               <OverlayTrigger overlay={
                 <Tooltip id="overlay-tooltip-compile-run">
                   <div className="text-left">
@@ -875,7 +881,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 <span>
                   Compile and Run script
                 </span>
-                </OverlayTrigger>
+              </OverlayTrigger>
             </button>            
             <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip-compile-run-doc">

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

@@ -1,8 +1,8 @@
 
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
 import { Plugin } from '@remixproject/engine'
-
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import './remix-ui-tabs.css'
 
@@ -17,23 +17,19 @@ export interface TabsUIProps {
   onReady: (api: any) => void
   themeQuality: string
 }
-
 export interface TabsUIApi {
-  activateTab: (namee: string) => void
+  activateTab: (name: string) => void
   active: () => string
 }
-
 interface ITabsState {
   selectedIndex: number,
   fileDecorations: fileDecoration[],
 }
-
 interface ITabsAction {
   type: string,
   payload: any,
 }
 
-
 const initialTabsState: ITabsState = {
   selectedIndex: -1,
   fileDecorations: [],
@@ -58,6 +54,7 @@ const tabsReducer = (state: ITabsState, action: ITabsAction) => {
 
 export const TabsUI = (props: TabsUIProps) => {
   const [tabsState, dispatch] = useReducer(tabsReducer, initialTabsState);
+  const [currentFileExt, setCurrentFileExt] = useState<string>('sol')
   const currentIndexRef = useRef(-1)
   const tabsRef = useRef({})
   const tabsElement = useRef(null)
@@ -71,8 +68,6 @@ export const TabsUI = (props: TabsUIProps) => {
     }
   }, [tabsState.selectedIndex])
 
-
-
   const getFileDecorationClasses = (tab: any) => {
     const fileDecoration = tabsState.fileDecorations.find((fileDecoration: fileDecoration) => {
       if(`${fileDecoration.workspace.name}/${fileDecoration.path}` === tab.name) return true
@@ -84,8 +79,7 @@ export const TabsUI = (props: TabsUIProps) => {
     return <FileDecorationIcons file={{path: tab.name}} fileDecorations={tabsState.fileDecorations} />
   }
 
-
-  const renderTab = (tab, index) => {
+   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
     const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
@@ -106,9 +100,12 @@ export const TabsUI = (props: TabsUIProps) => {
     if (currentIndexRef.current < 0) return ''
     return tabs.current[currentIndexRef.current].name
   }
+
   const activateTab = (name: string) => {
     const index = tabs.current.findIndex((tab) => tab.name === name)
     currentIndexRef.current = index
+    const ext = getExt(name)
+    setCurrentFileExt(ext)
     dispatch({ type: 'SELECT_INDEX', payload: index })
   }
 
@@ -135,10 +132,36 @@ export const TabsUI = (props: TabsUIProps) => {
     return () => { tabsElement.current.removeEventListener('wheel', transformScroll) }
   }, [])
 
+  const getExt = (path) => {
+    const root = path.split('#')[0].split('?')[0]
+    const ext = root.indexOf('.') !== -1 ? /[^.]+$/.exec(root) : null
+    if (ext) return ext[0]
+    else return'txt'
+  }
+
   return (
     <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
       <div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
-        <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
+        <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
+          <OverlayTrigger placement="bottom" overlay={
+            <Tooltip id="overlay-tooltip-run-script">
+              <span>
+                Run script
+              </span>
+            </Tooltip>
+          }>
+            <button
+              className="btn text-success py-0"
+              disabled={!(currentFileExt === 'js' || currentFileExt === 'ts')}
+              onClick={async () => {
+                const path = active().substr(active().indexOf('/') + 1, active().length)
+                const content = await props.plugin.call('fileManager', "readFile", path)
+                await props.plugin.call('scriptRunner', 'execute', content)}
+              }
+            >
+              <i className="fad fa-play"></i>
+            </button>
+          </OverlayTrigger>
           <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
           <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
         </div>