unhide right panel on vertical icon click

Author: Aniket-Engg

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

@@ -84,6 +84,20 @@ module.exports = {
       .waitForElementVisible('.codicon-layout-sidebar-right')
       .waitForElementVisible('*[data-pinnedplugin="movePluginToRight-solidity"]')
   },
+  'Click vertical icon of pinned plugin to unhide right side panel #group1': function (browser: NightwatchBrowser) {
+    browser
+      .refreshPage()
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-udapp"]')
+      .waitForElementVisible('#right-side-panel')
+      .click('*[data-id="hideRightSidePanel"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off')
+      .waitForElementNotVisible('#right-side-panel')
+      // Click the vertical icon for the pinned plugin (udapp)
+      .click('*[data-id="verticalIconsKindudapp"]')
+      .waitForElementVisible('#right-side-panel')
+      .waitForElementVisible('.codicon-layout-sidebar-right')
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-udapp"]')
+  },
   'Hide left side panel using toggle icon on top bar #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('#side-panel')

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

@@ -219,6 +219,26 @@ export class RightSidePanel extends AbstractPanel {
   }
 
   highlight () {
+    // If the right side panel is hidden, unhide it when a pinned icon is clicked
+    if (this.isHidden) {
+      const pinnedPanel = document.querySelector('#right-side-panel')
+      this.isHidden = false
+      this.hiddenPlugin = null
+      pinnedPanel?.classList.remove('d-none')
+      this.emit('rightSidePanelShown')
+      this.events.emit('rightSidePanelShown')
+
+      // Update localStorage
+      const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+      const currentPlugin = this.currentFocus()
+      const pluginProfile = currentPlugin && this.plugins[currentPlugin] ? this.plugins[currentPlugin].profile : null
+      panelStates.rightSidePanel = {
+        isHidden: false,
+        pluginProfile: pluginProfile
+      }
+      window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+    }
+
     this.highlightStamp = Date.now()
     this.renderComponent()
   }