From 7dfe049ae679e8be98f6717d17d4d396aca0e1d0 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 17 Aug 2022 23:13:51 +0100
Subject: [PATCH 1/2] Adding full builder integration of custom components -
 splitting into own section properly - fixing some issues with SVG class
 overlap.

---
 .../builder/src/builderStore/datasource.js     |  2 +-
 .../DatasourceNavigator.svelte                 |  4 ++--
 .../_components/DatasourceCard.svelte          | 10 +---------
 .../DatasourceNavigator/icons/Custom.svelte    | 18 ++++++++++++------
 .../backend/DatasourceNavigator/icons/index.js | 12 +++++++++++-
 .../app/[application]/data/_layout.svelte      |  4 +++-
 .../server/src/utilities/fileSystem/index.js   |  5 ++++-
 7 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/builderStore/datasource.js b/packages/builder/src/builderStore/datasource.js
index 804d88bad6..84edcdd6ad 100644
--- a/packages/builder/src/builderStore/datasource.js
+++ b/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}`
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 9faf00a199..6235e52916 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 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"
           />
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
index 2dac2fec79..6dffc70a63 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
+++ b/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
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte
index 0d4b7219aa..cc8c98f511 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte
+++ b/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
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
index 267ed32b6e..6d43258f45 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/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]
+  }
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index a1e95cf10b..7046614768 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/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">
diff --git a/packages/server/src/utilities/fileSystem/index.js b/packages/server/src/utilities/fileSystem/index.js
index d65ee48f05..f937f172b5 100644
--- a/packages/server/src/utilities/fileSystem/index.js
+++ b/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)

From 2f23de7b3a7f9b2de1523089e1e534a7914e8676 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 17 Aug 2022 23:17:10 +0100
Subject: [PATCH 2/2] Fixing issue with single custom datasource being full
 width in creation modal.

---
 .../modals/CreateDatasourceModal.svelte       | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 945cd574d8..a500c6a5b3 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -164,14 +164,16 @@
         {/each}
       </div>
       <Body size="S">Custom data source</Body>
-      {#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]}
-        <DatasourceCard
-          on:selected={evt => selectIntegration(evt.detail)}
-          {schema}
-          bind:integrationType
-          {integration}
-        />
-      {/each}
+      <div class="item-list">
+        {#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]}
+          <DatasourceCard
+            on:selected={evt => selectIntegration(evt.detail)}
+            {schema}
+            bind:integrationType
+            {integration}
+          />
+        {/each}
+      </div>
     </Layout>
   </ModalContent>
 </Modal>
@@ -179,7 +181,7 @@
 <style>
   .item-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(2, minmax(150px, 1fr));
     grid-gap: var(--spectrum-alias-grid-baseline);
   }