Revert "Revert "Feature/binding ux update""

This commit is contained in:
Martin McKeaveney 2022-08-30 10:16:15 +01:00 committed by GitHub
parent 7904782c9c
commit 3f26c411c9
7 changed files with 305 additions and 90 deletions

View File

@ -1,4 +1,4 @@
export default function positionDropdown(element, { anchor, align }) { export default function positionDropdown(element, { anchor, align, maxWidth }) {
let positionSide = "top" let positionSide = "top"
let maxHeight = 0 let maxHeight = 0
let dimensions = getDimensions(anchor) let dimensions = getDimensions(anchor)
@ -34,13 +34,24 @@ export default function positionDropdown(element, { anchor, align }) {
} }
function calcLeftPosition() { function calcLeftPosition() {
return align === "right" let left
? dimensions.left + dimensions.width - dimensions.containerWidth
: dimensions.left if (align == "right") {
left = dimensions.left + dimensions.width - dimensions.containerWidth
} else if (align == "right-side") {
left = dimensions.left + dimensions.width
} else {
left = dimensions.left
}
return left
} }
element.style.position = "absolute" element.style.position = "absolute"
element.style.zIndex = "9999" element.style.zIndex = "9999"
if (maxWidth) {
element.style.maxWidth = `${maxWidth}px`
}
element.style.minWidth = `${dimensions.width}px` element.style.minWidth = `${dimensions.width}px`
element.style.maxHeight = `${maxHeight.toFixed(0)}px` element.style.maxHeight = `${maxHeight.toFixed(0)}px`
element.style.transformOrigin = `center ${positionSide}` element.style.transformOrigin = `center ${positionSide}`
@ -54,10 +65,8 @@ export default function positionDropdown(element, { anchor, align }) {
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
}) })
}) })
resizeObserver.observe(anchor) resizeObserver.observe(anchor)
resizeObserver.observe(element) resizeObserver.observe(element)
return { return {
destroy() { destroy() {
resizeObserver.disconnect() resizeObserver.disconnect()

View File

@ -11,6 +11,7 @@
export let align = "right" export let align = "right"
export let portalTarget export let portalTarget
export let dataCy export let dataCy
export let maxWidth
export let direction = "bottom" export let direction = "bottom"
export let showTip = false export let showTip = false
@ -45,7 +46,7 @@
<Portal target={portalTarget}> <Portal target={portalTarget}>
<div <div
tabindex="0" tabindex="0"
use:positionDropdown={{ anchor, align }} use:positionDropdown={{ anchor, align, maxWidth }}
use:clickOutside={hide} use:clickOutside={hide}
on:keydown={handleEscape} on:keydown={handleEscape}
class={"spectrum-Popover is-open " + (tooltipClasses || "")} class={"spectrum-Popover is-open " + (tooltipClasses || "")}

View File

@ -10,7 +10,7 @@ filterTests(['smoke', 'all'], () => {
it("should add a current user binding", () => { it("should add a current user binding", () => {
cy.searchAndAddComponent("Paragraph").then(() => { cy.searchAndAddComponent("Paragraph").then(() => {
addSettingBinding("text", "Current User._id") addSettingBinding("text", ["Current User", "_id"], "Current User._id")
}) })
}) })
@ -28,7 +28,7 @@ filterTests(['smoke', 'all'], () => {
const paramName = "foo" const paramName = "foo"
cy.createScreen(`/test/:${paramName}`) cy.createScreen(`/test/:${paramName}`)
cy.searchAndAddComponent("Paragraph").then(componentId => { cy.searchAndAddComponent("Paragraph").then(componentId => {
addSettingBinding("text", `URL.${paramName}`) addSettingBinding("text", ["URL", paramName], `URL.${paramName}`)
// The builder preview pages don't have a real URL, so all we can do // The builder preview pages don't have a real URL, so all we can do
// is check that we were able to bind to the property, and that the // is check that we were able to bind to the property, and that the
// component exists on the page // component exists on the page
@ -47,11 +47,13 @@ filterTests(['smoke', 'all'], () => {
}) })
}) })
const addSettingBinding = (setting, bindingText, clickOption = true) => { const addSettingBinding = (setting, bindingCategories, bindingText, clickOption = true) => {
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click() cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
cy.get(".category-list li").contains(bindingCategories[0])
cy.get(".drawer").within(() => { cy.get(".drawer").within(() => {
if (clickOption) { if (clickOption) {
cy.contains(bindingText).click() cy.get(".category-list li").contains(bindingCategories[0]).click()
cy.get("li.binding").contains(bindingCategories[1]).click()
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`) cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
} else { } else {
cy.get("textarea").type(bindingText) cy.get("textarea").type(bindingText)

View File

@ -299,7 +299,10 @@ const getProviderContextBindings = (asset, dataProviders) => {
schema = {} schema = {}
const values = context.values || [] const values = context.values || []
values.forEach(value => { values.forEach(value => {
schema[value.key] = { name: value.label, type: "string" } schema[value.key] = {
name: value.label,
type: value.type || "string",
}
}) })
} else if (context.type === "schema") { } else if (context.type === "schema") {
// Schema contexts are generated dynamically depending on their data // Schema contexts are generated dynamically depending on their data
@ -359,6 +362,12 @@ const getProviderContextBindings = (asset, dataProviders) => {
providerId, providerId,
// Table ID is used by JSON fields to know what table the field is in // Table ID is used by JSON fields to know what table the field is in
tableId: table?._id, tableId: table?._id,
category: component._instanceName,
icon: def.icon,
display: {
name: fieldSchema.name || key,
type: fieldSchema.type,
},
}) })
}) })
}) })
@ -385,6 +394,9 @@ const getUserBindings = () => {
// datasource options, based on bindable properties // datasource options, based on bindable properties
fieldSchema, fieldSchema,
providerId: "user", providerId: "user",
category: "Current User",
icon: "User",
display: fieldSchema,
}) })
}) })
return bindings return bindings
@ -401,11 +413,17 @@ const getDeviceBindings = () => {
type: "context", type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`, runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
readableBinding: `Device.Mobile`, readableBinding: `Device.Mobile`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "mobile" },
}) })
bindings.push({ bindings.push({
type: "context", type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`, runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
readableBinding: `Device.Tablet`, readableBinding: `Device.Tablet`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "tablet" },
}) })
} }
return bindings return bindings
@ -429,6 +447,8 @@ const getSelectedRowsBindings = asset => {
"selectedRows" "selectedRows"
)}`, )}`,
readableBinding: `${table._instanceName}.Selected rows`, readableBinding: `${table._instanceName}.Selected rows`,
category: "Selected rows",
icon: "ViewRow",
})) }))
) )
@ -460,6 +480,9 @@ const getStateBindings = () => {
type: "context", type: "context",
runtimeBinding: `${safeState}.${makePropSafe(key)}`, runtimeBinding: `${safeState}.${makePropSafe(key)}`,
readableBinding: `State.${key}`, readableBinding: `State.${key}`,
category: "State",
icon: "AutomatedSegment",
display: { name: key },
})) }))
} }
return bindings return bindings
@ -482,11 +505,17 @@ const getUrlBindings = asset => {
type: "context", type: "context",
runtimeBinding: `${safeURL}.${makePropSafe(param)}`, runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
readableBinding: `URL.${param}`, readableBinding: `URL.${param}`,
category: "URL",
icon: "RailTop",
display: { type: "string" },
})) }))
const queryParamsBinding = { const queryParamsBinding = {
type: "context", type: "context",
runtimeBinding: makePropSafe("query"), runtimeBinding: makePropSafe("query"),
readableBinding: "Query params", readableBinding: "Query params",
category: "URL",
icon: "RailTop",
display: { type: "object" },
} }
return urlParamBindings.concat([queryParamsBinding]) return urlParamBindings.concat([queryParamsBinding])
} }
@ -497,6 +526,9 @@ const getRoleBindings = () => {
type: "context", type: "context",
runtimeBinding: `trim "${role._id}"`, runtimeBinding: `trim "${role._id}"`,
readableBinding: `Role.${role.name}`, readableBinding: `Role.${role.name}`,
category: "Role",
icon: "UserGroup",
display: { type: "string", name: role.name },
} }
}) })
} }
@ -518,6 +550,7 @@ export const getEventContextBindings = (
// Check if any context bindings are provided by the component for this // Check if any context bindings are provided by the component for this
// setting // setting
const component = findComponent(asset.props, componentId) const component = findComponent(asset.props, componentId)
const def = store.actions.components.getDefinition(component?._component)
const settings = getComponentSettings(component?._component) const settings = getComponentSettings(component?._component)
const eventSetting = settings.find(setting => setting.key === settingKey) const eventSetting = settings.find(setting => setting.key === settingKey)
if (eventSetting?.context?.length) { if (eventSetting?.context?.length) {
@ -527,6 +560,8 @@ export const getEventContextBindings = (
runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe( runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
contextEntry.key contextEntry.key
)}`, )}`,
category: component._instanceName,
icon: def.icon,
}) })
}) })
} }
@ -548,6 +583,8 @@ export const getEventContextBindings = (
bindings.push({ bindings.push({
readableBinding: `Action ${idx + 1}.${contextValue.label}`, readableBinding: `Action ${idx + 1}.${contextValue.label}`,
runtimeBinding: `actions.${idx}.${contextValue.value}`, runtimeBinding: `actions.${idx}.${contextValue.value}`,
category: "Actions",
icon: "JourneyAction",
}) })
}) })
} }

View File

@ -9,6 +9,9 @@
Body, Body,
Layout, Layout,
Button, Button,
ActionButton,
Icon,
Popover,
} from "@budibase/bbui" } from "@budibase/bbui"
import { createEventDispatcher, onMount } from "svelte" import { createEventDispatcher, onMount } from "svelte"
import { import {
@ -45,9 +48,25 @@
let jsValue = initialValueJS ? value : null let jsValue = initialValueJS ? value : null
let hbsValue = initialValueJS ? null : value let hbsValue = initialValueJS ? null : value
let selectedCategory = null
let popover
let popoverAnchor
let hoverTarget
$: usingJS = mode === "JavaScript" $: usingJS = mode === "JavaScript"
$: searchRgx = new RegExp(search, "ig") $: searchRgx = new RegExp(search, "ig")
$: categories = Object.entries(groupBy("category", bindings)) $: categories = Object.entries(groupBy("category", bindings))
$: bindingIcons = bindings?.reduce((acc, ele) => {
if (ele.icon) {
acc[ele.category] = acc[ele.category] || ele.icon
}
return acc
}, {})
$: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
$: filteredCategories = categories $: filteredCategories = categories
.map(([name, categoryBindings]) => ({ .map(([name, categoryBindings]) => ({
name, name,
@ -55,10 +74,19 @@
return binding.readableBinding.match(searchRgx) return binding.readableBinding.match(searchRgx)
}), }),
})) }))
.filter(category => category.bindings?.length > 0) .filter(category => {
return (
category.bindings?.length > 0 &&
(!selectedCategory ? true : selectedCategory === category.name)
)
})
$: filteredHelpers = helpers?.filter(helper => { $: filteredHelpers = helpers?.filter(helper => {
return helper.label.match(searchRgx) || helper.description.match(searchRgx) return helper.label.match(searchRgx) || helper.description.match(searchRgx)
}) })
$: categoryNames = [...categories.map(cat => cat[0]), "Helpers"]
$: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`) $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
const updateValue = val => { const updateValue = val => {
@ -140,58 +168,163 @@
}) })
</script> </script>
<span class="detailPopover">
<Popover
align="right-side"
bind:this={popover}
anchor={popoverAnchor}
maxWidth={300}
>
<Layout gap="S">
<div class="helper">
{#if hoverTarget.title}
<div class="helper__name">{hoverTarget.title}</div>
{/if}
{#if hoverTarget.description}
<div class="helper__description">
{@html hoverTarget.description}
</div>
{/if}
{#if hoverTarget.example}
<pre class="helper__example">{hoverTarget.example}</pre>
{/if}
</div>
</Layout>
</Popover>
</span>
<DrawerContent> <DrawerContent>
<svelte:fragment slot="sidebar"> <svelte:fragment slot="sidebar">
<div class="container"> <Layout noPadding gap="S">
<section> {#if selectedCategory}
<div>
<ActionButton
secondary
icon={"ArrowLeft"}
on:click={() => {
selectedCategory = null
}}
>
Back
</ActionButton>
</div>
{/if}
{#if !selectedCategory}
<div class="heading">Search</div> <div class="heading">Search</div>
<Search placeholder="Search" bind:value={search} /> <Search placeholder="Search" bind:value={search} />
</section> {/if}
{#each filteredCategories as category}
{#if category.bindings?.length} {#if !selectedCategory && !search}
<section> <ul class="category-list">
<div class="heading">{category.name}</div> {#each categoryNames as categoryName}
<li
on:click={() => {
selectedCategory = categoryName
}}
>
<Icon name={categoryIcons[categoryName]} />
<span class="category-name">{categoryName} </span>
<span class="category-chevron"><Icon name="ChevronRight" /></span>
</li>
{/each}
</ul>
{/if}
{#if selectedCategory || search}
{#each filteredCategories as category}
{#if category.bindings?.length}
<div class="cat-heading">
<Icon name={categoryIcons[category.name]} />{category.name}
</div>
<ul> <ul>
{#each category.bindings as binding} {#each category.bindings as binding}
<li on:click={() => addBinding(binding)}> <li
<span class="binding__label">{binding.readableBinding}</span> class="binding"
{#if binding.type} on:mouseenter={e => {
<span class="binding__type">{binding.type}</span> popoverAnchor = e.target
{/if} if (!binding.description) {
{#if binding.description} return
<br /> }
<div class="binding__description"> hoverTarget = {
{binding.description || ""} title: binding.display.name || binding.fieldSchema.name,
</div> description: binding.description,
}
popover.show()
e.stopPropagation()
}}
on:mouseleave={() => {
popover.hide()
popoverAnchor = null
hoverTarget = null
}}
on:focus={() => {}}
on:blur={() => {}}
on:click={() => addBinding(binding)}
>
<span class="binding__label">
{#if binding.display?.name}
{binding.display.name}
{:else if binding.fieldSchema?.name}
{binding.fieldSchema?.name}
{:else}
{binding.readableBinding}
{/if}
</span>
{#if binding.display?.type || binding.fieldSchema?.type}
<span class="binding__typeWrap">
<span class="binding__type">
{binding.display?.type || binding.fieldSchema?.type}
</span>
</span>
{/if} {/if}
</li> </li>
{/each} {/each}
</ul> </ul>
</section> {/if}
{/each}
{#if selectedCategory === "Helpers" || search}
{#if filteredHelpers?.length}
<div class="heading">Helpers</div>
<ul class="helpers">
{#each filteredHelpers as helper}
<li
class="binding"
on:click={() => addHelper(helper, usingJS)}
on:mouseenter={e => {
popoverAnchor = e.target
if (!helper.displayText && helper.description) {
return
}
hoverTarget = {
title: helper.displayText,
description: helper.description,
example: getHelperExample(helper, usingJS),
}
popover.show()
e.stopPropagation()
}}
on:mouseleave={() => {
popover.hide()
popoverAnchor = null
hoverTarget = null
}}
on:focus={() => {}}
on:blur={() => {}}
>
<span class="binding__label">{helper.displayText}</span>
<span class="binding__typeWrap">
<span class="binding__type">function</span>
</span>
</li>
{/each}
</ul>
{/if}
{/if} {/if}
{/each}
{#if filteredHelpers?.length}
<section>
<div class="heading">Helpers</div>
<ul>
{#each filteredHelpers as helper}
<li on:click={() => addHelper(helper, usingJS)}>
<div class="helper">
<div class="helper__name">{helper.displayText}</div>
<div class="helper__description">
{@html helper.description}
</div>
<pre class="helper__example">{getHelperExample(
helper,
usingJS
)}</pre>
</div>
</li>
{/each}
</ul>
</section>
{/if} {/if}
</div> </Layout>
</svelte:fragment> </svelte:fragment>
<div class="main"> <div class="main">
<Tabs selected={mode} on:select={onChangeMode}> <Tabs selected={mode} on:select={onChangeMode}>
@ -241,6 +374,35 @@
</DrawerContent> </DrawerContent>
<style> <style>
ul.helpers li * {
pointer-events: none;
}
ul.category-list li {
display: flex;
gap: var(--spacing-m);
align-items: center;
}
ul.category-list .category-name {
font-weight: 600;
text-transform: capitalize;
}
ul.category-list .category-chevron {
flex: 1;
text-align: right;
}
ul.category-list .category-chevron :global(div.icon),
.cat-heading :global(div.icon) {
display: inline-block;
}
li.binding {
display: flex;
align-items: center;
}
li.binding .binding__typeWrap {
flex: 1;
text-align: right;
text-transform: capitalize;
}
.main :global(textarea) { .main :global(textarea) {
min-height: 202px !important; min-height: 202px !important;
} }
@ -251,23 +413,20 @@
padding: var(--spacing-s) var(--spacing-xl); padding: var(--spacing-s) var(--spacing-xl);
} }
.container { .heading,
margin: calc(-1 * var(--spacing-xl)); .cat-heading {
}
.heading {
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
} }
section { .cat-heading {
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl); display: flex;
} gap: var(--spacing-m);
section:not(:first-child) { align-items: center;
border-top: var(--border-light);
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -278,7 +437,7 @@
font-size: var(--font-size-s); font-size: var(--font-size-s);
padding: var(--spacing-m); padding: var(--spacing-m);
border-radius: 4px; border-radius: 4px;
border: var(--border-light); background-color: var(--spectrum-global-color-gray-200);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out, transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out; border-color 130ms ease-in-out;
word-wrap: break-word; word-wrap: break-word;
@ -292,22 +451,14 @@
li:hover { li:hover {
color: var(--spectrum-global-color-gray-900); color: var(--spectrum-global-color-gray-900);
background-color: var(--spectrum-global-color-gray-50); background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-global-color-gray-500);
cursor: pointer; cursor: pointer;
} }
li:hover :global(*) {
color: var(--spectrum-global-color-gray-900) !important;
}
.binding__label { .binding__label {
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
} }
.binding__description {
color: var(--spectrum-global-color-gray-700);
margin: 0.5rem 0 0 0;
white-space: normal;
}
.binding__type { .binding__type {
font-family: monospace; font-family: monospace;
background-color: var(--spectrum-global-color-gray-200); background-color: var(--spectrum-global-color-gray-200);

View File

@ -15,7 +15,6 @@
} }
return bindings?.map(binding => ({ return bindings?.map(binding => ({
...binding, ...binding,
category: "Bindable Values",
type: null, type: null,
})) }))
} }

View File

@ -544,7 +544,8 @@
"values": [ "values": [
{ {
"label": "Row Index", "label": "Row Index",
"key": "index" "key": "index",
"type": "number"
} }
] ]
} }
@ -2314,19 +2315,23 @@
"values": [ "values": [
{ {
"label": "Value", "label": "Value",
"key": "__value" "key": "__value",
"type": "object"
}, },
{ {
"label": "Valid", "label": "Valid",
"key": "__valid" "key": "__valid",
"type": "boolean"
}, },
{ {
"label": "Current Step", "label": "Current Step",
"key": "__currentStep" "key": "__currentStep",
"type": "number"
}, },
{ {
"label": "Current Step Valid", "label": "Current Step Valid",
"key": "__currentStepValid" "key": "__currentStepValid",
"type": "boolean"
} }
] ]
}, },
@ -3550,23 +3555,28 @@
"values": [ "values": [
{ {
"label": "Rows", "label": "Rows",
"key": "rows" "key": "rows",
"type": "array"
}, },
{ {
"label": "Extra Info", "label": "Extra Info",
"key": "info" "key": "info",
"type": "string"
}, },
{ {
"label": "Rows Length", "label": "Rows Length",
"key": "rowsLength" "key": "rowsLength",
"type": "number"
}, },
{ {
"label": "Schema", "label": "Schema",
"key": "schema" "key": "schema",
"type": "object"
}, },
{ {
"label": "Page Number", "label": "Page Number",
"key": "pageNumber" "key": "pageNumber",
"type": "number"
} }
] ]
} }
@ -4328,23 +4338,28 @@
"values": [ "values": [
{ {
"label": "Rows", "label": "Rows",
"key": "rows" "key": "rows",
"type": "array"
}, },
{ {
"label": "Extra Info", "label": "Extra Info",
"key": "info" "key": "info",
"type": "string"
}, },
{ {
"label": "Rows Length", "label": "Rows Length",
"key": "rowsLength" "key": "rowsLength",
"type": "number"
}, },
{ {
"label": "Schema", "label": "Schema",
"key": "schema" "key": "schema",
"type": "object"
}, },
{ {
"label": "Page Number", "label": "Page Number",
"key": "pageNumber" "key": "pageNumber",
"type": "number"
} }
] ]
}, },
@ -4354,7 +4369,8 @@
"values": [ "values": [
{ {
"label": "Row Index", "label": "Row Index",
"key": "index" "key": "index",
"type": "number"
} }
] ]
}, },