CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-16 03:35:56 +12:00
Code Issues Projects Releases Wiki Activity

Updating integration config screen.

Browse source
This commit is contained in:
mike12345567 2021-12-01 13:09:16 +00:00
parent 6a7d899935
commit f77fe0c75c
5 changed files with 56 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View file

@ -35,7 +35,7 @@
</script> </script>
<form> <form>
<Layout gap="S"> <Layout noPadding gap="S">
{#if !creating} {#if !creating}
<div class="form-row"> <div class="form-row">
<Label>{capitalise("Name")}</Label> <Label>{capitalise("Name")}</Label>

48
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
View file

@ -4,7 +4,7 @@
Body, Body,
Divider, Divider,
InlineAlert, InlineAlert,
ActionButton, Button,
notifications, notifications,
Modal, Modal,
Table, Table,
@ -13,6 +13,7 @@
import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte" import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte"
import CreateExternalTableModal from "./CreateExternalTableModal.svelte" import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
import ArrayRenderer from "components/common/ArrayRenderer.svelte" import ArrayRenderer from "components/common/ArrayRenderer.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
export let datasource export let datasource
@ -26,10 +27,10 @@
tables: {}, tables: {},
columns: {}, columns: {},
} }
let relationshipModal let relationshipModal
let createExternalTableModal let createExternalTableModal
let selectedFromRelationship, selectedToRelationship let selectedFromRelationship, selectedToRelationship
let confirmDialog
$: integration = datasource && $integrations[datasource.source] $: integration = datasource && $integrations[datasource.source]
$: plusTables = datasource?.plus $: plusTables = datasource?.plus
@ -137,21 +138,28 @@
<CreateExternalTableModal {datasource} /> <CreateExternalTableModal {datasource} />
</Modal> </Modal>
<Divider /> <ConfirmDialog
bind:this={confirmDialog}
okText="Fetch tables"
onOk={updateDatasourceSchema}
onCancel={() => confirmDialog.hide()}
warning={false}
title="Confirm table fetch"
>
<Body>
If you have fetched tables from this database before, this action may
overwrite any changes you made after your initial fetch.
</Body>
</ConfirmDialog>
<Divider size="S" />
<div class="query-header"> <div class="query-header">
<Heading size="S">Tables</Heading> <Heading size="S">Tables</Heading>
<div class="table-buttons"> <div class="table-buttons">
<ActionButton <Button secondary on:click={() => confirmDialog.show()}>
size="S" Fetch tables
icon="DataRefresh" </Button>
quiet <Button cta icon="Add" on:click={createNewTable}>New table</Button>
on:click={updateDatasourceSchema}
>
Fetch tables from database
</ActionButton>
<ActionButton size="S" icon="Add" on:click={createNewTable}>
Create new table
</ActionButton>
</div> </div>
</div> </div>
<Body> <Body>
@ -177,16 +185,12 @@
customRenderers={[{ column: "primary", component: ArrayRenderer }]} customRenderers={[{ column: "primary", component: ArrayRenderer }]}
/> />
{#if plusTables?.length !== 0} {#if plusTables?.length !== 0}
<Divider /> <Divider size="S" />
<div class="query-header"> <div class="query-header">
<Heading size="S">Relationships</Heading> <Heading size="S">Relationships</Heading>
<ActionButton <Button primary on:click={openRelationshipModal}>
icon="DataCorrelated" Define relationship
size="S" </Button>
on:click={openRelationshipModal}
>
Define existing relationship
</ActionButton>
</div> </div>
<Body> <Body>
Tell budibase how your tables are related to get even more smart features. Tell budibase how your tables are related to get even more smart features.

11
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
View file

@ -7,15 +7,12 @@
let addHeader let addHeader
</script> </script>
<Divider /> <Divider size="S" />
<div class="query-header"> <div class="query-header">
<div class="badge"> <div class="badge">
<Heading size="S">Headers</Heading> <Heading size="S">Headers</Heading>
<Badge quiet grey>Optional</Badge> <Badge quiet grey>Optional</Badge>
</div> </div>
<ActionButton size="S" icon="Add" on:click={() => addHeader.addEntry()}
>Add header</ActionButton
>
</div> </div>
<Body size="S"> <Body size="S">
Headers enable you to provide additional information about the request, such Headers enable you to provide additional information about the request, such
@ -27,6 +24,11 @@
on:change on:change
noAddButton noAddButton
/> />
<div>
<ActionButton icon="Add" on:click={() => addHeader.addEntry()}>
Add header
</ActionButton>
</div>
<style> <style>
.query-header { .query-header {
@ -34,7 +36,6 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0 0 var(--spacing-s) 0;
} }
.badge { .badge {

20
packages/builder/src/components/integration/KeyValueBuilder.svelte
View file

@ -33,15 +33,17 @@
</script> </script>
<!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. --> <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
<div class="container" class:readOnly> {#if Object.keys(object || {}).length > 0}
{#each fields as field, idx} <div class="container" class:readOnly>
<Input placeholder="Key" bind:value={field.name} on:change={changed} /> {#each fields as field, idx}
<Input placeholder="Value" bind:value={field.value} on:change={changed} /> <Input placeholder="Key" bind:value={field.name} on:change={changed} />
{#if !readOnly} <Input placeholder="Value" bind:value={field.value} on:change={changed} />
<Icon hoverable name="Close" on:click={() => deleteEntry(idx)} /> {#if !readOnly}
{/if} <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
{/each} {/if}
</div> {/each}
</div>
{/if}
{#if !readOnly && !noAddButton} {#if !readOnly && !noAddButton}
<div> <div>
<Button secondary thin outline on:click={addEntry}>Add</Button> <Button secondary thin outline on:click={addEntry}>Add</Button>

35
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -7,7 +7,6 @@
Divider, Divider,
Layout, Layout,
notifications, notifications,
ActionButton,
Table, Table,
} from "@budibase/bbui" } from "@budibase/bbui"
import { datasources, integrations, queries, tables } from "stores/backend" import { datasources, integrations, queries, tables } from "stores/backend"
@ -82,28 +81,25 @@
</header> </header>
<Body size="M">{integration.description}</Body> <Body size="M">{integration.description}</Body>
</Layout> </Layout>
<Divider /> <Divider size="S" />
<div class="container"> <div class="config-header">
<div class="config-header"> <Heading size="S">Configuration</Heading>
<Heading size="S">Configuration</Heading> <Button disabled={!changed} cta on:click={saveDatasource}>Save</Button>
<Button disabled={!changed} cta on:click={saveDatasource}>Save</Button
>
</div>
<IntegrationConfigForm
on:change={hasChanged}
schema={integration.datasource}
bind:datasource
/>
</div> </div>
<IntegrationConfigForm
on:change={hasChanged}
schema={integration.datasource}
bind:datasource
/>
{#if datasource.plus} {#if datasource.plus}
<PlusConfigForm bind:datasource save={saveDatasource} /> <PlusConfigForm bind:datasource save={saveDatasource} />
{/if} {/if}
<Divider /> <Divider size="S" />
<div class="query-header"> <div class="query-header">
<Heading size="S">Queries</Heading> <Heading size="S">Queries</Heading>
<ActionButton size="S" icon="Add" on:click={() => $goto("./new")} <Button cta icon="Add" on:click={() => $goto("./new")}
>Add query >Add query
</ActionButton> </Button>
</div> </div>
<Body size="S"> <Body size="S">
To build an app using a datasource, you must first query the data. A To build an app using a datasource, you must first query the data. A
@ -148,18 +144,11 @@
margin: 0 0 var(--spacing-xs) 0; margin: 0 0 var(--spacing-xs) 0;
} }
.container {
width: 100%;
border-radius: var(--border-radius-m);
margin: 0 auto;
}
.query-header { .query-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0 0 var(--spacing-s) 0;
} }
.query-list { .query-list {