Merge pull request #15698 from Budibase/fix/import-query

Import OpenAPI fixes

packages/bbui/src/Form/Core/TextArea.svelte

@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
   export let value = ""
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let id = null
-  export let height = null
-  export let minHeight = null
+  export let id: string | undefined = undefined
+  export let height: string | number | undefined = undefined
+  export let minHeight: string | number | undefined = undefined
   export const getCaretPosition = () => ({
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
@@ -16,18 +16,21 @@
   export let align = null
 
   let focus = false
-  let textarea
+  let textarea: any
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event: any) => {
     dispatch("change", event.target.value)
     focus = false
   }
 
-  const getStyleString = (attribute, value) => {
+  const getStyleString = (
+    attribute: string,
+    value: string | number | undefined
+  ) => {
     if (!attribute || value == null) {
       return ""
     }
-    if (isNaN(value)) {
+    if (typeof value === "number" && isNaN(value)) {
       return `${attribute}:${value};`
     }
     return `${attribute}:${value}px;`

packages/bbui/src/Form/TextArea.svelte

@@ -1,21 +1,21 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextArea from "./Core/TextArea.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
-  export let labelPosition = "above"
-  export let placeholder = null
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let placeholder: string | undefined = undefined
   export let disabled = false
-  export let error = null
-  export let getCaretPosition = null
-  export let height = null
-  export let minHeight = null
-  export let helpText = null
+  export let error: string | undefined = undefined
+  export let getCaretPosition: any = undefined
+  export let height: string | number | undefined = undefined
+  export let minHeight: string | number | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -24,7 +24,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextArea
     bind:getCaretPosition
-    {error}
     {disabled}
     {value}
     {placeholder}

packages/bbui/src/Tabs/Tab.svelte

@@ -4,7 +4,7 @@
 
   export let title
   export let icon = ""
-  export let id
+  export let id = undefined
   export let href = "#"
   export let link = false
 

packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte

@@ -1,132 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import {
-    keepOpen,
-    ModalContent,
-    notifications,
-    Body,
-    Layout,
-    Tabs,
-    Tab,
-    Heading,
-    TextArea,
-    Dropzone,
-  } from "@budibase/bbui"
-  import { datasources, queries } from "@/stores/builder"
-  import { writable } from "svelte/store"
-
-  export let navigateDatasource = false
-  export let datasourceId
-  export let createDatasource = false
-  export let onCancel
-
-  const data = writable({
-    url: "",
-    raw: "",
-    file: undefined,
-  })
-
-  let lastTouched = "url"
-
-  const getData = async () => {
-    let dataString
-
-    // parse the file into memory and send as string
-    if (lastTouched === "file") {
-      dataString = await $data.file.text()
-    } else if (lastTouched === "url") {
-      const response = await fetch($data.url)
-      dataString = await response.text()
-    } else if (lastTouched === "raw") {
-      dataString = $data.raw
-    }
-
-    return dataString
-  }
-
-  async function importQueries() {
-    try {
-      const dataString = await getData()
-
-      if (!datasourceId && !createDatasource) {
-        throw new Error("No datasource id")
-      }
-
-      const body = {
-        data: dataString,
-        datasourceId,
-      }
-
-      const importResult = await queries.import(body)
-      if (!datasourceId) {
-        datasourceId = importResult.datasourceId
-      }
-
-      // reload
-      await datasources.fetch()
-      await queries.fetch()
-
-      if (navigateDatasource) {
-        $goto(`./datasource/${datasourceId}`)
-      }
-
-      notifications.success(`Imported successfully.`)
-    } catch (error) {
-      notifications.error("Error importing queries")
-      return keepOpen
-    }
-  }
-</script>
-
-<ModalContent
-  onConfirm={() => importQueries()}
-  {onCancel}
-  confirmText={"Import"}
-  cancelText="Back"
-  size="L"
->
-  <Layout noPadding>
-    <Heading size="S">Import</Heading>
-    <Body size="XS"
-      >Import your rest collection using one of the options below</Body
-    >
-    <Tabs selected="File">
-      <!-- Commenting until nginx csp issue resolved -->
-      <!-- <Tab title="Link">
-        <Input
-          bind:value={$data.url}
-          on:change={() => (lastTouched = "url")}
-          label="Enter a URL"
-          placeholder="e.g. https://petstore.swagger.io/v2/swagger.json"
-        />
-      </Tab> -->
-      <Tab title="File">
-        <Dropzone
-          gallery={false}
-          value={$data.file ? [$data.file] : []}
-          on:change={e => {
-            $data.file = e.detail?.[0]
-            lastTouched = "file"
-          }}
-          fileTags={[
-            "OpenAPI 3.0",
-            "OpenAPI 2.0",
-            "Swagger 2.0",
-            "cURL",
-            "YAML",
-            "JSON",
-          ]}
-          maximum={1}
-        />
-      </Tab>
-      <Tab title="Raw Text">
-        <TextArea
-          bind:value={$data.raw}
-          on:change={() => (lastTouched = "raw")}
-          label={"Paste raw text"}
-          placeholder={'e.g. curl --location --request GET "https://example.com"'}
-        />
-      </Tab>
-    </Tabs>
-  </Layout>
-</ModalContent>

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from "@roxi/routify"
   import {
     keepOpen,
@@ -14,13 +14,14 @@
   } from "@budibase/bbui"
   import { datasources, queries } from "@/stores/builder"
   import { writable } from "svelte/store"
+  import type { Datasource } from "@budibase/types"
 
   export let navigateDatasource = false
-  export let datasourceId
+  export let datasourceId: string | undefined = undefined
   export let createDatasource = false
-  export let onCancel
+  export let onCancel: (() => void) | undefined = undefined
 
-  const data = writable({
+  const data = writable<{ url: string; raw: string; file?: any }>({
     url: "",
     raw: "",
     file: undefined,
@@ -28,12 +29,14 @@
 
   let lastTouched = "url"
 
-  const getData = async () => {
+  $: datasource = $datasources.selected as Datasource
+
+  const getData = async (): Promise<string> => {
     let dataString
 
     // parse the file into memory and send as string
     if (lastTouched === "file") {
-      dataString = await $data.file.text()
+      dataString = await $data.file?.text()
     } else if (lastTouched === "url") {
       const response = await fetch($data.url)
       dataString = await response.text()
@@ -55,9 +58,9 @@
       const body = {
         data: dataString,
         datasourceId,
+        datasource,
       }
-
-      const importResult = await queries.import(body)
+      const importResult = await queries.importQueries(body)
       if (!datasourceId) {
         datasourceId = importResult.datasourceId
       }
@@ -71,8 +74,8 @@
       }
 
       notifications.success("Imported successfully")
-    } catch (error) {
-      notifications.error("Error importing queries")
+    } catch (error: any) {
+      notifications.error(`Error importing queries - ${error.message}`)
 
       return keepOpen
     }

packages/types/src/api/web/app/query.ts

@@ -11,7 +11,7 @@ export interface SaveQueryRequest extends Query {}
 export interface SaveQueryResponse extends Query {}
 
 export interface ImportRestQueryRequest {
-  datasourceId: string
+  datasourceId?: string
   data: string
   datasource: Datasource
 }