Allow duplication of screens

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -2,15 +2,56 @@
   import { goto } from "@roxi/routify"
   import { store, allScreens } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Modal,
+    Helpers,
+    notifications,
+  } from "@budibase/bbui"
+  import ScreenDetailsModal from "../ScreenDetailsModal.svelte"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import analytics, { Events } from "analytics"
+  import { makeComponentUnique } from "builderStore/componentUtils"
 
   export let screenId
 
   let confirmDeleteDialog
+  let screenDetailsModal
 
   $: screen = $allScreens.find(screen => screen._id === screenId)
 
-  const duplicateScreen = () => {}
+  const duplicateScreen = () => {
+    screenDetailsModal.show()
+  }
+
+  const createDuplicateScreen = async ({ screenName, screenUrl }) => {
+    // Create a dupe and ensure it is unique
+    let duplicateScreen = Helpers.cloneDeep(screen)
+    delete duplicateScreen._id
+    delete duplicateScreen._rev
+    makeComponentUnique(duplicateScreen.props)
+
+    // Attach the new name and URL
+    duplicateScreen.routing.route = sanitizeUrl(screenUrl)
+    duplicateScreen.props._instanceName = screenName
+
+    try {
+      // Create the screen
+      await store.actions.screens.save(duplicateScreen)
+
+      // Analytics
+      if (screen.template) {
+        analytics.captureEvent(Events.SCREEN.CREATED, {
+          template: "createFromScratch",
+        })
+      }
+    } catch (error) {
+      notifications.error("Error duplicating screen")
+      console.log(error)
+    }
+  }
 
   const deleteScreen = async () => {
     try {
@@ -27,9 +68,7 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <MenuItem noClose icon="Duplicate" on:click={duplicateScreen}>
+  <MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
-    Duplicate
-  </MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
@@ -40,3 +79,11 @@
   okText="Delete Screen"
   onOk={deleteScreen}
 />
+
+<Modal bind:this={screenDetailsModal}>
+  <ScreenDetailsModal
+    onConfirm={createDuplicateScreen}
+    screenName={screen?.props._instanceName}
+    screenUrl={screen?.routing.route}
+  />
+</Modal>

packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte

@@ -7,15 +7,17 @@
   export let onConfirm
   export let onCancel
   export let showProgressCircle = false
+  export let screenName
+  export let screenUrl
 
-  let screenName
-  let screenUrl
   let routeError
+  let touched = false
 
   const routeChanged = event => {
     if (!event.detail.startsWith("/")) {
       screenUrl = "/" + event.detail
     }
+    touched = true
     screenUrl = sanitizeUrl(screenUrl)
     if (routeExists(screenUrl)) {
       routeError = "This URL is already taken for this access role"
@@ -48,7 +50,7 @@
   onConfirm={confirmScreenDetails}
   {onCancel}
   cancelText={"Back"}
-  disabled={!screenName || !screenUrl || routeError}
+  disabled={!screenName || !screenUrl || routeError || !touched}
 >
   <Input label="Name" bind:value={screenName} />
   <Input

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -66,11 +66,7 @@
           )
         }
       }
-
-      // Refresh routing info since we have new screens
-      await store.actions.routing.fetch()
     } catch (error) {
-      console.log(error)
       notifications.error("Error creating screens")
     }