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

moves NotificationDisplay to bbui and converts it to spectrum

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-09 12:02:53 +02:00
parent 0eb904062c
commit b68d677e27
47 changed files with 200 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -29,7 +29,7 @@
"clean": "lerna clean",
"kill-port": "kill-port 4001",
"dev": "yarn run kill-port && lerna link && lerna run --parallel dev:builder --concurrency 1",
"dev:noserver": "lerna link && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server",
"dev:noserver": "lerna link && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server",
"test": "lerna run test",
"lint": "eslint packages",
"lint:fix": "eslint --fix packages",
@ -38,5 +38,8 @@
"test:e2e:ci": "lerna run cy:ci",
"build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -",
"build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
},
"dependencies": {
"@spectrum-css/toast": "^3.0.1"
}
}

44
packages/bbui/src/Notification/NotificationDisplay.svelte Normal file
View file

@ -0,0 +1,44 @@
<script>
import "@spectrum-css/toast/dist/index-vars.css"
import Portal from "svelte-portal"
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
import { notifications } from '../Stores/notifications'
</script>
<Portal target=".modal-container">
<div class="notifications">
{#each $notifications as {type, icon, message, id} (id)}
<div animate:flip transition:fly={{ y: -30 }} class="spectrum-Toast spectrum-Toast--{type} notification-offset">
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<div class="spectrum-Toast-body">
<div class="spectrum-Toast-content">{message}</div>
</div>
</div>
{/each}
</div>
</Portal>
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
.notification-offset {
margin-bottom: 10px;
}
</style>

2
packages/bbui/src/Stores/Notifications.svench.svx
View file

@ -19,7 +19,7 @@ This custom can be used to display toast messages. It has 5 different methods: `
<View name="danger">
<button on:click={() => notifications.danger('This is a danger!')}>Danger</button>
<button on:click={() => notifications.error('This is a danger!')}>Danger</button>
</View>
<View name="warning">
<button on:click={() => notifications.warning('This is a warning!')}>Warning</button>

67
packages/bbui/src/Stores/notifications.js
View file

@ -1,40 +1,51 @@
import { writable, derived } from "svelte/store"
import { writable } from "svelte/store"
const NOTIFICATION_TIMEOUT = 3000
const createNotificationStore = () => {
const _notifications = writable([])
const send = (message, type = "default") => {
_notifications.update(state => {
return [...state, { id: id(), type, message }]
})
}
const notifications = derived(_notifications, ($_notifications, set) => {
set($_notifications)
if ($_notifications.length > 0) {
const timeout = setTimeout(() => {
_notifications.update(state => {
state.shift()
return state
})
set($_notifications)
}, NOTIFICATION_TIMEOUT)
return () => {
clearTimeout(timeout)
}
export const createNotificationStore = () => {
const timeoutIds = new Set()
const _notifications = writable([], () => {
return () => {
// clear all the timers
timeoutIds.forEach(timeoutId => {
clearTimeout(timeoutId)
})
_notifications.set([])
}
})
const { subscribe } = notifications
let block = false
const blockNotifications = (timeout = 1000) => {
block = true
setTimeout(() => (block = false), timeout)
}
const send = (message, type = "default", icon = "") => {
if (block) {
return
}
let _id = id()
_notifications.update(state => {
return [...state, { id: _id, type, message, icon }]
})
const timeoutId = setTimeout(() => {
_notifications.update(state => {
return state.filter(({ id }) => id !== _id)
})
}, NOTIFICATION_TIMEOUT)
timeoutIds.add(timeoutId)
}
const { subscribe } = _notifications
return {
subscribe,
send,
danger: msg => send(msg, "danger"),
warning: msg => send(msg, "warning"),
info: msg => send(msg, "info"),
success: msg => send(msg, "success"),
info: msg => send(msg, "info", "Info"),
error: msg => send(msg, "error", "Alert"),
warning: msg => send(msg, "warning", "Alert"),
success: msg => send(msg, "success", "CheckmarkCircle"),
blockNotifications,
}
}

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

@ -25,6 +25,7 @@ export { default as Label } from "./Styleguide/Label.svelte"
export { default as Close } from "./Button/Close.svelte"
export { default as Modal } from "./Modal/Modal.svelte"
export { default as ModalContent } from "./Modal/ModalContent.svelte"
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
export { default as Spacer } from "./Spacer/Spacer.svelte"
export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
export { default as Multiselect } from "./Form/Multiselect.svelte"
@ -37,4 +38,4 @@ export { default as positionDropdown } from "./Actions/position_dropdown"
export { default as clickOutside } from "./Actions/click_outside"
// Stores
export { notifications } from "./Stores/notifications"
export { notifications, createNotificationStore } from "./Stores/notifications"

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

@ -3,8 +3,8 @@
import { Router } from "@roxi/routify"
import { routes } from "../.routify/routes"
import { initialise } from "builderStore"
import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
import { NotificationDisplay } from "@budibase/bbui"
onMount(async () => {
await initialise()
})

4
packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
View file

@ -2,7 +2,7 @@
import { goto } from "@roxi/routify"
import { database } from "stores/backend"
import { automationStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Input, ModalContent } from "@budibase/bbui"
import analytics from "analytics"
@ -16,7 +16,7 @@
name,
instanceId,
})
notifier.success(`Automation ${name} created.`)
notifications.success(`Automation ${name} created.`)
$goto(`./${$automationStore.selectedAutomation.automation._id}`)
analytics.captureEvent("Automation Created", { name })
}

4
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View file

@ -2,7 +2,7 @@
import { goto } from "@roxi/routify"
import { automationStore } from "builderStore"
import { database } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -24,7 +24,7 @@
instanceId,
automation,
})
notifier.success("Automation deleted.")
notifications.success("Automation deleted.")
$goto("../automate")
}
</script>

12
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View file

@ -1,7 +1,7 @@
<script>
import { automationStore } from "builderStore"
import { database } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
import { Button, Modal } from "@budibase/bbui"
import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
@ -19,9 +19,9 @@
automation.live = live
automationStore.actions.save({ instanceId, automation })
if (live) {
notifier.info(`Automation ${automation.name} enabled.`)
notifications.info(`Automation ${automation.name} enabled.`)
} else {
notifier.danger(`Automation ${automation.name} disabled.`)
notifications.error(`Automation ${automation.name} disabled.`)
}
}
@ -30,9 +30,9 @@
automation: $automationStore.selectedAutomation.automation,
})
if (result.status === 200) {
notifier.success(`Automation ${automation.name} triggered successfully.`)
notifications.success(`Automation ${automation.name} triggered successfully.`)
} else {
notifier.danger(`Failed to trigger automation ${automation.name}.`)
notifications.error(`Failed to trigger automation ${automation.name}.`)
}
}
@ -41,7 +41,7 @@
instanceId,
automation,
})
notifier.success(`Automation ${automation.name} saved.`)
notifications.success(`Automation ${automation.name} saved.`)
}
</script>

4
packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
View file

@ -1,5 +1,5 @@
<script>
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Input } from "@budibase/bbui"
import { store, hostingStore } from "builderStore"
@ -24,7 +24,7 @@
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
notifier.success(`URL copied to clipboard`)
notifications.success(`URL copied to clipboard`)
}
</script>

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

@ -4,7 +4,7 @@
import AgGrid from "@budibase/svelte-ag-grid"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
import {
@ -142,7 +142,7 @@
type: "delete",
})
data = data.filter(row => !selectedRows.includes(row))
notifier.success(`Successfully deleted ${selectedRows.length} rows`)
notifications.success(`Successfully deleted ${selectedRows.length} rows`)
selectedRows = []
}
</script>

6
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -17,7 +17,7 @@
RelationshipTypes,
} from "constants/backend"
import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ValuesList from "components/common/ValuesList.svelte"
import DatePicker from "components/common/DatePicker.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -82,10 +82,10 @@
function deleteColumn() {
if (field.name === $tables.selected.primaryDisplay) {
notifier.danger("You cannot delete the display column")
notifications.error("You cannot delete the display column")
} else {
tables.deleteField(field)
notifier.success(`Column ${field.name} deleted.`)
notifications.success(`Column ${field.name} deleted.`)
onClosed()
}
}

4
packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
View file

@ -1,6 +1,6 @@
<script>
import { tables, rows } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import RowFieldControl from "../RowFieldControl.svelte"
import * as api from "../api"
import { ModalContent } from "@budibase/bbui"
@ -33,7 +33,7 @@
return false
}
notifier.success("Row saved successfully.")
notifications.success("Row saved successfully.")
rows.save(rowResponse)
}
</script>

4
packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
View file

@ -1,7 +1,7 @@
<script>
import { tables, rows } from "stores/backend"
import { roles } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import RowFieldControl from "../RowFieldControl.svelte"
import * as backendApi from "../api"
import { ModalContent, Select } from "@budibase/bbui"
@ -66,7 +66,7 @@
return false
}
notifier.success("User saved successfully.")
notifications.success("User saved successfully.")
rows.save(rowResponse)
}
</script>

4
packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
View file

@ -1,7 +1,7 @@
<script>
import { rows } from "stores/backend"
import * as api from "../api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let row
@ -14,7 +14,7 @@
async function deleteRow() {
await api.deleteRow(row)
notifier.success("Row deleted")
notifications.success("Row deleted")
rows.delete(row)
}
</script>

10
packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
View file

@ -2,7 +2,7 @@
import { ModalContent, Select, Input, Button } from "@budibase/bbui"
import { onMount } from "svelte"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ErrorsBox from "components/common/ErrorsBox.svelte"
import { roles } from "stores/backend"
@ -61,9 +61,9 @@
// Save/create the role
const response = await roles.save(selectedRole)
if (response.status === 200) {
notifier.success("Role saved successfully.")
notifications.success("Role saved successfully.")
} else {
notifier.danger("Error saving role.")
notifications.error("Error saving role.")
return false
}
}
@ -73,9 +73,9 @@
const response = await roles.delete(selectedRole)
if (response.status === 200) {
changeRole()
notifier.success("Role deleted successfully.")
notifications.success("Role deleted successfully.")
} else {
notifier.danger("Error deleting role.")
notifications.error("Error deleting role.")
}
}

4
packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
View file

@ -2,7 +2,7 @@
import { Button, Select } from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import analytics from "analytics"
const CALCULATIONS = [
@ -36,7 +36,7 @@
function saveView() {
views.save(view)
notifier.success(`View ${view.name} saved.`)
notifications.success(`View ${view.name} saved.`)
onClosed()
analytics.captureEvent("Added View Calculate", { field: view.field })
}

6
packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
View file

@ -3,7 +3,7 @@
import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import analytics from "analytics"
export let onClosed
@ -15,7 +15,7 @@
function saveView() {
if (views.includes(name)) {
notifier.danger(`View exists with name ${name}.`)
notifications.error(`View exists with name ${name}.`)
return
}
viewsStore.save({
@ -23,7 +23,7 @@
tableId: $tables.selected._id,
field,
})
notifier.success(`View ${name} created`)
notifications.success(`View ${name} created`)
onClosed()
analytics.captureEvent("View Created", { name })
$goto(`../../view/${name}`)

4
packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Input, Select, DatePicker } from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import analytics from "analytics"
const CONDITIONS = [
@ -54,7 +54,7 @@
function saveView() {
views.save(view)
notifier.success(`View ${view.name} saved.`)
notifications.success(`View ${view.name} saved.`)
onClosed()
analytics.captureEvent("Added View Filter", {
filters: JSON.stringify(view.filters),

4
packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Select } from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
export let view = {}
@ -16,7 +16,7 @@
function saveView() {
views.save(view)
notifier.success(`View ${view.name} saved.`)
notifications.success(`View ${view.name} saved.`)
onClosed()
}
</script>

4
packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
View file

@ -1,6 +1,6 @@
<script>
import { roles, permissions as permissionsStore } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
export let resourceId
@ -16,7 +16,7 @@
// Show updated permissions in UI: REMOVE
permissions = await permissionsStore.forResource(resourceId)
notifier.success("Updated permissions.")
notifications.success("Updated permissions.")
// TODO: update permissions
// permissions[]
}

4
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View file

@ -1,7 +1,7 @@
<script>
import { goto } from "@roxi/routify"
import { datasources } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Input, Label, ModalContent } from "@budibase/bbui"
import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
import analytics from "analytics"
@ -31,7 +31,7 @@
source: type,
config,
})
notifier.success(`Datasource ${name} created successfully.`)
notifications.success(`Datasource ${name} created successfully.`)
analytics.captureEvent("Datasource Created", { name })
// Navigate to new datasource

4
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View file

@ -1,7 +1,7 @@
<script>
import { goto } from "@roxi/routify"
import { datasources } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { DropdownMenu } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -26,7 +26,7 @@
console.log(wasSelectedSource)
console.log(datasource)
await datasources.delete(datasource)
notifier.success("Datasource deleted")
notifications.success("Datasource deleted")
// navigate to first index page if the source you are deleting is selected
if (wasSelectedSource === datasource._id) {
$goto("./datasource")

4
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
View file

@ -1,5 +1,5 @@
<script>
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { DropdownMenu } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -21,7 +21,7 @@
async function deleteQuery() {
await queries.delete(query)
notifier.success("Query deleted")
notifications.success("Query deleted")
hideEditor()
}
</script>

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

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import api from "builderStore/api"
@ -60,7 +60,7 @@
}
if (response.status !== 200) {
notifier.danger("CSV Invalid, please try another CSV file")
notifications.error("CSV Invalid, please try another CSV file")
return []
}
}
@ -68,7 +68,7 @@
async function handleFile(evt) {
const fileArray = Array.from(evt.target.files)
if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
notifier.danger(
notifications.error(
`Files cannot exceed ${FILE_SIZE_LIMIT /
BYTES_IN_MB}MB. Please try again with smaller files.`
)

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

@ -2,7 +2,7 @@
import { goto } from "@roxi/routify"
import { store } from "builderStore"
import { tables } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Input, Label, ModalContent, Toggle } from "@budibase/bbui"
import TableDataImport from "../TableDataImport.svelte"
import analytics from "analytics"
@ -60,7 +60,7 @@
// Create table
const table = await tables.save(newTable)
notifier.success(`Table ${name} created successfully.`)
notifications.success(`Table ${name} created successfully.`)
analytics.captureEvent("Table Created", { name })
// Create auto screens

6
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View file

@ -2,7 +2,7 @@
import { goto } from "@roxi/routify"
import { store, allScreens } from "builderStore"
import { tables } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { DropdownMenu, Button, Input } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -42,7 +42,7 @@
await tables.delete(table)
store.actions.screens.delete(templateScreens)
await tables.fetch()
notifier.success("Table deleted")
notifications.success("Table deleted")
if (wasSelectedTable._id === table._id) {
$goto("./table")
}
@ -51,7 +51,7 @@
async function save() {
await tables.save(table)
notifier.success("Table renamed successfully")
notifications.success("Table renamed successfully")
hideEditor()
}

6
packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
View file

@ -1,7 +1,7 @@
<script>
import { goto } from "@roxi/routify"
import { views } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { DropdownMenu, Button, Input } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -33,7 +33,7 @@
originalName,
...view,
})
notifier.success("View renamed successfully")
notifications.success("View renamed successfully")
hideEditor()
}
@ -41,7 +41,7 @@
const name = view.name
const id = view.tableId
await views.delete(name)
notifier.success("View deleted")
notifications.success("View deleted")
$goto(`./table/${id}`)
}
</script>

4
packages/builder/src/components/common/Dropzone.svelte
View file

@ -1,5 +1,5 @@
<script>
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { Dropzone } from "@budibase/bbui"
import api from "builderStore/api"
@ -8,7 +8,7 @@
const BYTES_IN_MB = 1000000
function handleFileTooLarge(fileSizeLimit) {
notifier.danger(
notifications.error(
`Files cannot exceed ${fileSizeLimit /
BYTES_IN_MB}MB. Please try again with smaller files.`
)

70
packages/builder/src/components/common/Notification/NotificationDisplay.svelte
View file

@ -1,70 +0,0 @@
<script>
import { notificationStore } from "builderStore/store/notifications"
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
export let themes = {
danger: "#E26D69",
success: "#84C991",
warning: "#f0ad4e",
info: "#5bc0de",
default: "#aaaaaa",
}
export let timeout = 3000
$: if ($notificationStore.notifications.length) {
setTimeout(() => {
notificationStore.update(state => {
state.notifications.shift()
state.notifications = state.notifications
return state
})
}, timeout)
}
</script>
<div class="notifications">
{#each $notificationStore.notifications as notification (notification.id)}
<div
animate:flip
class="toast"
style="background: {themes[notification.type]};"
transition:fly={{ y: -30 }}>
<div class="content">{notification.message}</div>
{#if notification.icon}<i class={notification.icon} />{/if}
</div>
{/each}
</div>
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
.toast {
flex: 0 0 auto;
margin-bottom: 10px;
border-radius: var(--border-radius-s);
/* The toasts now support being auto sized, so this static width could be removed */
width: 40vw;
}
.content {
padding: 10px;
display: block;
color: white;
font-weight: 500;
}
</style>

4
packages/builder/src/components/deploy/DeploymentHistory.svelte
View file

@ -4,7 +4,7 @@
import { slide } from "svelte/transition"
import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
import { store, hostingStore } from "builderStore"
@ -75,7 +75,7 @@
} catch (err) {
console.error(err)
clearInterval(poll)
notifier.danger("Error fetching deployment history. Please try again.")
notifications.error("Error fetching deployment history. Please try again.")
}
}

10
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View file

@ -1,7 +1,7 @@
<script>
import { goto } from "@roxi/routify"
import { store } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -18,9 +18,9 @@
const deleteLayout = async () => {
try {
await store.actions.layouts.delete(layout)
notifier.success(`Layout ${layout.name} deleted successfully.`)
notifications.success(`Layout ${layout.name} deleted successfully.`)
} catch (err) {
notifier.danger(`Error deleting layout: ${err.message}`)
notifications.error(`Error deleting layout: ${err.message}`)
}
}
@ -29,9 +29,9 @@
const layoutToSave = cloneDeep(layout)
layoutToSave.name = name
await store.actions.layouts.save(layoutToSave)
notifier.success(`Layout saved successfully.`)
notifications.success(`Layout saved successfully.`)
} catch (err) {
notifier.danger(`Error saving layout: ${err.message}`)
notifications.error(`Error saving layout: ${err.message}`)
}
}
</script>

6
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View file

@ -1,7 +1,7 @@
<script>
import { goto } from "@roxi/routify"
import { store, allScreens } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -20,9 +20,9 @@
store.actions.routing.fetch()
confirmDeleteDialog.hide()
$goto("../")
notifier.success("Deleted screen successfully.")
notifications.success("Deleted screen successfully.")
} catch (err) {
notifier.danger("Error deleting screen")
notifications.error("Error deleting screen")
}
}
</script>

6
packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
View file

@ -1,6 +1,6 @@
<script>
import { goto } from "@roxi/routify"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { store } from "builderStore"
import { Input, ModalContent } from "@budibase/bbui"
@ -9,9 +9,9 @@
async function save() {
try {
await store.actions.layouts.save({ name })
notifier.success(`Layout ${name} created successfully`)
notifications.success(`Layout ${name} created successfully`)
} catch (err) {
notifier.danger(`Error creating layout ${name}.`)
notifications.error(`Error creating layout ${name}.`)
}
}
</script>

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View file

@ -15,7 +15,7 @@
queries as queriesStore,
} from "stores/backend"
import { datasources, integrations } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
@ -108,7 +108,7 @@
blue
thin
on:click={() => {
notifier.success('Query parameters saved.')
notifications.success('Query parameters saved.')
handleSelected(value)
drawer.hide()
}}>

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import EventEditor from "./EventEditor.svelte"
import { automationStore } from "builderStore"
@ -22,7 +22,7 @@
}
dispatch("change", value)
notifier.success("Component actions saved.")
notifications.success("Component actions saved.")
drawer.hide()
}

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import {
getDatasourceForProvider,
getSchemaForDatasource,
@ -26,7 +26,7 @@
const saveFilter = async () => {
dispatch("change", tempValue)
notifier.success("Filters saved.")
notifications.success("Filters saved.")
drawer.hide()
}

12
packages/builder/src/components/integration/QueryViewer.svelte
View file

@ -10,7 +10,7 @@
Spacer,
Switcher,
} from "@budibase/bbui"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import api from "builderStore/api"
import IntegrationQueryEditor from "components/integration/index.svelte"
import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
@ -89,13 +89,13 @@
data = json.rows || []
if (data.length === 0) {
notifier.info(
notifications.info(
"Query results empty. Please execute a query with results to create your schema."
)
return
}
notifier.success("Query executed successfully.")
notifications.success("Query executed successfully.")
// Assume all the fields are strings and create a basic schema from the
// unique fields returned by the server
@ -104,7 +104,7 @@
type: "STRING",
}))
} catch (err) {
notifier.danger(`Query Error: ${err.message}`)
notifications.error(`Query Error: ${err.message}`)
console.error(err)
}
}
@ -112,11 +112,11 @@
async function saveQuery() {
try {
const { _id } = await queries.save(query.datasourceId, query)
notifier.success(`Query saved successfully.`)
notifications.success(`Query saved successfully.`)
$goto(`../../${_id}`)
} catch (err) {
console.error(err)
notifier.danger(`Error creating query. ${err.message}`)
notifications.error(`Error creating query. ${err.message}`)
}
}
</script>

6
packages/builder/src/components/settings/tabs/APIKeys.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Input, Label, TextButton } from "@budibase/bbui"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { database } from "stores/backend"
import analytics from "analytics"
@ -11,7 +11,7 @@
if (key === "budibase") {
const isValid = await analytics.identifyByApiKey(value)
if (!isValid) {
notifier.danger("Your API Key is invalid.")
notifications.error("Your API Key is invalid.")
keys = { ...keys }
return
}
@ -19,7 +19,7 @@
const response = await api.put(`/api/keys/${key}`, { value })
const res = await response.json()
keys = { ...keys, ...res }
notifier.success("API Key saved.")
notifications.success("API Key saved.")
}
// Get Keys

6
packages/builder/src/components/start/AppCard.svelte
View file

@ -3,7 +3,7 @@
import { Heading } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import download from "downloadjs"
@ -17,10 +17,10 @@
download(
`/api/backups/export?appId=${_id}&appname=${encodeURIComponent(name)}`
)
notifier.success("App Export Complete.")
notifications.success("App Export Complete.")
} catch (err) {
console.error(err)
notifier.danger("App Export Failed.")
notifications.error("App Export Failed.")
} finally {
appExportLoading = false
}

6
packages/builder/src/components/start/BuilderSettingsModal.svelte
View file

@ -1,5 +1,5 @@
<script>
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { hostingStore } from "builderStore"
import { HostingTypes } from "constants/backend"
import { Input, ModalContent, Toggle } from "@budibase/bbui"
@ -23,9 +23,9 @@
}
try {
await hostingStore.actions.save(hostingInfo)
notifier.success(`Settings saved.`)
notifications.success(`Settings saved.`)
} catch (err) {
notifier.danger(`Failed to update builder settings.`)
notifications.error(`Failed to update builder settings.`)
}
}

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

@ -1,6 +1,6 @@
<script>
import { writable, get as svelteGet } from "svelte/store"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import { store, automationStore, hostingStore } from "builderStore"
import { string, object } from "yup"
import api, { get } from "builderStore/api"
@ -162,7 +162,7 @@
$goto(`./${appJson._id}`)
} catch (error) {
console.error(error)
notifier.danger(error)
notifications.error(error)
submitting = false
}
}

2
packages/builder/src/components/start/Steps/Info.svelte
View file

@ -13,7 +13,7 @@
function handleFile(evt) {
const fileArray = Array.from(evt.target.files)
if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
notifier.danger(
notifications.error(
`Files cannot exceed ${FILE_SIZE_LIMIT /
BYTES_IN_MB}MB. Please try again with smaller files.`
)

2
packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
View file

@ -9,7 +9,7 @@
const json = await response.json()
config = json.query
} catch (err) {
notifier.danger("Error fetching datasource configuration options.")
notifications.error("Error fetching datasource configuration options.")
console.error(err)
}
}

6
packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -2,7 +2,7 @@
import { goto, beforeUrlChange } from "@roxi/routify"
import { Button, Heading, Body, Spacer } from "@budibase/bbui"
import { datasources, integrations, queries } from "stores/backend"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons"
@ -14,7 +14,7 @@
async function saveDatasource() {
// Create datasource
await datasources.save(datasource)
notifier.success(`Datasource ${name} saved successfully.`)
notifications.success(`Datasource ${name} saved successfully.`)
unsaved = false
}
@ -32,7 +32,7 @@
$beforeUrlChange((event, store) => {
if (unsaved) {
notifier.danger(
notifications.error(
"Unsaved changes. Please save your datasource configuration before leaving."
)
return false

8
packages/builder/src/pages/builder/[application]/deploy/index.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import { store, hostingStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { notifications } from "@budibase/bbui"
import api from "builderStore/api"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics"
@ -21,7 +21,7 @@
const response = await api.get(`/api/keys/`)
const userKeys = await response.json()
if (!userKeys.budibase) {
notifier.danger(
notifications.error(
"No budibase API Keys configured. You must set either a self hosted or cloud API key to deploy your budibase app."
)
return
@ -31,7 +31,7 @@
const DEPLOY_URL = `/api/deploy`
try {
notifier.info(`Deployment started. Please wait.`)
notifications.info(`Deployment started. Please wait.`)
const response = await api.post(DEPLOY_URL)
const json = await response.json()
if (response.status !== 200) {
@ -52,7 +52,7 @@
hostingType: $hostingStore.hostingInfo?.type,
})
analytics.captureException(err)
notifier.danger("Deployment unsuccessful. Please try again later.")
notifications.error("Deployment unsuccessful. Please try again later.")
}
}
</script>

5
yarn.lock
View file

@ -824,6 +824,11 @@
estree-walker "^1.0.1"
micromatch "^4.0.2"
"@spectrum-css/toast@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
"@types/estree@0.0.39":
version "0.0.39"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"