make attachments downloadable and images clickable

packages/bbui/package.json

@@ -71,6 +71,7 @@
     "@spectrum-css/tags": "^3.0.2",
     "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/tooltip": "^3.0.3",
     "@spectrum-css/treeview": "^3.0.2",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",

packages/bbui/src/Table/AttachmentRenderer.svelte

@@ -1,6 +1,12 @@
 <script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import Link from "../Link/Link.svelte"
+  import { createEventDispatcher } from "svelte"
+
   export let value
 
+  const dispatch = createEventDispatcher()
+
   const displayLimit = 5
   $: attachments = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - attachments.length
@@ -13,9 +19,17 @@
 
 {#each attachments as attachment}
   {#if isImage(attachment.extension)}
-    <img src={attachment.url} alt={attachment.extension} />
+    <Link quiet target="_blank" href={attachment.url}>
+      <img src={attachment.url} alt={attachment.extension} />
+    </Link>
   {:else}
-    <div class="file">{attachment.extension}</div>
+    <Tooltip text={attachment.name} direction="right">
+      <div class="file">
+        <Link quiet target="_blank" href={attachment.url}
+          >{attachment.extension}</Link
+        >
+      </div>
+    </Tooltip>
   {/if}
 {/each}
 {#if leftover}

packages/bbui/src/Tooltip/Tooltip.svelte

@@ -0,0 +1,14 @@
+<script>
+  import "@spectrum-css/tooltip/dist/index-vars.css"
+
+  export let direction = "top"
+  export let text = ""
+</script>
+
+<span class="u-tooltip-showOnHover tooltip">
+  <slot />
+  <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
+    <span class="spectrum-Tooltip-label">{text}</span>
+    <span class="spectrum-Tooltip-tip" />
+  </div>
+</span>

packages/bbui/src/index.js

@@ -30,6 +30,7 @@ export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
+export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"

packages/bbui/yarn.lock

@@ -236,6 +236,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.2.tgz#8e27cce799b1b1d0054a88b135dddf7fbf1bdc78"
   integrity sha512-sJp8DRsU2iSF67hlOQHFdRkbJHncspoOywHEsqcjh2KFl8gRY12rQL0ORG6J2THUt0LVBWSy48iwph9s4rkwsA==
 
+"@spectrum-css/tooltip@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.3.tgz#26b8ca3b3d30e29630244d85eb4fc11d0c841281"
+  integrity sha512-ztRF7WW1FzyNavXBRc+80z67UoOrY9wl3cMYsVD3MpDnyxdzP8cjza1pCcolKBaFqRTcQKkxKw3GWtGICRKR5A==
+
 "@spectrum-css/treeview@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -65,6 +65,12 @@
     )
   }
 
+  const selectAttachment = ({ url }) => {
+    $goto(
+      `/builder/app/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
+    )
+  }
+
   const deleteRows = async () => {
     await api.post(`/api/${tableId}/rows`, {
       rows: selectedRows,