update data id and add e2e

Author: Aniket-Engg

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

@@ -123,6 +123,23 @@ module.exports = {
       .waitForElementVisible('.terminal-wrap')
       .waitForElementVisible('.codicon-layout-panel')
   },
+  'Hide bottom terminal panel using hideBottomPanel icon (close icon) #group1': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('.terminal-wrap')
+      .waitForElementVisible('*[data-id="hideBottomPanel"]')
+      .click('*[data-id="hideBottomPanel"]')
+      .waitForElementNotVisible('.terminal-wrap')
+      // Show the terminal again using top bar toggle icon
+      .click('*[data-id="toggleBottomPanelIcon"]')
+      .waitForElementVisible('.terminal-wrap')
+      .waitForElementVisible('*[data-id="hideBottomPanel"]')
+      // Hide again using hideBottomPanel
+      .click('*[data-id="hideBottomPanel"]')
+      .waitForElementNotVisible('.terminal-wrap')
+      // Show again using hideBottomPanel (requires clicking top bar toggle first to show terminal bar)
+      .click('*[data-id="toggleBottomPanelIcon"]')
+      .waitForElementVisible('.terminal-wrap')
+  },
   '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"]')

libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-toggle.tsx

@@ -1,32 +1,9 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { useEffect, useState } from 'react' // eslint-disable-line
+import React from 'react' // eslint-disable-line
 import { FormattedMessage } from 'react-intl'
 import { RemixUiTerminalProps } from '../types/terminalTypes'
 export const RemixUITerminalMenuToggle = (props: RemixUiTerminalProps) => {
 
-  const [isPanelHidden, setIsPanelHidden] = useState(false)
-
-  useEffect(() => {
-    // Initialize panel hidden state
-    const initPanelState = async () => {
-      const hidden = await props.plugin.call('terminal', 'isPanelHidden')
-      setIsPanelHidden(hidden)
-    }
-    initPanelState()
-
-    // Listen for panel visibility changes
-    const handlePanelShown = () => setIsPanelHidden(false)
-    const handlePanelHidden = () => setIsPanelHidden(true)
-
-    props.plugin.on('terminal', 'terminalPanelShown', handlePanelShown)
-    props.plugin.on('terminal', 'terminalPanelHidden', handlePanelHidden)
-
-    return () => {
-      props.plugin.off('terminal', 'terminalPanelShown')
-      props.plugin.off('terminal', 'terminalPanelHidden')
-    }
-  }, [])
-
   async function handleToggleTerminal(): Promise<void> {
     // Toggle the bottom terminal panel using terminal-wrap component
     await props.plugin.call('terminal', 'togglePanel')
@@ -42,7 +19,7 @@ export const RemixUITerminalMenuToggle = (props: RemixUiTerminalProps) => {
       >
         <i
           className={`mx-2 codicon codicon-close fw-bold fs-5`}
-          data-id="terminalToggleIcon"
+          data-id="hideBottomPanel"
           onClick={handleToggleTerminal}
         ></i>
       </CustomTooltip>