From 60a846d35f3a9c95813b7a7464c70f405bb73168 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 12 Jan 2023 14:04:33 +0100
Subject: [PATCH] Add icons, moved hamburger to separate file and added
 translation

---
 .../src/app/tabs/locales/en/filePanel.json    |   6 +-
 .../src/app/tabs/locales/zh/filePanel.json    |   8 +-
 .../lib/components/workspace-hamburger.tsx    | 322 ++++++++++++++++++
 .../workspace/src/lib/remix-ui-workspace.tsx  | 305 +----------------
 .../workspace/src/lib/utils/constants.ts      |   2 +-
 5 files changed, 349 insertions(+), 294 deletions(-)
 create mode 100644 libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx

diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
index b9e043b201..4c6393f41c 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@@ -16,11 +16,11 @@
   "filePanel.workspace.clone": "Clone Git Repository",
   "filePanel.workspace.enterGitUrl": "Enter git repository url",
   "filePanel.workspace.solghaction": "Adds a preset yml file to run solidity unit tests on github actions CI.",
-  "filePanel.solghaction": "Add Solidity Test Workflow",
+  "filePanel.solghaction": "Solidity Test Workflow",
   "filePanel.workspace.tssoltestghaction": "Adds a preset yml file to run mocha and chai tests for solidity on github actions CI",
-  "filePanel.tssoltestghaction": "Add Mocha Chai Test Workflow",
+  "filePanel.tssoltestghaction": "Mocha Chai Test Workflow",
   "filePanel.workspace.slitherghaction": "Adds a preset yml file to run slither analysis on github actions CI",
-  "filePanel.slitherghaction": "Add Slither Workflow",
+  "filePanel.slitherghaction": "Slither Workflow",
   "filePanel.newFile": "New File",
   "filePanel.newFolder": "New Folder",
   "filePanel.rename": "Rename",
diff --git a/apps/remix-ide/src/app/tabs/locales/zh/filePanel.json b/apps/remix-ide/src/app/tabs/locales/zh/filePanel.json
index 546d581380..d663e53819 100644
--- a/apps/remix-ide/src/app/tabs/locales/zh/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/zh/filePanel.json
@@ -15,8 +15,12 @@
   "filePanel.workspace.restore": "恢复工作空间",
   "filePanel.workspace.clone": "克隆 Git 仓库",
   "filePanel.workspace.enterGitUrl": "输入 Git 仓库地址",
-  "filePanel.workspace.solghaction": "添加 Solidity GitHub Action 文件。推送到一个代码仓库，然后在 GitHub CI 中运行它。",
-  "filePanel.solghaction": "添加 Solidity GitHub Action",
+  "filePanel.workspace.solghaction": "添加预设 yml 文件以在 github 操作 CI 上运行 solidity 单元测试。",
+  "filePanel.solghaction": "Solidity Test Workflow",
+  "filePanel.workspace.tssoltestghaction": "添加一个预设的 yml 文件以在 github 操作 CI 上运行 mocha 和 chai 测试以确保可靠性",
+  "filePanel.tssoltestghaction": "Mocha Chai Test Workflow",
+  "filePanel.workspace.slitherghaction": "添加一个预设的 yml 文件以在 github actions CI 上运行 slither 分析",
+  "filePanel.slitherghaction": "Slither Workflow",
   "filePanel.newFile": "新建文件",
   "filePanel.newFolder": "新建文件夹",
   "filePanel.rename": "重命名",
diff --git a/libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx b/libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx
new file mode 100644
index 0000000000..713b3ac6fa
--- /dev/null
+++ b/libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx
@@ -0,0 +1,322 @@
+import React from 'react'
+import { CustomTooltip } from '@remix-ui/helper'
+import { Dropdown } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
+
+const _paq = window._paq = window._paq || []
+
+export interface HamburgerMenuProps {
+  createWorkspace: () => void,
+  deleteCurrentWorkspace: () => void,
+  renameCurrentWorkspace: () => void,
+  cloneGitRepository: () => void,
+  downloadWorkspaces: () => void,
+  restoreBackup: () => void,
+  hideIconsMenu: (showMenu: boolean) => void,
+  addGithubAction: () => void,
+  addTsSolTestGithubAction: () => void,
+  addSlitherGithubAction: () => void,
+  showIconsMenu: boolean,
+  hideWorkspaceOptions: boolean,
+  hideLocalhostOptions: boolean
+}
+
+export function HamburgerMenu (props: HamburgerMenuProps) {
+  const { showIconsMenu, hideWorkspaceOptions, hideLocalhostOptions } = props
+      return (
+        <>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right"
+              tooltipId="createWorkspaceTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.create' />}
+            >
+              <div
+                data-id='workspaceCreate'
+                onClick={() => {
+                  props.createWorkspace()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                key={`workspacesCreate-fe-ws`}
+              >
+                <span
+                  hidden={hideWorkspaceOptions}
+                  id='workspaceCreate'
+                  data-id='workspaceCreate'
+                  onClick={() => {
+                    props.createWorkspace()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='far fa-plus pl-2'
+                >
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.create' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="createWorkspaceTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.delete' />}
+            >
+              <div
+                data-id='workspaceDelete'
+                onClick={() => {
+                  props.deleteCurrentWorkspace()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceDelete'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                key={`workspacesDelete-fe-ws`}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions || hideLocalhostOptions }
+                  id='workspaceDelete'
+                  data-id='workspaceDelete'
+                  onClick={() => {
+                    props.deleteCurrentWorkspace()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceDelete'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='far fa-trash pl-2'
+                >
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.delete' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement='right-start'
+              tooltipClasses="text-nowrap"
+              tooltipId="workspaceRenametooltip"
+              tooltipText={<FormattedMessage id='filePanel.workspace.rename' />}
+            >
+              <div onClick={() => {
+                  props.renameCurrentWorkspace()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                data-id='workspaceRename'
+                key={`workspacesRename-fe-ws`}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions || hideLocalhostOptions }
+                  id='workspaceRename'
+                  data-id='workspaceRename'
+                  onClick={() => {
+                    props.renameCurrentWorkspace()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='far fa-edit pl-2'>
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.rename' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item><Dropdown.Divider className="border mb-0 mt-0" /></Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="cloneWorkspaceTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.clone' />}
+            >
+              <div
+                data-id='cloneGitRepository'
+                onClick={() => {
+                  props.cloneGitRepository()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'cloneGitRepository'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                key={`cloneGitRepository-fe-ws`}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions }
+                  id='cloneGitRepository'
+                  data-id='cloneGitRepository'
+                  onClick={() => {
+                    props.cloneGitRepository()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'cloneGitRepository'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='fab fa-github pl-2'
+                >
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.clone' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item><Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/></Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="createWorkspaceTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.download' />}
+            >
+              <div
+                data-id='workspacesDownload'
+                onClick={() => {
+                  props.downloadWorkspaces()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesDownload'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                key={`workspacesDownload-fe-ws`}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions || hideLocalhostOptions }
+                  id='workspacesDownload'
+                  data-id='workspacesDownload'
+                  onClick={() => {
+                    props.downloadWorkspaces()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesDownload'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='far fa-download pl-2 '
+                >
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.download' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="createWorkspaceTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.restore' />}
+            >
+              <div
+                data-id='workspacesRestore'
+                onClick={() => {
+                  props.restoreBackup()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesRestore'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+                key={`workspacesRestore-fe-ws`}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions }
+                  id='workspacesRestore'
+                  data-id='workspacesRestore'
+                  onClick={() => {
+                    props.restoreBackup()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesRestore'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='far fa-upload pl-2'
+                >
+                </span>
+                <span className="pl-3"><FormattedMessage id='filePanel.restore' /></span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item><Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/></Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="createSolGHActionTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.solghaction' />}
+            >
+              <div
+                data-id='soliditygithubaction'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.addGithubAction()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSolidityTesting'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+              >
+                <span
+                  hidden={ hideWorkspaceOptions }
+                  id='soliditygithubaction'
+                  data-id='soliditygithubaction'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    props.addGithubAction()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSolidityTesting'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                  className='fak fa-solidity-mono pl-2'
+                >
+                </span>
+                <span className="pl-3">{<FormattedMessage id='filePanel.solghaction' />}</span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <CustomTooltip
+              placement="right-start"
+              tooltipId="createTsSolTestGHActionTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='filePanel.workspace.tssoltestghaction' />}
+            >
+              <div
+                data-id='typescriptsoliditygithubtestaction'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.addTsSolTestGithubAction()
+                  _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addTsSolTestingAction'])
+                  props.hideIconsMenu(!showIconsMenu)
+                }}
+              >
+                  <span
+                    hidden={ hideWorkspaceOptions }
+                    id='tssoliditygithubaction'
+                    data-id='tssoliditygithubaction'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      props.addTsSolTestGithubAction()
+                      _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addTsSolTestingAction'])
+                      props.hideIconsMenu(!showIconsMenu)
+                    }}
+                    className='fab fa-js pl-2'
+                  >
+                  </span>
+                  <span className="pl-3">{<FormattedMessage id='filePanel.tssoltestghaction' />}</span>
+                </div>
+              </CustomTooltip>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <CustomTooltip
+                placement="right-start"
+                tooltipId="createSlitherGHActionTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText={<FormattedMessage id='filePanel.workspace.slitherghaction' />}
+              >
+                <div
+                  data-id='slithergithubtestaction'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    props.addSlitherGithubAction()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSlitherAction'])
+                    props.hideIconsMenu(!showIconsMenu)
+                  }}
+                >
+                  <span
+                    hidden={ hideWorkspaceOptions }
+                    id='slithergithubaction'
+                    data-id='slithergithubaction'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      props.addSlitherGithubAction()
+                      _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSlitherAction'])
+                      props.hideIconsMenu(!showIconsMenu)
+                    }}
+                    className='far fa-shield pl-2'
+                  >
+                  </span>
+                  <span className="pl-3">{<FormattedMessage id='filePanel.slitherghaction' />}</span>
+                </div>
+              </CustomTooltip>
+            </Dropdown.Item>
+        </>
+      )
+    }
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index ce8f8fe8d9..6eba79f344 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef, useContext, SyntheticEvent, ChangeEvent, KeyboardEvent } from 'react' // eslint-disable-line
 import { FormattedMessage, useIntl } from 'react-intl'
-import { ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap'
+import { Dropdown } from 'react-bootstrap'
 import { CustomIconsToggle, CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import { FileSystemContext } from './contexts'
 import './css/remix-ui-workspace.css'
 import { ROOT_PATH } from './utils/constants'
+import { HamburgerMenu } from './components/workspace-hamburger'
 const _paq = window._paq = window._paq || []
 
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
@@ -380,284 +381,6 @@ export function Workspace () {
     )
   }
 
-  const workspaceMenuIcons = [
-    <CustomTooltip
-      placement="right"
-      tooltipId="createWorkspaceTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.create' />}
-    >
-      <div
-        data-id='workspaceCreate'
-        onClick={() => {
-          createWorkspace()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-        key={`workspacesCreate-fe-ws`}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='workspaceCreate'
-          data-id='workspaceCreate'
-          onClick={() => {
-            createWorkspace()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='far fa-plus pl-2'
-        >
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.create' /></span>
-      </div>
-    </CustomTooltip>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createWorkspaceTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.delete' />}
-    >
-      <div
-        data-id='workspaceDelete'
-        onClick={() => {
-          deleteCurrentWorkspace()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceDelete'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-        key={`workspacesDelete-fe-ws`}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-          id='workspaceDelete'
-          data-id='workspaceDelete'
-          onClick={() => {
-            deleteCurrentWorkspace()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceDelete'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='far fa-trash pl-2'
-        >
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.delete' /></span>
-      </div>
-    </CustomTooltip>,
-    <CustomTooltip
-      placement='right-start'
-      tooltipClasses="text-nowrap"
-      tooltipId="workspaceRenametooltip"
-      tooltipText={<FormattedMessage id='filePanel.workspace.rename' />}
-    >
-      <div onClick={() => {
-            renameCurrentWorkspace()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          data-id='workspaceRename'
-          key={`workspacesRename-fe-ws`}
-        >
-        <span
-          hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-          id='workspaceRename'
-          data-id='workspaceRename'
-          onClick={() => {
-            renameCurrentWorkspace()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='far fa-edit pl-2'>
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.rename' /></span>
-      </div>
-    </CustomTooltip>,
-    <Dropdown.Divider className="border mb-0 mt-0" />,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="cloneWorkspaceTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.clone' />}
-    >
-      <div
-        data-id='cloneGitRepository'
-        onClick={() => {
-          cloneGitRepository()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'cloneGitRepository'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-        key={`cloneGitRepository-fe-ws`}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='cloneGitRepository'
-          data-id='cloneGitRepository'
-          onClick={() => {
-            cloneGitRepository()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'cloneGitRepository'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='fab fa-github pl-2'
-        >
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.clone' /></span>
-      </div>
-    </CustomTooltip>,
-    <Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createWorkspaceTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.download' />}
-    >
-      <div
-        data-id='workspacesDownload'
-        onClick={() => {
-          downloadWorkspaces()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesDownload'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-        key={`workspacesDownload-fe-ws`}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-          id='workspacesDownload'
-          data-id='workspacesDownload'
-          onClick={() => {
-            downloadWorkspaces()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesDownload'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='far fa-download pl-2 '
-        >
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.download' /></span>
-      </div>
-    </CustomTooltip>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createWorkspaceTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.restore' />}
-    >
-      <div
-        data-id='workspacesRestore'
-        onClick={() => {
-          restoreBackup()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesRestore'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-        key={`workspacesRestore-fe-ws`}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='workspacesRestore'
-          data-id='workspacesRestore'
-          onClick={() => {
-            restoreBackup()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesRestore'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='far fa-upload pl-2'
-        >
-        </span>
-        <span className="pl-3"><FormattedMessage id='filePanel.restore' /></span>
-      </div>
-    </CustomTooltip>,
-    <Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createSolGHActionTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.solghaction' />}
-    >
-      <div
-        data-id='soliditygithubaction'
-        onClick={(e) => {
-          e.stopPropagation()
-          addGithubAction()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSolidityTesting'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='soliditygithubaction'
-          data-id='soliditygithubaction'
-          onClick={(e) => {
-            e.stopPropagation()
-            addGithubAction()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSolidityTesting'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='fab fa-github pl-2'
-        >
-        </span>
-        <span className="pl-3">{<FormattedMessage id='filePanel.solghaction' />}</span>
-      </div>
-    </CustomTooltip>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createTsSolTestGHActionTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.tssoltestghaction' />}
-    >
-      <div
-        data-id='typescriptsoliditygithubtestaction'
-        onClick={(e) => {
-          e.stopPropagation()
-          addTsSolTestGithubAction()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addTsSolTestingAction'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='tssoliditygithubaction'
-          data-id='tssoliditygithubaction'
-          onClick={(e) => {
-            e.stopPropagation()
-            addTsSolTestGithubAction()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addTsSolTestingAction'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='fab fa-github pl-2'
-        >
-        </span>
-        <span className="pl-3">{<FormattedMessage id='filePanel.tssoltestghaction' />}</span>
-      </div>
-    </CustomTooltip>,
-    <CustomTooltip
-      placement="right-start"
-      tooltipId="createSlitherGHActionTooltip"
-      tooltipClasses="text-nowrap"
-      tooltipText={<FormattedMessage id='filePanel.workspace.slitherghaction' />}
-    >
-      <div
-        data-id='slithergithubtestaction'
-        onClick={(e) => {
-          e.stopPropagation()
-          addSlitherGithubAction()
-          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSlitherAction'])
-          hideIconsMenu(!showIconsMenu)
-        }}
-      >
-        <span
-          hidden={currentWorkspace === LOCALHOST}
-          id='slithergithubaction'
-          data-id='slithergithubaction'
-          onClick={(e) => {
-            e.stopPropagation()
-            addSlitherGithubAction()
-            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'addSlitherAction'])
-            hideIconsMenu(!showIconsMenu)
-          }}
-          className='fab fa-github pl-2'
-        >
-        </span>
-        <span className="pl-3">{<FormattedMessage id='filePanel.slitherghaction' />}</span>
-      </div>
-    </CustomTooltip>
-  ]
-  const menuLength = workspaceMenuIcons.length
-  let count = 0
   return (
     <div className='d-flex flex-column justify-content-between h-100'>
       <div className='remixui_container overflow-auto' style={{ maxHeight: selectedWorkspace && selectedWorkspace.isGitRepo ? '95%' : '100%' }}>
@@ -701,15 +424,21 @@ export function Workspace () {
                         icon={'fas fa-bars'}
                       ></Dropdown.Toggle>
                       <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items remixui_menuwidth' rootCloseEvent="click">
-                      {
-                        workspaceMenuIcons.map(m => {
-                          return (
-                            <Dropdown.Item key={`wsdropdownMenu-${count !== menuLength ? count++ : count }`}>
-                              {m}
-                            </Dropdown.Item>
-                          )
-                        })
-                      }
+                        <HamburgerMenu
+                          createWorkspace={createWorkspace}
+                          deleteCurrentWorkspace={deleteCurrentWorkspace}
+                          renameCurrentWorkspace={renameCurrentWorkspace}
+                          cloneGitRepository={cloneGitRepository}
+                          downloadWorkspaces={downloadWorkspaces}
+                          restoreBackup={restoreBackup}
+                          hideIconsMenu={hideIconsMenu}
+                          addGithubAction={addGithubAction}
+                          addSlitherGithubAction={addSlitherGithubAction}
+                          addTsSolTestGithubAction={addTsSolTestGithubAction}
+                          showIconsMenu={showIconsMenu}
+                          hideWorkspaceOptions={ currentWorkspace === LOCALHOST }
+                          hideLocalhostOptions={ currentWorkspace === NO_WORKSPACE }
+                          />
                       </Dropdown.Menu>
                     </Dropdown>
                   </span>) : null}
diff --git a/libs/remix-ui/workspace/src/lib/utils/constants.ts b/libs/remix-ui/workspace/src/lib/utils/constants.ts
index 32b07d3fbb..20cc9b08b6 100644
--- a/libs/remix-ui/workspace/src/lib/utils/constants.ts
+++ b/libs/remix-ui/workspace/src/lib/utils/constants.ts
@@ -28,7 +28,7 @@ export const tsSolTestYml = `
         - name: Checkout
             uses: actions/checkout@v2
         - name: Run SUT Action
-            uses: EthereumRemix/ts-sol-test@v0.1.4-dev
+            uses: EthereumRemix/ts-sol-test@v1
             with:
             test-path: 'tests'
             contract-path: 'contracts'