From 400aee9d92aa3f0f041f2e7021e9d67a23330ec4 Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 2 Dec 2021 16:51:13 +0000
Subject: [PATCH] Fix datasource selection after import and add maxmimum files
 support to dropzone

---
 packages/bbui/src/Form/Core/Dropzone.svelte   | 215 +++++++++---------
 packages/bbui/src/Form/Dropzone.svelte        |   2 +
 .../modals/ImportRestQueriesModal.svelte      |  30 ++-
 3 files changed, 130 insertions(+), 117 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 1595a2ea9..bbaf5a3ff 100644
--- 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>
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index a8a160010..757d76398 100644
--- 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>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
index ec2666377..a500b2471 100644
--- 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"'}