From f5ff71f9d1a41b53e5c78108073a22519bbc6c56 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Mar 2022 19:26:43 +0000
Subject: [PATCH] Allow duplication of screens

---
 .../ScreenDropdownMenu.svelte                 | 57 +++++++++++++++++--
 .../NavigationPanel/ScreenDetailsModal.svelte |  8 ++-
 .../NavigationPanel/ScreenWizard.svelte       |  4 --
 3 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index 47c9fb65b1..33e4d89dda 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/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}>
-    Duplicate
-  </MenuItem>
+  <MenuItem icon="Duplicate" on:click={duplicateScreen}>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>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index 0fae114268..82b90be6a6 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/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
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index fd37490c53..76ee253e00 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/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")
     }