Show executed query on log #1236

packages/web/src/modals/ShowSqlModal.svelte

@@ -0,0 +1,53 @@
+<script>
+  import _ from 'lodash';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import newQuery from '../query/newQuery';
+  import SqlEditor from '../query/SqlEditor.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let sql;
+  export let onConfirm;
+  export let engine = null;
+</script>
+
+<ModalBase {...$$restProps}>
+  <div slot="header">SQL Script</div>
+
+  <div class="editor">
+    <SqlEditor {engine} value={sql} readOnly />
+  </div>
+
+  <div slot="footer">
+    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} data-testid="ShowSqlModal_closeButton" />
+    <FormStyledButton
+      type="button"
+      value="Open script"
+      on:click={() => {
+        newQuery({
+          initialData: sql,
+        });
+
+        closeCurrentModal();
+      }}
+      data-testid="ShowSqlModal_openScriptButton"
+    />
+  </div>
+</ModalBase>
+
+<style>
+  .editor {
+    position: relative;
+    height: 30vh;
+    width: 40vw;
+  }
+
+  .form-margin {
+    margin: var(--dim-large-form-margin);
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+</style>