error detail for connection errors

packages/web/src/modals/ConnectionModal.svelte

@@ -12,8 +12,10 @@
   import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
 
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal, closeModal } from './modalTools';
+  import { closeCurrentModal, closeModal, showModal } from './modalTools';
   import createRef from '../utility/createRef';
+  import Link from '../elements/Link.svelte';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
 
   export let connection;
 
@@ -92,6 +94,16 @@
           <div class="error-result">
             Connect failed: <FontIcon icon="img error" />
             {sqlConnectResult.error}
+            <Link
+              onClick={() =>
+                showModal(ErrorMessageModal, {
+                  message: sqlConnectResult.detail,
+                  showAsCode: true,
+                  title: 'Database connection error',
+                })}
+            >
+              Show detail
+            </Link>
           </div>
         {/if}
         {#if isTesting}

packages/web/src/modals/ErrorMessageModal.svelte

@@ -9,18 +9,25 @@
 
   export let title = 'Error';
   export let message;
+  export let showAsCode = false;
 </script>
 
 <FormProvider>
   <ModalBase {...$$restProps}>
     <div slot="header">{title}</div>
 
-    <div class="wrapper">
-      <div class="icon">
-        <FontIcon icon="img error" />
+    {#if showAsCode}
+      <pre>{message}</pre>
+    {:else}
+      <div class="wrapper">
+        <div class="icon">
+          <FontIcon icon="img error" />
+        </div>
+        <div>
+          {message}
+        </div>
       </div>
-      {message}
-    </div>
+    {/if}
 
     <div slot="footer">
       <FormSubmit value="Close" on:click={closeCurrentModal} />
@@ -38,4 +45,9 @@
     margin-right: 10px;
     font-size: 20pt;
   }
+
+  pre {
+    max-height: calc(100vh - 300px);
+    overflow-y: auto;
+  }
 </style>