From 60f3202773bfa4492be3e582c19036b61b9f814e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 30 Nov 2022 09:53:18 +0000
Subject: [PATCH] Fix for table and view editing. Mutation was causing several
 issues in the builder

---
 .../popovers/EditTablePopover.svelte          | 21 ++++++++++++++-----
 .../popovers/EditViewPopover.svelte           | 18 ++++++++++++----
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index c23dcc1235..4757b37bc7 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import { store } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
   import { tables, datasources } from "stores/backend"
   import {
     ActionMenu,
@@ -18,7 +19,10 @@
   let editorModal
   let confirmDeleteDialog
   let error = ""
-  let originalName = table.name
+
+  let originalName
+  let updatedName
+
   let templateScreens
   let willBeDeleted
   let deleteTableName
@@ -59,7 +63,9 @@
   }
 
   async function save() {
-    await tables.save(table)
+    const updatedTable = cloneDeep(table)
+    updatedTable.name = updatedName
+    await tables.save(updatedTable)
     notifications.success("Table renamed successfully")
   }
 
@@ -70,6 +76,11 @@
         ? `Table with name ${tableName} already exists. Please choose another name.`
         : ""
   }
+
+  const initForm = () => {
+    originalName = table.name + ""
+    updatedName = table.name + ""
+  }
 </script>
 
 {#if allowDeletion}
@@ -84,17 +95,17 @@
   </ActionMenu>
 {/if}
 
-<Modal bind:this={editorModal}>
+<Modal bind:this={editorModal} on:show={initForm}>
   <ModalContent
     title="Edit Table"
     confirmText="Save"
     onConfirm={save}
-    disabled={table.name === originalName || error}
+    disabled={updatedName === originalName || error}
   >
     <Input
       label="Table Name"
       thin
-      bind:value={table.name}
+      bind:value={updatedName}
       on:input={checkValid}
       {error}
     />
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 6eba5070fc..f543b34ddc 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
+  import { cloneDeep } from "lodash/fp"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     notifications,
@@ -15,13 +16,17 @@
   export let view
 
   let editorModal
-  let originalName = view.name
+  let originalName
+  let updatedName
   let confirmDeleteDialog
 
   async function save() {
+    const updatedView = cloneDeep(view)
+    updatedView.name = updatedName
+
     await views.save({
       originalName,
-      ...view,
+      ...updatedView,
     })
     notifications.success("View renamed successfully")
   }
@@ -37,6 +42,11 @@
       notifications.error("Error deleting view")
     }
   }
+
+  const initForm = () => {
+    updatedName = view.name + ""
+    originalName = view.name + ""
+  }
 </script>
 
 <ActionMenu>
@@ -46,9 +56,9 @@
   <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
-<Modal bind:this={editorModal}>
+<Modal bind:this={editorModal} on:show={initForm}>
   <ModalContent title="Edit View" onConfirm={save} confirmText="Save">
-    <Input label="View Name" thin bind:value={view.name} />
+    <Input label="View Name" thin bind:value={updatedName} />
   </ModalContent>
 </Modal>
 <ConfirmDialog