Add types to datasources

2022-06-23 11:35:57 +01:00 · 2022-06-23 11:35:57 +01:00 · 8bfd54bd80
parent 9309a05a28
commit 8bfd54bd80
18 changed files with 95 additions and 58 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -5,12 +5,14 @@
    Body,
    Layout,
    Detail,
+    Label,
+    Heading,
    notifications,
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import ICONS from "../icons"
  import { API } from "api"
-  import { IntegrationNames, IntegrationTypes } from "constants/backend"
+  import { IntegrationTypes } from "constants/backend"
  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
  import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
@ -118,7 +120,7 @@
 <Modal bind:this={modal}>
  <ModalContent
    disabled={!Object.keys(integration).length}
-    title="Data"
+    title="Add data source"
    confirmText="Continue"
    showSecondaryButton={showImportButton}
    secondaryButtonText="Import"
@ -129,62 +131,58 @@
      chooseNextModal()
    }}
  >
-    <Layout noPadding>
-      <Body size="S"
-        >All apps need data. You can connect to a data source below, or add data
-        to your app using Budibase's built-in database.
-      </Body>
-      <div
-        class:selected={integration.type === IntegrationTypes.INTERNAL}
-        on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
-        class="item hoverable"
-      >
-        <div class="item-body">
-          <svelte:component this={ICONS.BUDIBASE} height="18" width="18" />
-          <span class="icon-spacing"> <Body size="S">Budibase DB</Body></span>
-        </div>
-      </div>
-    </Layout>
-
-    <Layout gap="XS" noPadding>
-      <div class="title-spacing">
-        <Detail size="S">Connect to data source</Detail>
-      </div>
-      <div class="item-list">
-        {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
-          <div
-            class:selected={integration.type === integrationType}
-            on:click={() => selectIntegration(integrationType)}
-            class="item hoverable"
-          >
-            <div class="item-body">
-              <svelte:component
-                this={ICONS[integrationType]}
-                height="18"
-                width="18"
-              />
-
-              <span class="icon-spacing">
-                <Body size="S"
-                  >{schema.name || IntegrationNames[integrationType]}</Body
-                ></span
-              >
+    <Layout noPadding gap="M">
+      <Layout noPadding>
+        <Body size="S">
+          All apps need data. You can connect to a data source below, or add
+          data to your app using Budibase's built-in database.
+        </Body>
+        <div
+          class:selected={integration.type === IntegrationTypes.INTERNAL}
+          on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
+          class="item hoverable"
+        >
+          <div class="item-body with-type">
+            <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+            <div class="text">
+              <div class="name">Budibase DB</div>
+              <div class="type">Non-relational</div>
            </div>
          </div>
-        {/each}
-      </div>
+        </div>
+      </Layout>
+
+      <Layout gap="XS" noPadding>
+        <div class="type">Connect to data source</div>
+        <div class="item-list">
+          {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
+            <div
+              class:selected={integration.type === integrationType}
+              on:click={() => selectIntegration(integrationType)}
+              class="item hoverable"
+            >
+              <div class="item-body" class:with-type={!!schema.type}>
+                <svelte:component
+                  this={ICONS[integrationType]}
+                  height="20"
+                  width="20"
+                />
+                <div class="text">
+                  <div class="name">{schema.friendlyName}</div>
+                  {#if schema.type}
+                    <div class="type">{schema.type || ""}</div>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </Layout>
    </Layout>
  </ModalContent>
 </Modal>

 <style>
-  .icon-spacing {
-    margin-left: var(--spacing-m);
-  }
-  .item-body {
-    display: flex;
-    margin-left: var(--spacing-m);
-  }
  .item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -195,21 +193,43 @@
    cursor: pointer;
    display: grid;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    padding: var(--spectrum-alias-item-padding-s);
+    padding: var(--spectrum-alias-item-padding-s)
+      var(--spectrum-alias-item-padding-m);
    background: var(--spectrum-alias-background-color-secondary);
-    transition: 0.3s all;
+    transition: background 0.13s ease-out;
    border: solid var(--spectrum-alias-border-color);
    border-radius: 5px;
    box-sizing: border-box;
    border-width: 2px;
  }
-
-  .selected {
+  .item:hover,
+  .item.selected {
    background: var(--spectrum-alias-background-color-tertiary);
  }

-  .item:hover,
-  .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;
+  }
+
+  .name {
+    color: var(--spectrum-global-color-gray-900);
+    font-weight: 600;
+  }
+  .type {
+    font-weight: 600;
+    margin-top: 4px;
+    text-transform: uppercase;
+    font-size: 11px;
+    color: var(--spectrum-global-color-gray-700);
  }
 </style>
--- a/packages/server/src/definitions/datasource.ts
+++ b/packages/server/src/definitions/datasource.ts
@ -94,6 +94,7 @@ export interface Integration {
  relationships?: boolean
  description: string
  friendlyName: string
+  type?: string
  datasource: {}
  query: {
    [key: string]: QueryDefinition
--- a/packages/server/src/integrations/airtable.ts
+++ b/packages/server/src/integrations/airtable.ts
@ -18,6 +18,7 @@ module AirtableModule {
    description:
      "Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet.",
    friendlyName: "Airtable",
+    type: "Spreadsheet",
    datasource: {
      apiKey: {
        type: DatasourceFieldTypes.PASSWORD,
--- a/packages/server/src/integrations/arangodb.ts
+++ b/packages/server/src/integrations/arangodb.ts
@ -19,6 +19,7 @@ module ArangoModule {
  const SCHEMA: Integration = {
    docs: "https://github.com/arangodb/arangojs",
    friendlyName: "ArangoDB",
+    type: "Non-relational",
    description:
      "ArangoDB is a scalable open-source multi-model database natively supporting graph, document and search. All supported data models & access patterns can be combined in queries allowing for maximal flexibility. ",
    datasource: {
--- a/packages/server/src/integrations/couchdb.ts
+++ b/packages/server/src/integrations/couchdb.ts
@ -16,6 +16,7 @@ module CouchDBModule {
  const SCHEMA: Integration = {
    docs: "https://docs.couchdb.org/en/stable/",
    friendlyName: "CouchDB",
+    type: "Non-relational",
    description:
      "Apache CouchDB is an open-source document-oriented NoSQL database, implemented in Erlang.",
    datasource: {
--- a/packages/server/src/integrations/dynamodb.ts
+++ b/packages/server/src/integrations/dynamodb.ts
@ -21,6 +21,7 @@ module DynamoModule {
    description:
      "Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale.",
    friendlyName: "DynamoDB",
+    type: "Non-relational",
    datasource: {
      region: {
        type: DatasourceFieldTypes.STRING,
--- a/packages/server/src/integrations/elasticsearch.ts
+++ b/packages/server/src/integrations/elasticsearch.ts
@ -17,6 +17,7 @@ module ElasticsearchModule {
    description:
      "Elasticsearch is a search engine based on the Lucene library. It provides a distributed, multitenant-capable full-text search engine with an HTTP web interface and schema-free JSON documents.",
    friendlyName: "ElasticSearch",
+    type: "Non-relational",
    datasource: {
      url: {
        type: DatasourceFieldTypes.STRING,
--- a/packages/server/src/integrations/firebase.ts
+++ b/packages/server/src/integrations/firebase.ts
@ -16,6 +16,7 @@ module Firebase {
  const SCHEMA: Integration = {
    docs: "https://firebase.google.com/docs/firestore/quickstart",
    friendlyName: "Firestore",
+    type: "Non-relational",
    description:
      "Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.",
    datasource: {
--- a/packages/server/src/integrations/googlesheets.ts
+++ b/packages/server/src/integrations/googlesheets.ts
@ -49,6 +49,7 @@ module GoogleSheetsModule {
    description:
      "Create and collaborate on online spreadsheets in real-time and from any device. ",
    friendlyName: "Google Sheets",
+    type: "Spreadsheet",
    datasource: {
      spreadsheetId: {
        display: "Google Sheet URL",
--- a/packages/server/src/integrations/microsoftSqlServer.ts
+++ b/packages/server/src/integrations/microsoftSqlServer.ts
@ -44,6 +44,7 @@ module MSSQLModule {
    description:
      "Microsoft SQL Server is a relational database management system developed by Microsoft. ",
    friendlyName: "MS SQL Server",
+    type: "Relational",
    datasource: {
      user: {
        type: DatasourceFieldTypes.STRING,
--- a/packages/server/src/integrations/mongodb.ts
+++ b/packages/server/src/integrations/mongodb.ts
@ -24,6 +24,7 @@ module MongoDBModule {
  const SCHEMA: Integration = {
    docs: "https://github.com/mongodb/node-mongodb-native",
    friendlyName: "MongoDB",
+    type: "Non-relational",
    description:
      "MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.",
    datasource: {
--- a/packages/server/src/integrations/mysql.ts
+++ b/packages/server/src/integrations/mysql.ts
@ -36,6 +36,7 @@ module MySQLModule {
    docs: "https://github.com/sidorares/node-mysql2",
    plus: true,
    friendlyName: "MySQL",
+    type: "Relational",
    description:
      "MySQL Database Service is a fully managed database service to deploy cloud-native applications. ",
    datasource: {
--- a/packages/server/src/integrations/oracle.ts
+++ b/packages/server/src/integrations/oracle.ts
@ -40,6 +40,7 @@ module OracleModule {
    docs: "https://github.com/oracle/node-oracledb",
    plus: true,
    friendlyName: "Oracle",
+    type: "Relational",
    description:
      "Oracle Database is an object-relational database management system developed by Oracle Corporation",
    datasource: {
--- a/packages/server/src/integrations/postgres.ts
+++ b/packages/server/src/integrations/postgres.ts
@ -47,6 +47,7 @@ module PostgresModule {
    docs: "https://node-postgres.com",
    plus: true,
    friendlyName: "PostgreSQL",
+    type: "Relational",
    description:
      "PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.",
    datasource: {
--- a/packages/server/src/integrations/redis.ts
+++ b/packages/server/src/integrations/redis.ts
@ -17,6 +17,7 @@ module RedisModule {
    docs: "https://redis.io/docs/",
    description: "",
    friendlyName: "Redis",
+    type: "Non-relational",
    datasource: {
      host: {
        type: "string",
--- a/packages/server/src/integrations/rest.ts
+++ b/packages/server/src/integrations/rest.ts
@ -64,6 +64,7 @@ module RestModule {
    description:
      "With the REST API datasource, you can connect, query and pull data from multiple REST APIs. You can then use the retrieved data to build apps.",
    friendlyName: "REST API",
+    type: "API",
    datasource: {
      url: {
        type: DatasourceFieldTypes.STRING,
--- a/packages/server/src/integrations/s3.ts
+++ b/packages/server/src/integrations/s3.ts
@ -17,6 +17,7 @@ module S3Module {
    description:
      "Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.",
    friendlyName: "Amazon S3",
+    type: "Object store",
    datasource: {
      region: {
        type: "string",
--- a/packages/server/src/integrations/snowflake.ts
+++ b/packages/server/src/integrations/snowflake.ts
@ -16,6 +16,7 @@ module SnowflakeModule {
    description:
      "Snowflake is a solution for data warehousing, data lakes, data engineering, data science, data application development, and securely sharing and consuming shared data.",
    friendlyName: "Snowflake",
+    type: "Relational",
    datasource: {
      account: {
        type: "string",