Merge pull request #8549 from Budibase/feature/martin-small-ux-updates
bunch of small UX updates around row creation, borders, new buttons
This commit is contained in:
commit
303b6e20cf
9 changed files with 43 additions and 41 deletions
|
@ -781,7 +781,7 @@ Cypress.Commands.add("selectExternalDatasource", datasourceName => {
|
||||||
cy.navigateToDataSection()
|
cy.navigateToDataSection()
|
||||||
// Open Datasource modal
|
// Open Datasource modal
|
||||||
cy.get(".nav").within(() => {
|
cy.get(".nav").within(() => {
|
||||||
cy.get(".add-button").click()
|
cy.get("[data-cy='new-datasource']").click()
|
||||||
})
|
})
|
||||||
// Clicks specified datasource & continue
|
// Clicks specified datasource & continue
|
||||||
cy.get(".item-list", { timeout: 1000 }).contains(datasourceName).click()
|
cy.get(".item-list", { timeout: 1000 }).contains(datasourceName).click()
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import AutomationList from "./AutomationList.svelte"
|
import AutomationList from "./AutomationList.svelte"
|
||||||
import CreateAutomationModal from "./CreateAutomationModal.svelte"
|
import CreateAutomationModal from "./CreateAutomationModal.svelte"
|
||||||
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
|
import { Modal, Tabs, Tab, Button, Layout } from "@budibase/bbui"
|
||||||
|
|
||||||
export let modal
|
export let modal
|
||||||
export let webhookModal
|
export let webhookModal
|
||||||
|
@ -10,23 +10,18 @@
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<Tabs selected="Automations">
|
<Tabs selected="Automations">
|
||||||
<Tab title="Automations">
|
<Tab title="Automations">
|
||||||
|
<Layout paddingX="L" paddingY="L" gap="S">
|
||||||
|
<Button cta wide on:click={modal.show}>Add automation</Button>
|
||||||
|
</Layout>
|
||||||
<AutomationList />
|
<AutomationList />
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<CreateAutomationModal {webhookModal} />
|
<CreateAutomationModal {webhookModal} />
|
||||||
</Modal>
|
</Modal>
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<div class="add-button">
|
|
||||||
<Icon hoverable name="AddCircle" on:click={modal.show} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.add-button {
|
|
||||||
position: absolute;
|
|
||||||
top: var(--spacing-l);
|
|
||||||
right: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
.nav {
|
.nav {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
</Body>
|
</Body>
|
||||||
<Input
|
<Input
|
||||||
bind:value={name}
|
bind:value={name}
|
||||||
on:change={() => (nameTouched = true)}
|
on:input={() => (nameTouched = true)}
|
||||||
bind:error={nameError}
|
bind:error={nameError}
|
||||||
label="Name"
|
label="Name"
|
||||||
/>
|
/>
|
||||||
|
@ -124,11 +124,14 @@
|
||||||
padding: var(--spectrum-alias-item-padding-s);
|
padding: var(--spectrum-alias-item-padding-s);
|
||||||
background: var(--spectrum-alias-background-color-secondary);
|
background: var(--spectrum-alias-background-color-secondary);
|
||||||
transition: 0.3s all;
|
transition: 0.3s all;
|
||||||
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 {
|
||||||
|
background: var(--spectrum-alias-background-color-tertiary);
|
||||||
|
}
|
||||||
.selected {
|
.selected {
|
||||||
background: var(--spectrum-alias-background-color-tertiary);
|
background: var(--spectrum-alias-background-color-tertiary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
export let meta
|
export let meta
|
||||||
export let value = defaultValue || (meta.type === "boolean" ? false : "")
|
export let value = defaultValue || (meta.type === "boolean" ? false : "")
|
||||||
export let readonly
|
export let readonly
|
||||||
|
export let error
|
||||||
|
|
||||||
const resolveTimeStamp = timestamp => {
|
const resolveTimeStamp = timestamp => {
|
||||||
if (!timestamp) {
|
if (!timestamp) {
|
||||||
|
@ -50,6 +51,7 @@
|
||||||
/>
|
/>
|
||||||
{:else if type === "datetime"}
|
{:else if type === "datetime"}
|
||||||
<DatePicker
|
<DatePicker
|
||||||
|
{error}
|
||||||
{label}
|
{label}
|
||||||
timeOnly={isTimeStamp}
|
timeOnly={isTimeStamp}
|
||||||
enableTime={!meta?.dateOnly}
|
enableTime={!meta?.dateOnly}
|
||||||
|
@ -57,18 +59,23 @@
|
||||||
bind:value
|
bind:value
|
||||||
/>
|
/>
|
||||||
{:else if type === "attachment"}
|
{:else if type === "attachment"}
|
||||||
<Dropzone {label} bind:value />
|
<Dropzone {label} {error} bind:value />
|
||||||
{:else if type === "boolean"}
|
{:else if type === "boolean"}
|
||||||
<Toggle text={label} bind:value data-cy="{meta.name}-input" />
|
<Toggle text={label} {error} bind:value data-cy="{meta.name}-input" />
|
||||||
{:else if type === "array" && meta.constraints.inclusion.length !== 0}
|
{:else if type === "array" && meta.constraints.inclusion.length !== 0}
|
||||||
<Multiselect bind:value {label} options={meta.constraints.inclusion} />
|
<Multiselect
|
||||||
|
bind:value
|
||||||
|
{error}
|
||||||
|
{label}
|
||||||
|
options={meta.constraints.inclusion}
|
||||||
|
/>
|
||||||
{:else if type === "link"}
|
{:else if type === "link"}
|
||||||
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
|
<LinkedRowSelector {error} bind:linkedRows={value} schema={meta} />
|
||||||
{:else if type === "longform"}
|
{:else if type === "longform"}
|
||||||
{#if meta.useRichText}
|
{#if meta.useRichText}
|
||||||
<RichTextField {label} height="150px" bind:value />
|
<RichTextField {error} {label} height="150px" bind:value />
|
||||||
{:else}
|
{:else}
|
||||||
<TextArea {label} height="150px" bind:value />
|
<TextArea {error} {label} height="150px" bind:value />
|
||||||
{/if}
|
{/if}
|
||||||
{:else if type === "json"}
|
{:else if type === "json"}
|
||||||
<Label>{label}</Label>
|
<Label>{label}</Label>
|
||||||
|
@ -77,12 +84,14 @@
|
||||||
mode="json"
|
mode="json"
|
||||||
on:change={({ detail }) => (value = detail.value)}
|
on:change={({ detail }) => (value = detail.value)}
|
||||||
value={stringVal}
|
value={stringVal}
|
||||||
|
{error}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<Input
|
<Input
|
||||||
{label}
|
{label}
|
||||||
data-cy="{meta.name}-input"
|
data-cy="{meta.name}-input"
|
||||||
{type}
|
{type}
|
||||||
|
{error}
|
||||||
bind:value
|
bind:value
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
$: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
|
$: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
|
<Button icon="Delete" size="s" warning quiet on:click={modal.show}>
|
||||||
Delete
|
Delete
|
||||||
{selectedRows.length}
|
{selectedRows.length}
|
||||||
{text}
|
{text}
|
||||||
|
|
|
@ -5,7 +5,6 @@
|
||||||
import RowFieldControl from "../RowFieldControl.svelte"
|
import RowFieldControl from "../RowFieldControl.svelte"
|
||||||
import { API } from "api"
|
import { API } from "api"
|
||||||
import { ModalContent } from "@budibase/bbui"
|
import { ModalContent } from "@budibase/bbui"
|
||||||
import ErrorsBox from "components/common/ErrorsBox.svelte"
|
|
||||||
import { FIELDS } from "constants/backend"
|
import { FIELDS } from "constants/backend"
|
||||||
|
|
||||||
const FORMULA_TYPE = FIELDS.FORMULA.type
|
const FORMULA_TYPE = FIELDS.FORMULA.type
|
||||||
|
@ -32,13 +31,15 @@
|
||||||
if (error.handled) {
|
if (error.handled) {
|
||||||
const response = error.json
|
const response = error.json
|
||||||
if (response?.errors) {
|
if (response?.errors) {
|
||||||
errors = Object.entries(response.errors)
|
errors = response.errors
|
||||||
.map(([key, error]) => ({ dataPath: key, message: error }))
|
} else if (response?.validationErrors) {
|
||||||
.flat()
|
const mappedErrors = {}
|
||||||
} else if (error.status === 400 && response?.validationErrors) {
|
for (let field in response.validationErrors) {
|
||||||
errors = Object.keys(response.validationErrors).map(field => ({
|
mappedErrors[
|
||||||
message: `${field} ${response.validationErrors[field][0]}`,
|
field
|
||||||
}))
|
] = `${field} ${response.validationErrors[field][0]}`
|
||||||
|
}
|
||||||
|
errors = mappedErrors
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
notifications.error("Failed to save row")
|
notifications.error("Failed to save row")
|
||||||
|
@ -54,11 +55,10 @@
|
||||||
confirmText={creating ? "Create Row" : "Save Row"}
|
confirmText={creating ? "Create Row" : "Save Row"}
|
||||||
onConfirm={saveRow}
|
onConfirm={saveRow}
|
||||||
>
|
>
|
||||||
<ErrorsBox {errors} />
|
|
||||||
{#each tableSchema as [key, meta]}
|
{#each tableSchema as [key, meta]}
|
||||||
{#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
|
{#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
|
||||||
<div>
|
<div>
|
||||||
<RowFieldControl {meta} bind:value={row[key]} />
|
<RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -35,7 +35,6 @@
|
||||||
var(--spectrum-alias-item-padding-m);
|
var(--spectrum-alias-item-padding-m);
|
||||||
background: var(--spectrum-alias-background-color-secondary);
|
background: var(--spectrum-alias-background-color-secondary);
|
||||||
transition: background 0.13s ease-out;
|
transition: background 0.13s ease-out;
|
||||||
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;
|
||||||
|
|
|
@ -201,7 +201,6 @@
|
||||||
var(--spectrum-alias-item-padding-m);
|
var(--spectrum-alias-item-padding-m);
|
||||||
background: var(--spectrum-alias-background-color-secondary);
|
background: var(--spectrum-alias-background-color-secondary);
|
||||||
transition: background 0.13s ease-out;
|
transition: background 0.13s ease-out;
|
||||||
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;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { redirect, params } from "@roxi/routify"
|
import { redirect, params } from "@roxi/routify"
|
||||||
import { Icon, Tabs, Tab } from "@budibase/bbui"
|
import { Button, Tabs, Tab, Layout } from "@budibase/bbui"
|
||||||
import { BUDIBASE_INTERNAL_DB } from "constants"
|
import { BUDIBASE_INTERNAL_DB } from "constants"
|
||||||
import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
|
import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
|
||||||
import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
|
import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
|
||||||
|
@ -23,18 +23,15 @@
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<Tabs {selected} on:select={selectFirstDatasource}>
|
<Tabs {selected} on:select={selectFirstDatasource}>
|
||||||
<Tab title="Sources">
|
<Tab title="Sources">
|
||||||
<DatasourceNavigator />
|
<Layout paddingX="L" paddingY="L" gap="S">
|
||||||
|
<Button dataCy={`new-datasource`} cta wide on:click={modal.show}
|
||||||
|
>Add source</Button
|
||||||
|
>
|
||||||
|
</Layout>
|
||||||
<CreateDatasourceModal bind:modal />
|
<CreateDatasourceModal bind:modal />
|
||||||
|
<DatasourceNavigator />
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<div
|
|
||||||
class="add-button"
|
|
||||||
data-cy={`new-${isExternal ? "datasource" : "table"}`}
|
|
||||||
>
|
|
||||||
{#if modal}
|
|
||||||
<Icon hoverable name="AddCircle" on:click={modal.show} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
Loading…
Reference in a new issue