use data-id for rename ws e2e

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

@@ -408,12 +408,8 @@ module.exports = {
 
   'Should rename a workspace #group1': function (browser: NightwatchBrowser) {
     browser
-      .useXpath()
-      .waitForElementPresent({
-        selector: '//i[@data-id="workspaceDropdownMenuIcon"]',
-        locateStrategy: 'xpath',
-      })
-      .click('*[data-id="workspacesMenuDropdown"]')
+      .waitForElementPresent('*[data-id="workspaceDropdownMenuIcon"]')
+      .click('*[data-id="workspaceDropdownMenuIcon"]')
       .waitForElementVisible('*[data-id="wsdropdownMenu"]')
       .click('*[data-id="workspacerename"]') // rename workspace_name
       .useCss()

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

@@ -37,7 +37,7 @@ export const CustomIconsToggle = React.forwardRef(({ onClick, icon, className =
 // forwardRef again here!
 // Dropdown needs access to the DOM of the Menu to measure it
 export const CustomMenu = React.forwardRef(
-  ({ children, style, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, className: string, 'aria-labelledby'?: string }, ref: Ref<HTMLDivElement>) => {
+  ({ children, style, 'data-id': dataId, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, 'data-id'?: string, className: string, 'aria-labelledby'?: string }, ref: Ref<HTMLDivElement>) => {
     const height = window.innerHeight * 0.6
     return (
       <div
@@ -45,6 +45,7 @@ export const CustomMenu = React.forwardRef(
         style={style}
         className={className}
         aria-labelledby={labeledBy}
+        data-id={dataId}
       >
         <ul className="overflow-auto list-unstyled mb-0" style={{ maxHeight: height+'px' }}>
           {