Close Pinned Plugin Feature

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

@@ -0,0 +1,51 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+
+  'Check if RemixAI plugin is pinned #group1': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('*[data-id="movePluginToLeft"]')
+      .waitForElementVisible('*[data-id="remix-ai-assistant-starter-0"]')
+      .click('*[data-id="movePluginToLeft"]')
+      .waitForElementVisible('*[data-pinnedPlugin="movePluginToRight-remixaiassistant"]')
+  },
+  'Pin Solidity Compiler plugin #group1': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('solidity')
+      .pause(2000)
+      .waitForElementVisible('*[data-id="movePluginToRight"]')
+      .click('*[data-id="movePluginToRight"]')
+      .waitForElementVisible('*[data-pinnedPlugin="movePluginToLeft-solidity"]')
+      .clickLaunchIcon('filePanel')
+  },
+  'Close Solidity Compiler Plugin and restore it #group1': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('*[data-id="closePinnedPlugin"]')
+      .click('*[data-id="closePinnedPlugin"]')
+      .waitForElementNotVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('*[data-id="restoreClosedPlugin"')
+      .click('*[data-id="restoreClosedPlugin"]')
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+  },
+  'Swap pinned Solidity Compiler Plugin with RemixAI Assistant when pinned plugin is closed #group1': function (browser: NightwatchBrowser) {
+    browser
+      .refreshPage()
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('*[data-id="closePinnedPlugin"]')
+      .click('*[data-id="closePinnedPlugin"]')
+      .waitForElementVisible('*[data-id="restoreClosedPlugin"]')
+      .clickLaunchIcon('udapp')
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToRight-udapp"]')
+      .click('*[data-id="movePluginToRight"]')
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-udapp"]')
+      .waitForElementVisible('*[data-id="movePluginToRight"]')
+      .click('*[data-pinnedplugin="movePluginToLeft-udapp"]')
+      .end()
+  }
+}

apps/remix-ide/src/app/components/pinned-panel.tsx

@@ -11,13 +11,17 @@ const pinnedPanel = {
   displayName: 'Pinned Panel',
   description: 'Remix IDE pinned panel',
   version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView', 'highlight']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView', 'highlight', 'closePlugin', 'maximizePlugin',
+    'getClosedPlugin'
+  ],
+  events: ['pluginClosed', 'pluginMaximized']
 }
 
 export class PinnedPanel extends AbstractPanel {
   dispatch: React.Dispatch<any> = () => {}
   loggedState: Record<string, any>
   highlightStamp: number
+  closedPlugin: any
 
   constructor() {
     super(pinnedPanel)
@@ -35,6 +39,9 @@ export class PinnedPanel extends AbstractPanel {
   }
 
   async pinView (profile, view) {
+    if (this.closedPlugin) {
+      this.maximizePlugin(this.closedPlugin)
+    }
     const activePlugin = this.currentFocus()
 
     if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`)
@@ -62,6 +69,26 @@ export class PinnedPanel extends AbstractPanel {
     this.emit('unPinnedPlugin', profile)
   }
 
+  getClosedPlugin() {
+    return this.closedPlugin
+  }
+
+  async closePlugin (profile) {
+    const pinnedPanel = document.querySelector('#pinned-panel')
+    pinnedPanel.classList.add('d-none')
+    this.closedPlugin = profile
+    this.events.emit('pluginClosed', profile)
+    this.emit('pluginClosed', profile)
+  }
+
+  async maximizePlugin (profile) {
+    const pinnedPanel = document.querySelector('#pinned-panel')
+    pinnedPanel.classList.remove('d-none')
+    this.closedPlugin = null
+    this.events.emit('pluginMaximized', profile)
+    this.emit('pluginMaximized', profile)
+  }
+
   highlight () {
     this.highlightStamp = Date.now()
     this.renderComponent()
@@ -78,7 +105,7 @@ export class PinnedPanel extends AbstractPanel {
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} { ...state } />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)} closePlugin={this.closePlugin.bind(this)} maximizePlugin={this.maximizePlugin.bind(this)}></RemixUIPanelHeader>} { ...state } />
   }
 
   renderComponent() {

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

@@ -22,6 +22,7 @@ export default class TabProxy extends Plugin {
     this.loadedTabs = []
     this.dispatch = null
     this.themeQuality = 'dark'
+    this.maximize = false
   }
 
   async onActivation () {
@@ -31,6 +32,15 @@ export default class TabProxy extends Plugin {
       this.renderComponent()
     })
 
+    this.on('pinnedPanel', 'pluginClosed', (profile) => {
+      console.log('pluginClosed')
+      this.event.emit('pluginIsClosed', profile)
+    })
+    this.on('pinnedPanel', 'pluginMaximized', (profile) => {
+      console.log('pluginMaximized')
+      this.event.emit('pluginIsMaximized', profile)
+    })
+
     this.on('fileManager', 'filesAllClosed', () => {
       this.call('manager', 'activatePlugin', 'home')
       this.focus('home')
@@ -357,6 +367,7 @@ export default class TabProxy extends Plugin {
       onZoomOut={state.onZoomOut}
       onReady={state.onReady}
       themeQuality={state.themeQuality}
+      maximize={this.maximize}
     />
   }
 

apps/remix-ide/src/remixAppManager.ts

@@ -147,6 +147,7 @@ export function isNative(name) {
     'foundry-provider',
     'basic-http-provider',
     'tabs',
+    'pinnedPanel',
     'doc-gen',
     'doc-viewer',
     'circuit-compiler',

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -8,7 +8,9 @@ const _paq = (window._paq = window._paq || [])
 export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>,
   pinView?: (profile: PluginRecord['profile'], view: PluginRecord['view']) => void,
-  unPinView?: (profile: PluginRecord['profile']) => void
+  unPinView?: (profile: PluginRecord['profile']) => void,
+  closePlugin?: (profile: PluginRecord['profile']) => void,
+  maximizePlugin?: (profile: PluginRecord['profile']) => void
 }
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
   const [plugin, setPlugin] = useState<PluginRecord>()
@@ -38,6 +40,10 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
     _paq.push(['trackEvent', 'PluginPanel', 'pinToLeft', plugin.profile.name])
   }
 
+  const closePlugin = async () => {
+    props.closePlugin && props.closePlugin(plugin.profile)
+  }
+
   const tooltipChild = <i className={`px-1 ms-2 pt-1 pb-2 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
 
   return (
@@ -71,14 +77,23 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
               <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
                 <>
                   <RenderIf condition={plugin.pinned}>
-                    <div className='d-flex' data-id="movePluginToLeft" onClick={unPinPlugin}>
-                      <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
-                        <i aria-hidden="true" className="mt-1 px-2 fak fa-fa-dock-l"></i>
+                    <>
+                      <div className='d-flex' data-id="movePluginToLeft" data-pinnedplugin={`movePluginToLeft-${plugin.profile.name}`} onClick={unPinPlugin}>
+                        <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
+                          <i aria-hidden="true" className="mt-1 px-2 fak fa-fa-dock-l"></i>
+                        </CustomTooltip>
+                      </div>
+                      <CustomTooltip placement="bottom-end" tooltipText="Close Plugin">
+                        <i
+                          className="fa-solid fa-xmark ms-2 fs-5"
+                          onClick={closePlugin}
+                          data-id="closePinnedPlugin"
+                        ></i>
                       </CustomTooltip>
-                    </div>
+                    </>
                   </RenderIf>
                   <RenderIfNot condition={plugin.pinned}>
-                    <div className='d-flex' data-id="movePluginToRight" onClick={pinPlugin}>
+                    <div className='d-flex' data-id="movePluginToRight" data-pinnedplugin={`movePluginToRight-${plugin.profile.name}`} onClick={pinPlugin}>
                       <CustomTooltip placement="auto-end" tooltipId="pinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.pinnedMsg" />}>
                         <i aria-hidden="true" className="mt-1 px-1 ps-2 fak fa-fa-dock-r"></i>
                       </CustomTooltip>

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

@@ -9,19 +9,22 @@ import { values } from 'lodash'
 import { AppContext } from '@remix-ui/app'
 import { desktopConnectionType } from '@remix-api'
 import { CompileDropdown, RunScriptDropdown } from '@remix-ui/tabs'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import TabProxy from 'apps/remix-ide/src/app/panels/tab-proxy'
 
 const _paq = (window._paq = window._paq || [])
 
 /* eslint-disable-next-line */
 export interface TabsUIProps {
   tabs: Array<Tab>
-  plugin: Plugin
+  plugin: TabProxy
   onSelect: (index: number) => void
   onClose: (index: number) => void
   onZoomOut: () => void
   onZoomIn: () => void
   onReady: (api: any) => void
   themeQuality: string
+  maximize: boolean
 }
 
 export interface Tab {
@@ -86,6 +89,8 @@ export const TabsUI = (props: TabsUIProps) => {
   const compileSeq = useRef(0)
   const compileWatchdog = useRef<number | null>(null)
   const settledSeqRef = useRef<number>(0)
+  const [maximized, setMaximized] = useState<boolean>(false)
+  const [closedPlugin, setClosedPlugin] = useState<any>(null)
 
   const [compileState, setCompileState] = useState<'idle' | 'compiling' | 'compiled'>('idle')
 
@@ -98,6 +103,19 @@ export const TabsUI = (props: TabsUIProps) => {
     }
   }, [tabsState.selectedIndex])
 
+  useEffect(() => {
+    props.plugin.event.on('pluginIsClosed', (profile) => {
+      setClosedPlugin(profile)
+      if (maximized) {
+        setMaximized(false)
+      }
+    })
+    props.plugin.event.on('pluginIsMaximized', () => {
+      setClosedPlugin(null)
+      setMaximized(true)
+    })
+  }, [])
+
   // Toggle the copilot in editor when clicked to update in status bar
   useEffect(() => {
     const run = async () => {
@@ -606,8 +624,16 @@ export const TabsUI = (props: TabsUIProps) => {
             <TabPanel key={tab.name}></TabPanel>
           ))}
         </Tabs>
+        {closedPlugin && <div className="d-flex my-auto" style={{ height: '1rem', width: '1rem', marginLeft: '37rem' }}>
+          <CustomTooltip placement="left-start" tooltipText="Restore closed plugin">
+            <i
+              className="fa-solid fa-expand-wide fs-4"
+              data-id="restoreClosedPlugin"
+              onClick={() => props.plugin.call('pinnedPanel', 'maximizePlugin')}
+            ></i>
+          </CustomTooltip>
+        </div>}
       </div>
-
     </div>
   )
 }