diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index a543dea1d4..bbaf5a3ff9 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,8 @@ export let handleFileTooLarge = null export let gallery = true export let error = null + export let fileTags = [] + export let maximum = null const dispatch = createEventDispatcher() const imageExtensions = [ @@ -184,103 +188,118 @@ {/each} {/if} {/if} -
-
- - - - - - +
+ - - - - - - - - - - -

- Drag and drop your file -

- {#if !disabled} -

- -
- from your computer -

- {/if} + + + + + + + + + + + + + + +

+ Drag and drop your file +

+ {#if !disabled} +

+ +
+ from your computer +

+ {#if fileTags.length} + +
+ {#each fileTags as tag} +
+ + {tag} + +
+ {/each} +
+
+ {/if} + {/if} +
-
+ {/if} diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte index f8facaada9..757d76398b 100644 --- a/packages/bbui/src/Form/Dropzone.svelte +++ b/packages/bbui/src/Form/Dropzone.svelte @@ -12,6 +12,8 @@ export let processFiles = undefined export let handleFileTooLarge = undefined export let gallery = true + export let fileTags = [] + export let maximum = undefined const dispatch = createEventDispatcher() const onChange = e => { @@ -29,6 +31,8 @@ {processFiles} {handleFileTooLarge} {gallery} + {fileTags} + {maximum} 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/analytics/constants.js b/packages/builder/src/analytics/constants.js index d38b7bba4f..177d5320a5 100644 --- a/packages/builder/src/analytics/constants.js +++ b/packages/builder/src/analytics/constants.js @@ -9,6 +9,9 @@ export const Events = { CREATED: "Datasource Created", UPDATED: "Datasource Updated", }, + QUERIES: { + REST: "REST Queries Imported", + }, TABLE: { CREATED: "Table Created", }, diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index 1a433785dc..32c8d0502d 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 ImportRestQueriesModal from "./ImportRestQueriesModal.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,24 @@ + + {#if integration.type === "REST"} + modal.show()} + /> + {/if} + + showImportModal()} showCancelButton={false} size="M" onConfirm={() => { diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte new file mode 100644 index 0000000000..cd6cef42d1 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte @@ -0,0 +1,135 @@ + + + importQueries()} + {onCancel} + 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" + /> + + + { + $data.file = e.detail?.[0] + lastTouched = "file" + }} + fileTags={["OpenAPI 2.0", "Swagger 2.0", "cURL", "YAML", "JSON"]} + maximum={1} + /> + + +