Merge branch 'develop' of github.com:Budibase/budibase into user-active-and-bugs
This commit is contained in:
commit
f9249fe99d
|
@ -133,14 +133,15 @@
|
||||||
<section class="config">
|
<section class="config">
|
||||||
<Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
|
<Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
|
||||||
<hr />
|
<hr />
|
||||||
|
<Spacer extraLarge />
|
||||||
<Heading small lh>Config</Heading>
|
<Heading small lh>Config</Heading>
|
||||||
<Body small grey>Provide a name for your query and select its function.</Body>
|
<Body small grey>Provide a name for your query and select its function.</Body>
|
||||||
<Spacer medium />
|
<Spacer large />
|
||||||
<div class="config-field">
|
<div class="config-field">
|
||||||
<Label small>Query Name</Label>
|
<Label small>Query Name</Label>
|
||||||
<Input thin outline bind:value={query.name} />
|
<Input thin outline bind:value={query.name} />
|
||||||
</div>
|
</div>
|
||||||
<Spacer medium />
|
<Spacer extraLarge />
|
||||||
{#if queryConfig}
|
{#if queryConfig}
|
||||||
<div class="config-field">
|
<div class="config-field">
|
||||||
<Label small>Function</Label>
|
<Label small>Function</Label>
|
||||||
|
@ -152,7 +153,10 @@
|
||||||
{/each}
|
{/each}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
<Spacer extraLarge />
|
||||||
<hr />
|
<hr />
|
||||||
|
<Spacer extraLarge />
|
||||||
|
<Spacer small />
|
||||||
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
|
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
|
||||||
<hr />
|
<hr />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -160,20 +164,24 @@
|
||||||
|
|
||||||
{#if shouldShowQueryConfig}
|
{#if shouldShowQueryConfig}
|
||||||
<section>
|
<section>
|
||||||
|
<Spacer extraLarge />
|
||||||
|
<Spacer small />
|
||||||
<div class="config">
|
<div class="config">
|
||||||
<Heading small lh>Fields</Heading>
|
<Heading small lh>Fields</Heading>
|
||||||
<Body small grey>Fill in the fields specific to this query.</Body>
|
<Body small grey>Fill in the fields specific to this query.</Body>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
|
<Spacer extraLarge />
|
||||||
<IntegrationQueryEditor
|
<IntegrationQueryEditor
|
||||||
{datasource}
|
{datasource}
|
||||||
{query}
|
{query}
|
||||||
schema={queryConfig[query.queryVerb]}
|
schema={queryConfig[query.queryVerb]}
|
||||||
bind:parameters />
|
bind:parameters />
|
||||||
|
<Spacer extraLarge />
|
||||||
<hr />
|
<hr />
|
||||||
|
<Spacer extraLarge />
|
||||||
|
<Spacer medium />
|
||||||
<div class="viewer-controls">
|
<div class="viewer-controls">
|
||||||
<Heading small lh>Query Results</Heading>
|
<Heading small lh>Results</Heading>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<Button
|
<Button
|
||||||
secondary
|
secondary
|
||||||
|
@ -191,7 +199,8 @@
|
||||||
schema.
|
schema.
|
||||||
</Body>
|
</Body>
|
||||||
|
|
||||||
<Spacer large />
|
<Spacer extraLarge />
|
||||||
|
<Spacer medium />
|
||||||
|
|
||||||
<section class="viewer">
|
<section class="viewer">
|
||||||
{#if data}
|
{#if data}
|
||||||
|
@ -199,19 +208,7 @@
|
||||||
{#if tab === 'JSON'}
|
{#if tab === 'JSON'}
|
||||||
<pre class="preview">
|
<pre class="preview">
|
||||||
{#if !data[0]}
|
{#if !data[0]}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Please run your query to fetch some data.
|
Please run your query to fetch some data.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{:else}
|
{:else}
|
||||||
{JSON.stringify(data[0], undefined, 2)}
|
{JSON.stringify(data[0], undefined, 2)}
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -248,6 +245,8 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
<Spacer extraLarge />
|
||||||
|
<Spacer extraLarge />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.config-field {
|
.config-field {
|
||||||
|
@ -269,7 +268,7 @@
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-top: var(--layout-m);
|
margin-top: var(--layout-m);
|
||||||
margin-bottom: var(--layout-m);
|
border: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.config {
|
.config {
|
||||||
|
@ -281,12 +280,20 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.viewer {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
width: 800px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 120px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
background-color: var(--grey-1);
|
||||||
|
padding: var(--spacing-m);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--grey-6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewer-controls {
|
.viewer-controls {
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: var(--spacing-l);
|
gap: var(--spacing-l);
|
||||||
|
border-right: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
|
@ -80,6 +80,7 @@
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: var(--spacing-l);
|
gap: var(--spacing-l);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-right: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
|
|
@ -28,19 +28,24 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
<div class="inner">
|
||||||
{#if $backendUiStore.selectedDatabase._id && selectedQuery}
|
{#if $backendUiStore.selectedDatabase._id && selectedQuery}
|
||||||
<QueryInterface query={selectedQuery} />
|
<QueryInterface query={selectedQuery} />
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
section {
|
section {
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
background: transparent; /* make scrollbar transparent */
|
background: transparent; /* make scrollbar transparent */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -45,20 +45,22 @@
|
||||||
|
|
||||||
{#if datasource}
|
{#if datasource}
|
||||||
<section>
|
<section>
|
||||||
<Spacer medium />
|
<Spacer extraLarge />
|
||||||
<header>
|
<header>
|
||||||
<div class="datasource-icon">
|
<div class="datasource-icon">
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={ICONS[datasource.source]}
|
this={ICONS[datasource.source]}
|
||||||
height="30"
|
height="26"
|
||||||
width="30" />
|
width="26" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="section-title">{datasource.name}</h3>
|
<h3 class="section-title">{datasource.name}</h3>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<Body small grey lh>{integration.description}</Body>
|
<Body small grey lh>{integration.description}</Body>
|
||||||
|
<Spacer extraLarge />
|
||||||
<hr />
|
<hr />
|
||||||
|
<Spacer large />
|
||||||
|
<Spacer extraLarge />
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="config-header">
|
<div class="config-header">
|
||||||
|
@ -70,14 +72,14 @@
|
||||||
Connect your database to Budibase using the config below.
|
Connect your database to Budibase using the config below.
|
||||||
</Body>
|
</Body>
|
||||||
|
|
||||||
<Spacer medium />
|
<Spacer extraLarge />
|
||||||
<IntegrationConfigForm
|
<IntegrationConfigForm
|
||||||
integration={datasource.config}
|
integration={datasource.config}
|
||||||
on:change={setUnsaved} />
|
on:change={setUnsaved} />
|
||||||
<Spacer medium />
|
<Spacer extraLarge />
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
<Spacer large />
|
||||||
|
<Spacer extraLarge />
|
||||||
<div class="query-header">
|
<div class="query-header">
|
||||||
<Heading small>Queries</Heading>
|
<Heading small>Queries</Heading>
|
||||||
<Button secondary on:click={() => $goto('../new')}>Add Query</Button>
|
<Button secondary on:click={() => $goto('../new')}>Add Query</Button>
|
||||||
|
@ -99,15 +101,16 @@
|
||||||
<style>
|
<style>
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 800px;
|
width: 640px;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-bottom: var(--layout-m);
|
border: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
Loading…
Reference in New Issue