Add UI to clone workspace

Author: TripleSpeeder

src/common/redux/workspaces/actions.js

@@ -82,6 +82,15 @@ export const deleteWorkspace = function(name) {
   };
 };
 
+export const CLONE_WORKSPACE = `${prefix}/CLONE_WORKSPACE`;
+export const cloneWorkspace = function(name, cloneName) {
+  return function(dispatch) {
+    dispatch({ type: CLONE_WORKSPACE, name, cloneName });
+
+    ipcRenderer.send(CLONE_WORKSPACE, name, cloneName);
+  };
+};
+
 export const SET_CURRENT_WORKSPACE = `${prefix}/SET_CURRENT_WORKSPACE`;
 export const setCurrentWorkspace = function(workspace, contractCache) {
   return { type: SET_CURRENT_WORKSPACE, workspace, contractCache };

src/main/index.js

@@ -40,6 +40,7 @@ import {
   GET_CONTRACT_DETAILS,
   OPEN_NEW_WORKSPACE_CONFIG,
   PROJECT_UPDATED,
+  CLONE_WORKSPACE,
 } from "../common/redux/workspaces/actions";
 
 import {
@@ -481,6 +482,20 @@ app.on('ready', () => {
       );
     });
 
+    ipcMain.on(CLONE_WORKSPACE, async (event, name, cloneName) => {
+      const sourceWorkspace = workspaceManager.get(name);
+      if (sourceWorkspace) {
+        sourceWorkspace.clone(cloneName);
+
+        workspaceManager.bootstrap();
+
+        mainWindow.webContents.send(
+          SET_WORKSPACES,
+          workspaceManager.getNonDefaultNames(),
+        );
+      }
+    });
+
     ipcMain.on(DELETE_WORKSPACE, async (event, name) => {
       const tempWorkspace = workspaceManager.get(name);
       if (tempWorkspace) {

src/renderer/icons/clone-regular.svg

@@ -9,6 +9,7 @@ import {
   openDefaultWorkspace,
   openNewWorkspaceConfig,
   deleteWorkspace,
+  cloneWorkspace,
 } from "../../../common/redux/workspaces/actions";
 import UpdateNotification from "../auto-update/UpdateNotification";
 import ErrorModal from "../../components/modal/ErrorModal";
@@ -22,6 +23,7 @@ import Logo from "../../icons/logo.svg";
 import ChainIcon from "../../icons/chain.svg";
 import MenuIcon from "../../icons/list.svg";
 import TrashIcon from "../../icons/trash-icon.svg";
+import CloneIcon from "../../icons/clone-regular.svg";
 
 class HomeScreen extends Component {
   constructor(props) {
@@ -33,8 +35,21 @@ class HomeScreen extends Component {
     this.props.dispatch(openWorkspace(workspaceName));
   }
 
+  handleCloneWorkspace(e) {
+    const workspaceName = e.currentTarget.parentElement.querySelector("span").innerText;
+    e.stopPropagation();
+    e.preventDefault();
+
+    document.activeElement.blur();
+
+    // Future improvement: Create modal dialog asking for new name
+    // For now, just go with hardcoded extension
+    const cloneName = workspaceName + "-clone";
+    this.props.dispatch(cloneWorkspace(workspaceName, cloneName));
+  }
+
   handleDeleteWorkspace(e) {
-    const workspaceName = e.currentTarget.previousSibling.innerText;
+    const workspaceName = e.currentTarget.parentElement.querySelector("span").innerText;
     e.stopPropagation();
     e.preventDefault();
 
@@ -79,8 +94,16 @@ class HomeScreen extends Component {
           <li key={workspaceName}>
             <button onClick={this.selectWorkspace.bind(this)}>
               <span>{workspaceName}</span>
+              <div
+                className="CloneWorkspace"
+                title="Clone workspace"
+                onClick={this.handleCloneWorkspace.bind(this)}
+              >
+                <CloneIcon/>
+              </div>
               <div
                 className="DeleteWorkspace"
+                title="Remove workspace"
                 onClick={this.handleDeleteWorkspace.bind(this)}
               >
                 <TrashIcon />

src/renderer/screens/startup/HomeScreen.js

@@ -133,7 +133,16 @@
                 &:last-child {
                   margin-bottom: 0;
                 }
-    
+
+                .CloneWorkspace {
+                  opacity: 0;
+                  width: 1.3rem;
+                  vertical-align: middle;
+                  transition: all .3s;
+                  position: absolute;
+                  right: 3rem;
+                }
+
                 .DeleteWorkspace {
                   opacity: 0;
                   width: 1.3rem;
@@ -146,8 +155,8 @@
                 &:hover, &:focus, &:active {
                   color: #fbf1ec;
                   background: #5f474e;
-    
-                  .DeleteWorkspace {
+
+                  .DeleteWorkspace, .CloneWorkspace {
                     opacity: 1;
 
                     &:hover, &:focus {