check for toaster and icon toggling in e2e

Author: Aniket-Engg

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     default: ""
   run_file_tests_keyword:
     type: enum
-    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "toggle_panels", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "template_exp_modal", "terminal", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
+    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "template_exp_modal", "terminal", "toggle_panels", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
     default: ""
   run_flaky_tests:
     type: boolean

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

@@ -26,7 +26,14 @@ module.exports = {
       .waitForElementVisible('*[data-id="remix-ai-assistant-starter-expert-2"]')
       .click('*[data-id="movePluginToLeft"]')
       .waitForElementVisible('*[data-pinnedPlugin="movePluginToRight-remixaiassistant"]')
-      .waitForElementVisible('.codicon-layout-sidebar-right-off')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off') // check the icon toggling on top bar
+      .click('*[data-id="toggleRightSidePanelIcon"]') // Check for toaster if plugin on the right side is moved to left, no plugin is pinned on the right side
+      .waitForElementVisible(
+        {
+          selector: "//*[@data-shared='tooltipPopup' and contains(.,'No plugin pinned on the Right Side Panel')]",
+          locateStrategy: 'xpath'
+        }
+      )
   },
   'Pin Solidity Compiler plugin to right side panel #group1': function (browser: NightwatchBrowser) {
     browser
@@ -35,37 +42,47 @@ module.exports = {
       .waitForElementVisible('*[data-id="movePluginToRight"]')
       .click('*[data-id="movePluginToRight"]')
       .waitForElementVisible('*[data-pinnedPlugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right')
       .clickLaunchIcon('filePanel')
   },
   'Toggle right side panel to hide and show pinned plugin #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="hideRightSidePanel"]')
       .click('*[data-id="hideRightSidePanel"]')
-      .waitForElementNotVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off')
+      .waitForElementNotVisible('#right-side-panel') // check the right side panel is not rendered
       .click('*[data-id="toggleRightSidePanelIcon"]')
       .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right')
   },
   'Toggle right side panel, reload IDE, panel state should persist #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="hideRightSidePanel"]')
       .click('*[data-id="hideRightSidePanel"]')
-      .waitForElementNotVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off')
+      .waitForElementNotVisible('#right-side-panel')
       .refresh()
       .waitForElementVisible('*[data-id="toggleRightSidePanelIcon"')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off')
       .click('*[data-id="toggleRightSidePanelIcon"]')
       .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right')
   },
   'Swap pinned plugin from right side panel when panel is hidden #group1': function (browser: NightwatchBrowser) {
     browser
       .refreshPage()
       .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-solidity"]')
       .waitForElementVisible('*[data-id="hideRightSidePanel"]')
       .click('*[data-id="hideRightSidePanel"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right-off')
+      .waitForElementNotVisible('#right-side-panel')
       .clickLaunchIcon('udapp')
       .waitForElementVisible('*[data-pinnedplugin="movePluginToRight-udapp"]')
       .click('*[data-id="movePluginToRight"]')
+      .waitForElementVisible('#right-side-panel')
       .waitForElementVisible('*[data-pinnedplugin="movePluginToLeft-udapp"]')
-      .waitForElementVisible('*[data-id="movePluginToRight"]')
+      .waitForElementVisible('.codicon-layout-sidebar-right')
+      .waitForElementVisible('*[data-pinnedplugin="movePluginToRight-solidity"]')
       .click('*[data-pinnedplugin="movePluginToLeft-udapp"]')
       .end()
   },

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

@@ -176,7 +176,7 @@ export class RightSidePanel extends AbstractPanel {
 
     // Check if no plugin is pinned
     if (!pluginProfile) {
-      this.call('notification', 'toast', 'No plugin pinned on right side panel')
+      this.call('notification', 'toast', 'No plugin pinned on the Right Side Panel.')
       // Ensure the panel is hidden and toggle icon is off
       if (!this.isHidden) {
         this.isHidden = true

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -586,21 +586,21 @@ export function RemixUiTopbar() {
             openTemplateExplorer={openTemplateExplorer}
           />
           <div className="d-flex ms-4 gap-3 align-items-center" >
-            <CustomTooltip placement="bottom-start" tooltipText={`Toggle left panel`}>
+            <CustomTooltip placement="bottom-start" tooltipText={`Toggle Left Side Panel`}>
               <div
                 className={`codicon codicon-layout-sidebar-left${leftPanelHidden ? '-off' : ''} fs-4`}
                 data-id="toggleLeftSidePanelIcon"
                 onClick={() => plugin.call('sidePanel', 'togglePanel')}
               ></div>
             </CustomTooltip>
-            <CustomTooltip placement="bottom-start" tooltipText={`Toggle bottom panel`}>
+            <CustomTooltip placement="bottom-start" tooltipText={`Toggle Bottom Panel`}>
               <div
                 className={`codicon codicon-layout-panel${bottomPanelHidden ? '-off' : ''} fs-4`}
                 data-id="toggleBottomPanelIcon"
                 onClick={() => plugin.call('terminal', 'togglePanel')}
               ></div>
             </CustomTooltip>
-            <CustomTooltip placement="bottom-start" tooltipText={`Toggle right panel`}>
+            <CustomTooltip placement="bottom-start" tooltipText={`Toggle Right Side Panel`}>
               <div
                 className={`codicon codicon-layout-sidebar-right${rightPanelHidden ? '-off' : ''} fs-4`}
                 data-id="toggleRightSidePanelIcon"