show terminal on a log

Author: Aniket-Engg

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

@@ -154,6 +154,23 @@ module.exports = {
       .click('*[data-id="toggleBottomPanelIcon"]')
       .waitForElementVisible('.terminal-wrap')
   },
+  'Terminal panel automatically unhides when log is added #group1': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('.terminal-wrap')
+      .click('*[data-id="hideBottomPanel"]')
+      .waitForElementNotVisible('.terminal-wrap')
+      .waitForElementVisible('.codicon-layout-panel-off')
+      // Execute a script that will generate a log
+      .addFile('test_log.ts', { content: 'console.log("test")' })
+      .pause(1000)
+      .clickLaunchIcon('solidity')
+      .pause(1000)
+      .click('*[data-id="compile-action"]') // run script
+      .pause(2000)
+      // Terminal should automatically unhide when compilation logs are generated
+      .waitForElementVisible('.terminal-wrap')
+      .waitForElementVisible('.codicon-layout-panel')
+  },
   'Hide all three panels using toggle icons on top bar, reload and ensure all are hidden #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="toggleLeftSidePanelIcon"]')

apps/remix-ide/src/app/panels/terminal.tsx

@@ -145,13 +145,36 @@ export default class Terminal extends Plugin {
   }
 
   logHtml(html) {
+    // Unhide terminal panel if it's hidden when a log is added
+    if (this.isHidden) {
+      this.showPanel()
+    }
     this.terminalApi.logHtml(html)
   }
 
   log(message, type) {
+    // Unhide terminal panel if it's hidden when a log is added
+    if (this.isHidden) {
+      this.showPanel()
+    }
     this.terminalApi.log(message, type)
   }
 
+  showPanel() {
+    const terminalPanel = document.querySelector('.terminal-wrap')
+    this.isHidden = false
+    terminalPanel?.classList.remove('d-none')
+    this.emit('terminalPanelShown')
+
+    // Persist the state
+    const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+    panelStates.bottomPanel = {
+      isHidden: this.isHidden,
+      pluginProfile: this.profile
+    }
+    window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+  }
+
   togglePanel() {
     const terminalPanel = document.querySelector('.terminal-wrap')
     if (this.isHidden) {