Merge pull request #6341 from ethereum/hide-tab

Support Hidden Tabs

Author: ioedeveloper

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -186,7 +186,8 @@ export default class TabProxy extends Plugin {
             this.call('manager', 'deactivatePlugin', name)
           },
           icon,
-          description
+          description,
+          show
         )
         show && this.switchTab(name)
       }
@@ -210,6 +211,10 @@ export default class TabProxy extends Plugin {
 
   focus (name) {
     this.emit('switchApp', name)
+    const tabIndex = this.loadedTabs.findIndex(tab => tab.name === name)
+    if (tabIndex !== -1) {
+      this.loadedTabs[tabIndex].show = true
+    }
     this.tabsApi.activateTab(name)
   }
 
@@ -259,7 +264,7 @@ export default class TabProxy extends Plugin {
    * @param {string} description
    * @returns
    */
-  addTab (name, title, switchTo, close, icon, description = '') {
+  addTab (name, title, switchTo, close, icon, description = '', show = true) {
     if (this._handlers[name]) return this.renderComponent()
 
     if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) {
@@ -290,7 +295,8 @@ export default class TabProxy extends Plugin {
             title,
             icon,
             tooltip: name,
-            iconClass: getPathIcon(name)
+            iconClass: getPathIcon(name),
+            show
           })
           formatPath.shift()
           if (formatPath.length > 0) {
@@ -307,7 +313,8 @@ export default class TabProxy extends Plugin {
                 title: duplicateTabTitle,
                 icon,
                 tooltip: duplicateTabTooltip || duplicateTabTitle,
-                iconClass: getPathIcon(duplicateTabName)
+                iconClass: getPathIcon(duplicateTabName),
+                show
               }
             }
           }
@@ -321,7 +328,8 @@ export default class TabProxy extends Plugin {
         title,
         icon,
         tooltip: description || title,
-        iconClass: getPathIcon(name)
+        iconClass: getPathIcon(name),
+        show
       })
     }
 
@@ -335,17 +343,29 @@ export default class TabProxy extends Plugin {
     if(!this.loadedTabs.find(tab => tab.name === name)) return // prevent removing tab that doesn't exist
     this.loadedTabs = this.loadedTabs.filter((tab, index) => {
       if (!previous && tab.name === name) {
-        if(index - 1  >= 0 && this.loadedTabs[index - 1])
-          previous = this.loadedTabs[index - 1]
-        else if (index + 1 && this.loadedTabs[index + 1])
-          previous = this.loadedTabs[index + 1]
+        previous = this.getPreviousVisibleTab(index)
+        if (!previous) previous = this.getNextVisibleTab(index)
       }
       return tab.name !== name
     })
     this.renderComponent()
     if (previous) this.switchTab(previous.name)
   }
 
+  getPreviousVisibleTab (index) {
+    for (let i = index - 1; i >= 0; i--) {
+      if (this.loadedTabs[i].show) return this.loadedTabs[i]
+    }
+    return null
+  }
+
+  getNextVisibleTab (index) {
+    for (let i = index + 1; i < this.loadedTabs.length; i++) {
+      if (this.loadedTabs[i].show) return this.loadedTabs[i]
+    }
+    return null
+  }
+
   addHandler (type, fn) {
     this.handlers[type] = fn
   }

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -34,6 +34,7 @@ export interface Tab {
   name: string
   title: string
   tooltip: string
+  show: boolean
 }
 export interface TabsUIApi {
   activateTab: (name: string) => void
@@ -95,7 +96,7 @@ export const TabsUI = (props: TabsUIProps) => {
   const [compileState, setCompileState] = useState<'idle' | 'compiling' | 'compiled'>('idle')
 
   useEffect(() => {
-    if (props.tabs[tabsState.selectedIndex]) {
+    if (props.tabs[tabsState.selectedIndex] && props.tabs[tabsState.selectedIndex].show) {
       tabsRef.current[tabsState.selectedIndex].scrollIntoView({
         behavior: 'smooth',
         block: 'center'
@@ -614,14 +615,14 @@ export const TabsUI = (props: TabsUIProps) => {
         >
           <TabList className="d-flex flex-row align-items-center">
             {props.tabs.map((tab, i) => (
-              <Tab className="" key={tab.name} data-id={tab.id}>
+              <Tab className={tab.show ? '' : 'd-none'} key={tab.name} data-id={tab.id}>
                 {renderTab(tab, i)}
               </Tab>
             ))}
             <div style={{ minWidth: '4rem', height: '1rem' }} id="dummyElForLastXVisibility"></div>
           </TabList>
           {props.tabs.map((tab) => (
-            <TabPanel key={tab.name}></TabPanel>
+            <TabPanel className={tab.show ? '' : 'd-none'} key={tab.name}></TabPanel>
           ))}
         </Tabs>