Merge pull request #1010 from Budibase/UI-tidy-ups

UI tidy ups
This commit is contained in:
Martin McKeaveney 2021-01-25 16:51:32 +00:00 committed by GitHub
commit d4bf78187d
27 changed files with 1298 additions and 324 deletions

View File

@ -63,7 +63,7 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.54.0",
"@budibase/bbui": "^1.54.1",
"@budibase/client": "^0.5.3",
"@budibase/colorpicker": "^1.0.1",
"@budibase/string-templates": "^0.5.3",

View File

@ -43,8 +43,8 @@
<div class="datasource-icon" slot="icon">
<svelte:component
this={ICONS[datasource.source]}
height="15"
width="15" />
height="18"
width="18" />
</div>
<EditDatasourcePopover {datasource} />
</NavItem>
@ -61,3 +61,10 @@
{/each}
</div>
{/if}
<style>
.datasource-icon {
margin-right: 3px;
padding-top: 3px;
}
</style>

View File

@ -7,10 +7,9 @@
<form>
{#each Object.keys(integration) as configKey}
<Input
thin
type={integration[configKey].type}
label={configKey}
bind:value={integration[configKey]} />
<Spacer medium />
<Spacer large />
{/each}
</form>

View File

@ -0,0 +1,42 @@
<script>
import { backendUiStore, store, allScreens } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
export let bindable
export let parameters
let anchor
let dropdown
let confirmDeleteDialog
function hideEditor() {
dropdown?.hide()
}
</script>
<div on:click|stopPropagation bind:this={anchor}>
<TextButton
text
on:click={dropdown.show}
active={false}>
<Icon name="add" />
Add Parameters
</TextButton>
<DropdownMenu align="right" {anchor} bind:this={dropdown}>
<div class="wrapper">
<ParameterBuilder bind:parameters {bindable} />
</div>
</DropdownMenu>
</div>
<style>
.wrapper {
padding: var(--spacing-xl);
min-width: 600px;
}
</style>

View File

@ -155,8 +155,9 @@
}
:global(.CodeMirror) {
height: auto !important;
border-radius: var(--border-radius-m);
font-family: var(--font-sans) !important;
height: 500px !important;
border-radius: var(--border-radius-s);
font-family: monospace !important;
line-height: 1.3;
}
</style>

View File

@ -24,18 +24,18 @@
</script>
<form on:submit|preventDefault>
<div class="field">
{#each schemaKeys as field}
<Label extraSmall grey>{field}</Label>
<div class="field">
<Input
placeholder="Enter {field} name"
outline
disabled={!editable}
type={schema.fields[field]?.type}
required={schema.fields[field]?.required}
bind:value={fields[field]} />
</div>
{/each}
</div>
</form>
<Label extraSmall grey>Data</Label>
{#if schema.customisable}
<Editor
label="Query"
@ -49,7 +49,7 @@
.field {
margin-bottom: var(--spacing-m);
display: grid;
grid-template-columns: 1fr 2%;
grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing-m);
align-items: center;
}

View File

@ -1,5 +1,12 @@
<script>
import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
import {
Button,
TextArea,
Label,
Input,
Heading,
Spacer,
} from "@budibase/bbui"
import BindableInput from "components/userInterface/BindableInput.svelte"
import {
readableToRuntimeBinding,
@ -31,19 +38,22 @@
<section>
<Heading extraSmall black>Parameters</Heading>
<Spacer large />
<div class="parameters" class:bindable>
<Label extraSmall grey>Parameter Name</Label>
<Label extraSmall grey>Default</Label>
{#if bindable}
<Label extraSmall grey>Value</Label>
{:else}
<div />
{/if}
{#each parameters as parameter, idx}
<Input thin disabled={bindable} bind:value={parameter.name} />
<Input thin disabled={bindable} bind:value={parameter.default} />
<Input
placeholder="Parameter Name"
thin
disabled={bindable}
bind:value={parameter.name} />
<Input
placeholder="Default"
thin
disabled={bindable}
bind:value={parameter.default} />
{#if bindable}
<BindableInput
placeholder="Value"
type="string"
thin
on:change={evt => onBindingChange(parameter.name, evt.detail)}
@ -57,9 +67,7 @@
{/each}
</div>
{#if !bindable}
<Button thin secondary small on:click={newQueryParameter}>
Add Parameter
</Button>
<Button secondary on:click={newQueryParameter}>Add Parameter</Button>
{/if}
</section>

View File

@ -16,6 +16,7 @@
import { FIELDS } from "constants/backend"
import IntegrationQueryEditor from "components/integration/index.svelte"
import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
import EditQueryParamsPopover from "components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte"
import { backendUiStore } from "builderStore"
const PREVIEW_HEADINGS = [
@ -40,6 +41,7 @@
let tab = "JSON"
let parameters
let data = []
let popover
$: datasource = $backendUiStore.datasources.find(
ds => ds._id === query.datasourceId
@ -61,7 +63,7 @@
$: config = $backendUiStore.integrations[datasourceType]?.query
$: docsLink = $backendUiStore.integrations[datasourceType]?.docs
$: shouldShowQueryConfig = config && query.queryVerb && query.queryType
$: shouldShowQueryConfig = config && query.queryVerb
function newField() {
fields = [...fields, {}]
@ -129,62 +131,44 @@
</script>
<header>
<Heading small>{query.name}</Heading>
<div class="input">
<Input placeholder="✎ Edit Query Name" bind:value={query.name} />
</div>
{#if config}
<div class="queryVerbs">
<div class="props">
<div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
<div class="select">
<Select primary thin bind:value={query.queryVerb}>
{#each Object.keys(config) as queryVerb}
<div
class="queryVerb"
class:selected={queryVerb === query.queryVerb}
on:click={() => {
query.queryVerb = queryVerb
}}>
{queryVerb}
</div>
{/each}
</div>
{#if query.queryVerb}
<Select thin secondary bind:value={query.queryType}>
<option value={''}>Select an option</option>
{#each Object.keys(config[query.queryVerb]) as queryType}
<option value={queryType}>{queryType}</option>
<option value={queryVerb}>{queryVerb}</option>
{/each}
</Select>
{/if}
<Spacer medium />
<Button primary href={docsLink} target="_blank">
<i class="ri-book-2-line" />
</Button>
</div>
</div>
<EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
{/if}
</header>
<Spacer large />
<Spacer extraLarge />
{#if shouldShowQueryConfig}
<section>
<div class="config">
<Label extraSmall grey>Query Name</Label>
<Input thin bind:value={query.name} />
<Spacer medium />
<IntegrationQueryEditor
{query}
schema={config[query.queryVerb][query.queryType]}
schema={config[query.queryVerb]}
bind:parameters />
<Spacer medium />
<Spacer extraLarge />
<Spacer large />
<div class="viewer-controls">
<Button
wide
thin
blue
disabled={data.length === 0}
on:click={saveQuery}>
Save
Save Query
</Button>
<Button wide thin primary on:click={previewQuery}>Run</Button>
<Button primary on:click={previewQuery}>Run Query</Button>
</div>
<section class="viewer">
@ -196,10 +180,11 @@
<ExternalDataSourceTable {query} {data} />
{:else if tab === 'SCHEMA'}
{#each fields as field, idx}
<Spacer small />
<div class="field">
<Input thin type={'text'} bind:value={field.name} />
<Select secondary thin bind:value={field.type}>
<option value={''}>Select an option</option>
<Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
<Select thin border bind:value={field.type}>
<option value={''}>Select a field type</option>
<option value={'STRING'}>Text</option>
<option value={'NUMBER'}>Number</option>
<option value={'BOOLEAN'}>Boolean</option>
@ -210,6 +195,7 @@
on:click={() => deleteField(idx)} />
</div>
{/each}
<Spacer small />
<Button thin secondary on:click={newField}>Add Field</Button>
{/if}
</Switcher>
@ -220,11 +206,28 @@
{/if}
<style>
.input {
width: 300px;
}
.select {
width: 200px;
margin-right: 40px;
}
.props {
display: flex;
flex-direction: row;
margin-left: auto;
align-items: center;
gap: var(--layout-l);
}
.field {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 50px;
margin-bottom: var(--spacing-m);
gap: var(--spacing-l);
}
a {
@ -240,6 +243,16 @@
cursor: pointer;
}
.query-type {
font-family: var(--font-sans);
color: var(--grey-8);
font-size: var(--font-size-s);
}
.query-type-span {
text-transform: uppercase;
}
.preview {
width: 800px;
height: 100%;
@ -253,32 +266,18 @@
align-items: center;
}
.queryVerbs {
display: flex;
flex: 1;
font-size: var(--font-size-m);
align-items: center;
margin-left: var(--spacing-l);
}
.queryVerb {
text-transform: capitalize;
margin-right: var(--spacing-m);
color: var(--grey-5);
cursor: pointer;
}
.selected {
color: var(--white);
font-weight: 500;
}
.viewer-controls {
display: grid;
grid-gap: var(--spacing-m);
grid-auto-flow: column;
display: flex;
flex-direction: row;
margin-left: auto;
direction: rtl;
grid-template-columns: 10% 10% 1fr;
margin-bottom: var(--spacing-m);
z-index: 5;
gap: var(--spacing-m);
min-width: 150px;
}
.viewer {
margin-top: -28px;
z-index: -2;
}
</style>

View File

@ -20,13 +20,6 @@
}
</script>
{#if editable}
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<Spacer large />
{/if}
<Heading extraSmall black>Query</Heading>
<Spacer medium />
{#if schema}
{#key query._id}
@ -38,7 +31,6 @@
readOnly={!editable}
value={query.fields.sql} />
{:else if schema.type === QueryTypes.JSON}
<Spacer large />
<Editor
label="Query"
mode="json"

View File

@ -57,7 +57,7 @@
}
</script>
<Button secondary small on:click={drawer.show}>Define Actions</Button>
<Button secondary wide on:click={drawer.show}>Define Actions</Button>
<Drawer bind:this={drawer} title={'Actions'}>
<heading slot="buttons">
<Button thin blue on:click={saveEventData}>Save</Button>

View File

@ -83,9 +83,7 @@
const source = $backendUiStore.datasources.find(
ds => ds._id === query.datasourceId
).source
return $backendUiStore.integrations[source].query[query.queryVerb][
query.queryType
]
return $backendUiStore.integrations[source].query[query.queryVerb]
}
</script>
@ -98,7 +96,7 @@
</div>
{#if value.type === 'query'}
<i class="ri-settings-5-line" on:click={drawer.show} />
<Drawer title={'Query'}>
<Drawer title={'Query'} bind:this={drawer}>
<div slot="buttons">
<Button
blue
@ -125,7 +123,7 @@
{/if}
</div>
</Drawer>
{/if}
{/if}
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
<div class="title">

View File

@ -73,7 +73,7 @@
<a
target="_blank"
href="https://github.com/Budibase/budibase/discussions">
<i class="ri-question-line" />
<i class="ri-github-fill" />
</a>
</div>
<SettingsLink />
@ -89,8 +89,8 @@
<div class="beta">
<Button
secondary
href="https://www.budibase.com/blog/budibase-public-beta/">
Budibase is in Beta
href="https://github.com/Budibase/budibase/discussions/categories/ideas">
Request feature
</Button>
</div>

View File

@ -21,9 +21,9 @@
query => query._id === $backendUiStore.selectedQueryId
) || {
datasourceId: $params.selectedDatasource,
name: "New Query",
parameters: [],
fields: {},
queryVerb: "read",
}
</script>
@ -35,8 +35,10 @@
<style>
section {
background: var(--background);
padding: var(--spacing-xl);
border-radius: var(--border-radius-m);
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
</style>

View File

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { Button, Spacer, Icon, TextButton } from "@budibase/bbui"
import { Button, Spacer, Icon } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@ -14,31 +14,129 @@
await backendUiStore.actions.datasources.save(datasource)
notifier.success(`Datasource ${name} saved successfully.`)
}
function onClickQuery(query) {
if ($backendUiStore.selectedQueryId === query._id) {
return
}
backendUiStore.actions.queries.select(query)
$goto(`../${query._id}`)
}
</script>
{#if datasource}
<TextButton text small on:click={() => $goto('../new')}>
<Icon name="filter" />
Create Query
</TextButton>
<section>
<h4>{datasource.name}: Configuration</h4>
<IntegrationConfigForm integration={datasource.config} />
<Spacer medium />
<footer>
<Button blue wide on:click={saveDatasource}>Save</Button>
</footer>
<header>
<h3 class="section-title">{datasource.name}</h3>
</header>
<Spacer extraLarge />
<div class="container">
<div class="config-header">
<h5>Configuration</h5>
<Button secondary on:click={saveDatasource}>Save</Button>
</div>
<Spacer medium />
<IntegrationConfigForm integration={datasource.config} />
</div>
<Spacer extraLarge />
<div class="container">
<div class="query-header">
<h5>Queries</h5>
<Button blue on:click={() => $goto('../new')}>Create Query</Button>
</div>
<Spacer extraLarge />
<div class="query-list">
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
<div class="query-list-item" on:click={() => onClickQuery(query)}>
<p class="query-name">{query.name}</p>
<p>{query.queryVerb}</p>
<p>4000 records</p>
<p></p>
</div>
{/each}
<Spacer medium />
</div>
</div>
</section>
{/if}
<style>
h4 {
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-s);
h3 {
margin: 0;
}
section {
background: var(--background);
margin: 0 auto;
width: 800px;
}
header {
margin: 0 0 var(--spacing-xs) 0;
}
.section-title {
text-transform: capitalize;
}
.config-header {
display: flex;
justify-content: space-between;
margin: 0 0 var(--spacing-xs) 0;
}
.container {
border-radius: var(--border-radius-m);
padding: var(--spacing-xl);
background: var(--background);
padding: var(--layout-s);
margin: 0 auto;
}
h5 {
margin: 0 !important;
}
.query-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 0 var(--spacing-s) 0;
}
.query-list {
display: flex;
flex-direction: column;
gap: var(--spacing-m);
}
.query-list-item {
border-radius: var(--border-radius-m);
background: var(--background);
border: var(--border-grey);
display: grid;
grid-template-columns: 2fr 0.75fr 0.75fr 1fr 20px;
align-items: center;
padding: var(--spacing-m) var(--layout-xs);
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);
}
</style>

View File

@ -842,10 +842,10 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.54.0":
version "1.54.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
"@budibase/bbui@^1.54.1":
version "1.54.1"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
dependencies:
markdown-it "^12.0.2"
quill "^1.3.7"

View File

@ -31,7 +31,6 @@ function generateQueryValidation() {
default: Joi.string()
})),
queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
queryType: Joi.string().required(),
schema: Joi.object({}).required().unknown(true)
}))
}

View File

@ -26,7 +26,6 @@ const TEST_QUERY = {
fields:{},
schema:{},
queryVerb:"read",
queryType:"Table",
}
describe("/datasources", () => {

View File

@ -26,7 +26,6 @@ const TEST_QUERY = {
fields:{},
schema:{},
queryVerb:"read",
queryType:"Table",
}
describe("/queries", () => {

View File

@ -17,7 +17,6 @@ const SCHEMA = {
},
query: {
create: {
"Airtable Record": {
type: QUERY_TYPES.FIELDS,
customisable: true,
fields: {
@ -27,9 +26,7 @@ const SCHEMA = {
},
},
},
},
read: {
Table: {
type: QUERY_TYPES.FIELDS,
fields: {
table: {
@ -42,9 +39,7 @@ const SCHEMA = {
},
},
},
},
update: {
Fields: {
type: QUERY_TYPES.FIELDS,
customisable: true,
fields: {
@ -54,13 +49,10 @@ const SCHEMA = {
},
},
},
},
delete: {
"Airtable Ids": {
type: FIELD_TYPES.JSON,
},
},
},
}
class AirtableIntegration {

View File

@ -16,22 +16,15 @@ const SCHEMA = {
},
query: {
create: {
"CouchDB DSL": {
type: QUERY_TYPES.JSON,
},
},
read: {
"CouchDB DSL": {
type: QUERY_TYPES.JSON,
},
},
update: {
"CouchDB Document": {
type: QUERY_TYPES.JSON,
},
},
delete: {
"Document ID": {
type: QUERY_TYPES.FIELDS,
fields: {
id: {
@ -41,7 +34,6 @@ const SCHEMA = {
},
},
},
},
}
class CouchDBIntegration {

View File

@ -20,7 +20,6 @@ const SCHEMA = {
},
query: {
create: {
DynamoConfig: {
type: QUERY_TYPES.FIELDS,
fields: {
table: {
@ -30,9 +29,7 @@ const SCHEMA = {
customisable: true,
},
},
},
read: {
DynamoConfig: {
type: QUERY_TYPES.FIELDS,
fields: {
table: {
@ -45,9 +42,7 @@ const SCHEMA = {
customisable: true,
},
},
},
update: {
DynamoConfig: {
type: QUERY_TYPES.FIELDS,
fields: {
table: {
@ -57,9 +52,7 @@ const SCHEMA = {
customisable: true,
},
},
},
delete: {
"Dynamo Partition Key": {
type: QUERY_TYPES.FIELDS,
fields: {
table: {
@ -73,7 +66,6 @@ const SCHEMA = {
},
},
},
},
}
class DynamoDBIntegration {

View File

@ -13,7 +13,6 @@ const SCHEMA = {
},
query: {
create: {
"ES Query DSL": {
type: QUERY_TYPES.FIELDS,
customisable: true,
fields: {
@ -23,9 +22,7 @@ const SCHEMA = {
},
},
},
},
read: {
"ES Query DSL": {
type: QUERY_TYPES.FIELDS,
customisable: true,
fields: {
@ -35,9 +32,7 @@ const SCHEMA = {
},
},
},
},
update: {
"ES Query DSL": {
type: QUERY_TYPES.FIELDS,
customisable: true,
fields: {
@ -51,9 +46,7 @@ const SCHEMA = {
},
},
},
},
delete: {
"Document ID": {
type: QUERY_TYPES.FIELDS,
fields: {
index: {
@ -67,7 +60,6 @@ const SCHEMA = {
},
},
},
},
}
class ElasticSearchIntegration {

View File

@ -24,16 +24,12 @@ const SCHEMA = {
},
query: {
create: {
SQL: {
type: "sql",
},
},
read: {
SQL: {
type: "sql",
},
},
},
}
class SqlServerIntegration {

View File

@ -20,16 +20,12 @@ const SCHEMA = {
},
query: {
create: {
JSON: {
type: QUERY_TYPES.JSON,
},
},
read: {
JSON: {
type: QUERY_TYPES.JSON,
},
},
},
}
class MongoIntegration {

View File

@ -31,26 +31,18 @@ const SCHEMA = {
},
query: {
create: {
SQL: {
type: "sql",
},
},
read: {
SQL: {
type: "sql",
},
},
update: {
SQL: {
type: "sql",
},
},
delete: {
SQL: {
type: "sql",
},
},
},
}
class PostgresIntegration {

View File

@ -19,7 +19,6 @@ const SCHEMA = {
},
query: {
read: {
Bucket: {
type: "fields",
fields: {
bucket: {
@ -29,7 +28,6 @@ const SCHEMA = {
},
},
},
},
}
class S3Integration {

File diff suppressed because it is too large Load Diff