diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index b518ac3d92..5ab7a7f047 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -80,4 +80,8 @@ .active svg { color: var(--spectrum-global-color-blue-600); } + + .spectrum-ActionButton-label { + padding-bottom: 2px; + } diff --git a/packages/bbui/src/Banner/Banner.svelte b/packages/bbui/src/Banner/Banner.svelte new file mode 100644 index 0000000000..f28ee09d9c --- /dev/null +++ b/packages/bbui/src/Banner/Banner.svelte @@ -0,0 +1,59 @@ + + +{#if show} +
+ +
+
+ +
+ {#if extraButtonText && extraButtonAction} + + {/if} +
+
+ +
+
+{/if} diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte index 667b2ab871..9e45683382 100644 --- a/packages/bbui/src/Form/Core/Switch.svelte +++ b/packages/bbui/src/Form/Core/Switch.svelte @@ -25,7 +25,9 @@ class="spectrum-Switch-input" /> - + {#if text} + + {/if} diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte index 86f2c0ee52..0aa59f7f8a 100644 --- a/packages/bbui/src/Tabs/Tab.svelte +++ b/packages/bbui/src/Tabs/Tab.svelte @@ -5,7 +5,7 @@ export let icon = "" const dispatch = createEventDispatcher() - const selected = getContext("tab") + let selected = getContext("tab") let tab let tabInfo @@ -16,8 +16,8 @@ // We just need to get this off the main thread to fix this, by using // a 0ms timeout. setTimeout(() => { - tabInfo = tab.getBoundingClientRect() - if ($selected.title === title) { + tabInfo = tab?.getBoundingClientRect() + if (tabInfo && $selected.title === title) { $selected.info = tabInfo } }, 0) diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte index 2a4017e605..c68f715de0 100644 --- a/packages/bbui/src/Tabs/Tabs.svelte +++ b/packages/bbui/src/Tabs/Tabs.svelte @@ -6,9 +6,13 @@ export let selected export let vertical = false export let noPadding = false + // added as a separate option as noPadding is used for vertical padding + export let noHorizPadding = false export let quiet = false export let emphasized = false + let thisSelected = undefined + let _id = id() const tab = writable({ title: selected, id: _id, emphasized }) setContext("tab", tab) @@ -18,9 +22,19 @@ const dispatch = createEventDispatcher() $: { - if ($tab.title !== selected) { + if (thisSelected !== selected) { + thisSelected = selected + dispatch("select", thisSelected) + } else if ($tab.title !== thisSelected) { + thisSelected = $tab.title selected = $tab.title - dispatch("select", selected) + dispatch("select", thisSelected) + } + if ($tab.title !== thisSelected) { + tab.update(state => { + state.title = thisSelected + return state + }) } } @@ -59,6 +73,7 @@
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/builderStore/datasource.js b/packages/builder/src/builderStore/datasource.js new file mode 100644 index 0000000000..61cead2e16 --- /dev/null +++ b/packages/builder/src/builderStore/datasource.js @@ -0,0 +1,44 @@ +import { datasources, tables } from "../stores/backend" +import { IntegrationNames } from "../constants/backend" +import analytics, { Events } from "../analytics" +import { get } from "svelte/store" +import cloneDeep from "lodash/cloneDeepWith" + +function prepareData(config) { + let datasource = {} + let existingTypeCount = get(datasources).list.filter( + ds => ds.source === config.type + ).length + + let baseName = IntegrationNames[config.type] + let name = + existingTypeCount === 0 ? baseName : `${baseName}-${existingTypeCount + 1}` + + datasource.type = "datasource" + datasource.source = config.type + datasource.config = config.config + datasource.name = name + datasource.plus = config.plus + + return datasource +} + +export async function saveDatasource(config) { + const datasource = prepareData(config) + // Create datasource + const resp = await datasources.save(datasource, datasource.plus) + + // update the tables incase data source plus + await tables.fetch() + await datasources.select(resp._id) + analytics.captureEvent(Events.DATASOURCE.CREATED, { + name: resp.name, + source: resp.source, + }) + return resp +} + +export async function createRestDatasource(integration) { + const config = cloneDeep(integration) + return saveDatasource(config) +} diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 1ffac83b1a..3c646bde68 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -39,7 +39,7 @@ $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow $: { UNSORTABLE_TYPES.forEach(type => { - Object.values(schema).forEach(col => { + Object.values(schema || {}).forEach(col => { if (col.type === type) { col.sortable = false } @@ -113,16 +113,16 @@
-
- {#if title} + {#if title} +
{title} - {/if} - {#if loading} -
- -
- {/if} -
+ {#if loading} +
+ +
+ {/if} +
+ {/if}
{#if !isUsersTable && selectedRows.length > 0} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte index 796f70b43b..18143c2071 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte @@ -8,6 +8,7 @@ import EditQueryPopover from "./popovers/EditQueryPopover.svelte" import NavItem from "components/common/NavItem.svelte" import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte" + import { customQueryIconText, customQueryIconColor } from "helpers/data/utils" import ICONS from "./icons" let openDataSources = [] @@ -129,6 +130,8 @@ filter(el)) + .map(([key]) => key) let addButton + + function getDisplayName(key) { + let name + if (schema[key]?.display) { + name = schema[key].display + } else { + name = key + } + return capitalise(name) + }
- - {#each Object.keys(schema) as configKey} + + {#if !creating} +
+ + +
+ {/if} + {#each configKeys as configKey} {#if schema[configKey].type === "object"}
- + @@ -29,30 +63,31 @@ {:else if schema[configKey].type === "boolean"}
- - + +
{:else if schema[configKey].type === "longForm"}
- +