diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index a543dea1d4..1595a2ea92 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -6,6 +6,8 @@ import { generateID } from "../../utils/helpers" import Icon from "../../Icon/Icon.svelte" import Link from "../../Link/Link.svelte" + import Tag from "../../Tags/Tag.svelte" + import Tags from "../../Tags/Tags.svelte" const BYTES_IN_KB = 1000 const BYTES_IN_MB = 1000000 @@ -18,6 +20,7 @@ export let handleFileTooLarge = null export let gallery = true export let error = null + export let fileTags = [] const dispatch = createEventDispatcher() const imageExtensions = [ @@ -278,6 +281,19 @@
from your computer

+ {#if fileTags.length} + +
+ {#each fileTags as tag} +
+ + {tag} + +
+ {/each} +
+ + {/if} {/if} @@ -390,4 +406,15 @@ .disabled .spectrum-Heading--sizeL { color: var(--spectrum-alias-text-color-disabled); } + + .tags { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .tag { + margin-top: 8px; + } diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte index f8facaada9..a8a160010d 100644 --- a/packages/bbui/src/Form/Dropzone.svelte +++ b/packages/bbui/src/Form/Dropzone.svelte @@ -12,6 +12,7 @@ export let processFiles = undefined export let handleFileTooLarge = undefined export let gallery = true + export let fileTags = [] const dispatch = createEventDispatcher() const onChange = e => { @@ -29,6 +30,7 @@ {processFiles} {handleFileTooLarge} {gallery} + {fileTags} on:change={onChange} /> diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte index 09cc4f6c52..7f2d7fbdb9 100644 --- a/packages/bbui/src/Modal/ModalContent.svelte +++ b/packages/bbui/src/Modal/ModalContent.svelte @@ -18,10 +18,22 @@ export let disabled = false export let showDivider = true + export let showSecondaryButton = false + export let secondaryButtonText = undefined + export let secondaryAction = undefined + const { hide, cancel } = getContext(Context.Modal) let loading = false $: confirmDisabled = disabled || loading + async function secondary() { + loading = true + if (!secondaryAction || (await secondaryAction()) !== false) { + hide() + } + loading = false + } + async function confirm() { loading = true if (!onConfirm || (await onConfirm()) !== false) { @@ -73,6 +85,15 @@ class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter" > + + {#if showSecondaryButton && secondaryButtonText && secondaryAction} +
+ +
+ {/if} + {#if showCancelButton} {/if} @@ -136,4 +157,8 @@ display: flex; justify-content: space-between; } + + .secondary-action { + margin-right: auto; + } diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index 1a433785dc..1fc3937ba0 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte @@ -6,12 +6,18 @@ import { IntegrationNames } from "constants" import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte" import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte" + import ImportRestDatasourceModal from "./ImportRestDatasourceModal.svelte" export let modal let integrations = [] let integration = {} let internalTableModal let externalDatasourceModal + let importModal + + $: showImportButton = false + + checkShowImport() const INTERNAL = "BUDIBASE" @@ -33,6 +39,15 @@ config, schema: selected.datasource, } + checkShowImport() + } + + function checkShowImport() { + showImportButton = integration.type === "REST" + } + + function showImportModal() { + importModal.show() } function chooseNextModal() { @@ -63,11 +78,20 @@ + + {#if integration.type === "REST"} + + {/if} + + showImportModal()} showCancelButton={false} size="M" onConfirm={() => { diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestDatasourceModal.svelte new file mode 100644 index 0000000000..dd25880491 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestDatasourceModal.svelte @@ -0,0 +1,103 @@ + + + importDatasource()} + onCancel={() => modal.show()} + confirmText={"Import"} + cancelText="Back" + size="L" +> + + Import + Import your rest collection using one of the options below + + + (lastTouched = "url")} + label="Enter a URL" + placeholder="e.g. https://petstore.swagger.io/v2/swagger.json" + /> + + + (lastTouched = "file")} + fileTags={["OpenAPI", "Swagger 2.0"]} + /> + + +