toggle icons on top bar

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

@@ -15,34 +15,34 @@ module.exports = {
     browser.waitForElementVisible('[data-id="movePluginToRight"]')
       .click('[data-id="movePluginToRight"]')
       .waitForElementVisible('[data-id="movePluginToLeft"]')
-      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .waitForElementVisible('.right-side-panel h6[data-id="sidePanelSwapitTitle"]')
       .clickLaunchIcon('filePanel')
       .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORER')
-      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+      .assert.containsText('.right-side-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"]')
+      .waitForElementNotVisible('.right-side-panel h6[data-id="sidePanelSwapitTitle"]')
   },
   'Should pin a plugin while an 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')
+      .waitForElementVisible('.right-side-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.right-side-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('.right-side-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')
+      .waitForElementVisible('.right-side-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.right-side-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"]')

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

@@ -64,7 +64,7 @@ module.exports = {
   'Check if pannel is gone when the app is in destop client mode #group1': function (browser: NightwatchBrowser) {
     browser
       .url('http://127.0.0.1:8080/?#activate=udapp,desktopClient')
-      .waitForElementNotPresent('#pinned-panel')
+      .waitForElementNotPresent('#right-side-panel')
       .end()
   }
 }

apps/remix-ide/src/app.ts

@@ -9,7 +9,7 @@ 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 { RightSidePanel } from './app/components/right-side-panel'
 import { PopupPanel } from './app/components/popup-panel'
 import { LandingPage } from './app/ui/landing-page/landing-page'
 import { MainPanel } from './app/components/main-panel'
@@ -153,7 +153,7 @@ class AppComponent {
   menuicons: VerticalIcons
   sidePanel: SidePanel
   hiddenPanel: HiddenPanel
-  pinnedPanel: PinnedPanel
+  rightSidePanel: RightSidePanel
   popupPanel: PopupPanel
   statusBar: StatusBar
   topBar: Topbar
@@ -514,7 +514,7 @@ class AppComponent {
     this.menuicons = new VerticalIcons()
     this.sidePanel = new SidePanel()
     this.hiddenPanel = new HiddenPanel()
-    this.pinnedPanel = new PinnedPanel()
+    this.rightSidePanel = new RightSidePanel()
     this.popupPanel = new PopupPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
@@ -526,7 +526,7 @@ class AppComponent {
 
     const bottomBarPanel = new BottomBarPanel()
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, this.topBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel, bottomBarPanel])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, this.topBar, filePanel, pluginManagerComponent, this.settings, this.rightSidePanel, this.popupPanel, bottomBarPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -610,7 +610,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['statusBar'])
     await this.appManager.activatePlugin(['bottomBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
-    await this.appManager.activatePlugin(['pinnedPanel'])
+    await this.appManager.activatePlugin(['rightSidePanel'])
     await this.appManager.activatePlugin(['popupPanel'])
     await this.appManager.activatePlugin(['home'])
     await this.appManager.activatePlugin(['settings', 'config'])
@@ -724,11 +724,11 @@ class AppComponent {
       document.body.appendChild(loadedElement)
     })
 
-    this.appManager.on('pinnedPanel', 'pinnedPlugin', (pluginProfile) => {
+    this.appManager.on('rightSidePanel', 'pinnedPlugin', (pluginProfile) => {
       localStorage.setItem('pinnedPlugin', JSON.stringify(pluginProfile))
     })
 
-    this.appManager.on('pinnedPanel', 'unPinnedPlugin', () => {
+    this.appManager.on('rightSidePanel', 'unPinnedPlugin', () => {
       localStorage.setItem('pinnedPlugin', '')
     })
 

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

@@ -0,0 +1,149 @@
+// 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 rightSidePanel = {
+  name: 'rightSidePanel',
+  displayName: 'Right Side Panel',
+  description: 'Remix IDE right side panel',
+  version: packageJson.version,
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView', 'highlight',
+    'getHiddenPlugin', 'togglePanel', 'isPanelHidden'
+  ],
+  events: []
+}
+
+export class RightSidePanel extends AbstractPanel {
+  dispatch: React.Dispatch<any> = () => {}
+  loggedState: Record<string, any>
+  rightSidePanelState: Record<string, any> // pluginProfile, isHidden
+  highlightStamp: number
+  hiddenPlugin: any
+  isHidden: boolean
+
+  constructor() {
+    super(rightSidePanel)
+  }
+
+  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)
+      }
+    })
+
+    const rightSidePanelState = window.localStorage.getItem('rightSidePanelState')
+    if (!rightSidePanelState) window.localStorage.setItem('rightSidePanelState', JSON.stringify({}))
+  }
+
+  async pinView (profile, view) {
+    if (this.hiddenPlugin) {
+      const pinnedPanel = document.querySelector('#right-side-panel')
+      pinnedPanel?.classList.remove('d-none')
+      this.hiddenPlugin = null
+      this.isHidden = false
+      window.localStorage.setItem('rightSidePanelState', JSON.stringify({ pluginProfile: profile, isHidden: false }))
+      this.events.emit('rightSidePanelShown')
+      this.emit('rightSidePanelShown')
+    }
+    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
+    let rightSidePanelState = window.localStorage.getItem('rightSidePanelState')
+    let isHidden = false
+    if (rightSidePanelState) {
+      rightSidePanelState = JSON.parse(rightSidePanelState)
+      if (rightSidePanelState['isHidden']) {
+        isHidden = true
+        const pinnedPanel = document.querySelector('#right-side-panel')
+        pinnedPanel?.classList.add('d-none')
+        this.hiddenPlugin = profile
+        this.isHidden = true
+      }
+    }
+    if (!isHidden && !this.hiddenPlugin) {
+      this.isHidden = false
+      this.events.emit('rightSidePanelShown')
+      this.emit('rightSidePanelShown')
+    }
+    this.renderComponent()
+    this.events.emit('pinnedPlugin', profile, isHidden)
+    this.emit('pinnedPlugin', profile, isHidden)
+  }
+
+  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)
+  }
+
+  getHiddenPlugin() {
+    return this.hiddenPlugin
+  }
+
+  togglePanel () {
+    const pinnedPanel = document.querySelector('#right-side-panel')
+    if (this.isHidden) {
+      this.isHidden = false
+      pinnedPanel?.classList.remove('d-none')
+      this.emit('rightSidePanelShown')
+      this.events.emit('rightSidePanelShown')
+    } else {
+      this.isHidden = true
+      pinnedPanel?.classList.add('d-none')
+      this.emit('rightSidePanelHidden')
+      this.events.emit('rightSidePanelHidden')
+    }
+  }
+
+  isPanelHidden() {
+    return this.isHidden
+  }
+
+  highlight () {
+    this.highlightStamp = Date.now()
+    this.renderComponent()
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  render() {
+    return (
+      <section className='panel right-side-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)} togglePanel={this.togglePanel.bind(this)}></RemixUIPanelHeader>} { ...state } />
+  }
+
+  renderComponent() {
+    this.dispatch({
+      plugins: this.plugins,
+      pluginState: this.loggedState,
+      highlightStamp: this.highlightStamp
+    })
+  }
+}