diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index b518ac3d92..5ab7a7f047 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -80,4 +80,8 @@ .active svg { color: var(--spectrum-global-color-blue-600); } + + .spectrum-ActionButton-label { + padding-bottom: 2px; + } diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte index 1b20091fbf..0f1e6335dd 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte @@ -1,6 +1,5 @@ @@ -118,15 +141,17 @@
Tables
-
- - Fetch tables from database - -
+ + Fetch tables from database + + + Create new table +
@@ -142,18 +167,15 @@ onConfirm={datasources.removeSchemaError} /> {/if} -
- {#each plusTables as table} -
onClickTable(table)}> -

{table.name}

-

Primary Key: {table.primary}

-

→

-
- {/each} -
- -
-
+ onClickTable(detail)} + schema={tableSchema} + data={Object.values(plusTables)} + allowEditColumns={false} + allowEditRows={false} + allowSelectRows={false} + customRenderers={[{ column: "primary", component: ArrayRenderer }]} +/> {#if plusTables?.length !== 0}
@@ -170,20 +192,14 @@ Tell budibase how your tables are related to get even more smart features. {/if} -
- {#each Object.values(relationships) as relationship} -
openRelationshipModal(relationship.from, relationship.to)} - > -

- {buildRelationshipDisplayString(relationship.from, relationship.to)} -

-

{relationship.from?.name} to {relationship.to?.name}

-

→

-
- {/each} -
+
openRelationshipModal(detail.from, detail.to)} + schema={relationshipSchema} + data={relationshipInfo} + allowEditColumns={false} + allowEditRows={false} + allowSelectRows={false} +/> diff --git a/packages/builder/src/components/common/ArrayRenderer.svelte b/packages/builder/src/components/common/ArrayRenderer.svelte new file mode 100644 index 0000000000..166a6ae180 --- /dev/null +++ b/packages/builder/src/components/common/ArrayRenderer.svelte @@ -0,0 +1,5 @@ + + +{Array.isArray(value) ? value.join(", ") : value} diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte new file mode 100644 index 0000000000..ea065d217c --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte @@ -0,0 +1,6 @@ + + +{capitalise(value)} diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte index fb5dd6224e..f7d20ff8ab 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte @@ -8,18 +8,23 @@ Layout, notifications, ActionButton, + Table, } from "@budibase/bbui" import { datasources, integrations, queries, tables } from "stores/backend" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte" import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte" import ICONS from "components/backend/DatasourceNavigator/icons" + import VerbRenderer from "./_components/VerbRenderer.svelte" import { IntegrationTypes } from "constants" - import { capitalise } from "helpers" import { isEqual } from "lodash" import { cloneDeep } from "lodash/fp" let baseDatasource, changed + const querySchema = { + name: {}, + queryVerb: { displayName: "Method" }, + } $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected) $: integration = datasource && $integrations[datasource.source] @@ -31,12 +36,14 @@ baseDatasource = cloneDeep(datasource) } } + $: queryList = $queries.list.filter( + query => query.datasourceId === datasource?._id + ) $: hasChanged(baseDatasource, datasource) function hasChanged(base, ds) { if (base && ds) { changed = !isEqual(base, ds) - console.log(ds) } } @@ -103,15 +110,19 @@ query is a request for data or information from a datasource, for example a database table. -
- {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query} -
onClickQuery(query)}> -

{query.name}

-

{capitalise(query.queryVerb)}

-

→

-
- {/each} -
+ {#if queryList && queryList.length > 0} +
+
onClickQuery(detail)} + schema={querySchema} + data={queryList} + allowEditColumns={false} + allowEditRows={false} + allowSelectRows={false} + customRenderers={[{ column: "queryVerb", component: VerbRenderer }]} + /> + + {/if} {#if datasource?.source === IntegrationTypes.REST} {/if} @@ -156,35 +167,4 @@ flex-direction: column; gap: var(--spacing-m); } - - .query-list-item { - border-radius: var(--border-radius-m); - background: var(--background); - border: var(--border-dark); - display: grid; - grid-template-columns: 2fr 0.75fr 20px; - align-items: center; - padding-left: var(--spacing-m); - padding-right: var(--spacing-m); - gap: var(--layout-xs); - transition: 200ms background ease; - } - - .query-list-item:hover { - background: var(--grey-1); - cursor: pointer; - } - - p { - font-size: var(--font-size-xs); - color: var(--grey-8); - } - - .query-name { - color: var(--ink); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: var(--font-size-s); - }