Merge pull request #8058 from Budibase/feature/plugin-icons

Custom datasource icons

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 = {

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
+          <IntegrationIcon
-            this={getIcon(datasource.source, datasource.schema)}
+            integrationType={datasource.source}
-            height="18"
+            schema={datasource.schema}
-            width="18"
+            size="18"
           />
         </div>
         {#if datasource._id !== BUDIBASE_INTERNAL_DB}

packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte

@@ -0,0 +1,32 @@
+<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",
+      },
+    })
+    return resp.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}

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
+    <IntegrationIcon {integrationType} {schema} size="25" />
-      this={getIcon(integrationType, schema)}
-      height="20"
-      width="20"
-    />
     <div class="text">
       <Heading size="XXS">{schema.friendlyName}</Heading>
       {#if schema.type}

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]) {
+  const integrationList = get(integrations)
-    return ICONS.CUSTOM
+  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] }
   }
 }

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="[^"]+"/, `height="${size}"`)
+    }
+    if (svg.includes("width=")) {
+      svg = svg.replace(/width="[^"]+"/, `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)}

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 {

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

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