From 5dd818638363aed4b3cda212462b3c37235a8581 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 23 Jun 2022 11:35:57 +0100 Subject: [PATCH 1/4] Add types to datasources --- .../modals/CreateDatasourceModal.svelte | 136 ++++++++++-------- packages/server/src/definitions/datasource.ts | 1 + packages/server/src/integrations/airtable.ts | 1 + packages/server/src/integrations/arangodb.ts | 1 + packages/server/src/integrations/couchdb.ts | 1 + packages/server/src/integrations/dynamodb.ts | 1 + .../server/src/integrations/elasticsearch.ts | 1 + packages/server/src/integrations/firebase.ts | 1 + .../server/src/integrations/googlesheets.ts | 1 + .../src/integrations/microsoftSqlServer.ts | 1 + packages/server/src/integrations/mongodb.ts | 1 + packages/server/src/integrations/mysql.ts | 1 + packages/server/src/integrations/oracle.ts | 1 + packages/server/src/integrations/postgres.ts | 1 + packages/server/src/integrations/redis.ts | 1 + packages/server/src/integrations/rest.ts | 1 + packages/server/src/integrations/s3.ts | 1 + packages/server/src/integrations/snowflake.ts | 1 + 18 files changed, 95 insertions(+), 58 deletions(-) diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index 14adbfbd02..d11c285783 100644 --- 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 @@ - - All apps need data. You can connect to a data source below, or add data - to your app using Budibase's built-in database. - -
selectIntegration(IntegrationTypes.INTERNAL)} - class="item hoverable" - > -
- - Budibase DB -
-
- - - -
- Connect to data source -
-
- {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} -
selectIntegration(integrationType)} - class="item hoverable" - > -
- - - - {schema.name || IntegrationNames[integrationType]} + + + + All apps need data. You can connect to a data source below, or add + data to your app using Budibase's built-in database. + +
selectIntegration(IntegrationTypes.INTERNAL)} + class="item hoverable" + > +
+ +
+
Budibase DB
+
Non-relational
- {/each} -
+
+ + + +
Connect to data source
+
+ {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} +
selectIntegration(integrationType)} + class="item hoverable" + > +
+ +
+
{schema.friendlyName}
+ {#if schema.type} +
{schema.type || ""}
+ {/if} +
+
+
+ {/each} +
+ diff --git a/packages/server/src/definitions/datasource.ts b/packages/server/src/definitions/datasource.ts index 2745329e41..90c81abe9f 100644 --- 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 diff --git a/packages/server/src/integrations/airtable.ts b/packages/server/src/integrations/airtable.ts index 50c0a01147..ec49bf5e40 100644 --- 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, diff --git a/packages/server/src/integrations/arangodb.ts b/packages/server/src/integrations/arangodb.ts index 8d2597b86b..e6e2c0db35 100644 --- 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: { diff --git a/packages/server/src/integrations/couchdb.ts b/packages/server/src/integrations/couchdb.ts index ea7edb6136..6d33658988 100644 --- 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: { diff --git a/packages/server/src/integrations/dynamodb.ts b/packages/server/src/integrations/dynamodb.ts index 9ce4201a1e..f06bba02e9 100644 --- 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, diff --git a/packages/server/src/integrations/elasticsearch.ts b/packages/server/src/integrations/elasticsearch.ts index 723d68f578..eb27966df0 100644 --- 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, diff --git a/packages/server/src/integrations/firebase.ts b/packages/server/src/integrations/firebase.ts index 8ed08befeb..c0f5d3c798 100644 --- 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: { diff --git a/packages/server/src/integrations/googlesheets.ts b/packages/server/src/integrations/googlesheets.ts index 7b17b7246d..d2562ddccf 100644 --- 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", diff --git a/packages/server/src/integrations/microsoftSqlServer.ts b/packages/server/src/integrations/microsoftSqlServer.ts index 530e569405..1e5664748d 100644 --- 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, diff --git a/packages/server/src/integrations/mongodb.ts b/packages/server/src/integrations/mongodb.ts index 3d851399f6..c81daff641 100644 --- 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: { diff --git a/packages/server/src/integrations/mysql.ts b/packages/server/src/integrations/mysql.ts index 287817ef27..1fdab66701 100644 --- 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: { diff --git a/packages/server/src/integrations/oracle.ts b/packages/server/src/integrations/oracle.ts index 94e51694c1..ab742d9009 100644 --- 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: { diff --git a/packages/server/src/integrations/postgres.ts b/packages/server/src/integrations/postgres.ts index 0ac55a9cd0..7cc01bdc79 100644 --- 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: { diff --git a/packages/server/src/integrations/redis.ts b/packages/server/src/integrations/redis.ts index 29971c4b62..a1a9804cc0 100644 --- 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", diff --git a/packages/server/src/integrations/rest.ts b/packages/server/src/integrations/rest.ts index 6174613fc8..13956e5994 100644 --- 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, diff --git a/packages/server/src/integrations/s3.ts b/packages/server/src/integrations/s3.ts index 273f221575..12371e703f 100644 --- 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", diff --git a/packages/server/src/integrations/snowflake.ts b/packages/server/src/integrations/snowflake.ts index 711647e5df..5e04e858e5 100644 --- 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", From 2663860ec10575cf2b764c72ebdb4c3fe40d87a7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 23 Jun 2022 12:05:05 +0100 Subject: [PATCH 2/4] Update styles to use spectrum components --- packages/bbui/src/Typography/Detail.svelte | 2 - .../modals/CreateDatasourceModal.svelte | 89 ++++++++----------- 2 files changed, 38 insertions(+), 53 deletions(-) diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte index bb5c78c11e..76437ffb3c 100644 --- a/packages/bbui/src/Typography/Detail.svelte +++ b/packages/bbui/src/Typography/Detail.svelte @@ -1,9 +1,7 @@ diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index d11c285783..6d9c9fce80 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte @@ -131,53 +131,48 @@ chooseNextModal() }} > - - - - All apps need data. You can connect to a data source below, or add - data to your app using Budibase's built-in database. - -
selectIntegration(IntegrationTypes.INTERNAL)} - class="item hoverable" - > -
- -
-
Budibase DB
-
Non-relational
-
+ + Get started with Budibase DB +
selectIntegration(IntegrationTypes.INTERNAL)} + class="item hoverable" + > +
+ +
+ Budibase DB + Non-relational
- +
+ - -
Connect to data source
-
- {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} -
selectIntegration(integrationType)} - class="item hoverable" - > -
- -
-
{schema.friendlyName}
- {#if schema.type} -
{schema.type || ""}
- {/if} -
+ + Connect to an external data source +
+ {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} +
selectIntegration(integrationType)} + class="item hoverable" + > +
+ +
+ {schema.friendlyName} + {#if schema.type} + {schema.type || ""} + {/if}
- {/each} -
- +
+ {/each} +
@@ -221,15 +216,7 @@ 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; + .text :global(.spectrum-Detail) { color: var(--spectrum-global-color-gray-700); } From c37e4cc8be994957a1fe75e36cc2b0703d5ceb5e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 23 Jun 2022 12:07:12 +0100 Subject: [PATCH 3/4] Lint --- .../DatasourceNavigator/modals/CreateDatasourceModal.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index 6d9c9fce80..8d34c292f3 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte @@ -5,7 +5,6 @@ Body, Layout, Detail, - Label, Heading, notifications, } from "@budibase/bbui" From 468d4b8e779c1a75bab92e78cab48b587262f4e6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 23 Jun 2022 14:58:32 +0100 Subject: [PATCH 4/4] Update cypress --- packages/builder/cypress/support/commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index e638eb6cbb..29aabc4611 100644 --- 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(() => {