From b8c18d3d91dc8f6b00bbf9d985025ab1315c9942 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sun, 23 May 2021 15:40:00 +0100
Subject: [PATCH] make attachments downloadable and images clickable

---
 packages/bbui/package.json                     |  1 +
 .../bbui/src/Table/AttachmentRenderer.svelte   | 18 ++++++++++++++++--
 packages/bbui/src/Tooltip/Tooltip.svelte       | 14 ++++++++++++++
 packages/bbui/src/index.js                     |  1 +
 packages/bbui/yarn.lock                        |  5 +++++
 .../components/backend/DataTable/Table.svelte  |  6 ++++++
 6 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/bbui/src/Tooltip/Tooltip.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 7e57282b2c..1d05abcc19 100644
--- a/packages/bbui/package.json
+++ b/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",
diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
index ab9760a980..6bb53aaa80 100644
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/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}
diff --git a/packages/bbui/src/Tooltip/Tooltip.svelte b/packages/bbui/src/Tooltip/Tooltip.svelte
new file mode 100644
index 0000000000..a4b1d4ff59
--- /dev/null
+++ b/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>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 63abfa319b..f6d2c4eb9c 100644
--- a/packages/bbui/src/index.js
+++ b/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"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index c6991c4a03..71582be096 100644
--- a/packages/bbui/yarn.lock
+++ b/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"
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index c23a6e3107..75940a4919 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/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,