CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 20:10:54 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6443 from Budibase/datasource-labels

Browse source 
Datasource labels
This commit is contained in:
Andrew Kingston 2022-06-23 15:32:28 +01:00 committed by GitHub
parent 92160d6e4e 468d4b8e77
commit 27d5f2ba6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 61 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/bbui/src/Typography/Detail.svelte
View file

@ -1,9 +1,7 @@
<script> <script>
import "@spectrum-css/typography/dist/index-vars.css" import "@spectrum-css/typography/dist/index-vars.css"
// Sizes
export let size = "M" export let size = "M"
export let serif = false export let serif = false
</script> </script>

2
packages/builder/cypress/support/commands.js
View file

@ -361,7 +361,7 @@ Cypress.Commands.add("createTable", (tableName, initialTable) => {
cy.get(`[data-cy="new-table"]`).click() cy.get(`[data-cy="new-table"]`).click()
} }
cy.wait(5000) cy.wait(5000)
cy.get(".spectrum-Dialog-grid") cy.get(".item")
.contains("Budibase DB") .contains("Budibase DB")
.click({ force: true }) .click({ force: true })
.then(() => { .then(() => {

80
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View file

@ -5,12 +5,13 @@
Body, Body,
Layout, Layout,
Detail, Detail,
Heading,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
import ICONS from "../icons" import ICONS from "../icons"
import { API } from "api" 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 CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte" import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte" import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
@ -118,7 +119,7 @@
<Modal bind:this={modal}> <Modal bind:this={modal}>
<ModalContent <ModalContent
disabled={!Object.keys(integration).length} disabled={!Object.keys(integration).length}
title="Data" title="Add data source"
confirmText="Continue" confirmText="Continue"
showSecondaryButton={showImportButton} showSecondaryButton={showImportButton}
secondaryButtonText="Import" secondaryButtonText="Import"
@ -129,27 +130,25 @@
chooseNextModal() chooseNextModal()
}} }}
> >
<Layout noPadding> <Layout noPadding gap="XS">
<Body size="S" <Body size="S">Get started with Budibase DB</Body>
>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 <div
class:selected={integration.type === IntegrationTypes.INTERNAL} class:selected={integration.type === IntegrationTypes.INTERNAL}
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)} on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
class="item hoverable" class="item hoverable"
> >
<div class="item-body"> <div class="item-body with-type">
<svelte:component this={ICONS.BUDIBASE} height="18" width="18" /> <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
<span class="icon-spacing"> <Body size="S">Budibase DB</Body></span> <div class="text">
<Heading size="XXS">Budibase DB</Heading>
<Detail size="S" class="type">Non-relational</Detail>
</div>
</div> </div>
</div> </div>
</Layout> </Layout>
<Layout gap="XS" noPadding> <Layout noPadding gap="XS">
<div class="title-spacing"> <Body size="S">Connect to an external data source</Body>
<Detail size="S">Connect to data source</Detail>
</div>
<div class="item-list"> <div class="item-list">
{#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
<div <div
@ -157,18 +156,18 @@
on:click={() => selectIntegration(integrationType)} on:click={() => selectIntegration(integrationType)}
class="item hoverable" class="item hoverable"
> >
<div class="item-body"> <div class="item-body" class:with-type={!!schema.type}>
<svelte:component <svelte:component
this={ICONS[integrationType]} this={ICONS[integrationType]}
height="18" height="20"
width="18" width="20"
/> />
<div class="text">
<span class="icon-spacing"> <Heading size="XXS">{schema.friendlyName}</Heading>
<Body size="S" {#if schema.type}
>{schema.name || IntegrationNames[integrationType]}</Body <Detail size="S">{schema.type || ""}</Detail>
></span {/if}
> </div>
</div> </div>
</div> </div>
{/each} {/each}
@ -178,13 +177,6 @@
</Modal> </Modal>
<style> <style>
.icon-spacing {
margin-left: var(--spacing-m);
}
.item-body {
display: flex;
margin-left: var(--spacing-m);
}
.item-list { .item-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -195,21 +187,35 @@
cursor: pointer; cursor: pointer;
display: grid; display: grid;
grid-gap: var(--spectrum-alias-grid-margin-xsmall); 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); 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: solid var(--spectrum-alias-border-color);
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
border-width: 2px; border-width: 2px;
} }
.item:hover,
.selected { .item.selected {
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.item:hover, .item-body {
.selected { display: flex;
background: var(--spectrum-alias-background-color-tertiary); 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> </style>

1
packages/server/src/definitions/datasource.ts
View file

@ -94,6 +94,7 @@ export interface Integration {
relationships?: boolean relationships?: boolean
description: string description: string
friendlyName: string friendlyName: string
type?: string
datasource: {} datasource: {}
query: { query: {
[key: string]: QueryDefinition [key: string]: QueryDefinition

1
packages/server/src/integrations/airtable.ts
View file

@ -18,6 +18,7 @@ module AirtableModule {
description: description:
"Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet.", "Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet.",
friendlyName: "Airtable", friendlyName: "Airtable",
type: "Spreadsheet",
datasource: { datasource: {
apiKey: { apiKey: {
type: DatasourceFieldTypes.PASSWORD, type: DatasourceFieldTypes.PASSWORD,

1
packages/server/src/integrations/arangodb.ts
View file

@ -19,6 +19,7 @@ module ArangoModule {
const SCHEMA: Integration = { const SCHEMA: Integration = {
docs: "https://github.com/arangodb/arangojs", docs: "https://github.com/arangodb/arangojs",
friendlyName: "ArangoDB", friendlyName: "ArangoDB",
type: "Non-relational",
description: 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. ", "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: { datasource: {

1
packages/server/src/integrations/couchdb.ts
View file

@ -16,6 +16,7 @@ module CouchDBModule {
const SCHEMA: Integration = { const SCHEMA: Integration = {
docs: "https://docs.couchdb.org/en/stable/", docs: "https://docs.couchdb.org/en/stable/",
friendlyName: "CouchDB", friendlyName: "CouchDB",
type: "Non-relational",
description: description:
"Apache CouchDB is an open-source document-oriented NoSQL database, implemented in Erlang.", "Apache CouchDB is an open-source document-oriented NoSQL database, implemented in Erlang.",
datasource: { datasource: {

1
packages/server/src/integrations/dynamodb.ts
View file

@ -21,6 +21,7 @@ module DynamoModule {
description: description:
"Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale.", "Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale.",
friendlyName: "DynamoDB", friendlyName: "DynamoDB",
type: "Non-relational",
datasource: { datasource: {
region: { region: {
type: DatasourceFieldTypes.STRING, type: DatasourceFieldTypes.STRING,

1
packages/server/src/integrations/elasticsearch.ts
View file

@ -17,6 +17,7 @@ module ElasticsearchModule {
description: 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.", "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", friendlyName: "ElasticSearch",
type: "Non-relational",
datasource: { datasource: {
url: { url: {
type: DatasourceFieldTypes.STRING, type: DatasourceFieldTypes.STRING,

1
packages/server/src/integrations/firebase.ts
View file

@ -16,6 +16,7 @@ module Firebase {
const SCHEMA: Integration = { const SCHEMA: Integration = {
docs: "https://firebase.google.com/docs/firestore/quickstart", docs: "https://firebase.google.com/docs/firestore/quickstart",
friendlyName: "Firestore", friendlyName: "Firestore",
type: "Non-relational",
description: description:
"Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.", "Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.",
datasource: { datasource: {

1
packages/server/src/integrations/googlesheets.ts
View file

@ -49,6 +49,7 @@ module GoogleSheetsModule {
description: description:
"Create and collaborate on online spreadsheets in real-time and from any device. ", "Create and collaborate on online spreadsheets in real-time and from any device. ",
friendlyName: "Google Sheets", friendlyName: "Google Sheets",
type: "Spreadsheet",
datasource: { datasource: {
spreadsheetId: { spreadsheetId: {
display: "Google Sheet URL", display: "Google Sheet URL",

1
packages/server/src/integrations/microsoftSqlServer.ts
View file

@ -44,6 +44,7 @@ module MSSQLModule {
description: description:
"Microsoft SQL Server is a relational database management system developed by Microsoft. ", "Microsoft SQL Server is a relational database management system developed by Microsoft. ",
friendlyName: "MS SQL Server", friendlyName: "MS SQL Server",
type: "Relational",
datasource: { datasource: {
user: { user: {
type: DatasourceFieldTypes.STRING, type: DatasourceFieldTypes.STRING,

1
packages/server/src/integrations/mongodb.ts
View file

@ -24,6 +24,7 @@ module MongoDBModule {
const SCHEMA: Integration = { const SCHEMA: Integration = {
docs: "https://github.com/mongodb/node-mongodb-native", docs: "https://github.com/mongodb/node-mongodb-native",
friendlyName: "MongoDB", friendlyName: "MongoDB",
type: "Non-relational",
description: description:
"MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.", "MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.",
datasource: { datasource: {

1
packages/server/src/integrations/mysql.ts
View file

@ -36,6 +36,7 @@ module MySQLModule {
docs: "https://github.com/sidorares/node-mysql2", docs: "https://github.com/sidorares/node-mysql2",
plus: true, plus: true,
friendlyName: "MySQL", friendlyName: "MySQL",
type: "Relational",
description: description:
"MySQL Database Service is a fully managed database service to deploy cloud-native applications. ", "MySQL Database Service is a fully managed database service to deploy cloud-native applications. ",
datasource: { datasource: {

1
packages/server/src/integrations/oracle.ts
View file

@ -40,6 +40,7 @@ module OracleModule {
docs: "https://github.com/oracle/node-oracledb", docs: "https://github.com/oracle/node-oracledb",
plus: true, plus: true,
friendlyName: "Oracle", friendlyName: "Oracle",
type: "Relational",
description: description:
"Oracle Database is an object-relational database management system developed by Oracle Corporation", "Oracle Database is an object-relational database management system developed by Oracle Corporation",
datasource: { datasource: {

1
packages/server/src/integrations/postgres.ts
View file

@ -47,6 +47,7 @@ module PostgresModule {
docs: "https://node-postgres.com", docs: "https://node-postgres.com",
plus: true, plus: true,
friendlyName: "PostgreSQL", friendlyName: "PostgreSQL",
type: "Relational",
description: description:
"PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.", "PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.",
datasource: { datasource: {

1
packages/server/src/integrations/redis.ts
View file

@ -17,6 +17,7 @@ module RedisModule {
docs: "https://redis.io/docs/", docs: "https://redis.io/docs/",
description: "", description: "",
friendlyName: "Redis", friendlyName: "Redis",
type: "Non-relational",
datasource: { datasource: {
host: { host: {
type: "string", type: "string",

1
packages/server/src/integrations/rest.ts
View file

@ -64,6 +64,7 @@ module RestModule {
description: 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.", "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", friendlyName: "REST API",
type: "API",
datasource: { datasource: {
url: { url: {
type: DatasourceFieldTypes.STRING, type: DatasourceFieldTypes.STRING,

1
packages/server/src/integrations/s3.ts
View file

@ -17,6 +17,7 @@ module S3Module {
description: description:
"Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.", "Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.",
friendlyName: "Amazon S3", friendlyName: "Amazon S3",
type: "Object store",
datasource: { datasource: {
region: { region: {
type: "string", type: "string",

1
packages/server/src/integrations/snowflake.ts
View file

@ -16,6 +16,7 @@ module SnowflakeModule {
description: description:
"Snowflake is a solution for data warehousing, data lakes, data engineering, data science, data application development, and securely sharing and consuming shared data.", "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", friendlyName: "Snowflake",
type: "Relational",
datasource: { datasource: {
account: { account: {
type: "string", type: "string",