Merge pull request #6443 from Budibase/datasource-labels

Datasource labels
2022-06-23 15:32:28 +01:00 · 2022-06-23 15:32:28 +01:00 · a429c16521
parent 0d28cabae0 b9cf906276
commit a429c16521
20 changed files with 61 additions and 40 deletions
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@ -1,9 +1,7 @@
 <script>
  import "@spectrum-css/typography/dist/index-vars.css"

-  // Sizes
  export let size = "M"
-
  export let serif = false
 </script>

--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -361,7 +361,7 @@ Cypress.Commands.add("createTable", (tableName, initialTable) => {
    cy.get(`[data-cy="new-table"]`).click()
  }
  cy.wait(5000)
-  cy.get(".spectrum-Dialog-grid")
+  cy.get(".item")
    .contains("Budibase DB")
    .click({ force: true })
    .then(() => {
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -5,12 +5,13 @@
    Body,
    Layout,
    Detail,
+    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 +119,7 @@
 <Modal bind:this={modal}>
  <ModalContent
    disabled={!Object.keys(integration).length}
-    title="Data"
+    title="Add data source"
    confirmText="Continue"
    showSecondaryButton={showImportButton}
    secondaryButtonText="Import"
@ -129,27 +130,25 @@
      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>
+    <Layout noPadding gap="XS">
+      <Body size="S">Get started with Budibase DB</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 class="item-body with-type">
+          <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+          <div class="text">
+            <Heading size="XXS">Budibase DB</Heading>
+            <Detail size="S" class="type">Non-relational</Detail>
+          </div>
        </div>
      </div>
    </Layout>

-    <Layout gap="XS" noPadding>
-      <div class="title-spacing">
-        <Detail size="S">Connect to data source</Detail>
-      </div>
+    <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]}
          <div
@ -157,18 +156,18 @@
            on:click={() => selectIntegration(integrationType)}
            class="item hoverable"
          >
-            <div class="item-body">
+            <div class="item-body" class:with-type={!!schema.type}>
              <svelte:component
                this={ICONS[integrationType]}
-                height="18"
-                width="18"
+                height="20"
+                width="20"
              />
-
-              <span class="icon-spacing">
-                <Body size="S"
-                  >{schema.name || IntegrationNames[integrationType]}</Body
-                ></span
-              >
+              <div class="text">
+                <Heading size="XXS">{schema.friendlyName}</Heading>
+                {#if schema.type}
+                  <Detail size="S">{schema.type || ""}</Detail>
+                {/if}
+              </div>
            </div>
          </div>
        {/each}
@ -178,13 +177,6 @@
 </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 +187,35 @@
    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;
+  }
+
+  .text :global(.spectrum-Detail) {
+    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",