CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-19 03:51:29 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into api-tests-generate-tenants

Browse source
This commit is contained in:
Pedro Silva 2023-01-30 12:34:11 +00:00
commit fa6dcc1fbe
240 changed files with 6004 additions and 4342 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/bug_report.md vendored
View file

@ -6,7 +6,7 @@ labels: bug
assignees: ''
---
## Checklist
**Checklist**
- [ ] I have searched budibase discussions and github issues to check if my issue already exists
**Hosting**

3
hosting/docker-compose.dev.yaml
View file

@ -6,7 +6,8 @@ services:
minio-service:
container_name: budi-minio-dev
restart: on-failure
image: minio/minio
# Last version that supports the "fs" backend
image: minio/minio:RELEASE.2022-10-24T18-35-07Z
volumes:
- minio_data:/data
ports:

2
lerna.json
View file

@ -1,5 +1,5 @@
{
"version": "2.2.12-alpha.21",
"version": "2.2.12-alpha.44",
"npmClient": "yarn",
"packages": [
"packages/*"

4
packages/backend-core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/backend-core",
"version": "2.2.12-alpha.21",
"version": "2.2.12-alpha.44",
"description": "Budibase backend core libraries used in server and worker",
"main": "dist/src/index.js",
"types": "dist/src/index.d.ts",
@ -23,7 +23,7 @@
},
"dependencies": {
"@budibase/nano": "10.1.1",
"@budibase/types": "2.2.12-alpha.21",
"@budibase/types": "2.2.12-alpha.44",
"@shopify/jest-koa-mocks": "5.0.1",
"@techpass/passport-openidconnect": "0.3.2",
"aws-cloudfront-sign": "2.2.0",

5
packages/bbui/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@budibase/bbui",
"description": "A UI solution used in the different Budibase projects.",
"version": "2.2.12-alpha.21",
"version": "2.2.12-alpha.44",
"license": "MPL-2.0",
"svelte": "src/index.js",
"module": "dist/bbui.es.js",
@ -38,7 +38,8 @@
],
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "1.2.1",
"@budibase/string-templates": "2.2.12-alpha.21",
"@budibase/string-templates": "2.2.12-alpha.44",
"@spectrum-css/accordion": "3.0.24",
"@spectrum-css/actionbutton": "1.0.1",
"@spectrum-css/actiongroup": "1.0.1",
"@spectrum-css/avatar": "3.0.2",

58
packages/bbui/src/Accordion/Accordion.svelte Normal file
View file

@ -0,0 +1,58 @@
<script>
import "@spectrum-css/accordion"
export let itemName
export let initialOpen
export let header
let isOpen
function getOpenClass(isOpen) {
if (isOpen === undefined) {
isOpen = initialOpen
}
return isOpen ? "is-open" : ""
}
</script>
<div class="spectrum-Accordion" role={itemName}>
<div class="spectrum-Accordion-item {getOpenClass(isOpen)}">
<h3 class="spectrum-Accordion-itemHeading">
<button
class="spectrum-Accordion-itemHeader"
type="button"
on:click={() => (isOpen = !isOpen)}
>
{header}
</button>
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</h3>
<div class="spectrum-Accordion-itemContent" role={itemName}>
<slot />
</div>
</div>
</div>
<style>
.spectrum-Accordion {
margin-left: -20px;
}
.spectrum-Accordion-item {
border: none;
}
.spectrum-Accordion-itemContent {
width: 97%;
padding-left: 30px;
}
.spectrum-Accordion-itemHeader {
text-transform: none;
font-weight: bold;
font-size: 0.875rem;
}
</style>

1
packages/bbui/src/ActionButton/ActionButton.svelte
View file

@ -88,6 +88,7 @@
}
.is-selected:not(.spectrum-ActionButton--emphasized) {
background: var(--spectrum-global-color-gray-300);
border-color: var(--spectrum-global-color-gray-700);
}
.noPadding {
padding: 0;

37
packages/bbui/src/Actions/click_outside.js
View file

@ -1,11 +1,11 @@
const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
let clickHandlers = []
/**
* Handle a body click event
*/
const handleClick = event => {
// Ignore click if needed
// Ignore click if this is an ignored class
for (let className of ignoredClasses) {
if (event.target.closest(className)) {
return
@ -14,9 +14,18 @@ const handleClick = event => {
// Process handlers
clickHandlers.forEach(handler => {
if (!handler.element.contains(event.target)) {
handler.callback?.(event)
if (handler.element.contains(event.target)) {
return
}
// Ignore clicks for modals, unless the handler is registered from a modal
const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
const clickInModal = event.target.closest(".spectrum-Modal") != null
if (clickInModal && !sourceInModal) {
return
}
handler.callback?.(event)
})
}
document.documentElement.addEventListener("click", handleClick, true)
@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
/**
* Adds or updates a click handler
*/
const updateHandler = (id, element, callback) => {
const updateHandler = (id, element, anchor, callback) => {
let existingHandler = clickHandlers.find(x => x.id === id)
if (!existingHandler) {
clickHandlers.push({ id, element, callback })
clickHandlers.push({ id, element, anchor, callback })
} else {
existingHandler.callback = callback
}
@ -42,12 +51,22 @@ const removeHandler = id => {
/**
* Svelte action to apply a click outside handler for a certain element
* opts.anchor is an optional param specifying the real root source of the
* component being observed. This is required for things like popovers, where
* the element using the clickoutside action is the popover, but the popover is
* rendered at the root of the DOM somewhere, whereas the popover anchor is the
* element we actually want to consider when determining the source component.
*/
export default (element, callback) => {
export default (element, opts) => {
const id = Math.random()
updateHandler(id, element, callback)
const update = newOpts => {
const callback = newOpts?.callback || newOpts
const anchor = newOpts?.anchor || element
updateHandler(id, element, anchor, callback)
}
update(opts)
return {
update: newCallback => updateHandler(id, element, newCallback),
update,
destroy: () => removeHandler(id),
}
}

103
packages/bbui/src/Actions/position_dropdown.js
View file

@ -1,75 +1,68 @@
export default function positionDropdown(element, { anchor, align, maxWidth }) {
let positionSide = "top"
let maxHeight = 0
let dimensions = getDimensions(anchor)
export default function positionDropdown(
element,
{ anchor, align, maxWidth, useAnchorWidth }
) {
const update = () => {
const anchorBounds = anchor.getBoundingClientRect()
const elementBounds = element.getBoundingClientRect()
let styles = {
maxHeight: null,
minWidth: null,
maxWidth,
left: null,
top: null,
}
function getDimensions() {
const {
bottom,
top: spaceAbove,
left,
width,
} = anchor.getBoundingClientRect()
const spaceBelow = window.innerHeight - bottom
const containerRect = element.getBoundingClientRect()
let y
if (spaceAbove > spaceBelow) {
positionSide = "bottom"
maxHeight = spaceAbove - 20
y = window.innerHeight - spaceAbove + 5
// Determine vertical styles
if (window.innerHeight - anchorBounds.bottom < 100) {
styles.top = anchorBounds.top - elementBounds.height - 5
} else {
positionSide = "top"
y = bottom + 5
maxHeight = spaceBelow - 20
styles.top = anchorBounds.bottom + 5
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
}
return {
[positionSide]: y,
left,
width,
containerWidth: containerRect.width,
// Determine horizontal styles
if (!maxWidth && useAnchorWidth) {
styles.maxWidth = anchorBounds.width
}
if (useAnchorWidth) {
styles.minWidth = anchorBounds.width
}
if (align === "right") {
styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
} else if (align === "right-side") {
styles.left = anchorBounds.left + anchorBounds.width
} else {
styles.left = anchorBounds.left
}
// Apply styles
Object.entries(styles).forEach(([style, value]) => {
if (value) {
element.style[style] = `${value.toFixed(0)}px`
} else {
element.style[style] = null
}
})
}
function calcLeftPosition() {
let 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
}
// Apply initial styles which don't need to change
element.style.position = "absolute"
element.style.zIndex = "9999"
if (maxWidth) {
element.style.maxWidth = `${maxWidth}px`
}
element.style.minWidth = `${dimensions.width}px`
element.style.maxHeight = `${maxHeight.toFixed(0)}px`
element.style.transformOrigin = `center ${positionSide}`
element.style[positionSide] = `${dimensions[positionSide]}px`
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
// Observe both anchor and element and resize the popover as appropriate
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(() => {
dimensions = getDimensions()
element.style[positionSide] = `${dimensions[positionSide]}px`
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
})
entries.forEach(update)
})
resizeObserver.observe(anchor)
resizeObserver.observe(element)
document.addEventListener("scroll", update, true)
return {
destroy() {
resizeObserver.disconnect()
document.removeEventListener("scroll", update, true)
},
}
}

1
packages/bbui/src/Avatar/Avatar.svelte
View file

@ -58,5 +58,6 @@
overflow: hidden;
user-select: none;
text-transform: uppercase;
flex-shrink: 0;
}
</style>

8
packages/bbui/src/Button/Button.svelte
View file

@ -14,7 +14,7 @@
export let active = false
export let tooltip = undefined
export let dataCy
export let newStyles = false
export let newStyles = true
let showTooltip = false
</script>
@ -28,6 +28,7 @@
class:spectrum-Button--quiet={quiet}
class:new-styles={newStyles}
class:active
class:disabled
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled}
data-cy={dataCy}
@ -108,7 +109,10 @@
border-color: transparent;
color: var(--spectrum-global-color-gray-900);
}
.spectrum-Button--secondary.new-styles:hover {
.spectrum-Button--secondary.new-styles:not(.disabled):hover {
background: var(--spectrum-global-color-gray-300);
}
.spectrum-Button--secondary.new-styles.disabled {
color: var(--spectrum-global-color-gray-500);
}
</style>

1
packages/bbui/src/Drawer/DrawerContent.svelte
View file

@ -34,7 +34,6 @@
display: none;
}
.main {
font-family: var(--font-sans);
padding: var(--spacing-xl);
}
.main :global(textarea) {

30
packages/bbui/src/FancyForm/FancyButton.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import Icon from "../Icon/Icon.svelte"
import FancyField from "./FancyField.svelte"
export let icon
export let disabled
</script>
<FancyField on:click clickable {disabled}>
{#if icon}
{#if icon.includes("/")}
<img src={icon} alt="button" />
{:else}
<Icon name={icon} />
{/if}
{/if}
<slot name="icon" />
<div>
<slot />
</div>
</FancyField>
<style>
img {
width: 22px;
}
div {
font-size: var(--font-size-l);
}
</style>

70
packages/bbui/src/FancyForm/FancyButtonRadio.svelte Normal file
View file

@ -0,0 +1,70 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
import ActionButton from "../ActionButton/ActionButton.svelte"
export let label
export let value
export let disabled = false
export let error = null
export let validate = null
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
const dispatch = createEventDispatcher()
$: placeholder = !value
const extractProperty = (value, property) => {
if (value && typeof value === "object") {
return value[property]
}
return value
}
const onChange = newValue => {
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} autoHeight>
{#if label}
<FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
{/if}
<div class="options">
{#each options as option}
<ActionButton
selected={getOptionValue(option) === value}
on:click={() => onChange(getOptionValue(option))}
>
{getOptionLabel(option)}
</ActionButton>
{/each}
</div>
</FancyField>
<style>
.options {
margin-top: 34px;
margin-bottom: 14px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.options :global(.spectrum-ActionButton) {
font-size: 15px;
line-height: 17px;
height: auto;
padding: 6px 10px;
}
</style>

53
packages/bbui/src/FancyForm/FancyCheckbox.svelte Normal file
View file

@ -0,0 +1,53 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import Checkbox from "../Form/Core/Checkbox.svelte"
export let value
export let text
export let disabled = false
export let error = null
export let validate = null
const dispatch = createEventDispatcher()
const onChange = () => {
const newValue = !value
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
<span>
<Checkbox {disabled} {value} />
</span>
<div class="text">
{#if text}
{text}
{/if}
<slot />
</div>
</FancyField>
<style>
span {
pointer-events: none;
}
.text {
font-size: 15px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.text > :global(*) {
font-size: inherit !important;
}
</style>

126
packages/bbui/src/FancyForm/FancyField.svelte Normal file
View file

@ -0,0 +1,126 @@
<script>
import Icon from "../Icon/Icon.svelte"
import { getContext, onMount } from "svelte"
import { slide } from "svelte/transition"
export let disabled = false
export let error = null
export let focused = false
export let clickable = false
export let validate
export let value
export let ref
export let autoHeight
const formContext = getContext("fancy-form")
const id = Math.random()
const API = {
validate: () => {
if (validate) {
error = validate(value)
}
return !error
},
}
onMount(() => {
if (formContext) {
formContext.registerField(id, API)
}
return () => {
if (formContext) {
formContext.unregisterField(id)
}
}
})
</script>
<div
bind:this={ref}
class="fancy-field"
class:error
class:disabled
class:focused
class:clickable
class:auto-height={autoHeight}
>
<div class="content" on:click>
<div class="field">
<slot />
</div>
{#if error}
<div class="error-icon">
<Icon name="Alert" />
</div>
{/if}
</div>
{#if error}
<div transition:slide|local={{ duration: 130 }} class="error-message">
{error}
</div>
{/if}
</div>
<style>
.fancy-field {
max-width: 400px;
background: var(--spectrum-global-color-gray-75);
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
box-sizing: border-box;
transition: border-color 130ms ease-out, background 130ms ease-out,
background 130ms ease-out;
color: var(--spectrum-global-color-gray-800);
}
.fancy-field:hover {
border-color: var(--spectrum-global-color-gray-400);
}
.fancy-field.clickable:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
.fancy-field.focused {
border-color: var(--spectrum-global-color-blue-400);
}
.fancy-field.error {
border-color: var(--spectrum-global-color-red-400);
}
.fancy-field.disabled {
background: var(--spectrum-global-color-gray-200);
color: var(--spectrum-global-color-gray-400);
border: 1px solid var(--spectrum-global-color-gray-300);
pointer-events: none;
}
.content {
position: relative;
height: 64px;
padding: 0 16px;
}
.fancy-field.auto-height .content {
height: auto;
}
.content,
.field {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 16px;
}
.field {
flex: 1 1 auto;
}
.error-message {
background: var(--spectrum-global-color-red-400);
color: white;
font-size: 14px;
padding: 6px 16px;
font-weight: 500;
}
.error-icon {
flex: 0 0 auto;
}
.error-icon :global(.spectrum-Icon) {
fill: var(--spectrum-global-color-red-400);
}
</style>

25
packages/bbui/src/FancyForm/FancyFieldLabel.svelte Normal file
View file

@ -0,0 +1,25 @@
<script>
export let placeholder = true
</script>
<div class:placeholder>
<slot />
</div>
<style>
div {
font-size: 14px;
line-height: 15px;
font-weight: 500;
position: absolute;
top: 10px;
color: var(--spectrum-global-color-gray-600);
transition: font-size 130ms ease-out, top 130ms ease-out,
transform 130ms ease-out;
}
div.placeholder {
top: 50%;
font-size: 15px;
transform: translateY(-50%);
}
</style>

40
packages/bbui/src/FancyForm/FancyForm.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
import { setContext } from "svelte"
let fields = {}
setContext("fancy-form", {
registerField: (id, api) => {
fields = { ...fields, [id]: api }
},
unregisterField: id => {
delete fields[id]
fields = fields
},
})
export const validate = () => {
let valid = true
Object.values(fields).forEach(api => {
if (!api.validate()) {
valid = false
}
})
return valid
}
</script>
<div class="fancy-form">
<slot />
</div>
<style>
.fancy-form :global(.fancy-field:not(:first-of-type)) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.fancy-form :global(.fancy-field:not(:last-of-type)) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
</style>

77
packages/bbui/src/FancyForm/FancyInput.svelte Normal file
View file

@ -0,0 +1,77 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
import { fade } from "svelte/transition"
export let label
export let value
export let type = "text"
export let disabled = false
export let error = null
export let validate = null
export let suffix = null
const dispatch = createEventDispatcher()
let focused = false
$: placeholder = !focused && !value
const onChange = e => {
const newValue = e.target.value
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} {focused}>
{#if label}
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
{/if}
<input
{disabled}
value={value || ""}
type={type || "text"}
on:input={onChange}
on:focus={() => (focused = true)}
on:blur={() => (focused = false)}
class:placeholder
/>
{#if suffix && !placeholder}
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
{/if}
</FancyField>
<style>
input {
width: 100%;
transition: transform 130ms ease-out;
transform: translateY(9px);
background: transparent;
font-size: 15px;
line-height: 17px;
font-family: var(--font-sans);
color: var(--spectrum-global-color-gray-900);
outline: none;
border: none;
padding: 0;
margin: 0;
}
input.placeholder {
transform: translateY(0);
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.suffix {
color: var(--spectrum-global-color-gray-600);
transform: translateY(9px);
font-size: 15px;
line-height: 17px;
font-family: var(--font-sans);
}
</style>

147
packages/bbui/src/FancyForm/FancySelect.svelte Normal file
View file

@ -0,0 +1,147 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import Icon from "../Icon/Icon.svelte"
import Popover from "../Popover/Popover.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
export let label
export let value
export let disabled = false
export let error = null
export let validate = null
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
const dispatch = createEventDispatcher()
let open = false
let popover
let wrapper
$: placeholder = !value
$: selectedLabel = getSelectedLabel(value)
const extractProperty = (value, property) => {
if (value && typeof value === "object") {
return value[property]
}
return value
}
const onChange = newValue => {
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
open = false
}
const getSelectedLabel = value => {
if (!value || !options?.length) {
return ""
}
const selectedOption = options.find(x => getOptionValue(x) === value)
if (!selectedOption) {
return value
}
return getOptionLabel(selectedOption)
}
</script>
<FancyField
bind:ref={wrapper}
{error}
{value}
{validate}
{disabled}
clickable
on:click={() => (open = true)}
>
{#if label}
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
{/if}
<div class="value" class:placeholder>
{selectedLabel || ""}
</div>
<div class="arrow">
<Icon name="ChevronDown" />
</div>
</FancyField>
<Popover
anchor={wrapper}
align="left"
portalTarget={document.documentElement}
bind:this={popover}
{open}
on:close={() => (open = false)}
useAnchorWidth={true}
maxWidth={null}
>
<div class="popover-content">
{#if options.length}
{#each options as option, idx}
<div
class="popover-option"
tabindex="0"
on:click={() => onChange(getOptionValue(option, idx))}
>
<span class="option-text">
{getOptionLabel(option, idx)}
</span>
{#if value === getOptionValue(option, idx)}
<Icon name="Checkmark" />
{/if}
</div>
{/each}
{/if}
</div>
</Popover>
<style>
.value {
display: block;
flex: 1 1 auto;
font-size: 15px;
line-height: 17px;
color: var(--spectrum-global-color-gray-900);
transition: transform 130ms ease-out, opacity 130ms ease-out;
opacity: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 0;
transform: translateY(9px);
}
.value.placeholder {
transform: translateY(0);
opacity: 0;
pointer-events: none;
margin-top: 0;
}
.popover-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 7px 0;
}
.popover-option {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 7px 16px;
transition: background 130ms ease-out;
font-size: 15px;
}
.popover-option:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
</style>

6
packages/bbui/src/FancyForm/index.js Normal file
View file

@ -0,0 +1,6 @@
export { default as FancyInput } from "./FancyInput.svelte"
export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
export { default as FancySelect } from "./FancySelect.svelte"
export { default as FancyButton } from "./FancyButton.svelte"
export { default as FancyForm } from "./FancyForm.svelte"
export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"

2
packages/bbui/src/Form/Core/DatePicker.svelte
View file

@ -264,7 +264,7 @@
max-height: 100%;
}
:global(.flatpickr-calendar) {
font-family: "Source Sans Pro", sans-serif;
font-family: var(--font-sans);
}
.is-disabled {
pointer-events: none !important;

265
packages/bbui/src/Form/Core/Picker.svelte
View file

@ -2,12 +2,12 @@
import "@spectrum-css/picker/dist/index-vars.css"
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 clickOutside from "../../Actions/click_outside"
import Search from "./Search.svelte"
import Icon from "../../Icon/Icon.svelte"
import StatusLight from "../../StatusLight/StatusLight.svelte"
import Popover from "../../Popover/Popover.svelte"
export let id = null
export let disabled = false
@ -33,7 +33,10 @@
export let sort = false
const dispatch = createEventDispatcher()
let searchTerm = null
let button
let popover
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
$: filteredOptions = getFilteredOptions(
@ -42,7 +45,9 @@
getOptionLabel
)
const onClick = () => {
const onClick = e => {
e.preventDefault()
e.stopPropagation()
dispatch("click")
if (readonly) {
return
@ -76,77 +81,119 @@
}
</script>
<div use:clickOutside={() => (open = false)}>
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:click={onClick}
>
{#if fieldIcon}
<span class="option-extra">
<Icon name={fieldIcon} />
</span>
{/if}
{#if fieldColour}
<span class="option-extra">
<StatusLight square color={fieldColour} />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:click={onClick}
bind:this={button}
>
{#if fieldIcon}
<span class="option-extra icon">
<Icon size="S" name={fieldIcon} />
</span>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
{/if}
{#if fieldColour}
<span class="option-extra">
<StatusLight square color={fieldColour} />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
</span>
{#if error}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
</button>
{#if open}
<div
transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
<Popover
anchor={button}
align="left"
bind:this={popover}
{open}
on:close={() => (open = false)}
useAnchorWidth={!autoWidth}
maxWidth={autoWidth ? 400 : null}
>
<div
class="popover-content"
class:auto-width={autoWidth}
use:clickOutside={() => (open = false)}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/if}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<li
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}
on:click={() => onSelectOption(getOptionValue(option, idx))}
class:is-disabled={!isOptionEnabled(option)}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
{#if getOptionIcon(option, idx)}
<span class="option-extra icon">
<Icon size="S" name={getOptionIcon(option, idx)} />
</span>
{/if}
{#if getOptionColour(option, idx)}
<span class="option-extra">
<StatusLight square color={getOptionColour(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
@ -155,61 +202,13 @@
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/if}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<li
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option, idx))}
class:is-disabled={!isOptionEnabled(option)}
>
{#if getOptionIcon(option, idx)}
<span class="option-extra">
<Icon name={getOptionIcon(option, idx)} />
</span>
{/if}
{#if getOptionColour(option, idx)}
<span class="option-extra">
<StatusLight square color={getOptionColour(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/each}
{/if}
</ul>
</div>
{/if}
</div>
{/each}
{/if}
</ul>
</div>
</Popover>
<style>
.spectrum-Popover {
max-height: 240px;
z-index: 999;
top: 100%;
}
.spectrum-Popover:not(.auto-width) {
width: 100%;
}
.spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spectrum-Picker {
width: 100%;
box-shadow: none;
@ -229,9 +228,6 @@
.spectrum-Picker-label.auto-width.is-placeholder {
padding-right: 2px;
}
.auto-width .spectrum-Menu-item {
padding-right: var(--spacing-xl);
}
/* Icon and colour alignment */
.spectrum-Menu-checkmark {
@ -241,27 +237,48 @@
.option-extra {
padding-right: 8px;
}
.option-extra.icon {
margin: 0 -1px;
}
.spectrum-Popover :global(.spectrum-Search) {
/* Popover */
.popover-content {
display: contents;
}
.popover-content.auto-width .spectrum-Menu-itemLabel {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
width: 0;
flex: 1 1 auto;
}
.popover-content.auto-width .spectrum-Menu-item {
padding-right: var(--spacing-xl);
}
.spectrum-Menu-item.is-disabled {
pointer-events: none;
}
/* Search styles inside popover */
.popover-content :global(.spectrum-Search) {
margin-top: -1px;
margin-left: -1px;
width: calc(100% + 2px);
}
.spectrum-Popover :global(.spectrum-Search input) {
.popover-content :global(.spectrum-Search input) {
height: auto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-top: var(--spectrum-global-dimension-size-100);
padding-bottom: var(--spectrum-global-dimension-size-100);
}
.spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
.popover-content :global(.spectrum-Search .spectrum-ClearButton) {
right: 1px;
top: 2px;
}
.spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
.popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
top: 9px;
}
.spectrum-Menu-item.is-disabled {
pointer-events: none;
}
</style>

3
packages/bbui/src/Form/Core/Select.svelte
View file

@ -18,8 +18,11 @@
export let autoWidth = false
export let autocomplete = false
export let sort = false
const dispatch = createEventDispatcher()
let open = false
$: fieldText = getFieldText(value, options, placeholder)
$: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
$: fieldColour = getFieldAttribute(getOptionColour, value, options)

4
packages/bbui/src/Form/Core/TextField.svelte
View file

@ -112,8 +112,4 @@
.spectrum-Textfield {
width: 100%;
}
input:disabled {
color: var(--spectrum-global-color-gray-600) !important;
-webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
}
</style>

3
packages/bbui/src/Icon/IconAvatar.svelte
View file

@ -19,6 +19,7 @@
.icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
display: grid;
place-items: center;
border-radius: 50%;
@ -34,6 +35,7 @@
.icon.size--S {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
.icon.size--S :global(.spectrum-Icon) {
width: 16px;
@ -46,6 +48,7 @@
.icon.size--L {
width: 40px;
height: 40px;
flex: 0 0 40px;
}
.icon.size--L :global(.spectrum-Icon) {
width: 28px;

1
packages/bbui/src/InlineAlert/InlineAlert.svelte
View file

@ -56,5 +56,6 @@
--spectrum-semantic-positive-icon-color: #2d9d78;
--spectrum-semantic-negative-icon-color: #e34850;
min-width: 100px;
margin: 0;
}
</style>

1
packages/bbui/src/Label/Label.svelte
View file

@ -21,6 +21,7 @@
label {
padding: 0;
white-space: nowrap;
color: var(--spectrum-global-color-gray-600);
}
.muted {

95
packages/bbui/src/Layout/Page.svelte
View file

@ -1,32 +1,101 @@
<script>
import { setContext } from "svelte"
import clickOutside from "../Actions/click_outside"
export let wide = false
export let maxWidth = "80ch"
export let narrow = false
export let noPadding = false
let sidePanelVisble = false
setContext("side-panel", {
open: () => (sidePanelVisble = true),
close: () => (sidePanelVisble = false),
})
</script>
<div style="--max-width: {maxWidth}" class:wide class:noPadding>
<slot />
<div class="page">
<div class="main">
<div class="content" class:wide class:noPadding class:narrow>
<slot />
<div class="fix-scroll-padding" />
</div>
</div>
<div
id="side-panel"
class:visible={sidePanelVisble}
use:clickOutside={() => {
sidePanelVisble = false
}}
>
<slot name="side-panel" />
</div>
</div>
<style>
div {
.page {
position: relative;
}
.page,
.main {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex: 1 1 auto;
overflow-x: hidden;
}
.main {
overflow: auto;
}
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
max-width: var(--max-width);
max-width: 1080px;
margin: 0 auto;
padding: calc(var(--spacing-xl) * 2);
min-height: calc(100% - var(--spacing-xl) * 4);
flex: 1 1 auto;
padding: 50px 50px 0 50px;
z-index: 1;
}
.wide {
.fix-scroll-padding {
content: "";
display: block;
flex: 0 0 50px;
}
.content.wide {
max-width: none;
margin: 0;
}
.content.narrow {
max-width: 840px;
}
#side-panel {
position: absolute;
right: 0;
top: 0;
padding: 24px;
background: var(--background);
border-left: var(--border-light);
width: 320px;
max-width: calc(100vw - 48px - 48px);
overflow: auto;
overflow-x: hidden;
transform: translateX(100%);
transition: transform 130ms ease-out;
height: calc(100% - 48px);
z-index: 2;
}
#side-panel.visible {
transform: translateX(0);
}
.noPadding {
padding: 0px;
margin: 0px;
@media (max-width: 640px) {
.content {
padding: 24px;
max-width: calc(100vw - 48px) !important;
width: calc(100vw - 48px) !important;
overflow: auto;
}
}
</style>

5
packages/bbui/src/Link/Link.svelte
View file

@ -1,5 +1,6 @@
<script>
import "@spectrum-css/link/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let href = "#"
export let size = "M"
@ -9,10 +10,12 @@
export let overBackground = false
export let target
export let download
const dispatch = createEventDispatcher()
</script>
<a
on:click
on:click={e => dispatch("click") && e.stopPropagation()}
{href}
{target}
{download}

9
packages/bbui/src/List/ListItem.svelte
View file

@ -30,9 +30,11 @@
<Label>{subtitle}</Label>
{/if}
</div>
<div class="right">
<slot />
</div>
{#if $$slots.default}
<div class="right">
<slot />
</div>
{/if}
</div>
<style>
@ -45,6 +47,7 @@
justify-content: space-between;
border: 1px solid var(--spectrum-global-color-gray-300);
transition: background 130ms ease-out;
gap: var(--spacing-m);
}
.list-item:not(:first-child) {
border-top: none;

1
packages/bbui/src/Modal/CustomContent.svelte
View file

@ -26,7 +26,6 @@
padding: 40px;
background-color: var(--purple);
color: white;
font-family: var(--font-sans);
font-weight: bold;
text-align: center;
user-select: none;

1
packages/bbui/src/Modal/Modal.svench
View file

@ -19,7 +19,6 @@
<style>
p, span {
font-family: var(--font-sans);
font-size: var(--font-size-s);
}

5
packages/bbui/src/Modal/ModalContent.svelte
View file

@ -104,7 +104,7 @@
{/if}
{#if showCancelButton}
<Button group secondary newStyles on:click={close}>
<Button group secondary on:click={close}>
{cancelText}
</Button>
{/if}
@ -151,7 +151,8 @@
overflow: visible;
}
.spectrum-Dialog-heading {
font-family: var(--font-sans);
font-family: var(--font-accent);
font-weight: 600;
}
.spectrum-Dialog-heading.noDivider {
margin-bottom: 12px;

1
packages/bbui/src/Modal/QuizModal.svelte
View file

@ -42,7 +42,6 @@
<style>
p {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-s);
}
p.error {

32
packages/bbui/src/Popover/Popover.svelte
View file

@ -4,6 +4,9 @@
import { createEventDispatcher } from "svelte"
import positionDropdown from "../Actions/position_dropdown"
import clickOutside from "../Actions/click_outside"
import { fly } from "svelte/transition"
import { getContext } from "svelte"
import Context from "../context"
const dispatch = createEventDispatcher()
@ -12,9 +15,10 @@
export let portalTarget
export let dataCy
export let maxWidth
export let direction = "bottom"
export let showTip = false
export let open = false
export let useAnchorWidth = false
let tipSvg =
'<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
@ -22,6 +26,7 @@
$: tooltipClasses = showTip
? `spectrum-Popover--withTip spectrum-Popover--${direction}`
: ""
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
export const show = () => {
dispatch("open")
@ -35,13 +40,22 @@
const handleOutsideClick = e => {
if (open) {
e.stopPropagation()
// Stop propagation if the source is the anchor
let node = e.target
let fromAnchor = false
while (!fromAnchor && node && node.parentNode) {
fromAnchor = node === anchor
node = node.parentNode
}
if (fromAnchor) {
e.stopPropagation()
}
// Hide the popover
hide()
}
}
let open = null
function handleEscape(e) {
if (open && e.key === "Escape") {
hide()
@ -50,15 +64,19 @@
</script>
{#if open}
<Portal target={portalTarget}>
<Portal {target}>
<div
tabindex="0"
use:positionDropdown={{ anchor, align, maxWidth }}
use:clickOutside={handleOutsideClick}
use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
use:clickOutside={{
callback: handleOutsideClick,
anchor,
}}
on:keydown={handleEscape}
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
role="presentation"
data-cy={dataCy}
transition:fly|local={{ y: -20, duration: 200 }}
>
{#if showTip}
{@html tipSvg}

1
packages/bbui/src/Popover/Popover.svench
View file

@ -29,7 +29,6 @@
font-size: var(--font-size-m);
margin: 0 0 var(--spacing-l) 0;
font-weight: 600;
font-family: var(--font-sans);
}
.input-group-column {

10
packages/bbui/src/Table/StringRenderer.svelte
View file

@ -1,8 +1,11 @@
<script>
export let value
export let schema
</script>
<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
<div class:capitalise={schema?.capitalise}>
{typeof value === "object" ? JSON.stringify(value) : value}
</div>
<style>
div {
@ -10,5 +13,10 @@
text-overflow: ellipsis;
white-space: nowrap;
max-width: var(--max-cell-width);
width: 0;
flex: 1 1 auto;
}
div.capitalise {
text-transform: capitalize;
}
</style>

49
packages/bbui/src/Table/Table.svelte
View file

@ -21,6 +21,8 @@
* template: a HBS or JS binding to use as the value
* background: the background color
* color: the text color
* borderLeft: show a left border
* borderRight: show a right border
*/
export let data = []
export let schema = {}
@ -31,6 +33,7 @@
export let allowSelectRows
export let allowEditRows = true
export let allowEditColumns = true
export let allowClickRows = true
export let selectedRows = []
export let customRenderers = []
export let disableSorting = false
@ -270,6 +273,17 @@
if (schema[field].align === "Right") {
styles[field] += "justify-content: flex-end; text-align: right;"
}
if (schema[field].borderLeft) {
styles[field] +=
"border-left: 1px solid var(--spectrum-global-color-gray-200);"
}
if (schema[field].borderLeft) {
styles[field] +=
"border-right: 1px solid var(--spectrum-global-color-gray-200);"
}
if (schema[field].minWidth) {
styles[field] += `min-width: ${schema[field].minWidth};`
}
})
return styles
}
@ -290,7 +304,11 @@
</slot>
</div>
{:else}
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
<div
class="spectrum-Table"
class:no-scroll={!rowCount}
style={`${heightStyle}${gridStyle}`}
>
{#if fields.length}
<div class="spectrum-Table-head">
{#if showEditColumn}
@ -356,7 +374,7 @@
{/if}
{#if sortedRows?.length}
{#each sortedRows as row, idx}
<div class="spectrum-Table-row">
<div class="spectrum-Table-row" class:clickable={allowClickRows}>
{#if showEditColumn}
<div
class:noBorderCheckbox={!showHeaderBorder}
@ -433,10 +451,10 @@
/* Wrapper */
.wrapper {
position: relative;
z-index: 0;
--table-bg: var(--spectrum-global-color-gray-50);
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
--cell-padding: var(--spectrum-global-dimension-size-250);
overflow: auto;
}
.wrapper--quiet {
--table-bg: var(--spectrum-alias-background-color-transparent);
@ -460,6 +478,9 @@
display: grid;
overflow: auto;
}
.spectrum-Table.no-scroll {
overflow: visible;
}
/* Header */
.spectrum-Table-head {
@ -546,12 +567,13 @@
/* Table rows */
.spectrum-Table-row {
display: contents;
cursor: auto;
}
.spectrum-Table-row:hover .spectrum-Table-cell {
/*background-color: var(--hover-bg) !important;*/
.spectrum-Table-row.clickable {
cursor: pointer;
}
.spectrum-Table-row:hover .spectrum-Table-cell:after {
background-color: var(--spectrum-alias-highlight-hover);
.spectrum-Table-row.clickable:hover .spectrum-Table-cell {
background-color: var(--spectrum-global-color-gray-100);
}
.wrapper--quiet .spectrum-Table-row {
border-left: none;
@ -584,24 +606,13 @@
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
background-color: var(--table-bg);
z-index: auto;
transition: background-color 130ms ease-out;
}
.spectrum-Table-cell--edit {
position: sticky;
left: 0;
z-index: 2;
}
.spectrum-Table-cell:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
pointer-events: none;
transition: background-color
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
}
/* Placeholder */
.placeholder {

3
packages/bbui/src/Tabs/Tab.svelte
View file

@ -82,7 +82,8 @@
.spectrum-Tabs-item {
color: var(--spectrum-global-color-gray-600);
}
.spectrum-Tabs-item.is-selected {
.spectrum-Tabs-item.is-selected,
.spectrum-Tabs-item:hover {
color: var(--spectrum-global-color-gray-900);
}
</style>

2
packages/bbui/src/Tags/Tag.svelte
View file

@ -37,7 +37,7 @@
<style>
.spectrum-Tags-item {
margin-top: 0;
margin-bottom: 0;
margin-top: 0;
}
</style>

10
packages/bbui/src/Tags/Tags.svelte
View file

@ -5,3 +5,13 @@
<div class="spectrum-Tags" role="list" aria-label="list">
<slot />
</div>
<style>
.spectrum-Tags {
margin-top: -8px;
margin-left: -4px;
}
.spectrum-Tags :global(.spectrum-Tags-item) {
margin: 8px 0 0 4px !important;
}
</style>

6
packages/bbui/src/Typography/Heading.svelte
View file

@ -15,3 +15,9 @@
>
<slot />
</h1>
<style>
h1 {
font-family: var(--font-accent);
}
</style>

10
packages/bbui/src/bbui.css
View file

@ -40,12 +40,14 @@
--rounded-medium: 8px;
--rounded-large: 16px;
--font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
--font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
--spectrum-alias-body-text-font-family: var(--font-sans);
font-size: 16px;
--font-size-xs: 0.75rem;
@ -89,6 +91,8 @@
--border-light-2: 2px var(--grey-3) solid;
--border-blue: 2px var(--blue) solid;
--border-transparent: 2px transparent solid;
--spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
}
a {

1
packages/bbui/src/context.js
View file

@ -1,3 +1,4 @@
export default {
Modal: "bbui-modal",
PopoverRoot: "bbui-popover-root",
}

4
packages/bbui/src/index.js
View file

@ -75,6 +75,7 @@ export { default as ListItem } from "./List/ListItem.svelte"
export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
export { default as Slider } from "./Form/Slider.svelte"
export { default as Accordion } from "./Accordion/Accordion.svelte"
// Renderers
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
@ -101,3 +102,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
// Helpers
export * as Helpers from "./helpers"
// Fancy form components
export * from "./FancyForm"

5
packages/bbui/yarn.lock
View file

@ -109,6 +109,11 @@
estree-walker "^1.0.1"
picomatch "^2.2.2"
"@spectrum-css/accordion@3.0.24":
version "3.0.24"
resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74"
integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA==
"@spectrum-css/actionbutton@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"

2
packages/builder/assets/bb-emblem.svg
View file

@ -3,7 +3,7 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<style type="text/css">
.st0{fill:#393C44;}
.st0{fill:#000000;}
.st1{fill:#FFFFFF;}
.st2{fill:#4285F4;}
</style>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

4
packages/builder/cypress.json
View file

@ -11,9 +11,5 @@
"WORKER_PORT": "4200",
"JWT_SECRET": "test",
"HOST_IP": ""
},
"retries": {
"runMode": 1,
"openMode": 0
}
}

14
packages/builder/cypress/integration/adminAndManagement/authentication.spec.js
View file

@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests"
// const interact = require("../support/interact")
filterTests(["smoke", "all"], () => {
context("Auth Configuration", () => {
xcontext("Auth Configuration", () => {
before(() => {
cy.login()
})
@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => {
cy.get("[data-cy=oidc-active]").should('not.be.checked')
cy.intercept("POST", "/api/global/configs").as("updateAuth")
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
cy.wait("@updateAuth")
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => {
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
cy.intercept("POST", "/api/global/configs").as("updateAuth")
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
cy.wait("@updateAuth")
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
@ -85,11 +85,11 @@ filterTests(["smoke", "all"], () => {
cy.get(".auth-form input.spectrum-Textfield-input").type("Another ")
cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 6)
cy.get(".spectrum-Tags-item").contains("Another")
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
cy.intercept("POST", "/api/global/configs").as("updateAuth")
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
cy.wait("@updateAuth")
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => {
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
cy.intercept("POST", "/api/global/configs").as("updateAuth")
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
cy.wait("@updateAuth")
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => {
cy.get("div.content").scrollTo("bottom")
cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true})
cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true })
cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4)

149
packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js
View file

@ -3,107 +3,112 @@ const interact = require('../../support/interact')
filterTests(["smoke", "all"], () => {
context("User Settings Menu", () => {
before(() => {
cy.login()
})
it("should update user information via user settings menu", () => {
const fname = "test"
const lname = "user"
const fname = "test"
const lname = "user"
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.updateUserInformation(fname, lname)
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.updateUserInformation(fname, lname)
// Go to user info and confirm name update
cy.contains("Users").click()
cy.contains("test@test.com").click()
// Go to user info and confirm name update
cy.contains("Users").click()
cy.contains("test@test.com").click()
cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
})
cy.get(interact.FIELD).eq(2).within(() => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
})
cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
})
cy.get(interact.FIELD).eq(2).within(() => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
})
})
it("should allow copying of the users API key", () => {
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
cy.get(interact.SPECTRUM_ICON).click({force: true})
})
// There may be timing issues with this on the smoke build
cy.wait(500)
cy.get(".spectrum-Toast-content")
xit("should allow copying of the users API key", () => {
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
cy.get(interact.SPECTRUM_ICON).click({ force: true })
})
// There may be timing issues with this on the smoke build
cy.wait(500)
cy.get(".spectrum-Toast-content")
.contains("URL copied to clipboard")
.should("be.visible")
})
it("should allow API key regeneration", () => {
// Get initial API key value
cy.get(interact.SPECTRUM_DIALOG_CONTENT)
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
cy.get(interact.SPECTRUM_ICON).click({ force: true })
})
// Get initial API key value
cy.get(interact.SPECTRUM_DIALOG_CONTENT)
.find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne')
// Click re-generate key button
cy.get("button").contains("Re-generate key").click({ force: true })
// Click re-generate key button
cy.get("button").contains("Regenerate key").click({ force: true })
// Verify API key was changed
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
cy.get('@keyOne').then((keyOne) => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
})
// Verify API key was changed
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
cy.get('@keyOne').then((keyOne) => {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
})
cy.closeModal()
})
cy.closeModal()
})
it("should update password", () => {
// Access Update password modal
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
// Access Update password modal
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
// Enter new password and update
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
for (let i = 0; i < 2; i++) {
// password set to 'newpwd'
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
}
cy.get("button").contains("Update password").click({ force: true })
})
// Enter new password and update
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
for (let i = 0; i < 2; i++) {
// password set to 'newpwd'
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
}
cy.get("button").contains("Update password").click({ force: true })
})
// Logout & in with new password
//cy.logOut()
cy.login("test@test.com", "newpwd")
// Logout & in with new password
//cy.logOut()
cy.login("test@test.com", "newpwd")
})
it("should open and close developer mode", () => {
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
// Close developer mode & verify
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
cy.get(".app").should('not.exist') // At least one app should be available
xit("should open and close developer mode", () => {
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
// Open developer mode & verify
cy.get(".avatar > .icon").click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available
cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
// Close developer mode & verify
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
cy.get(".app").should('not.exist') // At least one app should be available
// Open developer mode & verify
cy.get(".avatar > .icon").click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
cy.get(".app-table").should('exist') // config sections available
cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
})
after(() => {
// Change password back to original value
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
for (let i = 0; i < 2; i++) {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
}
cy.get("button").contains("Update password").click({ force: true })
})
// Remove users name
cy.updateUserInformation()
// Change password back to original value
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
for (let i = 0; i < 2; i++) {
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
}
cy.get("button").contains("Update password").click({ force: true })
})
// Remove users name
cy.updateUserInformation()
})
})
})

2
packages/builder/cypress/integration/appOverview.spec.js
View file

@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
import clientPackage from "@budibase/client/package.json"
filterTests(["all"], () => {
context("Application Overview screen", () => {
xcontext("Application Overview screen", () => {
before(() => {
cy.login()
cy.deleteAllApps()

90
packages/builder/cypress/integration/createApp.spec.js
View file

@ -14,15 +14,15 @@ filterTests(['smoke', 'all'], () => {
cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create
cy.wait(1000)
cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist")
cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
cy.get(interact.TEMPLATE_CATEGORY).should("exist")
cy.get(interact.APP_TABLE).should("not.exist")
})
}
it("should provide filterable templates", () => {
xit("should provide filterable templates", () => {
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
cy.wait(500)
@ -30,16 +30,16 @@ filterTests(['smoke', 'all'], () => {
.its("body")
.then(val => {
if (val.length > 0) {
cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true})
cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true })
}
})
cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
cy.get(interact.TEMPLATE_CATEGORY).should("exist")
cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).its('length').should('be.gt', 1)
cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).its('length').should('be.gt', 2)
cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).eq(1).click()
cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).should('have.length', 1)
@ -104,14 +104,14 @@ filterTests(['smoke', 'all'], () => {
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
cy.updateUserInformation("Ted", "Userman")
cy.createApp("", false)
cy.applicationInAppTable("Teds app")
cy.deleteApp("Teds app")
// Accomodate names that end in 'S'
cy.updateUserInformation("Chris", "Userman")
cy.createApp("", false)
cy.applicationInAppTable("Chris app")
cy.deleteApp("Chris app")
@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => {
const exportedApp = 'cypress/fixtures/exported-app.txt'
cy.importApp(exportedApp, "")
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
cy.applicationInAppTable("My app")
cy.get(".appTable .name").eq(0).click()
cy.deleteApp("My app")
cy.get(".app-table .name").eq(0).click()
cy.closeModal()
cy.get(`[aria-label="ShowMenu"]`).click()
cy.get(".spectrum-Menu").within(() => {
cy.contains("Overview").click()
})
cy.get(".app-overview-actions-icon").within(() => {
cy.get(".spectrum-Icon").click({ force: true })
})
cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
cy.get(".spectrum-Dialog-grid").within(() => {
cy.get("input").type("My app")
})
cy.get(".spectrum-Button--warning").click()
})
it("should create an application from an export, using the users first name as the default app name", () => {
const exportedApp = 'cypress/fixtures/exported-app.txt'
cy.updateUserInformation("Ted", "Userman")
cy.importApp(exportedApp, "")
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.applicationInAppTable("Teds app")
cy.get(".appTable .name").eq(0).click()
cy.deleteApp("Teds app")
cy.get(".app-table .name").eq(0).click()
cy.closeModal()
cy.get(`[aria-label="ShowMenu"]`).click()
cy.get(".spectrum-Menu").within(() => {
cy.contains("Overview").click()
})
cy.get(".app-overview-actions-icon").within(() => {
cy.get(".spectrum-Icon").click({ force: true })
})
cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
cy.get(".spectrum-Dialog-grid").within(() => {
cy.get("input").type("Teds app")
})
cy.get(".spectrum-Button--warning").click()
cy.updateUserInformation("", "")
})
it("should generate the first application from a template", () => {
xit("should generate the first application from a template", () => {
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(500)
@ -172,28 +186,28 @@ filterTests(['smoke', 'all'], () => {
const card = cy.get('.template-card').eq(0).should("exist");
const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
cardOverlay.invoke("show")
cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
cardOverlay.get("button").contains("Use template").should("exist").click({ force: true })
})
// CMD Create app from theme card
cy.get(".spectrum-Modal").should('be.visible')
const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
templateName.invoke('text')
.then(templateNameText => {
const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
.then(templateNameText => {
const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-")
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
cy.wait(5000)
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(2000)
cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
cy.wait(5000)
cy.applicationInAppTable(templateNameText)
cy.deleteApp(templateNameText)
});
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(2000)
cy.applicationInAppTable(templateNameText)
cy.deleteApp(templateNameText)
});
})
@ -217,5 +231,5 @@ filterTests(['smoke', 'all'], () => {
cy.deleteApp(secondAppName)
})
})
})
})

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

@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => {
})
Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({
force: true,
})
@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
.blur()
}
cy.get(".confirm-wrap").within(() => {
cy.get("button").contains("Update information").click({ force: true })
cy.get("button").contains("Save").click({ force: true })
})
cy.get(".spectrum-Dialog-grid").should("not.exist")
})
@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => {
// Go to app overview
const appIdParsed = appId.split("_").pop()
const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
cy.get(actionEleId).within(() => {
cy.contains("Manage").click({ force: true })
cy.get(actionEleId).click()
cy.get(`[aria-label="ShowMenu"]`).click()
cy.get(".spectrum-Menu").within(() => {
cy.contains("Overview").click()
})
cy.wait(500)
// Unpublish first if needed
@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => {
return
} else {
// Searches for the app
cy.get(".filter").then(() => {
cy.get(".spectrum-Search").then(() => {
cy.get(".spectrum-Textfield").within(() => {
cy.get("input").eq(0).clear({ force: true })
cy.get("input").eq(0).type(appName, { force: true })
@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => {
// Assumes there are no others
Cypress.Commands.add("applicationInAppTable", appName => {
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
cy.get(".appTable", { timeout: 30000 }).within(() => {
cy.get(".app-table", { timeout: 30000 }).within(() => {
cy.get(".title").contains(appName).should("exist")
})
})

13
packages/builder/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "2.2.12-alpha.21",
"version": "2.2.12-alpha.44",
"license": "GPL-3.0",
"private": true,
"scripts": {
@ -71,11 +71,12 @@
}
},
"dependencies": {
"@budibase/bbui": "2.2.12-alpha.21",
"@budibase/client": "2.2.12-alpha.21",
"@budibase/frontend-core": "2.2.12-alpha.21",
"@budibase/string-templates": "2.2.12-alpha.21",
"@budibase/bbui": "2.2.12-alpha.44",
"@budibase/client": "2.2.12-alpha.44",
"@budibase/frontend-core": "2.2.12-alpha.44",
"@budibase/string-templates": "2.2.12-alpha.44",
"@sentry/browser": "5.19.1",
"@spectrum-css/accordion": "^3.0.24",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",
"codemirror": "^5.59.0",
@ -87,7 +88,7 @@
"shortid": "2.2.15",
"svelte-dnd-action": "^0.9.8",
"svelte-loading-spinners": "^0.1.1",
"svelte-portal": "0.1.0",
"svelte-portal": "1.0.0",
"uuid": "8.3.1",
"yup": "0.29.2"
},

3
packages/builder/src/App.svelte
View file

@ -11,11 +11,8 @@
<div class="banner-container" />
<BannerDisplay />
<NotificationDisplay />
<LicensingOverlays />
<Router {routes} config={{ queryHandler }} />
<div class="modal-container" />
<HelpIcon />

1
packages/builder/src/builderStore/dataBinding.js
View file

@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
providerId,
// Table ID is used by JSON fields to know what table the field is in
tableId: table?._id,
component: component._component,
category: component._instanceName,
icon: def.icon,
display: {

1
packages/builder/src/components/backend/DataTable/Table.svelte
View file

@ -25,7 +25,6 @@
export let loading = false
export let hideAutocolumns
export let rowCount
export let type
export let disableSorting = false
export let customPlaceholder = false

6
packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
View file

@ -20,7 +20,8 @@
$isActive,
$tables,
$queries,
$views
$views,
openDataSources
)
$: openDataSource = enrichedDataSources.find(x => x.open)
$: {
@ -36,7 +37,8 @@
isActive,
tables,
queries,
views
views,
openDataSources
) => {
if (!datasources?.list?.length) {
return []

35
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View file

@ -6,6 +6,7 @@
Toggle,
Button,
TextArea,
Accordion,
} from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { capitalise } from "helpers"
@ -51,15 +52,24 @@
let addButton
function getDisplayName(key) {
function getDisplayName(key, fieldKey) {
let name
if (schema[key]?.display) {
if (fieldKey && schema[key]["fields"][fieldKey]?.display) {
name = schema[key]["fields"][fieldKey].display
} else if (fieldKey) {
name = fieldKey
} else if (schema[key]?.display) {
name = schema[key].display
} else {
name = key
}
return capitalise(name)
}
function getFieldGroupKeys(fieldGroup) {
return Object.entries(schema[fieldGroup].fields || {})
.filter(el => filter(el))
.map(([key]) => key)
}
</script>
<form>
@ -100,6 +110,27 @@
error={$validation.errors[configKey]}
/>
</div>
{:else if schema[configKey].type === "fieldGroup"}
<Accordion
itemName={configKey}
initialOpen={getFieldGroupKeys(configKey).some(
fieldKey => !!config[fieldKey]
)}
header={getDisplayName(configKey)}
>
<Layout gap="S">
{#each getFieldGroupKeys(configKey) as fieldKey}
<div class="form-row">
<Label>{getDisplayName(configKey, fieldKey)}</Label>
<Input
type={schema[configKey]["fields"][fieldKey]?.type}
on:change
bind:value={config[fieldKey]}
/>
</div>
{/each}
</Layout>
</Accordion>
{:else}
<div class="form-row">
<Label>{getDisplayName(configKey)}</Label>

452
packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
View file

@ -10,7 +10,6 @@
} from "@budibase/bbui"
import { tables } from "stores/backend"
import { Helpers } from "@budibase/bbui"
import { writable } from "svelte/store"
export let save
export let datasource
@ -18,41 +17,97 @@
export let fromRelationship = {}
export let toRelationship = {}
export let close
export let selectedFromTable
let originalFromName = fromRelationship.name,
originalToName = toRelationship.name
let fromTable, toTable, through, linkTable, tableOptions
let isManyToMany, isManyToOne, relationshipTypes
let errors, valid
let currentTables = {}
const colNotSet = "Please specify a column name"
const relationshipAlreadyExists =
"A relationship between these tables already exists."
const relationshipTypes = [
{
label: "One to Many",
value: RelationshipTypes.MANY_TO_ONE,
},
{
label: "Many to Many",
value: RelationshipTypes.MANY_TO_MANY,
},
]
if (fromRelationship && !fromRelationship.relationshipType) {
fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
}
let originalFromColumnName = toRelationship.name,
originalToColumnName = fromRelationship.name
let originalFromTable = plusTables.find(
table => table._id === toRelationship?.tableId
)
let originalToTable = plusTables.find(
table => table._id === fromRelationship?.tableId
)
if (toRelationship && selectedFromTable) {
toRelationship.tableId = selectedFromTable._id
}
let tableOptions
let errors = {}
let hasClickedSave = !!fromRelationship.relationshipType
let fromPrimary,
fromForeign,
fromTable,
toTable,
throughTable,
fromColumn,
toColumn
let fromId, toId, throughId, throughToKey, throughFromKey
let isManyToMany, isManyToOne, relationshipType
function inSchema(table, prop, ogName) {
if (!table || !prop || prop === ogName) {
return false
$: {
if (!fromPrimary) {
fromPrimary = fromRelationship.foreignKey
fromForeign = toRelationship.foreignKey
}
if (!fromColumn && !errors.fromColumn) {
fromColumn = toRelationship.name
}
if (!toColumn && !errors.toColumn) {
toColumn = fromRelationship.name
}
if (!fromId) {
fromId = toRelationship.tableId
}
if (!toId) {
toId = fromRelationship.tableId
}
if (!throughId) {
throughId = fromRelationship.through
throughFromKey = fromRelationship.throughFrom
throughToKey = fromRelationship.throughTo
}
if (!relationshipType) {
relationshipType = fromRelationship.relationshipType
}
const keys = Object.keys(table.schema).map(key => key.toLowerCase())
return keys.indexOf(prop.toLowerCase()) !== -1
}
const touched = writable({})
$: tableOptions = plusTables.map(table => ({
label: table.name,
value: table._id,
}))
$: valid = getErrorCount(errors) === 0 || !hasClickedSave
function invalidThroughTable({ through, throughTo, throughFrom }) {
$: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY
$: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE
$: fromTable = plusTables.find(table => table._id === fromId)
$: toTable = plusTables.find(table => table._id === toId)
$: throughTable = plusTables.find(table => table._id === throughId)
$: toRelationship.relationshipType = fromRelationship?.relationshipType
const getErrorCount = errors =>
Object.entries(errors)
.filter(entry => !!entry[1])
.map(entry => entry[0]).length
function invalidThroughTable() {
// need to know the foreign key columns to check error
if (!through || !throughTo || !throughFrom) {
if (!throughId || !throughToKey || !throughFromKey) {
return false
}
const throughTable = plusTables.find(tbl => tbl._id === through)
const otherColumns = Object.values(throughTable.schema).filter(
col => col.name !== throughFrom && col.name !== throughTo
const throughTbl = plusTables.find(tbl => tbl._id === throughId)
const otherColumns = Object.values(throughTbl.schema).filter(
col => col.name !== throughFromKey && col.name !== throughToKey
)
for (let col of otherColumns) {
if (col.constraints?.presence && !col.autocolumn) {
@ -62,142 +117,138 @@
return false
}
function checkForErrors(fromRelate, toRelate) {
const isMany =
fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY
function validate() {
const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY
const tableNotSet = "Please specify a table"
const foreignKeyNotSet = "Please pick a foreign key"
const errObj = {}
if ($touched.from && !fromTable) {
errObj.from = tableNotSet
if (!relationshipType) {
errObj.relationshipType = "Please specify a relationship type"
}
if ($touched.to && !toTable) {
errObj.to = tableNotSet
if (!fromTable) {
errObj.fromTable = tableNotSet
}
if ($touched.through && isMany && !fromRelate.through) {
errObj.through = tableNotSet
if (!toTable) {
errObj.toTable = tableNotSet
}
if ($touched.through && invalidThroughTable(fromRelate)) {
errObj.through =
"Ensure all columns in table are nullable or auto generated"
if (isMany && !throughTable) {
errObj.throughTable = tableNotSet
}
if ($touched.foreign && !isMany && !fromRelate.fieldName) {
errObj.foreign = "Please pick the foreign key"
if (isMany && !throughFromKey) {
errObj.throughFromKey = foreignKeyNotSet
}
const colNotSet = "Please specify a column name"
if ($touched.fromCol && !fromRelate.name) {
errObj.fromCol = colNotSet
if (isMany && !throughToKey) {
errObj.throughToKey = foreignKeyNotSet
}
if ($touched.toCol && !toRelate.name) {
errObj.toCol = colNotSet
if (invalidThroughTable()) {
errObj.throughTable =
"Ensure non-key columns are nullable or auto-generated"
}
if ($touched.primary && !fromPrimary) {
errObj.primary = "Please pick the primary key"
if (!isMany && !fromForeign) {
errObj.fromForeign = foreignKeyNotSet
}
if (!fromColumn) {
errObj.fromColumn = colNotSet
}
if (!toColumn) {
errObj.toColumn = colNotSet
}
if (!isMany && !fromPrimary) {
errObj.fromPrimary = "Please pick the primary key"
}
if (isMany && relationshipExists()) {
errObj.fromTable = relationshipAlreadyExists
errObj.toTable = relationshipAlreadyExists
}
// currently don't support relationships back onto the table itself, needs to relate out
const tableError = "From/to/through tables must be different"
if (fromTable && (fromTable === toTable || fromTable === through)) {
errObj.from = tableError
if (fromTable && (fromTable === toTable || fromTable === throughTable)) {
errObj.fromTable = tableError
}
if (toTable && (toTable === fromTable || toTable === through)) {
errObj.to = tableError
if (toTable && (toTable === fromTable || toTable === throughTable)) {
errObj.toTable = tableError
}
if (through && (through === fromTable || through === toTable)) {
errObj.through = tableError
if (
throughTable &&
(throughTable === fromTable || throughTable === toTable)
) {
errObj.throughTable = tableError
}
const colError = "Column name cannot be an existing column"
if (inSchema(fromTable, fromRelate.name, originalFromName)) {
errObj.fromCol = colError
if (isColumnNameBeingUsed(toTable, fromColumn, originalFromColumnName)) {
errObj.fromColumn = colError
}
if (inSchema(toTable, toRelate.name, originalToName)) {
errObj.toCol = colError
if (isColumnNameBeingUsed(fromTable, toColumn, originalToColumnName)) {
errObj.toColumn = colError
}
let fromType, toType
if (fromPrimary && fromRelate.fieldName) {
if (fromPrimary && fromForeign) {
fromType = fromTable?.schema[fromPrimary]?.type
toType = toTable?.schema[fromRelate.fieldName]?.type
toType = toTable?.schema[fromForeign]?.type
}
if (fromType && toType && fromType !== toType) {
errObj.foreign =
errObj.fromForeign =
"Column type of the foreign key must match the primary key"
}
errors = errObj
return getErrorCount(errors) === 0
}
let fromPrimary
$: {
if (!fromPrimary && fromTable) {
fromPrimary = fromTable.primary[0]
}
}
$: isManyToMany =
fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY
$: isManyToOne =
fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE
$: tableOptions = plusTables.map(table => ({
label: table.name,
value: table._id,
}))
$: fromTable = plusTables.find(table => table._id === toRelationship?.tableId)
$: toTable = plusTables.find(table => table._id === fromRelationship?.tableId)
$: through = plusTables.find(table => table._id === fromRelationship?.through)
$: checkForErrors(fromRelationship, toRelationship)
$: valid =
Object.keys(errors).length === 0 && Object.keys($touched).length !== 0
$: linkTable = through || toTable
$: relationshipTypes = [
{
label: "Many",
value: RelationshipTypes.MANY_TO_MANY,
},
{
label: "One",
value: RelationshipTypes.MANY_TO_ONE,
},
]
$: updateRelationshipType(fromRelationship?.relationshipType)
$: tableChanged(fromTable, toTable)
function updateRelationshipType(fromType) {
if (fromType === RelationshipTypes.MANY_TO_MANY) {
toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY
} else {
toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
function isColumnNameBeingUsed(table, columnName, originalName) {
if (!table || !columnName || columnName === originalName) {
return false
}
const keys = Object.keys(table.schema).map(key => key.toLowerCase())
return keys.indexOf(columnName.toLowerCase()) !== -1
}
function buildRelationships() {
// if any to many only need to check from
const manyToMany =
fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
// main is simply used to know this is the side the user configured it from
const id = Helpers.uuid()
if (!manyToMany) {
delete fromRelationship.through
delete toRelationship.through
}
//Map temporary variables
let relateFrom = {
...fromRelationship,
tableId: toId,
name: toColumn,
relationshipType,
fieldName: fromForeign,
through: throughId,
throughFrom: throughFromKey,
throughTo: throughToKey,
type: "link",
main: true,
_id: id,
}
let relateTo = {
let relateTo = (toRelationship = {
...toRelationship,
tableId: fromId,
name: fromColumn,
through: throughId,
type: "link",
_id: id,
})
// if any to many only need to check from
const manyToMany =
relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY
if (!manyToMany) {
delete relateFrom.through
delete relateTo.through
}
// [0] is because we don't support composite keys for relationships right now
if (manyToMany) {
relateFrom = {
...relateFrom,
through: through._id,
through: throughTable._id,
fieldName: toTable.primary[0],
}
relateTo = {
...relateTo,
through: through._id,
through: throughTable._id,
fieldName: fromTable.primary[0],
throughFrom: relateFrom.throughTo,
throughTo: relateFrom.throughFrom,
@ -226,9 +277,56 @@
toRelationship = relateTo
}
// save the relationship on to the datasource
function relationshipExists() {
if (
originalFromTable &&
originalToTable &&
originalFromTable === fromTable &&
originalToTable === toTable
) {
return false
}
let fromThroughLinks = Object.values(
datasource.entities[fromTable.name].schema
).filter(value => value.through)
let toThroughLinks = Object.values(
datasource.entities[toTable.name].schema
).filter(value => value.through)
const matchAgainstUserInput = (fromTableId, toTableId) =>
(fromTableId === fromId && toTableId === toId) ||
(fromTableId === toId && toTableId === fromId)
return !!fromThroughLinks.find(from =>
toThroughLinks.find(
to =>
from.through === to.through &&
matchAgainstUserInput(from.tableId, to.tableId)
)
)
}
function removeExistingRelationship() {
if (originalFromTable && originalFromColumnName) {
delete datasource.entities[originalFromTable.name].schema[
originalToColumnName
]
}
if (originalToTable && originalToColumnName) {
delete datasource.entities[originalToTable.name].schema[
originalFromColumnName
]
}
}
async function saveRelationship() {
hasClickedSave = true
if (!validate()) {
return false
}
buildRelationships()
removeExistingRelationship()
// source of relationship
datasource.entities[fromTable.name].schema[fromRelationship.name] =
fromRelationship
@ -236,43 +334,14 @@
datasource.entities[toTable.name].schema[toRelationship.name] =
toRelationship
// If relationship has been renamed
if (originalFromName !== fromRelationship.name) {
delete datasource.entities[fromTable.name].schema[originalFromName]
}
if (originalToName !== toRelationship.name) {
delete datasource.entities[toTable.name].schema[originalToName]
}
// store the original names so it won't cause an error
originalToName = toRelationship.name
originalFromName = fromRelationship.name
await save()
}
async function deleteRelationship() {
delete datasource.entities[fromTable.name].schema[fromRelationship.name]
delete datasource.entities[toTable.name].schema[toRelationship.name]
removeExistingRelationship()
await save()
await tables.fetch()
close()
}
function tableChanged(fromTbl, toTbl) {
if (
(currentTables?.from?._id === fromTbl?._id &&
currentTables?.to?._id === toTbl?._id) ||
originalFromName ||
originalToName
) {
return
}
fromRelationship.name = toTbl?.name || ""
errors.fromCol = ""
toRelationship.name = fromTbl?.name || ""
errors.toCol = ""
currentTables = { from: fromTbl, to: toTbl }
}
</script>
<ModalContent
@ -284,7 +353,9 @@
<Select
label="Relationship type"
options={relationshipTypes}
bind:value={fromRelationship.relationshipType}
bind:value={relationshipType}
bind:error={errors.relationshipType}
on:change={() => (errors.relationshipType = null)}
/>
<div class="headings">
<Detail>Tables</Detail>
@ -292,58 +363,89 @@
<Select
label="Select from table"
options={tableOptions}
disabled={!!selectedFromTable}
on:change={() => ($touched.from = true)}
bind:error={errors.from}
bind:value={toRelationship.tableId}
bind:value={fromId}
bind:error={errors.fromTable}
on:change={e => {
fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
if (errors.fromTable === relationshipAlreadyExists) {
errors.toColumn = null
}
errors.fromTable = null
errors.fromColumn = null
errors.toTable = null
errors.throughTable = null
}}
/>
{#if isManyToOne && fromTable}
<Select
label={`Primary Key (${fromTable?.name})`}
options={Object.keys(fromTable?.schema)}
on:change={() => ($touched.primary = true)}
bind:error={errors.primary}
label={`Primary Key (${fromTable.name})`}
options={Object.keys(fromTable.schema)}
bind:value={fromPrimary}
bind:error={errors.fromPrimary}
on:change={() => (errors.fromPrimary = null)}
/>
{/if}
<Select
label={"Select to table"}
options={tableOptions}
on:change={() => ($touched.to = true)}
bind:error={errors.to}
bind:value={fromRelationship.tableId}
bind:value={toId}
bind:error={errors.toTable}
on:change={e => {
toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
if (errors.toTable === relationshipAlreadyExists) {
errors.fromColumn = null
}
errors.toTable = null
errors.toColumn = null
errors.fromTable = null
errors.throughTable = null
}}
/>
{#if isManyToMany}
<Select
label={"Through"}
options={tableOptions}
on:change={() => ($touched.through = true)}
bind:error={errors.through}
bind:value={fromRelationship.through}
bind:value={throughId}
bind:error={errors.throughTable}
on:change={() => {
errors.fromTable = null
errors.toTable = null
errors.throughTable = null
}}
/>
{#if fromTable && toTable && through}
{#if fromTable && toTable && throughTable}
<Select
label={`Foreign Key (${fromTable?.name})`}
options={Object.keys(through?.schema)}
on:change={() => ($touched.fromForeign = true)}
bind:error={errors.fromForeign}
bind:value={fromRelationship.throughTo}
options={Object.keys(throughTable?.schema)}
bind:value={throughToKey}
bind:error={errors.throughToKey}
on:change={e => {
if (throughFromKey === e.detail) {
throughFromKey = null
}
errors.throughToKey = null
}}
/>
<Select
label={`Foreign Key (${toTable?.name})`}
options={Object.keys(through?.schema)}
on:change={() => ($touched.toForeign = true)}
bind:error={errors.toForeign}
bind:value={fromRelationship.throughFrom}
options={Object.keys(throughTable?.schema)}
bind:value={throughFromKey}
bind:error={errors.throughFromKey}
on:change={e => {
if (throughToKey === e.detail) {
throughToKey = null
}
errors.throughFromKey = null
}}
/>
{/if}
{:else if isManyToOne && toTable}
<Select
label={`Foreign Key (${toTable?.name})`}
options={Object.keys(toTable?.schema)}
on:change={() => ($touched.foreign = true)}
bind:error={errors.foreign}
bind:value={fromRelationship.fieldName}
bind:value={fromForeign}
bind:error={errors.fromForeign}
on:change={() => (errors.fromForeign = null)}
/>
{/if}
<div class="headings">
@ -354,19 +456,21 @@
provide a name for these columns.
</Body>
<Input
on:blur={() => ($touched.fromCol = true)}
bind:error={errors.fromCol}
label="From table column"
bind:value={fromRelationship.name}
bind:value={fromColumn}
bind:error={errors.fromColumn}
on:change={e => {
errors.fromColumn = e.detail?.length > 0 ? null : colNotSet
}}
/>
<Input
on:blur={() => ($touched.toCol = true)}
bind:error={errors.toCol}
label="To table column"
bind:value={toRelationship.name}
bind:value={toColumn}
bind:error={errors.toColumn}
on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)}
/>
<div slot="footer">
{#if originalFromName != null}
{#if originalFromColumnName != null}
<Button warning text on:click={deleteRelationship}>Delete</Button>
{/if}
</div>

3
packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
View file

@ -14,7 +14,7 @@
export let rows = []
export let schema = {}
export let allValid = false
export let allValid = true
export let displayColumn = null
const typeOptions = [
@ -174,7 +174,6 @@
}
label {
font-family: var(--font-sans);
cursor: pointer;
font-weight: 600;
box-sizing: border-box;

4
packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
View file

@ -33,7 +33,7 @@
let autoColumns = getAutoColumnInformation()
let schema = {}
let rows = []
let allValid = false
let allValid = true
let displayColumn = null
function getAutoColumns() {
@ -99,7 +99,7 @@
title="Create Table"
confirmText="Create"
onConfirm={saveTable}
disabled={error || !name || !allValid}
disabled={error || !name || (rows.length && !allValid)}
>
<Input
data-cy="table-name-input"

147
packages/builder/src/components/common/AppLockModal.svelte
View file

@ -8,6 +8,7 @@
ProgressCircle,
Layout,
Body,
Icon,
} from "@budibase/bbui"
import { auth, apps } from "stores/portal"
import { processStringSync } from "@budibase/string-templates"
@ -56,85 +57,77 @@
}
</script>
<div class="lock-status">
{#if lockedBy}
<Button
quiet
secondary
icon="LockClosed"
{#if lockedBy}
<div class="lock-status">
<Icon
name="LockClosed"
hoverable
size={buttonSize}
on:click={() => {
on:click={e => {
e.stopPropagation()
appLockModal.show()
}}
>
<span class="lock-status-text">
{lockedByHeading}
</span>
</Button>
{/if}
</div>
{#key app}
<div>
<Modal bind:this={appLockModal}>
<ModalContent
title={lockedByHeading}
dataCy={"app-lock-modal"}
showConfirmButton={false}
showCancelButton={false}
>
<Layout noPadding>
<Body size="S">
Apps are locked to prevent work from being lost from overlapping
changes between your team.
</Body>
{#if lockedByYou && getExpiryDuration(app) > 0}
<span class="lock-expiry-body">
{processStringSync(
"This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
{
time: getExpiryDuration(app),
}
)}
</span>
{/if}
<div class="lock-modal-actions">
<ButtonGroup>
<Button
secondary
quiet={lockedBy && lockedByYou}
disabled={processing}
on:click={() => {
appLockModal.hide()
}}
>
<span class="cancel"
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
>
</Button>
{#if lockedByYou}
<Button
secondary
disabled={processing}
on:click={() => {
releaseLock()
appLockModal.hide()
}}
>
{#if processing}
<ProgressCircle overBackground={true} size="S" />
{:else}
<span class="unlock">Release Lock</span>
{/if}
</Button>
{/if}
</ButtonGroup>
</div>
</Layout>
</ModalContent>
</Modal>
/>
</div>
{/key}
{/if}
<Modal bind:this={appLockModal}>
<ModalContent
title={lockedByHeading}
dataCy={"app-lock-modal"}
showConfirmButton={false}
showCancelButton={false}
>
<Layout noPadding>
<Body size="S">
Apps are locked to prevent work being lost from overlapping changes
between your team.
</Body>
{#if lockedByYou && getExpiryDuration(app) > 0}
<span class="lock-expiry-body">
{processStringSync(
"This lock will expire in {{ duration time 'millisecond' }} from now.",
{
time: getExpiryDuration(app),
}
)}
</span>
{/if}
<div class="lock-modal-actions">
<ButtonGroup>
<Button
secondary
quiet={lockedBy && lockedByYou}
disabled={processing}
on:click={() => {
appLockModal.hide()
}}
>
<span class="cancel"
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
>
</Button>
{#if lockedByYou}
<Button
cta
disabled={processing}
on:click={() => {
releaseLock()
appLockModal.hide()
}}
>
{#if processing}
<ProgressCircle overBackground={true} size="S" />
{:else}
<span class="unlock">Release Lock</span>
{/if}
</Button>
{/if}
</ButtonGroup>
</div>
</Layout>
</ModalContent>
</Modal>
<style>
.lock-modal-actions {
@ -148,8 +141,4 @@
gap: var(--spacing-s);
max-width: 175px;
}
.lock-status-text {
font-weight: 400;
color: var(--spectrum-global-color-gray-800);
}
</style>

2
packages/builder/src/components/common/CodeMirrorEditor.svelte
View file

@ -135,7 +135,7 @@
div :global(.CodeMirror) {
height: var(--code-mirror-height);
min-height: var(--code-mirror-height);
font-family: monospace;
font-family: var(--font-mono);
line-height: 1.3;
border: var(--spectrum-alias-border-size-thin) solid;
border-color: var(--spectrum-alias-border-color);

64
packages/builder/src/components/common/ConfigChecklist.svelte
View file

@ -1,64 +0,0 @@
<script>
import {
ActionMenu,
Checkbox,
MenuItem,
Heading,
ProgressCircle,
} from "@budibase/bbui"
import { admin } from "stores/portal"
import { goto } from "@roxi/routify"
import { onMount } from "svelte"
let width = window.innerWidth
$: side = width < 500 ? "right" : "left"
const resizeObserver = new ResizeObserver(entries => {
if (entries?.[0]) {
width = entries[0].contentRect?.width
}
})
onMount(() => {
const doc = document.documentElement
resizeObserver.observe(doc)
return () => {
resizeObserver.unobserve(doc)
}
})
</script>
<ActionMenu align={side}>
<div slot="control" class="icon">
<ProgressCircle size="S" value={$admin.onboardingProgress} />
</div>
<MenuItem disabled>
<header class="item">
<Heading size="XXS">Get Started Checklist</Heading>
<ProgressCircle size="S" value={$admin.onboardingProgress} />
</header>
</MenuItem>
{#each Object.keys($admin.checklist) as checklistItem, idx}
<MenuItem>
<div
class="item"
on:click={() => $goto($admin.checklist[checklistItem].link)}
>
<span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
<Checkbox value={$admin.checklist[checklistItem].checked} />
</div>
</MenuItem>
{/each}
</ActionMenu>
<style>
.item {
display: grid;
align-items: center;
grid-template-columns: 175px 20px;
}
.icon {
cursor: pointer;
}
</style>

51
packages/builder/src/components/common/EditableIcon.svelte
View file

@ -1,47 +1,46 @@
<script>
import { Icon } from "@budibase/bbui"
import { Icon, Modal } from "@budibase/bbui"
import ChooseIconModal from "components/start/ChooseIconModal.svelte"
export let name
export let size
export let size = "M"
export let app
export let color
export let autoSave = false
let iconModal
let modal
</script>
<div class="editable-icon">
<div
class="edit-hover"
on:click={() => {
iconModal.show()
}}
>
<Icon name={"Edit"} size={"L"} />
<div class="hover" on:click={modal.show}>
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
</div>
<div class="app-icon">
<Icon {name} {size} />
<div class="normal">
<Icon {name} {size} {color} />
</div>
</div>
<ChooseIconModal {app} bind:this={iconModal} />
<Modal bind:this={modal}>
<ChooseIconModal {name} {color} {app} {autoSave} on:change />
</Modal>
<style>
.editable-icon:hover .app-icon {
opacity: 0;
}
.editable-icon {
position: relative;
display: flex;
justify-content: flex-start;
}
.editable-icon:hover .edit-hover {
opacity: 1;
.normal {
display: block;
}
.edit-hover {
color: var(--spectrum-global-color-gray-600);
.hover {
display: none;
cursor: pointer;
z-index: 100;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
/* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
}
.editable-icon:hover .normal {
display: none;
}
.editable-icon:hover .hover {
display: block;
}
</style>

1
packages/builder/src/components/common/HelpIcon.svelte
View file

@ -31,6 +31,7 @@
bottom: var(--spacing-m);
right: var(--spacing-m);
border-radius: 55%;
z-index: 99999;
}
.hidden {
display: none;

43
packages/builder/src/components/common/RoleSelect.svelte
View file

@ -2,6 +2,7 @@
import { Select } from "@budibase/bbui"
import { roles } from "stores/backend"
import { Constants, RoleUtils } from "@budibase/frontend-core"
import { createEventDispatcher } from "svelte"
export let value
export let error
@ -9,26 +10,62 @@
export let autoWidth = false
export let quiet = false
export let allowPublic = true
export let allowRemove = false
$: options = getOptions($roles, allowPublic)
const dispatch = createEventDispatcher()
const RemoveID = "remove"
$: options = getOptions($roles, allowPublic, allowRemove)
const getOptions = (roles, allowPublic) => {
if (allowRemove) {
roles = [
...roles,
{
_id: RemoveID,
name: "Remove",
},
]
}
if (allowPublic) {
return roles
}
return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
}
const getColor = role => {
if (allowRemove && role._id === RemoveID) {
return null
}
return RoleUtils.getRoleColour(role._id)
}
const getIcon = role => {
if (allowRemove && role._id === RemoveID) {
return "Close"
}
return null
}
const onChange = e => {
if (allowRemove && e.detail === RemoveID) {
dispatch("remove")
} else {
dispatch("change", e.detail)
}
}
</script>
<Select
{autoWidth}
{quiet}
bind:value
on:change
on:change={onChange}
{options}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={role => RoleUtils.getRoleColour(role._id)}
getOptionColour={getColor}
getOptionIcon={getIcon}
{placeholder}
{error}
/>

190
packages/builder/src/components/common/TemplateDisplay.svelte
View file

@ -1,128 +1,110 @@
<script>
import {
Layout,
Detail,
Heading,
Button,
Modal,
ActionGroup,
ActionButton,
} from "@budibase/bbui"
import { Layout, Detail, Button, Modal } from "@budibase/bbui"
import TemplateCard from "components/common/TemplateCard.svelte"
import CreateAppModal from "components/start/CreateAppModal.svelte"
import { licensing } from "stores/portal"
import { Content, SideNav, SideNavItem } from "components/portal/page"
export let templates
let selectedTemplateCategory
let selectedCategory
let creationModal
let template
const groupTemplatesByCategory = (templates, categoryFilter) => {
let grouped = templates.reduce((acc, template) => {
if (
typeof categoryFilter === "string" &&
[categoryFilter].indexOf(template.category) < 0
) {
return acc
$: categories = getCategories(templates)
$: filteredCategories = getFilteredCategories(categories, selectedCategory)
const getCategories = templates => {
let categories = {}
templates?.forEach(template => {
if (!categories[template.category]) {
categories[template.category] = []
}
acc[template.category] = !acc[template.category]
? []
: acc[template.category]
acc[template.category].push(template)
return acc
}, {})
return grouped
categories[template.category].push(template)
})
categories = Object.entries(categories).map(
([category, categoryTemplates]) => {
return {
name: category,
templates: categoryTemplates,
}
}
)
categories.sort((a, b) => {
return a.name < b.name ? -1 : 1
})
return categories
}
$: filteredTemplates = groupTemplatesByCategory(
templates,
selectedTemplateCategory
)
$: filteredTemplateCategories = filteredTemplates
? Object.keys(filteredTemplates).sort()
: []
$: templateCategories = templates
? Object.keys(groupTemplatesByCategory(templates)).sort()
: []
const getFilteredCategories = (categories, selectedCategory) => {
if (!selectedCategory) {
return categories
}
return categories.filter(x => x.name === selectedCategory)
}
const stopAppCreation = () => {
template = null
}
</script>
<div class="template-header">
<Layout noPadding gap="S">
<Heading size="S">Templates</Heading>
<div class="template-category-filters spectrum-ActionGroup">
<ActionGroup>
<ActionButton
selected={!selectedTemplateCategory}
on:click={() => {
selectedTemplateCategory = null
}}
>
All
</ActionButton>
{#each templateCategories as templateCategoryKey}
<ActionButton
dataCy={templateCategoryKey}
selected={templateCategoryKey == selectedTemplateCategory}
on:click={() => {
selectedTemplateCategory = templateCategoryKey
}}
>
{templateCategoryKey}
</ActionButton>
{/each}
</ActionGroup>
</div>
</Layout>
</div>
<div class="template-categories">
<Layout gap="XL" noPadding>
{#each filteredTemplateCategories as templateCategoryKey}
<div class="template-category" data-cy={templateCategoryKey}>
<Detail size="M">{templateCategoryKey}</Detail>
<div class="template-grid">
{#each filteredTemplates[templateCategoryKey] as templateEntry}
<TemplateCard
name={templateEntry.name}
imageSrc={templateEntry.image}
backgroundColour={templateEntry.background}
icon={templateEntry.icon}
>
{#if !($licensing?.usageMetrics?.apps >= 100)}
<Button
cta
on:click={() => {
template = templateEntry
creationModal.show()
}}
>
Use template
</Button>
{/if}
<a
href={templateEntry.url}
target="_blank"
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
on:click|stopPropagation
<Content>
<div slot="side-nav">
<SideNav>
<SideNavItem
on:click={() => (selectedCategory = null)}
text="All"
active={selectedCategory == null}
/>
{#each categories as category}
<SideNavItem
on:click={() => (selectedCategory = category.name)}
text={category.name}
active={selectedCategory === category.name}
/>
{/each}
</SideNav>
</div>
<div class="template-categories">
<Layout gap="XL" noPadding>
{#each filteredCategories as category}
<div class="template-category" data-cy={category.name}>
<Detail size="M">{category.name}</Detail>
<div class="template-grid">
{#each category.templates as templateEntry}
<TemplateCard
name={templateEntry.name}
imageSrc={templateEntry.image}
backgroundColour={templateEntry.background}
icon={templateEntry.icon}
>
Details
</a>
</TemplateCard>
{/each}
{#if !($licensing?.usageMetrics?.apps >= 100)}
<Button
cta
on:click={() => {
template = templateEntry
creationModal.show()
}}
>
Use template
</Button>
{/if}
<a
href={templateEntry.url}
target="_blank"
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
on:click|stopPropagation
>
Details
</a>
</TemplateCard>
{/each}
</div>
</div>
</div>
{/each}
</Layout>
</div>
{/each}
</Layout>
</div>
</Content>
<Modal
bind:this={creationModal}

2
packages/builder/src/components/common/bindings/BindingPanel.svelte
View file

@ -469,7 +469,7 @@
}
.binding__type {
font-family: monospace;
font-family: var(--font-mono);
background-color: var(--spectrum-global-color-gray-200);
border-radius: var(--border-radius-s);
padding: 2px 4px;

2
packages/builder/src/components/common/inputs/CopyInput.svelte
View file

@ -12,7 +12,7 @@
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
notifications.success(`URL copied to clipboard`)
notifications.success(`Copied to clipboard`)
}
</script>

8
packages/builder/src/components/deploy/DeployModal.svelte
View file

@ -57,15 +57,13 @@
<Button cta on:click={publishModal.show}>Publish</Button>
<Modal bind:this={publishModal}>
<ModalContent
title="Publish to Production"
title="Publish to production"
confirmText="Publish"
onConfirm={publishApp}
dataCy={"deploy-app-modal"}
>
<span
>The changes you have made will be published to the production version of
the application.</span
>
The changes you have made will be published to the production version of the
application.
</ModalContent>
</Modal>

2
packages/builder/src/components/deploy/DeployNavigation.svelte
View file

@ -179,7 +179,7 @@
</ConfirmDialog>
<div class="buttons">
<Button on:click={previewApp} newStyles secondary>Preview</Button>
<Button on:click={previewApp} secondary>Preview</Button>
<DeployModal onOk={completePublish} />
</div>

3
packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
View file

@ -70,7 +70,10 @@
type: "provider",
}))
$: links = bindings
// Get only link bindings
.filter(x => x.fieldSchema?.type === "link")
// Filter out bindings provided by forms
.filter(x => !x.component?.endsWith("/form"))
.map(binding => {
const { providerId, readableBinding, fieldSchema } = binding || {}
const { name, tableId } = fieldSchema || {}

2
packages/builder/src/components/integration/QueryEditor.svelte
View file

@ -185,7 +185,7 @@
div :global(.CodeMirror) {
height: var(--code-mirror-height) !important;
border-radius: var(--border-radius-s);
font-family: monospace !important;
font-family: var(--font-mono);
line-height: 1.3;
}
</style>

106
packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
View file

@ -1,106 +0,0 @@
<script>
import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
import StatusRenderer from "./StatusRenderer.svelte"
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
import { goto } from "@roxi/routify"
import { automationStore } from "builderStore"
export let history
export let appId
export let close
const STOPPED_ERROR = "stopped_error"
$: exists = $automationStore.automations?.find(
auto => auto._id === history?.automationId
)
</script>
{#if history}
<div class="body">
<div class="top">
<div class="controls">
<StatusRenderer value={history.status} />
<ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
</div>
</div>
<Layout paddingY="XL" paddingX="XL" gap="S">
<div class="icon">
<Icon name="Clock" />
<DateTimeRenderer value={history.createdAt} />
</div>
<div class="icon">
<Icon name="JourneyVoyager" />
<div>{history.automationName}</div>
</div>
{#if history.status === STOPPED_ERROR}
<div class="cron-error">
<InlineAlert
type="error"
header="CRON automation disabled"
message="Fix the error and re-publish your app to re-activate."
/>
</div>
{/if}
<div>
{#if exists}
<ActionButton
icon="Edit"
fullWidth={false}
on:click={() =>
$goto(`../../../app/${appId}/automate/${history.automationId}`)}
>Edit automation</ActionButton
>
{/if}
</div>
</Layout>
<div class="bottom">
{#key history}
<TestDisplay testResults={history} width="100%" />
{/key}
</div>
</div>
{:else}
<div>No details found</div>
{/if}
<style>
.body {
right: 0;
background-color: var(--background);
border-left: var(--border-light);
width: 420px;
height: calc(100vh - 240px);
position: fixed;
overflow: auto;
}
.top {
padding: var(--spacing-m) 0 var(--spacing-m) 0;
border-bottom: var(--border-light);
}
.bottom {
border-top: var(--border-light);
padding-top: calc(var(--spacing-xl) * 2);
padding-bottom: calc(var(--spacing-xl) * 2);
}
.icon {
display: flex;
gap: var(--spacing-m);
}
.controls {
padding: 0 var(--spacing-l) 0 var(--spacing-l);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--spacing-s);
}
.cron-error {
display: flex;
width: 100%;
justify-content: center;
}
</style>

39
packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
View file

@ -1,39 +0,0 @@
<script>
import { Icon } from "@budibase/bbui"
export let value
$: isError = !value || value.toLowerCase() === "error"
$: isStoppedError = value?.toLowerCase() === "stopped_error"
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
$: status = getStatus(isError, isStopped)
function getStatus(error, stopped) {
if (error) {
return { color: "var(--red)", message: "Error", icon: "Alert" }
} else if (stopped) {
return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
} else {
return {
color: "var(--green)",
message: "Success",
icon: "CheckmarkCircle",
}
}
}
</script>
<div class="cell">
<Icon color={status.color} name={status.icon} />
<div style={`color: ${status.color};`}>
{status.message}
</div>
</div>
<style>
.cell {
display: flex;
flex-direction: row;
gap: var(--spacing-m);
align-items: center;
}
</style>

37
packages/builder/src/components/portal/page/Breadcrumb.svelte Normal file
View file

@ -0,0 +1,37 @@
<script>
import { Icon } from "@budibase/bbui"
export let url
export let text
</script>
<div>
<a href={url}>
{text}
</a>
<Icon name="ChevronRight" />
</div>
<style>
div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: var(--spectrum-global-color-gray-700);
gap: var(--spacing-m);
font-size: 16px;
font-weight: 600;
}
div :global(.spectrum-Icon),
a {
color: inherit;
transition: color 130ms ease-out;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
a:hover {
color: var(--spectrum-global-color-gray-900);
}
</style>

22
packages/builder/src/components/portal/page/Breadcrumbs.svelte Normal file
View file

@ -0,0 +1,22 @@
<div>
<slot />
</div>
<style>
div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
div :global(> *:last-child .spectrum-Icon) {
display: none;
}
div :global(> *:last-child) {
color: var(--spectrum-global-color-gray-900);
flex: 1 1 auto;
width: 0;
}
</style>

46
packages/builder/src/components/portal/page/Content.svelte Normal file
View file

@ -0,0 +1,46 @@
<script>
export let narrow = false
export let showMobileNav = false
</script>
<div class="content">
<div class="side-nav" class:show-mobile={showMobileNav}>
<slot name="side-nav" />
</div>
<div class="main" class:narrow>
<slot />
</div>
</div>
<style>
.content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 40px;
}
.side-nav {
flex: 0 0 200px;
}
.main {
flex: 1 1 auto;
}
.main.narrow {
max-width: 600px;
}
@media (max-width: 640px) {
.content {
flex-direction: column;
}
.side-nav:not(.show-mobile) {
display: none;
}
.side-nav.show-mobile :global(.side-nav) {
border-bottom: var(--border-light);
margin: 0 -24px;
padding: 0 24px 32px 24px;
}
}
</style>

52
packages/builder/src/components/portal/page/Header.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
import { Heading } from "@budibase/bbui"
export let title
export let wrap = true
</script>
<div class="header" class:wrap>
<slot name="icon" />
<Heading size="L">{title}</Heading>
<div class="buttons">
<slot name="buttons" />
</div>
</div>
<style>
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xl);
}
.header.wrap {
flex-wrap: wrap;
}
.header :global(.spectrum-Heading) {
flex: 1 1 auto;
margin-top: -2px;
}
.header:not(.wrap) :global(.spectrum-Heading) {
overflow: hidden;
width: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xl);
}
.buttons :global(> div) {
display: contents;
}
@media (max-width: 640px) {
.wrap .buttons {
margin-bottom: var(--spacing-m);
}
}
</style>

26
packages/builder/src/components/portal/page/SideNav.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let title
</script>
<div class="side-nav">
{#if title}
<div class="title">{title}</div>
{/if}
<slot />
</div>
<style>
.side-nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 4px;
}
.title {
margin-left: var(--spacing-m);
font-size: 12px;
color: var(--spectrum-global-color-gray-700);
margin-bottom: var(--spacing-m);
}
</style>

23
packages/builder/src/components/portal/page/SideNavItem.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
export let text
export let url
export let active = false
</script>
<a on:click href={url} class:active>
{text || ""}
</a>
<style>
a {
padding: var(--spacing-s) var(--spacing-m);
color: var(--spectrum-global-color-gray-900);
border-radius: 4px;
transition: background 130ms ease-out;
}
.active,
a:hover {
background-color: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
</style>

6
packages/builder/src/components/portal/page/index.js Normal file
View file

@ -0,0 +1,6 @@
export { default as Breadcrumb } from "./Breadcrumb.svelte"
export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
export { default as Header } from "./Header.svelte"
export { default as Content } from "./Content.svelte"
export { default as SideNavItem } from "./SideNavItem.svelte"
export { default as SideNav } from "./SideNav.svelte"

19
packages/builder/src/components/settings/UpdateAPIKeyModal.svelte → packages/builder/src/components/settings/APIKeyModal.svelte
View file

@ -1,5 +1,6 @@
<script>
import { ModalContent, Body, notifications } from "@budibase/bbui"
import { ModalContent } from "@budibase/bbui"
import { Body, notifications } from "@budibase/bbui"
import { auth } from "stores/portal"
import { onMount } from "svelte"
import CopyInput from "components/common/inputs/CopyInput.svelte"
@ -27,15 +28,13 @@
</script>
<ModalContent
title="Developer information"
showConfirmButton={false}
showSecondaryButton={true}
secondaryButtonText="Re-generate key"
title="API Key"
showSecondaryButton
secondaryButtonText="Regenerate key"
secondaryAction={generateAPIKey}
showCancelButton={false}
confirmText="Close"
>
<Body size="S">
You can find information about your developer account here, such as the API
key used to access the Budibase API.
</Body>
<CopyInput bind:value={apiKey} label="API key" />
<Body size="S">Your API key for accessing the Budibase public API:</Body>
<CopyInput bind:value={apiKey} />
</ModalContent>

6
packages/builder/src/components/settings/UpdateUserInfoModal.svelte → packages/builder/src/components/settings/ProfileModal.svelte
View file

@ -18,11 +18,7 @@
}
</script>
<ModalContent
title="Update user information"
confirmText="Update information"
onConfirm={updateInfo}
>
<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
<Body size="S">
Personalise the platform by adding your first name and last name.
</Body>

16
packages/builder/src/components/settings/ThemeModal.svelte Normal file
View file

@ -0,0 +1,16 @@
<script>
import { ModalContent } from "@budibase/bbui"
import { Select } from "@budibase/bbui"
import { themeStore } from "builderStore"
import { Constants } from "@budibase/frontend-core"
</script>
<ModalContent title="Theme">
<Select
options={Constants.Themes}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.class}
/>
</ModalContent>

180
packages/builder/src/components/start/AppRow.svelte
View file

@ -1,85 +1,126 @@
<script>
import { Heading, Button, Icon } from "@budibase/bbui"
import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
import AppLockModal from "../common/AppLockModal.svelte"
import { processStringSync } from "@budibase/string-templates"
import { goto } from "@roxi/routify"
export let app
export let editApp
export let appOverview
const handleDefaultClick = () => {
if (window.innerWidth < 640) {
goToOverview()
} else {
goToBuilder()
}
}
const goToBuilder = () => {
if (app.lockedOther) {
notifications.error(
`App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
)
return
}
$goto(`../../app/${app.devId}`)
}
const goToOverview = () => {
$goto(`../overview/${app.devId}`)
}
</script>
<div class="title" data-cy={`${app.devId}`}>
<div>
<div class="app-icon" style="color: {app.icon?.color || ''}">
<Icon size="XL" name={app.icon?.name || "Apps"} />
<div class="app-row" on:click={handleDefaultClick}>
<div class="title" data-cy={`${app.devId}`}>
<div class="app-icon">
<Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
</div>
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
<Heading size="XS">
<div class="name" data-cy="app-name-link">
<Heading size="S">
{app.name}
</Heading>
</div>
</div>
</div>
<div class="desktop">
{#if app.updatedAt}
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
})}
{:else}
Never updated
{/if}
</div>
<div class="desktop">
<span><AppLockModal {app} buttonSize="M" /></span>
</div>
<div class="desktop">
<div class="app-status">
{#if app.deployed}
<Icon name="Globe" disabled={false} />
Published
<div class="updated">
{#if app.updatedAt}
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
})}
{:else}
<Icon name="GlobeStrike" disabled={true} />
<span class="disabled"> Unpublished </span>
Never updated
{/if}
</div>
</div>
<div data-cy={`row_actions_${app.appId}`}>
<div class="app-row-actions">
<Button size="S" secondary newStyles on:click={() => appOverview(app)}>
Manage
</Button>
<Button
size="S"
primary
newStyles
disabled={app.lockedOther}
on:click={() => editApp(app)}
>
<div class="title app-status" class:deployed={app.deployed}>
<Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
<Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
</div>
<div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
<AppLockModal {app} buttonSize="M" />
<Button size="S" secondary on:click={goToOverview}>Manage</Button>
<Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
Edit
</Button>
</div>
</div>
<style>
div.title,
div.title > div {
display: flex;
max-width: 100%;
.app-row {
background: var(--background);
padding: 24px 32px;
border-radius: 8px;
display: grid;
grid-template-columns: 35% 25% 15% auto;
align-items: center;
gap: var(--spacing-m);
transition: border 130ms ease-out;
border: 1px solid transparent;
}
.app-row:hover {
cursor: pointer;
border-color: var(--spectrum-global-color-gray-300);
}
.updated {
color: var(--spectrum-global-color-gray-700);
}
.title,
.name {
flex: 1 1 auto;
}
.name {
width: 0;
}
.title,
.app-status {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.title :global(.spectrum-Heading),
.title :global(.spectrum-Icon),
.title :global(.spectrum-Body) {
color: var(--spectrum-global-color-gray-900);
}
.app-status:not(.deployed) :global(.spectrum-Icon),
.app-status:not(.deployed) :global(.spectrum-Body) {
color: var(--spectrum-global-color-gray-600);
}
.app-row-actions {
grid-gap: var(--spacing-s);
gap: var(--spacing-m);
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.app-status {
display: grid;
grid-gap: var(--spacing-s);
grid-template-columns: 24px 100px;
}
.app-status span.disabled {
opacity: 0.3;
}
.name {
text-decoration: none;
overflow: hidden;
@ -88,17 +129,30 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: calc(1.5 * var(--spacing-xl));
}
.title :global(h1:hover) {
color: var(--spectrum-global-color-blue-600);
cursor: pointer;
transition: color 130ms ease;
}
@media (max-width: 1000px) {
.app-row {
grid-template-columns: 45% 30% auto;
}
.updated {
display: none;
}
}
@media (max-width: 800px) {
.app-row {
grid-template-columns: 1fr auto;
}
.app-status {
display: none;
}
}
@media (max-width: 640px) {
.desktop {
display: none !important;
.app-row {
padding: 20px;
}
.app-row-actions {
display: none;
}
}
</style>

92
packages/builder/src/components/start/ChooseIconModal.svelte
View file

@ -1,18 +1,20 @@
<script>
import {
ModalContent,
Modal,
Icon,
ColorPicker,
Label,
notifications,
} from "@budibase/bbui"
import { apps } from "stores/portal"
import { createEventDispatcher } from "svelte"
export let app
let modal
$: selectedIcon = app?.icon?.name || "Apps"
$: selectedColor = app?.icon?.color
export let name
export let color
export let autoSave = false
const dispatch = createEventDispatcher()
let iconsList = [
"Apps",
@ -40,30 +42,15 @@
"GraphBarHorizontal",
"Demographic",
]
export const show = () => {
modal.show()
}
export const hide = () => {
modal.hide()
}
const onCancel = () => {
selectedIcon = ""
selectedColor = ""
hide()
}
const changeColor = val => {
selectedColor = val
}
const save = async () => {
if (!autoSave) {
dispatch("change", { color, name })
return
}
try {
await apps.update(app.instance._id, {
icon: {
name: selectedIcon,
color: selectedColor,
},
icon: { name, color },
})
} catch (error) {
notifications.error("Error updating app")
@ -71,41 +58,32 @@
}
</script>
<Modal bind:this={modal} on:hide={onCancel}>
<ModalContent
title={"Edit Icon"}
confirmText={"Save"}
onConfirm={() => save()}
>
<div class="scrollable-icons">
<div class="title-spacing">
<Label>Select an icon</Label>
</div>
<div class="grid">
{#each iconsList as item}
<div
class="icon-item"
class:selected={item === selectedIcon}
on:click={() => (selectedIcon = item)}
>
<Icon name={item} />
</div>
{/each}
</div>
<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
<div class="scrollable-icons">
<div class="title-spacing">
<Label>Select an icon</Label>
</div>
<div class="color-selection">
<div>
<Label>Select a color</Label>
</div>
<div class="color-selection-item">
<ColorPicker
bind:value={selectedColor}
on:change={e => changeColor(e.detail)}
/>
</div>
<div class="grid">
{#each iconsList as item}
<div
class="icon-item"
class:selected={item === name}
on:click={() => (name = item)}
>
<Icon name={item} />
</div>
{/each}
</div>
</ModalContent>
</Modal>
</div>
<div class="color-selection">
<div>
<Label>Select a color</Label>
</div>
<div class="color-selection-item">
<ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
</div>
</div>
</ModalContent>
<style>
.scrollable-icons {

1
packages/builder/src/components/start/CreateAppModal.svelte
View file

@ -138,6 +138,7 @@
}
$goto(`/builder/app/${createdApp.instance._id}`)
// apps.load()
} catch (error) {
creating = false
console.error(error)

64
packages/builder/src/components/start/UpdateAppModal.svelte
View file

@ -1,22 +1,29 @@
<script>
import { writable, get as svelteGet } from "svelte/store"
import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
import {
notifications,
Input,
ModalContent,
Layout,
Label,
} from "@budibase/bbui"
import { apps } from "stores/portal"
import { onMount } from "svelte"
import { createValidationStore } from "helpers/validation/yup"
import * as appValidation from "helpers/validation/yup/app"
import EditableIcon from "../common/EditableIcon.svelte"
export let app
const values = writable({ name: "", url: null })
const validation = createValidationStore()
$: validation.check($values)
onMount(async () => {
$values.name = app.name
$values.url = app.url
setupValidation()
const values = writable({
name: app.name,
url: app.url,
iconName: app.icon?.name,
iconColor: app.icon?.color,
})
const validation = createValidationStore()
$: validation.check($values)
const setupValidation = async () => {
const applications = svelteGet(apps)
@ -28,14 +35,14 @@
async function updateApp() {
try {
// Update App
const body = {
name: $values.name.trim(),
}
if ($values.url) {
body.url = $values.url.trim()
}
await apps.update(app.instance._id, body)
await apps.update(app.instance._id, {
name: $values.name?.trim(),
url: $values.url?.trim(),
icon: {
name: $values.iconName,
color: $values.iconColor,
},
})
} catch (error) {
console.error(error)
notifications.error("Error updating app")
@ -68,15 +75,22 @@
let resolvedUrl = resolveAppUrl(null, appName)
tidyUrl(resolvedUrl)
}
const updateIcon = e => {
const { name, color } = e.detail
$values.iconColor = color
$values.iconName = name
}
onMount(setupValidation)
</script>
<ModalContent
title={"Edit app"}
confirmText={"Save"}
title="Edit name and URL"
confirmText="Save"
onConfirm={updateApp}
disabled={!$validation.valid}
>
<Body size="S">Update the name of your app.</Body>
<Input
bind:value={$values.name}
error={$validation.touched.name && $validation.errors.name}
@ -84,6 +98,16 @@
on:change={nameToUrl($values.name)}
label="Name"
/>
<Layout noPadding gap="XS">
<Label>Icon</Label>
<EditableIcon
{app}
size="XL"
name={$values.iconName}
color={$values.iconColor}
on:change={updateIcon}
/>
</Layout>
<Input
bind:value={$values.url}
error={$validation.touched.url && $validation.errors.url}

29
packages/builder/src/components/usage/Usage.svelte
View file

@ -39,15 +39,21 @@
{#if showWarning}
<Icon name="Alert" />
{/if}
<div class="heading header-item">
<Heading size="XS" weight="light">{usage.name}</Heading>
</div>
<Heading size="XS" weight="light">
<span class="nowrap">
{usage.name}
</span>
</Heading>
</div>
{#if unlimited}
<Body size="S">{usage.used} / Unlimited</Body>
{:else}
<Body size="S">{usage.used} / {usage.total}</Body>
{/if}
<Body size="S">
<span class="nowrap">
{#if unlimited}
{usage.used} / Unlimited
{:else}
{usage.used} / {usage.total}
{/if}
</span>
</Body>
</div>
<div>
{#if unlimited}
@ -89,13 +95,14 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
gap: var(--spacing-m);
}
.header-container {
display: flex;
}
.heading {
margin-top: 3px;
margin-left: 5px;
.nowrap {
white-space: nowrap;
}
</style>

2
packages/builder/src/components/usage/UsageDashCard.svelte
View file

@ -47,7 +47,7 @@
<div class="header-actions">
{#if secondaryDefined}
<div>
<Button newStyles secondary on:click={secondaryAction}
<Button secondary on:click={secondaryAction}
>{secondaryActionText}</Button
>
</div>

1
packages/builder/src/global.css
View file

@ -23,7 +23,6 @@ body {
--grey-8: var(--spectrum-global-color-gray-800);
--grey-9: var(--spectrum-global-color-gray-900);
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--background-alt);
}

20
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View file

@ -105,32 +105,34 @@
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}?tab=Access`)}
$goto(`../../portal/overview/${application}/access`)}
>
Access
</MenuItem>
<MenuItem
on:click={() =>
$goto(
`../../portal/overview/${application}?tab=${encodeURIComponent(
"Automation History"
)}`
)}
$goto(`../../portal/overview/${application}/automation-history`)}
>
Automation history
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}?tab=Backups`)}
$goto(`../../portal/overview/${application}/backups`)}
>
Backups
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}?tab=Settings`)}
$goto(`../../portal/overview/${application}/name-and-url`)}
>
Settings
Name and URL
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}/version`)}
>
Version
</MenuItem>
</ActionMenu>
<Heading size="XS">{$store.name || "App"}</Heading>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
View file

@ -176,7 +176,6 @@
const addComponent = async component => {
try {
await store.actions.components.create(component)
$goto("../")
} catch (error) {
notifications.error(error || "Error creating component")
}
@ -263,6 +262,7 @@
orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
on:focus
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
View file

@ -20,6 +20,7 @@
class="container"
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
on:focus
style="--color: {color};"
>
<StatusLight square {color} />

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
View file

@ -172,7 +172,7 @@
{bindings}
/>
{/each}
<Button secondary newStyles on:click={() => $goto("../components")}>
<Button secondary on:click={() => $goto("../components")}>
View components
</Button>
</Layout>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
View file

@ -17,7 +17,7 @@
<div class="container">
<Slider min={0} max={3} step={1} value={index} on:change={onChange} />
<div class="button" style="--radius: {customTheme.buttonBorderRadius};">
<Button primary newStyles>Button</Button>
<Button primary>Button</Button>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show more