Updating custom datasource SVG - splitting out in UI.

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

@@ -0,0 +1,73 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { Heading, Detail } from "@budibase/bbui"
+  import ICONS 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
+  class:selected={integration.type === integrationType}
+  on:click={() => dispatcher("selected", integrationType)}
+  class="item hoverable"
+>
+  <div class="item-body" class:with-type={!!schema.type}>
+    <svelte:component
+      this={getIcon(integrationType, schema)}
+      height="20"
+      width="20"
+    />
+    <div class="text">
+      <Heading size="XXS">{schema.friendlyName}</Heading>
+      {#if schema.type}
+        <Detail size="S">{schema.type || ""}</Detail>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .item {
+    cursor: pointer;
+    display: grid;
+    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
+    padding: var(--spectrum-alias-item-padding-s)
+      var(--spectrum-alias-item-padding-m);
+    background: var(--spectrum-alias-background-color-secondary);
+    transition: background 0.13s ease-out;
+    border: solid var(--spectrum-alias-border-color);
+    border-radius: 5px;
+    box-sizing: border-box;
+    border-width: 2px;
+  }
+  .item:hover,
+  .item.selected {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+
+  .item-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .item-body.with-type {
+    align-items: flex-start;
+  }
+  .item-body.with-type :global(svg) {
+    margin-top: 4px;
+  }
+</style>

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

@@ -1,8 +1,6 @@
 <script>
   export let width = "100"
   export let height = "100"
-  let color =
-    "var(--spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color))"
 </script>
 
 <svg
@@ -11,29 +9,38 @@
   xmlns="http://www.w3.org/2000/svg"
   x="0px"
   y="0px"
-  viewBox="0 0 230.795 230.795"
+  viewBox="0 0 18.43 17.62"
-  style="enable-background:new 0 0 230.795 230.795;"
+  style="enable-background:new 0 0 18.43 17.62;"
   xml:space="preserve"
 >
-  <g>
+  <style type="text/css">
-    <path
+    .st0 {
-      d="M60.357,63.289c-2.929-2.929-7.678-2.93-10.606-0.001L2.197,110.836C0.79,112.243,0,114.151,0,116.14
+      fill: var(
-		c0,1.989,0.79,3.896,2.196,5.303l47.348,47.35c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196
+        --spectrum-heading-xxs-text-color,
-		c2.93-2.929,2.93-7.678,0.001-10.606L18.107,116.14l42.25-42.245C63.286,70.966,63.286,66.217,60.357,63.289z"
+        var(--spectrum-alias-heading-text-color)
-      fill={color}
+      );
-    />
+    }
-    <path
+  </style>
-      d="M228.598,110.639l-47.355-47.352c-2.928-2.928-7.677-2.929-10.606,0.001c-2.929,2.929-2.929,7.678,0.001,10.607
+  <ellipse id="Ellipse_9514" class="st0" cx="9.14" cy="2.88" rx="8" ry="2.5" />
-		l42.051,42.048l-42.249,42.243c-2.93,2.929-2.93,7.678-0.001,10.606c1.465,1.465,3.384,2.197,5.304,2.197
+  <path
-		c1.919,0,3.839-0.732,5.303-2.196l47.554-47.547c1.407-1.406,2.197-3.314,2.197-5.304
+    id="Path_8355"
-		C230.795,113.954,230.005,112.046,228.598,110.639z"
+    class="st0"
-      fill={color}
+    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
+  />
-      d="M155.889,61.302c-3.314-2.484-8.017-1.806-10.498,1.51l-71.994,96.184c-2.482,3.316-1.807,8.017,1.51,10.498
+  <path
-		c1.348,1.01,2.925,1.496,4.488,1.496c2.282,0,4.537-1.038,6.01-3.006L157.398,71.8C159.881,68.484,159.205,63.784,155.889,61.302z"
+    id="Path_8356"
-      fill={color}
+    class="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
-  </g>
+	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"
-  <g />
+  />
+  <path
+    id="Path_8353"
+    class="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
+	l-1.53,1.53l0.45,0.45c0.25,0.25,0.25,0.65,0,0.9l0,0l-0.45,0.45c-0.25,0.25-0.65,0.25-0.9,0l0,0l-0.01-0.01l-1.24,1.24
+	c-0.56,0.56-1.47,0.56-2.03,0l0,0L10.32,14.42z"
+  />
 </svg>

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

@@ -18,6 +18,7 @@
   import { createRestDatasource } from "builderStore/datasource"
   import { goto } from "@roxi/routify"
   import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
+  import DatasourceCard from "../_components/DatasourceCard.svelte"
 
   export let modal
   let integrations = {}
@@ -95,14 +96,6 @@
     }
     integrations = newIntegrations
   }
-
-  function getIcon(integrationType, schema) {
-    if (schema.custom) {
-      return ICONS.CUSTOM
-    } else {
-      return ICONS[integrationType]
-    }
-  }
 </script>
 
 <Modal bind:this={internalTableModal}>
@@ -161,28 +154,24 @@
     <Layout noPadding gap="XS">
       <Body size="S">Connect to an external data source</Body>
       <div class="item-list">
-        {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
+        {#each Object.entries(integrations).filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]}
-          <div
+          <DatasourceCard
-            class:selected={integration.type === integrationType}
+            on:selected={evt => selectIntegration(evt.detail)}
-            on:click={() => selectIntegration(integrationType)}
+            {schema}
-            class="item hoverable"
+            bind:integrationType
-          >
+            {integration}
-            <div class="item-body" class:with-type={!!schema.type}>
+          />
-              <svelte:component
-                this={getIcon(integrationType, schema)}
-                height="20"
-                width="20"
-              />
-              <div class="text">
-                <Heading size="XXS">{schema.friendlyName}</Heading>
-                {#if schema.type}
-                  <Detail size="S">{schema.type || ""}</Detail>
-                {/if}
-              </div>
-            </div>
-          </div>
         {/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}
     </Layout>
   </ModalContent>
 </Modal>