CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-16 17:34:41 +12:00
Code Issues Projects Releases Wiki Activity

Builder focus behaviour added to guide users when adding form elements. Refactored the component tests

Browse source
This commit is contained in:
Dean 2022-05-17 15:09:13 +01:00
parent d29a1d4a08
commit 93f90405cf
11 changed files with 216 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/bbui/src/Form/Combobox.svelte
View file

@ -13,6 +13,7 @@
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
export let autofocus = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -35,6 +36,7 @@
{options}
{placeholder}
{readonly}
{autofocus}
{getOptionLabel}
{getOptionValue}
on:change={onChange}

29
packages/bbui/src/Form/Core/Combobox.svelte
View file

@ -3,13 +3,14 @@
import "@spectrum-css/popover/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
import { fly } from "svelte/transition"
import { createEventDispatcher } from "svelte"
import { createEventDispatcher, getContext } from "svelte"
export let value = null
export let id = null
export let placeholder = "Choose an option or type"
export let disabled = false
export let readonly = false
export let autofocus = false
export let error = null
export let options = []
export let getOptionLabel = option => option
@ -18,22 +19,12 @@
const dispatch = createEventDispatcher()
let open = false
let focus = false
$: fieldText = getFieldText(value, options, placeholder)
let comboInput
const getFieldText = (value, options, placeholder) => {
// Always use placeholder if no value
if (value == null || value === "") {
return placeholder || "Choose an option or type"
}
let builderFocus = getContext("field_focus")
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
// Render the label if the selected option is found, otherwise raw value
const selected = options.find(option => getOptionValue(option) === value)
return selected ? getOptionLabel(selected) : value
$: if (autofocus && comboInput) {
comboInput.focus()
}
const selectOption = value => {
@ -66,10 +57,16 @@
class:is-focused={open || focus}
>
<input
bind:this={comboInput}
{id}
type="text"
on:focus={() => (focus = true)}
on:blur={() => (focus = false)}
on:blur={() => {
if (builderFocus) {
builderFocus.clear()
}
focus = false
}}
on:change={onType}
value={value || ""}
placeholder={placeholder || ""}

105
packages/builder/cypress/integration/createComponents.spec.js
View file

@ -1,9 +1,7 @@
// TODO for now components are skipped, might not be good to keep doing this
import filterTests from "../support/filterTests"
filterTests(['all'], () => {
xcontext("Create Components", () => {
context("Create Components", () => {
let headlineId
before(() => {
@ -12,12 +10,13 @@ filterTests(['all'], () => {
cy.createTable("dog")
cy.addColumn("dog", "name", "Text")
cy.addColumn("dog", "age", "Number")
cy.addColumn("dog", "type", "Options")
cy.addColumn("dog", "breed", "Options")
cy.navigateToFrontend()
cy.wait(1000) //allow the iframe some wiggle room
})
it("should add a container", () => {
cy.addComponent(null, "Container").then(componentId => {
cy.addComponent("Layout", "Container").then(componentId => {
cy.getComponent(componentId).should("exist")
})
})
@ -31,7 +30,6 @@ filterTests(['all'], () => {
it("should change the text of the headline", () => {
const text = "Lorem ipsum dolor sit amet."
cy.get("[data-cy=Settings]").click()
cy.get("[data-cy=setting-text] input")
.type(text)
.blur()
@ -39,32 +37,34 @@ filterTests(['all'], () => {
})
it("should change the size of the headline", () => {
cy.get("[data-cy=Design]").click()
cy.contains("Typography").click()
cy.get("[data-cy=font-size-prop-control]").click()
cy.contains("60px").click()
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
cy.get("[data-cy=setting-size]").scrollIntoView().click()
cy.get("[data-cy=setting-size]").within(() => {
cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
})
cy.getComponent(headlineId).within(() => {
cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
})
})
it("should create a form and reset to match schema", () => {
cy.addComponent("Form", "Form").then(() => {
cy.get("[data-cy=Settings]").click()
cy.get("[data-cy=setting-dataSource]")
.contains("Choose option")
.contains("Custom")
.click()
cy.get(".dropdown")
.contains("dog")
.click()
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
cy.get("[data-cy=Settings]").click()
cy.contains("Update Form Fields").click()
cy.get(".modal")
.get("button.primary")
cy.contains("Update form fields").click()
cy.get(".spectrum-Modal")
.get(".confirm-wrap .spectrum-Button")
.click()
cy.wait(500)
cy.getComponent(fieldGroupId).within(() => {
cy.contains("name").should("exist")
cy.contains("age").should("exist")
cy.contains("type").should("exist")
cy.contains("breed").should("exist")
})
cy.getComponent(fieldGroupId)
.find("input")
@ -81,17 +81,78 @@ filterTests(['all'], () => {
cy.get("[data-cy=setting-_instanceName] input")
.type(componentId)
.blur()
cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
force: true,
})
cy.get(".dropdown-container")
cy.get(".spectrum-Popover.is-open li")
.contains("Delete")
.click()
cy.get(".modal")
cy.get(".spectrum-Modal button")
.contains("Delete Component")
.click()
.click({
force: true,
})
cy.getComponent(componentId).should("not.exist")
})
})
it("should set focus to the field setting when fields are added to a form", () => {
cy.addComponent("Form", "Form").then(() => {
cy.get("[data-cy=setting-dataSource]")
.contains("Custom")
.click()
cy.get(".dropdown")
.contains("dog")
.click()
const componentTypeLabels = ["Text Field", "Number Field", "Password Field",
"Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment",
"JSON Field", "Multi-select Picker", "Relationship Picker"]
const refocusTest = (componentId) => {
let inputClasses
cy.getComponent(componentId)
.find(".showMe").should("exist").click({ force: true })
cy.get("[data-cy=setting-field] .spectrum-InputGroup")
.should("have.class", "is-focused").within(() => {
cy.get("input").should(($input) => {
expect($input).to.have.length(1)
inputClasses = Cypress.$($input).attr('class')
})
})
cy.focused().then(($focused) => {
const focusedClasses = Cypress.$($focused).attr('class')
expect(inputClasses).to.equal(focusedClasses)
})
}
const testFieldFocusOnCreate = (componentLabel) => {
let inputClasses
cy.addComponent("Form", componentLabel).then((componentId) => {
refocusTest(componentId)
cy.get("[data-cy=setting-field] .spectrum-InputGroup")
.should("have.class", "is-focused").within(() => {
cy.get("input").should(($input) => {
expect($input).to.have.length(1)
inputClasses = Cypress.$($input).attr('class')
})
})
})
cy.focused().then(($focused) => {
const focusedClasses = Cypress.$($focused).attr('class')
expect(inputClasses).to.equal(focusedClasses)
})
}
componentTypeLabels.forEach( testFieldFocusOnCreate )
})
})
})
})

4
packages/builder/cypress/support/commands.js
View file

@ -334,9 +334,9 @@ Cypress.Commands.add("getComponent", componentId => {
.its("0.contentDocument")
.should("exist")
.its("body")
.should("not.be.null")
.should("not.be.undefined")
.then(cy.wrap)
.find(`[data-id=${componentId}]`)
.find(`[data-id='${componentId}']`)
})
Cypress.Commands.add("navigateToFrontend", () => {

35
packages/builder/src/builderStore/store/frontend.js
View file

@ -380,6 +380,21 @@ export const getFrontendStore = () => {
const selected = get(selectedComponent)
const asset = get(currentAsset)
const formComponents = [
"stringfield",
"optionsfield",
"numberfield",
"datetimefield",
"booleanfield",
"passwordfield",
"longformfield",
"attachmentfield",
"jsonfield",
"relationshipfield",
"multifieldselect",
"s3upload",
]
// Create new component
const componentInstance = store.actions.components.createInstance(
componentName,
@ -417,11 +432,31 @@ export const getFrontendStore = () => {
}
parentComponent._children.push(componentInstance)
let isFormComponent = false
let componentPrefix = "@budibase/standard-components/"
if (parentComponent._component === componentPrefix + "form") {
const mappedComponentTypes = formComponents.map(cmp => {
return componentPrefix + cmp
})
if (mappedComponentTypes.indexOf(componentInstance._component) > -1) {
isFormComponent = true
}
}
// Save components and update UI
await store.actions.preview.saveSelected()
store.update(state => {
state.currentView = "component"
state.selectedComponentId = componentInstance._id
if (isFormComponent) {
//A field component added to a form.
state.builderFocus = {
key: "field",
target: state.selectedComponentId,
location: "component_settings",
}
}
return state
})

14
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View file

@ -157,6 +157,14 @@
try {
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
//Clear focus
if(data.id !== $store.builderFocus?.target){
store.update(state => {
delete state.builderFocus
return state
})
}
//check if the builder-focus matches?
} else if (type === "update-prop") {
await store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
@ -190,6 +198,12 @@
store.actions.components.copy(source, true)
await store.actions.components.paste(destination, data.mode)
}
} else if(type == "builder-focus") {
store.update(state => ({
...state,
builderFocus :
{ ...data }
}))
} else {
console.warn(`Client sent unknown event type: ${type}`)
}

9
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View file

@ -86,6 +86,14 @@
return true
}
const isFocused = setting => {
return (
componentInstance._id === $store.builderFocus?.target &&
setting.key === $store.builderFocus?.key &&
"component_settings" === $store.builderFocus?.location
)
}
</script>
{#each sections as section, idx (section.name)}
@ -120,6 +128,7 @@
{componentBindings}
{componentInstance}
{componentDefinition}
autofocus={isFocused(setting)}
/>
{/if}
{/each}

16
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
View file

@ -4,12 +4,24 @@
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import { currentAsset } from "builderStore"
import { currentAsset, store } from "builderStore"
import { findClosestMatchingComponent } from "builderStore/componentUtils"
import { setContext } from "svelte"
setContext("field_focus", {
clear: () => {
store.update(state => {
delete state.builderFocus
return state
})
},
test: $store.builderFocus?.target,
})
export let componentInstance
export let value
export let type
export let autofocus = false
$: form = findClosestMatchingComponent(
$currentAsset?.props,
@ -40,4 +52,4 @@
}
</script>
<Combobox on:change {value} {options} />
<Combobox on:change {value} {options} {autofocus} />

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -16,6 +16,7 @@
export let bindings = []
export let componentBindings = []
export let nested = false
export let autofocus = false
$: allBindings = getAllBindings(bindings, componentBindings, nested)
$: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@ -82,6 +83,7 @@
{key}
{type}
{...props}
{autofocus}
/>
</div>
</div>

5
packages/client/src/components/app/Placeholder.svelte
View file

@ -9,7 +9,10 @@
{#if $builderStore.inBuilder}
<div>
{text || $component.name || "Placeholder"}
{#if !$$slots.content}
{text || $component.name || "Placeholder"}
{/if}
<slot name="content" />
</div>
{/if}

41
packages/client/src/components/app/forms/Field.svelte
View file

@ -3,6 +3,10 @@
import FieldGroupFallback from "./FieldGroupFallback.svelte"
import { getContext, onDestroy } from "svelte"
const dispatchEvent = (type, data = {}) => {
window.parent.postMessage({ type, data })
}
export let label
export let field
export let fieldState
@ -76,9 +80,28 @@
{#if !formContext}
<Placeholder text="Form components need to be wrapped in a form" />
{:else if !fieldState}
<Placeholder
text="Add the Field setting to start using your component"
/>
{#if $builderStore.inBuilder}
<div class="placeholder_wrap">
<Placeholder>
<div slot="content">
Add the <mark>Field</mark> setting to start using your
component&nbsp;
<span
class="showMe"
on:click={() => {
dispatchEvent("builder-focus", {
location: "component_settings",
key: "field",
target: $component.id,
})
}}
>
Show me
</span>
</div>
</Placeholder>
</div>
{/if}
{:else if schemaType && schemaType !== type && type !== "options"}
<Placeholder
text="This Field setting is the wrong data type for this component"
@ -94,6 +117,18 @@
</FieldGroupFallback>
<style>
.placeholder_wrap mark {
background-color: var(--spectrum-global-color-gray-400);
padding: 0px 2px;
border-radius: 2px;
}
div.spectrum-Form-item .placeholder_wrap .showMe {
color: black;
cursor: pointer;
}
.showMe:hover {
text-decoration: underline;
}
label {
white-space: nowrap;
}