table edit fixes

packages/web/src/query/useEditorData.ts

@@ -133,14 +133,14 @@ export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = n
   };
 
   const clearEditorData = async () => {
+    await localforage.removeItem(localStorageKey);
+    localStorage.removeItem(localStorageKey);
     editorState.update(x => ({
       ...x,
       value: null,
       errorMessage: null,
       isLoading: false,
     }));
-    await localforage.removeItem(localStorageKey);
-    localStorage.removeItem(localStorageKey);
   };
 
   onMount(() => {

packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte

@@ -37,10 +37,10 @@
       constraintType,
     };
   }
-
 </script>
 
-<ModalBase {...$$restProps}>
+<FormProvider>
+  <ModalBase {...$$restProps}>
     <svelte:fragment slot="header"
       >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
     >
@@ -120,7 +120,7 @@
     </div>
 
     <svelte:fragment slot="footer">
-    <FormStyledButton
+      <FormSubmit
         value={'Save'}
         on:click={() => {
           closeCurrentModal();
@@ -144,7 +144,8 @@
         />
       {/if}
     </svelte:fragment>
-</ModalBase>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .row {
@@ -161,5 +162,4 @@
     align-self: center;
     text-align: right;
   }
-
 </style>

packages/web/src/tableeditor/ForeignKeyEditorModal.svelte

@@ -62,7 +62,8 @@
   }
 </script>
 
-<ModalBase {...$$restProps}>
+<FormProvider>
+  <ModalBase {...$$restProps}>
     <svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
 
     <div class="largeFormMarker">
@@ -195,7 +196,7 @@
     </div>
 
     <svelte:fragment slot="footer">
-    <FormStyledButton
+      <FormSubmit
         value={'Save'}
         on:click={() => {
           closeCurrentModal();
@@ -219,7 +220,8 @@
         />
       {/if}
     </svelte:fragment>
-</ModalBase>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .row {

packages/web/src/tabs/TableStructureTab.svelte

@@ -66,7 +66,7 @@
 
   const { editorState, editorValue, setEditorData, clearEditorData } = useEditorData({ tabid });
 
-  $: showTable = $editorValue || tableInfoWithPairingId;
+  $: showTable = $editorValue ? $editorValue.current : tableInfoWithPairingId;
 
   export function canSave() {
     return objectTypeField == 'tables' && !!$editorValue;
@@ -74,7 +74,7 @@
 
   export function save() {
     const driver = findEngineDriver($connection, $extensions);
-    const sql = getAlterTableScript(tableInfoWithPairingId, $editorValue, {}, $dbInfo, driver);
+    const sql = getAlterTableScript($editorValue.base, $editorValue.current, {}, $dbInfo, driver);
 
     showModal(ConfirmSqlModal, {
       sql,
@@ -114,9 +114,16 @@
   dbInfo={$dbInfo}
   setTableInfo={objectTypeField == 'tables'
     ? tableInfoUpdater =>
-        setEditorData(tbl => {
-          if (tbl) return tableInfoUpdater(tbl);
-          return tableInfoUpdater(tableInfoWithPairingId);
-        })
+        setEditorData(tbl =>
+          tbl
+            ? {
+                base: tbl.base,
+                current: tableInfoUpdater(tbl.current),
+              }
+            : {
+                base: tableInfoWithPairingId,
+                current: tableInfoUpdater(tableInfoWithPairingId),
+              }
+        )
     : null}
 />