Fix datasource selection after import and add maxmimum files support to dropzone

5 years ago · 400aee9d92
3 changed files with 130 additions and 117 deletions
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@ -21,6 +21,7 @@
  export let gallery = true
  export let error = null
  export let fileTags = []
+  export let maximum = null

  const dispatch = createEventDispatcher()
  const imageExtensions = [
@ -187,116 +188,118 @@
      {/each}
    {/if}
  {/if}
-  <div
-    class="spectrum-Dropzone"
-    class:is-invalid={!!error}
-    class:disabled
-    role="region"
-    tabindex="0"
-    on:dragover={handleDragOver}
-    on:dragleave={handleDragLeave}
-    on:dragenter={handleDragOver}
-    on:drop={handleDrop}
-    class:is-dragged={fileDragged}
-  >
-    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
-      <input
-        id={fieldId}
-        {disabled}
-        type="file"
-        multiple
-        on:change={handleFile}
-      />
-      <svg
-        class="spectrum-IllustratedMessage-illustration"
-        width="125"
-        height="60"
-        viewBox="0 0 199 97.7"
-      >
-        <defs>
-          <style>
-            .cls-1,
-            .cls-2 {
-              fill: none;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-            }
-            .cls-1 {
-              stroke-width: 3px;
-            }
-            .cls-2 {
-              stroke-width: 2px;
-            }
-          </style>
-        </defs>
-        <path
-          class="cls-1"
-          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+  {#if !maximum || (maximum && value?.length < maximum)}
+    <div
+      class="spectrum-Dropzone"
+      class:is-invalid={!!error}
+      class:disabled
+      role="region"
+      tabindex="0"
+      on:dragover={handleDragOver}
+      on:dragleave={handleDragLeave}
+      on:dragenter={handleDragOver}
+      on:drop={handleDrop}
+      class:is-dragged={fileDragged}
+    >
+      <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+        <input
+          id={fieldId}
+          {disabled}
+          type="file"
+          multiple
+          on:change={handleFile}
        />
-        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
-        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
-        <path
-          class="cls-1"
-          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
-        />
-        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
-        <path
-          class="cls-2"
-          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
-        />
-        <path
-          class="cls-2"
-          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
-        />
-        <path
-          class="cls-2"
-          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
-        />
-        <path
-          class="cls-1"
-          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
-        />
-        <rect
-          class="cls-1"
-          x="1.5"
-          y="34.5"
-          width="58"
-          height="39"
-          rx="2"
-          ry="2"
-        />
-      </svg>
-      <h2
-        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
-      >
-        Drag and drop your file
-      </h2>
-      {#if !disabled}
-        <p
-          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+        <svg
+          class="spectrum-IllustratedMessage-illustration"
+          width="125"
+          height="60"
+          viewBox="0 0 199 97.7"
        >
-          <label for={fieldId} class="spectrum-Link">
-            Select a file to upload
-          </label>
-          <br />
-          from your computer
-        </p>
-        {#if fileTags.length}
-          <Tags>
-            <div class="tags">
-              {#each fileTags as tag}
-                <div class="tag">
-                  <Tag>
-                    {tag}
-                  </Tag>
-                </div>
-              {/each}
-            </div>
-          </Tags>
+          <defs>
+            <style>
+              .cls-1,
+              .cls-2 {
+                fill: none;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+              .cls-1 {
+                stroke-width: 3px;
+              }
+              .cls-2 {
+                stroke-width: 2px;
+              }
+            </style>
+          </defs>
+          <path
+            class="cls-1"
+            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+          />
+          <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+          <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+          <path
+            class="cls-1"
+            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+          />
+          <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+          <path
+            class="cls-2"
+            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+          />
+          <path
+            class="cls-2"
+            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+          />
+          <path
+            class="cls-2"
+            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+          />
+          <path
+            class="cls-1"
+            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+          />
+          <rect
+            class="cls-1"
+            x="1.5"
+            y="34.5"
+            width="58"
+            height="39"
+            rx="2"
+            ry="2"
+          />
+        </svg>
+        <h2
+          class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+        >
+          Drag and drop your file
+        </h2>
+        {#if !disabled}
+          <p
+            class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+          >
+            <label for={fieldId} class="spectrum-Link">
+              Select a file to upload
+            </label>
+            <br />
+            from your computer
+          </p>
+          {#if fileTags.length}
+            <Tags>
+              <div class="tags">
+                {#each fileTags as tag}
+                  <div class="tag">
+                    <Tag>
+                      {tag}
+                    </Tag>
+                  </div>
+                {/each}
+              </div>
+            </Tags>
+          {/if}
        {/if}
-      {/if}
+      </div>
    </div>
-  </div>
+  {/if}
 </div>

 <style>
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@ -13,6 +13,7 @@
  export let handleFileTooLarge = undefined
  export let gallery = true
  export let fileTags = []
+  export let maximum = undefined

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -31,6 +32,7 @@
    {handleFileTooLarge}
    {gallery}
    {fileTags}
+    {maximum}
    on:change={onChange}
  />
 </Field>
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
@ -14,16 +14,17 @@
  } from "@budibase/bbui"
  import analytics, { Events } from "analytics"
  import { datasources, queries } from "stores/backend"
+  import { writable } from "svelte/store"

  export let modal
  export let datasourceId
  export let createDatasource = false

-  let data = {
+  const data = writable({
    url: "",
    raw: "",
-    file: "",
-  }
+    file: undefined,
+  })

  let lastTouched = "url"

@ -32,12 +33,12 @@

    // parse the file into memory and send as string
    if (lastTouched === "file") {
-      dataString = await data.file[0].text()
+      dataString = await $data.file.text()
    } else if (lastTouched === "url") {
-      const response = await fetch(data.url)
+      const response = await fetch($data.url)
      dataString = await response.text()
    } else if (lastTouched === "raw") {
-      dataString = data.raw
+      dataString = $data.raw
    }

    return dataString
@ -56,7 +57,10 @@
        datasourceId,
      }

-      await queries.import(body)
+      const importResult = await queries.import(body)
+      if (!datasourceId) {
+        datasourceId = importResult.datasourceId
+      }

      // reload
      await datasources.fetch()
@ -93,7 +97,7 @@
    <Tabs selected="Link">
      <Tab title="Link">
        <Input
-          bind:value={data.url}
+          bind:value={$data.url}
          on:change={() => (lastTouched = "url")}
          label="Enter a URL"
          placeholder="e.g. https://petstore.swagger.io/v2/swagger.json"
@ -102,14 +106,18 @@
      <Tab title="File">
        <Dropzone
          gallery={false}
-          bind:value={data.file}
-          on:change={() => (lastTouched = "file")}
+          value={$data.file ? [$data.file] : []}
+          on:change={e => {
+            $data.file = e.detail?.[0]
+            lastTouched = "file"
+          }}
          fileTags={["OpenAPI 2.0", "Swagger 2.0", "cURL", "YAML", "JSON"]}
+          maximum={1}
        />
      </Tab>
      <Tab title="Raw Text">
        <TextArea
-          bind:value={data.raw}
+          bind:value={$data.raw}
          on:change={() => (lastTouched = "raw")}
          label={"Paste raw text"}
          placeholder={'e.g. curl --location --request GET "https://example.com"'}