MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add types to datasources

This commit is contained in:
Andrew Kingston 2022-06-23 11:35:57 +01:00
parent b5030a7c6b
commit 5dd8186383
18 changed files with 95 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View File

@ -5,12 +5,14 @@
Body, Body,
Layout, Layout,
Detail, Detail,
Label,
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 +120,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,62 +131,58 @@
chooseNextModal() chooseNextModal()
}} }}
> >
<Layout noPadding> <Layout noPadding gap="M">
<Body size="S" <Layout noPadding>
>All apps need data. You can connect to a data source below, or add data <Body size="S">
to your app using Budibase's built-in database. All apps need data. You can connect to a data source below, or add
</Body> data to your app using Budibase's built-in database.
<div </Body>
class:selected={integration.type === IntegrationTypes.INTERNAL} <div
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)} class:selected={integration.type === IntegrationTypes.INTERNAL}
class="item hoverable" on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
> class="item hoverable"
<div class="item-body"> >
<svelte:component this={ICONS.BUDIBASE} height="18" width="18" /> <div class="item-body with-type">
<span class="icon-spacing"> <Body size="S">Budibase DB</Body></span> <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
</div> <div class="text">
</div> <div class="name">Budibase DB</div>
</Layout> <div class="type">Non-relational</div>
<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
>
</div> </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> </Layout>
</ModalContent> </ModalContent>
</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 +193,43 @@
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;
}
.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> </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",