From 1f5de9b71d080be14973f4b88340aa86d774155b Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 29 Sep 2022 19:30:53 +0100
Subject: [PATCH] Adding ability for datasource plugins to have a custom icon
 svg.

---
 .../backend-core/src/objectStore/index.ts     |  5 +++
 .../DatasourceNavigator.svelte                | 10 ++---
 .../IntegrationIcon.svelte                    | 40 +++++++++++++++++++
 .../_components/DatasourceCard.svelte         |  8 +---
 .../DatasourceNavigator/icons/index.js        | 11 +++--
 .../src/components/common/CustomSVG.svelte    | 23 +++++++++++
 packages/server/src/integrations/index.ts     |  3 ++
 packages/types/src/documents/global/plugin.ts |  1 +
 packages/types/src/sdk/datasources.ts         |  1 +
 9 files changed, 88 insertions(+), 14 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
 create mode 100644 packages/builder/src/components/common/CustomSVG.svelte

diff --git a/packages/backend-core/src/objectStore/index.ts b/packages/backend-core/src/objectStore/index.ts
index a97aa8f65d..17e002cc49 100644
--- a/packages/backend-core/src/objectStore/index.ts
+++ b/packages/backend-core/src/objectStore/index.ts
@@ -182,6 +182,11 @@ export const streamUpload = async (
       ...extra,
       ContentType: "application/javascript",
     }
+  } else if (filename?.endsWith(".svg")) {
+    extra = {
+      ...extra,
+      ContentType: "image",
+    }
   }
 
   const params = {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 19946a2386..a3531513fb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -13,7 +13,7 @@
     customQueryIconColor,
     customQueryText,
   } from "helpers/data/utils"
-  import { getIcon } from "./icons"
+  import IntegrationIcon from "./IntegrationIcon.svelte"
   import { notifications } from "@budibase/bbui"
 
   let openDataSources = []
@@ -123,10 +123,10 @@
         on:iconClick={() => toggleNode(datasource)}
       >
         <div class="datasource-icon" slot="icon">
-          <svelte:component
-            this={getIcon(datasource.source, datasource.schema)}
-            height="18"
-            width="18"
+          <IntegrationIcon
+            integrationType={datasource.source}
+            schema={datasource.schema}
+            size="18"
           />
         </div>
         {#if datasource._id !== BUDIBASE_INTERNAL_DB}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte b/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
new file mode 100644
index 0000000000..54afa35e74
--- /dev/null
+++ b/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { getIcon } from "./icons"
+  import CustomSVG from "components/common/CustomSVG.svelte"
+  import { admin } from "stores/portal"
+
+  export let integrationType
+  export let schema
+  export let size = "18"
+
+  $: objectStoreUrl = $admin.cloud ? "https://cdn.budi.live" : ""
+  $: pluginsUrl = `${objectStoreUrl}/plugins`
+  $: iconInfo = getIcon(integrationType, schema)
+
+  async function getSvgFromUrl(info) {
+    const url = `${pluginsUrl}/${info.url}`
+    const resp = await fetch(url, {
+      headers: {
+        pragma: "no-cache",
+        "cache-control": "no-cache",
+      },
+    })
+    let text = await resp.text()
+    // explicitly only want to replace the first instance
+    if (text.includes("height=")) {
+      text = text.replace(/height="\d*"/, `height="${size}"`)
+    }
+    if (text.includes("width=")) {
+      text = text.replace(/width="\d*"/, `width="${size}"`)
+    }
+    return text
+  }
+</script>
+
+{#if iconInfo.icon}
+  <svelte:component this={iconInfo.icon} height={size} width={size} />
+{:else if iconInfo.url}
+  {#await getSvgFromUrl(iconInfo) then retrievedSvg}
+    <CustomSVG {size} svgHtml={retrievedSvg} />
+  {/await}
+{/if}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
index 6dffc70a63..1e966ebb2b 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { Heading, Detail } from "@budibase/bbui"
-  import { getIcon } from "../icons"
+  import IntegrationIcon from "../IntegrationIcon.svelte"
 
   export let integration
   export let integrationType
@@ -16,11 +16,7 @@
   class="item hoverable"
 >
   <div class="item-body" class:with-type={!!schema.type}>
-    <svelte:component
-      this={getIcon(integrationType, schema)}
-      height="20"
-      width="20"
-    />
+    <IntegrationIcon {integrationType} {schema} size="25" />
     <div class="text">
       <Heading size="XXS">{schema.friendlyName}</Heading>
       {#if schema.type}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
index 6d43258f45..18aa361570 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
@@ -16,6 +16,8 @@ import Firebase from "./Firebase.svelte"
 import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
 import Custom from "./Custom.svelte"
+import { integrations } from "stores/backend"
+import { get } from "svelte/store"
 
 const ICONS = {
   BUDIBASE: Budibase,
@@ -41,9 +43,12 @@ const ICONS = {
 export default ICONS
 
 export function getIcon(integrationType, schema) {
-  if (schema?.custom || !ICONS[integrationType]) {
-    return ICONS.CUSTOM
+  const integrationList = get(integrations)
+  if (integrationList[integrationType]?.iconUrl) {
+    return { url: integrationList[integrationType].iconUrl }
+  } else if (schema?.custom || !ICONS[integrationType]) {
+    return { icon: ICONS.CUSTOM }
   } else {
-    return ICONS[integrationType]
+    return { icon: ICONS[integrationType] }
   }
 }
diff --git a/packages/builder/src/components/common/CustomSVG.svelte b/packages/builder/src/components/common/CustomSVG.svelte
new file mode 100644
index 0000000000..5ae428c12d
--- /dev/null
+++ b/packages/builder/src/components/common/CustomSVG.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { Helpers } from "@budibase/bbui"
+  export let size
+  export let svgHtml
+
+  function substituteSize(svg) {
+    if (svg.includes("height=")) {
+      svg = svg.replace(/height="\d*"/, `height="${size}"`)
+    }
+    if (svg.includes("width=")) {
+      svg = svg.replace(/width="\d*"/, `width="${size}"`)
+    }
+    if (svg.includes("id=")) {
+      const matches = svg.match(/id="(.*)"/g)
+      for (let match of matches) {
+        svg = svg.replace(new RegExp(match, "g"), Helpers.uuid())
+      }
+    }
+    return svg
+  }
+</script>
+
+{@html substituteSize(svgHtml)}
diff --git a/packages/server/src/integrations/index.ts b/packages/server/src/integrations/index.ts
index 000ab65a33..a542ff8455 100644
--- a/packages/server/src/integrations/index.ts
+++ b/packages/server/src/integrations/index.ts
@@ -78,6 +78,9 @@ module.exports = {
           ...plugin.schema["schema"],
           custom: true,
         }
+        if (plugin.iconUrl) {
+          pluginSchemas[sourceId].iconUrl = plugin.iconUrl
+        }
       }
     }
     return {
diff --git a/packages/types/src/documents/global/plugin.ts b/packages/types/src/documents/global/plugin.ts
index a374d5496c..7f6d4f4995 100644
--- a/packages/types/src/documents/global/plugin.ts
+++ b/packages/types/src/documents/global/plugin.ts
@@ -21,6 +21,7 @@ export interface Plugin extends Document {
   name: string
   version: string
   jsUrl?: string
+  iconUrl?: string
   source: PluginSource
   package: { [key: string]: any }
   hash: string
diff --git a/packages/types/src/sdk/datasources.ts b/packages/types/src/sdk/datasources.ts
index 970613b322..d01d636b86 100644
--- a/packages/types/src/sdk/datasources.ts
+++ b/packages/types/src/sdk/datasources.ts
@@ -96,6 +96,7 @@ export interface Integration {
   description: string
   friendlyName: string
   type?: string
+  iconUrl?: string
   datasource: {}
   query: {
     [key: string]: QueryDefinition