Show executed query on log #1236

packages/web/src/elements/SqlHighlighter.svelte

@@ -5,6 +5,8 @@
   import { onMount, afterUpdate } from 'svelte';
 
   export let code = '';
+  export let inline = false;
+  export let onClick = null;
 
   let domCode;
 
@@ -29,7 +31,11 @@
     The `sql` class hints the language; highlight.js will
     read it even though we register the grammar explicitly.
   -->
-  <pre bind:this={domCode} class="sql">{code}</pre>
+  {#if inline}
+    <span bind:this={domCode} class="sql" class:clickable={!!onClick} on:click={onClick}>{code}</span>
+  {:else}
+    <pre bind:this={domCode} class="sql" class:clickable={!!onClick} on:click={onClick}>{code}</pre>
+  {/if}
 {/key}
 
 <style>
@@ -38,4 +44,8 @@
     padding: 0;
     padding: 0.5em;
   }
+
+  .clickable {
+    cursor: pointer;
+  }
 </style>

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>

packages/web/src/plugins/ThemeDark.svelte

@@ -75,7 +75,7 @@
 
     --token-base: #303030;
     --token-text: #ddd;
-    --token-keyword: white;
+    --token-keyword: #096dd9;
     --token-selector-tag: white;
     --token-literal: white;
     --token-section: white;

packages/web/src/query/MessageView.svelte

@@ -12,6 +12,7 @@
   export let startLine = 0;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   export let filter = '';
 
@@ -92,6 +93,7 @@
           previousRow={index > 0 ? items[index - 1] : null}
           {onMessageClick}
           {onExplainError}
+          {engine}
         />
       {/each}
     </table>

packages/web/src/query/MessageViewRow.svelte

@@ -17,6 +17,9 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import InlineButton from '../buttons/InlineButton.svelte';
+  import SqlHighlighter from '../elements/SqlHighlighter.svelte';
+  import { showModal } from '../modals/modalTools';
+  import ShowSqlModal from '../modals/ShowSqlModal.svelte';
 
   export let row;
   export let index;
@@ -29,6 +32,7 @@
   export let previousRow = null;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   let isExpanded = false;
 </script>
@@ -55,10 +59,22 @@
         }}><FontIcon icon="img ai" /> Explain</InlineButton
       >
     {/if}
+    {#if row.sql}
+      <SqlHighlighter
+        code={row.sql.substring(0, 100) + (row.sql.length > 100 ? '...' : '')}
+        inline
+        onClick={() => {
+          showModal(ShowSqlModal, {
+            sql: row.sql,
+            engine,
+          });
+        }}
+      />
+    {/if}
   </td>
   <td>{moment(row.time).format('HH:mm:ss')}</td>
   <td>{formatDuration(new Date(row.time).getTime() - time0)}</td>
-  <td> {previousRow ? formatDuration(new Date(row.time).getTime() - new Date(previousRow.time).getTime()) : 'n/a'}</td>
+  <td>{previousRow ? formatDuration(new Date(row.time).getTime() - new Date(previousRow.time).getTime()) : 'n/a'}</td>
   {#if showProcedure}
     <td>{row.procedure || ''}</td>
   {/if}

packages/web/src/query/SocketMessageView.svelte

@@ -18,6 +18,7 @@
   export let onChangeErrors = null;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   const cachedMessagesRef = createRef([]);
   const lastErrorMessageCountRef = createRef(0);
@@ -79,5 +80,6 @@
     {showCaller}
     {startLine}
     {onExplainError}
+    {engine}
   />
 {/if}

packages/web/src/tabs/QueryTab.svelte

@@ -777,6 +777,7 @@
                 showLine
                 onChangeErrors={handleChangeErrors}
                 onExplainError={isProApp() ? handleExplainError : null}
+                engine={$connection && $connection.engine}
               />
             </svelte:fragment>
           </ResultTabs>