Adding full builder integration of custom components - splitting into own section properly - fixing some issues with SVG class overlap.

packages/builder/src/builderStore/datasource.js

@@ -9,7 +9,7 @@ function prepareData(config) {
     ds => ds.source === config.type
   ).length
 
-  let baseName = IntegrationNames[config.type]
+  let baseName = IntegrationNames[config.type] || config.name
   let name =
     existingTypeCount === 0 ? baseName : `${baseName}-${existingTypeCount + 1}`
 

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

@@ -13,7 +13,7 @@
     customQueryIconColor,
     customQueryText,
   } from "helpers/data/utils"
-  import ICONS from "./icons"
+  import { getIcon } from "./icons"
   import { notifications } from "@budibase/bbui"
 
   let openDataSources = []
@@ -124,7 +124,7 @@
       >
         <div class="datasource-icon" slot="icon">
           <svelte:component
-            this={ICONS[datasource.source]}
+            this={getIcon(datasource.source, datasource.schema)}
             height="18"
             width="18"
           />

packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte

@@ -1,21 +1,13 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { Heading, Detail } from "@budibase/bbui"
-  import ICONS from "../icons"
+  import { getIcon } from "../icons"
 
   export let integration
   export let integrationType
   export let schema
 
   let dispatcher = createEventDispatcher()
-
-  function getIcon(integrationType, schema) {
-    if (schema.custom) {
-      return ICONS.CUSTOM
-    } else {
-      return ICONS[integrationType]
-    }
-  }
 </script>
 
 <div

packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte

@@ -10,33 +10,39 @@
   x="0px"
   y="0px"
   viewBox="0 0 18.43 17.62"
-  style="enable-background:new 0 0 18.43 17.62;"
   xml:space="preserve"
 >
   <style type="text/css">
-    .st0 {
+    .custom-st0 {
       fill: var(
         --spectrum-heading-xxs-text-color,
         var(--spectrum-alias-heading-text-color)
       );
     }
   </style>
-  <ellipse id="Ellipse_9514" class="st0" cx="9.14" cy="2.88" rx="8" ry="2.5" />
+  <ellipse
+    id="Ellipse_9514"
+    class="custom-st0"
+    cx="9.14"
+    cy="2.88"
+    rx="8"
+    ry="2.5"
+  />
   <path
     id="Path_8355"
-    class="st0"
+    class="custom-st0"
     d="M7.64,12.88c0-0.48,0.06-0.95,0.17-1.41c-2.53-0.16-5.92-0.76-6.67-1.95v4.36
 	c0,1.34,3.39,2.43,7.63,2.49C8.03,15.36,7.63,14.13,7.64,12.88z"
   />
   <path
     id="Path_8356"
-    class="st0"
+    class="custom-st0"
     d="M13.64,6.88c1.25,0,2.47,0.39,3.48,1.12c0.01-0.04,0.02-0.08,0.02-0.12V4.51
 	c-1.22,1.55-5.53,2-8,2s-7.11-0.58-8-2v3.36c0,1.28,3.09,2.33,7.06,2.48C9.18,8.24,11.3,6.88,13.64,6.88z"
   />
   <path
     id="Path_8353"
-    class="st0"
+    class="custom-st0"
     d="M10.32,14.42c-0.56-0.56-0.56-1.47,0-2.03l1.24-1.24l-0.01-0.01c-0.25-0.25-0.25-0.65,0-0.9l0,0
 	L12,9.79c0.25-0.25,0.65-0.25,0.9,0c0,0,0,0,0,0l0,0l0.45,0.45l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34
 	c0.09,0.09,0.09,0.24,0,0.34l-1.53,1.53l1.35,1.35l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34c0.09,0.09,0.09,0.24,0,0.34

packages/builder/src/components/backend/DatasourceNavigator/icons/index.js

@@ -17,7 +17,7 @@ import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
 import Custom from "./Custom.svelte"
 
-export default {
+const ICONS = {
   BUDIBASE: Budibase,
   POSTGRES: Postgres,
   DYNAMODB: DynamoDB,
@@ -37,3 +37,13 @@ export default {
   SNOWFLAKE: Snowflake,
   CUSTOM: Custom,
 }
+
+export default ICONS
+
+export function getIcon(integrationType, schema) {
+  if (schema?.custom || !ICONS[integrationType]) {
+    return ICONS.CUSTOM
+  } else {
+    return ICONS[integrationType]
+  }
+}

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -31,7 +31,9 @@
       class="add-button"
       data-cy={`new-${isExternal ? "datasource" : "table"}`}
     >
-      <Icon hoverable name="AddCircle" on:click={modal.show} />
+      {#if modal}
+        <Icon hoverable name="AddCircle" on:click={modal.show} />
+      {/if}
     </div>
   </div>
   <div class="content">

packages/server/src/utilities/fileSystem/index.js

@@ -359,7 +359,10 @@ exports.getDatasourcePlugin = async (name, url) => {
   if (fs.existsSync(filename)) {
     return require(filename)
   }
-  const response = await fetch(checkSlashesInUrl(`${env.MINIO_URL}/${url}`))
+  const fullUrl = checkSlashesInUrl(
+    `${env.MINIO_URL}/${ObjectStoreBuckets.PLUGINS}/${url}`
+  )
+  const response = await fetch(fullUrl)
   if (response.status === 200) {
     const content = await response.text()
     fs.writeFileSync(filename, content)