recreate object warning

packages/web/src/forms/FormSubmit.svelte

@@ -3,6 +3,8 @@
   import { getFormContext } from './FormProviderCore.svelte';
   import { createEventDispatcher } from 'svelte';
 
+  export let disabled;
+
   const dispatch = createEventDispatcher();
 
   const { submitActionRef } = getFormContext();
@@ -13,8 +15,10 @@
   }
 
   submitActionRef.set(() => {
-    handleClick();
+    if (!disabled) {
+      handleClick();
+    }
   });
 </script>
 
-<FormStyledButton type="submit" on:click={handleClick} {...$$props} />
+<FormStyledButton type="submit" {disabled} on:click={handleClick} {...$$props} />

packages/web/src/modals/ConfirmSqlModal.svelte

@@ -1,7 +1,11 @@
 <script>
+  import _ from 'lodash';
   import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormValues from '../forms/FormValues.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
 
   import ModalBase from './ModalBase.svelte';
@@ -10,6 +14,11 @@
   export let sql;
   export let onConfirm;
   export let engine;
+  export let recreates;
+
+  $: isRecreated = _.sum(_.values(recreates || {})) > 0;
+
+  $: console.log('recreates', recreates);
 </script>
 
 <FormProvider>
@@ -20,15 +29,32 @@
       <SqlEditor {engine} value={sql} readOnly />
     </div>
 
+    {#if isRecreated}
+      <div class="form-margin">
+        <div>
+          <FontIcon icon="img warn" /> This operation is not directly supported by SQL engine. DbGate can emulate it, but
+          please check the generated SQL script.
+        </div>
+        <FormCheckboxField
+          templateProps={{ noMargin: true }}
+          label="Allow recreate (don't use on production databases)"
+          name="allowRecreate"
+        />
+      </div>
+    {/if}
+
     <div slot="footer">
-      <FormSubmit
-        value="OK"
-        on:click={() => {
-          closeCurrentModal();
-          onConfirm();
-        }}
-      />
-      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      <FormValues let:values>
+        <FormSubmit
+          value="OK"
+          disabled={isRecreated && !values.allowRecreate}
+          on:click={() => {
+            closeCurrentModal();
+            onConfirm();
+          }}
+        />
+        <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      </FormValues>
     </div>
   </ModalBase>
 </FormProvider>
@@ -39,4 +65,8 @@
     height: 30vh;
     width: 40vw;
   }
+
+  .form-margin {
+    margin: var(--dim-large-form-margin);
+  }
 </style>

packages/web/src/tabs/TableStructureTab.svelte

@@ -102,7 +102,7 @@
 
   function doSave(createTableName) {
     const driver = findEngineDriver($connection, $extensions);
-    const sql = getAlterTableScript(
+    const { sql, recreates } = getAlterTableScript(
       $editorValue.base,
       fillConstraintNames($editorValue.current, driver.dialect),
       {},
@@ -112,6 +112,7 @@
 
     showModal(ConfirmSqlModal, {
       sql,
+      recreates,
       onConfirm: () => {
         handleConfirmSql(sql, createTableName);
       },

packages/web/src/utility/alterDatabaseTools.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import _ from 'lodash';
 import { findEngineDriver, generateDbPairingId, getAlterDatabaseScript } from 'dbgate-tools';
 import InputTextModal from '../modals/InputTextModal.svelte';
 import { showModal } from '../modals/modalTools';
@@ -15,10 +15,11 @@ export async function alterDatabaseDialog(conid, database, updateFunc) {
   const dbUpdated = _.cloneDeep(db);
   updateFunc(dbUpdated);
 
-  const sql = getAlterDatabaseScript(db, dbUpdated, {}, db, driver);
+  const { sql, recreates } = getAlterDatabaseScript(db, dbUpdated, {}, db, driver);
 
   showModal(ConfirmSqlModal, {
     sql,
+    recreates,
     onConfirm: async () => {
       const resp = await axiosInstance.request({
         url: 'database-connections/run-script',