recreate object warning

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>