Merge branch 'master' of github.com:Budibase/budibase into add-icons-to-grid-buttons

package.json

@@ -74,8 +74,8 @@
     "build:docker:single:multiarch": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/single/Dockerfile -t budibase:latest .",
     "build:docker:single": "./scripts/build-single-image.sh",
     "build:docker:dependencies": "docker build -f hosting/dependencies/Dockerfile -t budibase/dependencies:latest ./hosting",
-    "publish:docker:couch": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/couchdb/Dockerfile -t budibase/couchdb:latest -t budibase/couchdb:v3.2.1 --push ./hosting/couchdb",
+    "publish:docker:couch": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/couchdb/Dockerfile -t budibase/couchdb:latest -t budibase/couchdb:v3.3.3 --push ./hosting/couchdb",
-    "publish:docker:couch-sqs": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/couchdb/Dockerfile.v2 -t budibase/couchdb:v3.2.1-sqs --push ./hosting/couchdb",
+    "publish:docker:couch-sqs": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/couchdb/Dockerfile.v2 -t budibase/couchdb:v3.3.3-sqs --push ./hosting/couchdb",
     "publish:docker:dependencies": "docker buildx build --platform linux/arm64,linux/amd64 -f hosting/dependencies/Dockerfile -t budibase/dependencies:latest -t budibase/dependencies:v3.2.1 --push ./hosting",
     "release:helm": "node scripts/releaseHelmChart",
     "env:multi:enable": "lerna run --stream env:multi:enable",

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte

@@ -309,7 +309,7 @@
     {#if links?.length}
       <DataSourceCategory
         dividerState={true}
-        heading="Links"
+        heading="Relationships"
         dataSet={links}
         {value}
         onSelect={handleSelected}

packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte

@@ -14,16 +14,13 @@
   const dispatch = createEventDispatcher()
 
   export let value = ""
-  export let maxIconsPerPage = 30
+  export let maxIconsPerPage = 10
 
   let searchTerm = ""
   let selectedLetter = "A"
-
   let currentPage = 1
   let filteredIcons = findIconByTerm(selectedLetter)
 
-  $: dispatch("change", value)
-
   const alphabet = [
     "A",
     "B",
@@ -107,12 +104,15 @@
     loading = false
   }
 
-  $: displayValue = value ? value.substring(3) : "Pick icon"
+  const select = icon => {
+    value = icon
+    dispatch("change", icon)
+  }
 
-  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: displayValue = value ? value.substring(3) : "Pick icon"
+  $: totalPages = Math.max(1, Math.ceil(filteredIcons.length / maxIconsPerPage))
   $: pageEndIdx = maxIconsPerPage * currentPage
   $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
-
   $: pagerText = `Page ${currentPage} of ${totalPages}`
 </script>
 
@@ -123,9 +123,13 @@
 </div>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
+<Popover
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}
+  resizable={false}
+>
   <div class="container">
-    <div class="search-area">
     <div class="alphabet-area">
       {#each alphabet as letter, idx}
         <span
@@ -139,7 +143,6 @@
       {/each}
     </div>
     <div class="search-input">
-        <div class="input-wrapper" style={`width: ${value ? "425" : "510"}px`}>
       <Input
         bind:value={searchTerm}
         on:keyup={event => {
@@ -148,24 +151,24 @@
           }
         }}
         thin
-            placeholder="Search Icon"
+        placeholder="Search icons"
       />
-        </div>
       <Button secondary on:click={searchForIcon}>Search</Button>
       {#if value}
-          <Button primary on:click={() => (value = null)}>Clear</Button>
+        <Button primary on:click={() => select(null)}>Clear</Button>
       {/if}
     </div>
     <div class="page-area">
       <div class="pager">
-          <span on:click={() => pageClick(false)}>
+        <i
-            <i class="page-btn ri-arrow-left-line ri-sm" />
+          on:click={() => pageClick(false)}
-          </span>
+          class="page-btn ri-arrow-left-line ri-sm"
+        />
         <span>{pagerText}</span>
-          <span on:click={() => pageClick(true)}>
+        <i
-            <i class="page-btn ri-arrow-right-line ri-sm" />
+          on:click={() => pageClick(true)}
-          </span>
+          class="page-btn ri-arrow-right-line ri-sm"
-        </div>
+        />
       </div>
     </div>
     {#if pagedIcons.length > 0}
@@ -175,7 +178,7 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-fill`}
-              on:click={() => (value = `ri-${icon}-fill`)}
+              on:click={() => select(`ri-${icon}-fill`)}
             >
               <div class="icon-preview">
                 <i class={`ri-${icon}-fill ri-xl`} />
@@ -185,7 +188,7 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-line`}
-              on:click={() => (value = `ri-${icon}-line`)}
+              on:click={() => select(`ri-${icon}-line`)}
             >
               <div class="icon-preview">
                 <i class={`ri-${icon}-line ri-xl`} />
@@ -196,11 +199,7 @@
         {/if}
       </div>
     {:else}
-      <div class="no-icons">
+      <div class="no-icons">No icons found</div>
-        <h5>
-          {`There is no icons for this ${searchTerm ? "search" : "page"}`}
-        </h5>
-      </div>
     {/if}
   </div>
 </Popover>
@@ -208,11 +207,13 @@
 <style>
   .container {
     width: 610px;
-    height: 350px;
+    height: 380px;
     display: flex;
     flex-direction: column;
-    padding: 10px 0px 10px 15px;
+    gap: var(--spacing-l);
-    overflow-x: hidden;
+    align-items: stretch;
+    padding: var(--spacing-l);
+    background: var(--spectrum-global-color-gray-100);
   }
   .search-area {
     flex: 0 0 80px;
@@ -223,22 +224,18 @@
     flex: 1;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-gap: 5px;
+    grid-gap: 8px;
     justify-content: flex-start;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
   }
   .no-icons {
     display: flex;
     justify-content: center;
     align-items: center;
+    color: var(--spectrum-global-color-gray-600);
   }
   .alphabet-area {
     display: flex;
     flex-flow: row wrap;
-    padding-bottom: 10px;
-    padding-right: 15px;
     justify-content: space-around;
   }
   .loading-container {
@@ -248,43 +245,55 @@
   }
   .search-input {
     display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding-right: 15px;
     gap: 10px;
   }
-  .input-wrapper {
+  .search-input :global(> :first-child) {
-    width: 510px;
+    flex: 1 1 auto;
-    margin-right: 5px;
   }
   .page-area {
-    padding: 10px;
     display: flex;
     justify-content: center;
+    user-select: none;
+  }
+  .pager {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .page-area i {
+    font-size: 16px;
+    transition: color 130ms ease-out;
+  }
+  .page-area i:hover {
+    color: var(--spectrum-global-color-blue-600);
+    cursor: pointer;
   }
   .letter {
-    color: var(--blue);
+    color: var(--spectrum-global-color-gray-700);
+    transition: color 130ms ease-out;
   }
   .letter:hover {
     cursor: pointer;
-    text-decoration: underline;
   }
-  .letter-selected {
+  .letter-selected,
-    text-decoration: underline;
+  .letter:hover {
+    color: var(--spectrum-global-color-blue-600);
   }
   .icon-container {
-    height: 100px;
+    height: 60px;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    border: var(--border-dark);
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
   }
   .icon-container:hover {
     cursor: pointer;
-    background: var(--grey-2);
+    background: var(--spectrum-global-color-gray-200);
   }
-  .selected {
+  .icon-container.selected {
-    background: var(--grey-3);
+    background: var(--spectrum-global-color-gray-300);
   }
   .icon-preview {
     flex: 1;
@@ -296,9 +305,11 @@
     flex: 0 0 20px;
     text-align: center;
     font-size: 12px;
+    margin-bottom: 2px;
+    color: var(--spectrum-global-color-gray-700);
   }
   .page-btn {
-    color: var(--blue);
+    color: var(--spectrum-global-color-gray-700);
   }
   .page-btn:hover {
     cursor: pointer;

packages/server/src/api/routes/tests/queries/rest.spec.ts

@@ -64,13 +64,11 @@ describe("rest", () => {
     cached = await getCachedVariable(basedOnQuery._id!, "foo")
     expect(cached).toBeNull()
 
-    nock("http://one.example.com")
+    const body1 = [{ name: "one" }]
-      .get("/")
+    const body2 = [{ name: "two" }]
-      .reply(200, [{ name: "one" }])
+    nock("http://one.example.com").get("/").reply(200, body1)
     nock("http://two.example.com").get("/?test=one").reply(500)
-    nock("http://two.example.com")
+    nock("http://two.example.com").get("/?test=one").reply(200, body2)
-      .get("/?test=one")
-      .reply(200, [{ name: "two" }])
 
     const res = await config.api.query.preview({
       datasourceId: datasource._id!,

packages/server/src/integrations/rest.ts

@@ -148,6 +148,10 @@ class RestIntegration implements IntegrationBase {
       response.headers,
       { downloadImages: this.config.downloadImages }
     )
+    let contentLength = response.headers.get("content-length")
+    if (!contentLength && raw) {
+      contentLength = Buffer.byteLength(raw, "utf8").toString()
+    }
     if (
       contentDisposition.includes("filename") ||
       contentDisposition.includes("attachment") ||
@@ -156,36 +160,46 @@ class RestIntegration implements IntegrationBase {
       filename =
         path.basename(parse(contentDisposition).parameters?.filename) || ""
     }
+
+    let triedParsing: boolean = false,
+      responseTxt: string | undefined
     try {
       if (filename) {
         return handleFileResponse(response, filename, this.startTimeMs)
       } else {
+        responseTxt = response.text ? await response.text() : ""
+        const hasContent =
+          (contentLength && parseInt(contentLength) > 0) ||
+          responseTxt.length > 0
         if (response.status === 204) {
           data = []
           raw = ""
-        } else if (contentType.includes("application/json")) {
+        } else if (hasContent && contentType.includes("application/json")) {
-          data = await response.json()
+          triedParsing = true
-          raw = JSON.stringify(data)
+          data = JSON.parse(responseTxt)
+          raw = responseTxt
         } else if (
-          contentType.includes("text/xml") ||
+          (hasContent && contentType.includes("text/xml")) ||
           contentType.includes("application/xml")
         ) {
-          let xmlResponse = await handleXml(response)
+          triedParsing = true
+          let xmlResponse = await handleXml(responseTxt)
           data = xmlResponse.data
           raw = xmlResponse.rawXml
         } else {
-          data = await response.text()
+          data = responseTxt
           raw = data as string
         }
       }
     } catch (err) {
-      throw `Failed to parse response body: ${err}`
+      if (triedParsing) {
+        data = responseTxt
+        raw = data as string
+      } else {
+        throw new Error(`Failed to parse response body: ${err}`)
+      }
     }
 
-    let contentLength = response.headers.get("content-length")
-    if (!contentLength && raw) {
-      contentLength = Buffer.byteLength(raw, "utf8").toString()
-    }
     const size = formatBytes(contentLength || "0")
     const time = `${Math.round(performance.now() - this.startTimeMs)}ms`
     headers = response.headers.raw()

packages/server/src/integrations/tests/rest.spec.ts

@@ -1,19 +1,27 @@
 jest.mock("node-fetch", () => {
+  const obj = {
+    my_next_cursor: 123,
+  }
+  const str = JSON.stringify(obj)
   return jest.fn(() => ({
     headers: {
       raw: () => {
-        return { "content-type": ["application/json"] }
+        return {
+          "content-type": ["application/json"],
+          "content-length": str.length,
+        }
       },
       get: (name: string) => {
-        if (name.toLowerCase() === "content-type") {
+        const lcName = name.toLowerCase()
+        if (lcName === "content-type") {
           return ["application/json"]
+        } else if (lcName === "content-length") {
+          return str.length
         }
       },
     },
-    json: jest.fn(() => ({
+    json: jest.fn(() => obj),
-      my_next_cursor: 123,
+    text: jest.fn(() => str),
-    })),
-    text: jest.fn(),
   }))
 })
 
@@ -231,7 +239,8 @@ describe("REST Integration", () => {
     }
 
     it("should be able to parse JSON response", async () => {
-      const input = buildInput({ a: 1 }, null, "application/json")
+      const obj = { a: 1 }
+      const input = buildInput(obj, JSON.stringify(obj), "application/json")
       const output = await config.integration.parseResponse(input)
       expect(output.data).toEqual({ a: 1 })
       expect(output.info.code).toEqual(200)
@@ -261,7 +270,7 @@ describe("REST Integration", () => {
     test.each([...contentTypes, undefined])(
       "should not throw an error on 204 no content",
       async contentType => {
-        const input = buildInput(undefined, null, contentType, 204)
+        const input = buildInput(undefined, "", contentType, 204)
         const output = await config.integration.parseResponse(input)
         expect(output.data).toEqual([])
         expect(output.extra.raw).toEqual("")

packages/server/src/integrations/utils/utils.ts

@@ -485,9 +485,8 @@ export function isValidFilter(value: any) {
   return value != null && value !== ""
 }
 
-export async function handleXml(response: any) {
+export async function handleXml(rawXml: string) {
-  let data,
+  let data
-    rawXml = await response.text()
   data =
     (await xmlParser(rawXml, {
       explicitArray: false,