fix workspaces e2e tests

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

@@ -345,7 +345,15 @@ module.exports = {
 
   'Should rename a workspace #group1': function (browser: NightwatchBrowser) {
     browser
-      .click('*[data-id="workspaceRename"]') // rename workspace_name
+      .useXpath()
+      .waitForElementPresent({
+        selector: '//i[@data-icon="workspaceDropdownMenuIcon"]',
+        locateStrategy: 'xpath',
+      })
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul')
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[1]') // rename workspace_name
+      .useCss()
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemtests"]')
       .waitForElementVisible('*[data-id="modalDialogCustomPromptTextRename"]')
       .click('*[data-id="modalDialogCustomPromptTextRename"]')
@@ -366,7 +374,10 @@ module.exports = {
   'Should delete a workspace #group1': function (browser: NightwatchBrowser) {
     browser
       .switchWorkspace('workspace_name_1')
-      .click('*[data-id="workspaceDelete"]') // delete workspace_name_1
+      .useXpath()
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[2]') // delete workspace_name_1
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
       .click('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
       .waitForElementVisible('[data-id="workspacesSelect"]')
@@ -379,8 +390,12 @@ module.exports = {
   'Should clone a repository #group2': function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('filePanel')
-      .waitForElementVisible('[data-id="cloneGitRepository"]')
-      .click('[data-id="cloneGitRepository"]')
+      .useXpath()
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      // .waitForElementVisible('[data-id="cloneGitRepository"]')
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]')
       .click('[data-id="fileSystemModalDialogModalBody-react"]')
       .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]')
@@ -403,8 +418,13 @@ module.exports = {
 
   'Should display non-clashing names for duplicate clone #group2': '' + function (browser: NightwatchBrowser) {
     browser
-      .waitForElementVisible('[data-id="cloneGitRepository"]')
-      .click('[data-id="cloneGitRepository"]')
+      .useXpath()
+      // .waitForElementVisible('[data-id="cloneGitRepository"]')
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      // .click('[data-id="cloneGitRepository"]')
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]')
       .click('[data-id="fileSystemModalDialogModalBody-react"]')
       .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]')
@@ -412,8 +432,11 @@ module.exports = {
       .click('[data-id="fileSystem-modal-footer-ok-react"]')
       .pause(5000)
       .waitForElementContainsText('[data-id="workspacesSelect"]', 'awesome-remix1')
-      .waitForElementVisible('[data-id="cloneGitRepository"]')
-      .click('[data-id="cloneGitRepository"]')
+      .useXpath()
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]')
       .click('[data-id="fileSystemModalDialogModalBody-react"]')
       .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]')
@@ -421,8 +444,12 @@ module.exports = {
       .click('[data-id="fileSystem-modal-footer-ok-react"]')
       .pause(5000)
       .waitForElementContainsText('[data-id="workspacesSelect"]', 'awesome-remix2')
-      .waitForElementVisible('[data-id="cloneGitRepository"]')
-      .click('[data-id="cloneGitRepository"]')
+      // .waitForElementVisible('[data-id="cloneGitRepository"]')
+      // .click('[data-id="cloneGitRepository"]')
+      .useXpath()
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]')
       .click('[data-id="fileSystemModalDialogModalBody-react"]')
       .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]')
@@ -438,8 +465,13 @@ module.exports = {
 
   'Should display error message in modal for failed clone #group2': function (browser: NightwatchBrowser) {
     browser
-      .waitForElementVisible('[data-id="cloneGitRepository"]')
-      .click('[data-id="cloneGitRepository"]')
+      // .waitForElementVisible('[data-id="cloneGitRepository"]')
+      // .click('[data-id="cloneGitRepository"]')
+      .useXpath()
+      .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0)
+      .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]')
+      .useCss()
       .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]')
       .click('[data-id="fileSystemModalDialogModalBody-react"]')
       .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]')

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -1,6 +1,6 @@
 // The forwardRef is important!!
 
-import React, { Ref } from "react"
+import React, { Ref, SyntheticEvent } from "react"
 
 // Dropdown needs access to the DOM node in order to position the Menu
 export const CustomToggle = React.forwardRef(({ children, onClick, icon, className = '' }: { children: React.ReactNode, onClick: (e) => void, icon: string, className: string }, ref: Ref<HTMLButtonElement>) => (
@@ -20,7 +20,7 @@ export const CustomToggle = React.forwardRef(({ children, onClick, icon, classNa
   </button>
 ))
 
-export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, icon, className = '' }: { children: React.ReactNode, mouseOverAction: () => void, icon: string, className: string }, ref: Ref<HTMLSpanElement>) => (
+export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, icon, className = '' }: { children: React.ReactNode, mouseOverAction: (e: SyntheticEvent) => void, icon: string, className: string }, ref: Ref<HTMLSpanElement>) => (
   <span
     ref={ref}
     onClick={(e) => {
@@ -28,8 +28,9 @@ export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction,
     }}
     onMouseOver={mouseOverAction}
     className={`${className.replace('dropdown-toggle', '')} mb-0 pb-0 d-flex justify-content-end align-items-end remixuimenuicon_shadow`}
+    data-id="workspaceMenuDropdown"
   >
-    { icon && <i className={`${icon}`}></i> }
+    { icon && <i className={`${icon}`} data-icon="workspaceDropdownMenuIcon"></i> }
   </span>
 ))
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef, useContext, SyntheticEvent } from 'react' // eslint-disable-line
 import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { CustomIconsToggle, CustomMenu, CustomToggle } from '@remix-ui/helper'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
@@ -298,7 +298,7 @@ export function Workspace () {
       placement='right-start'
       overlay={
         <Tooltip id="workspaceRenametooltip">
-          <span>Rename</span>
+          <span>Rename Workspace</span>
         </Tooltip>
       }
     >
@@ -313,14 +313,14 @@ export function Workspace () {
           hideIconsMenu(!showIconsMenu)
         }}
         className='far fa-edit w-100'>
-          {'  Rename Workspace'}
+          {'  Rename'}
       </span>
     </OverlayTrigger>,
     <OverlayTrigger
       placement="right-start"
       overlay={
         <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
-          <span>Delete</span>
+          <span>Delete Workspace</span>
         </Tooltip>
       }
     >
@@ -336,7 +336,7 @@ export function Workspace () {
         }}
         className='far fa-trash w-100'
       >
-        {'  Delete Workspace'}
+        {'  Delete'}
       </span>
     </OverlayTrigger>,
     <OverlayTrigger
@@ -359,7 +359,7 @@ export function Workspace () {
         }}
         className='far fa-download w-100'
       >
-        {'  Download Workspace'}
+        {'  Download'}
       </span>
     </OverlayTrigger>,
     <OverlayTrigger
@@ -382,7 +382,7 @@ export function Workspace () {
         }}
         className='far fa-upload w-100'
       >
-        {'  Restore Workspace'}
+        {'  Restore'}
       </span>
     </OverlayTrigger>,
     <OverlayTrigger
@@ -405,7 +405,7 @@ export function Workspace () {
         }}
         className='far fa-clone w-100'
       >
-        {'  Clone Git Repository'}
+        {'  Clone'}
       </span>
     </OverlayTrigger>
   ]
@@ -444,13 +444,16 @@ export function Workspace () {
                     >
                   </span>
                   </OverlayTrigger>
-                  <Dropdown onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
+                  <Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
                     <Dropdown.Toggle
                       as={CustomIconsToggle}
-                      mouseOverAction={() => hideIconsMenu(!showIconsMenu)}
+                      mouseOverAction={(e: SyntheticEvent) => {
+                        hideIconsMenu(!showIconsMenu)
+                        console.log({ e })
+                      }}
                       icon={'fas fa-bars'}
                     ></Dropdown.Toggle>
-                    <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' align={'right'}>
+                    <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='w-100 custom-dropdown-items' align={'right'}>
                       {
                       workspaceMenuIcons.map(m => (
                         <Dropdown.Item>