Feature/v3

packages/backend-core/src/utils/outboundFetch.ts

@@ -228,7 +228,9 @@ export async function fetchWithBlacklist<
     nextRequest = nextRequestForRedirect(nextRequest, response.status)
     if (shouldStripSensitiveHeadersForRedirect(nextUrl, redirectUrl)) {
       if (rejectCrossOriginRedirects) {
-        throw new Error("Redirect to a different origin is not permitted.")
+        throw new Error(
+          "This API URL redirects to a different hostname, port, or protocol. Enter the final URL directly (www.example.com instead of example.com)."
+        )
       }
       nextRequest = stripSensitiveHeadersForRedirect(nextRequest)
     }

packages/backend-core/src/utils/tests/outboundFetch.spec.ts

@@ -471,7 +471,9 @@ describe("outboundFetch", () => {
       fetchWithBlacklist("https://budibase.com/resource", undefined, {
         rejectCrossOriginRedirects: true,
       })
-    ).rejects.toThrow("Redirect to a different origin is not permitted.")
+    ).rejects.toThrow(
+      "This API URL redirects to a different hostname, port, or protocol. Enter the final URL directly (www.example.com instead of example.com)."
+    )
     expect(fetchMock).toHaveBeenCalledTimes(1)
   })
 

packages/builder/package.json

@@ -87,6 +87,7 @@
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/svelte": "5.2.8",
     "identity-obj-proxy": "3.0.0",
+    "jsdom": "^21.1.1",
     "resize-observer-polyfill": "1.5.1",
     "svelte-jester": "1.3.2",
     "vite": "8.0.16",

packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte

@@ -20,6 +20,7 @@ $isActive
 
 export let datasource
 export let query
+export let indentLevel = 1
 
 const favourites = workspaceFavouriteStore.lookup
 
@@ -94,7 +95,7 @@ $: goto = $gotoStore
 
 <NavItem
   on:contextmenu={openContextMenu}
-  indentLevel={1}
+  {indentLevel}
   {icon}
   iconText={iconVerb}
   {iconColor}

packages/builder/src/components/backend/DatasourceNavigator/RestQueryNavigator.svelte

@@ -0,0 +1,48 @@
+<script>
+import { Layout } from "@supertoolmake/bbui"
+import { datasources, queries } from "@/stores/builder"
+import { WORKSPACE_API_CONFIG_ID } from "@supertoolmake/types"
+import QueryNavItem from "./QueryNavItem.svelte"
+
+export let searchTerm
+
+const datasource = {
+  _id: WORKSPACE_API_CONFIG_ID,
+  source: "REST",
+  name: "APIs",
+}
+
+$: restDatasourceIds = new Set(
+  ($datasources.list || []).filter((source) => source.source === "REST").map((source) => source._id)
+)
+$: restQueries = $queries.list.filter(
+  (query) =>
+    query.datasourceId === WORKSPACE_API_CONFIG_ID || restDatasourceIds.has(query.datasourceId)
+)
+$: filteredQueries = restQueries.filter(
+  (query) => !searchTerm || query.name?.toLowerCase().includes(searchTerm.toLowerCase())
+)
+</script>
+
+<div class="queries">
+  {#each filteredQueries as query}
+    <QueryNavItem {datasource} {query} indentLevel={0} />
+  {/each}
+</div>
+
+{#if searchTerm && filteredQueries.length === 0}
+  <Layout paddingY="none" paddingX="L">
+    <div class="no-results">There aren't any APIs matching that name</div>
+  </Layout>
+{/if}
+
+<style>
+  .queries {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .no-results {
+    color: var(--spectrum-global-color-gray-600);
+  }
+</style>

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -5,6 +5,7 @@ import { goto, isActive } from "@roxi/routify"
 import { getContext } from "svelte"
 import { API } from "@/api"
 import { IntegrationTypes } from "@/constants/backend"
+import { WORKSPACE_API_CONFIG_ID } from "@supertoolmake/types"
 import { bb } from "@/stores/bb"
 import {
   appStore,
@@ -87,7 +88,8 @@ const queryCommands = (queries) => {
   )
   return queries.map((query) => {
     const datasource = datasourceLookup.get(query.datasourceId)
-    const isRest = datasource?.source === IntegrationTypes.REST
+    const isRest =
+      datasource?.source === IntegrationTypes.REST || query.datasourceId === WORKSPACE_API_CONFIG_ID
     return {
       type: "Query",
       name: query.name,

packages/builder/src/components/common/CodeMirrorEditor.svelte

@@ -41,6 +41,7 @@ export const EditorModes = {
   const dispatch = createEventDispatcher()
   let textarea
   let editor
+  let container
 
   // Keep editor up to date with value
   // Creates an instance of a code mirror editor
@@ -113,10 +114,14 @@ $: editor?.setOption("mode", mode)
 
   onMount(() => {
     // Create the editor with initial value
-    createEditor(mode, value)
+    const resizeObserver = new ResizeObserver(() => editor?.refresh())
+    resizeObserver.observe(container)
+
+    createEditor(mode, value).then(() => editor?.refresh())
 
     // Clean up editor on unmount
     return () => {
+      resizeObserver.disconnect()
       if (editor) {
         editor.toTextArea()
       }
@@ -130,6 +135,7 @@ $: editor?.setOption("mode", mode)
   </div>
 {/if}
 <div
+  bind:this={container}
   style={`--code-mirror-height: ${height}px; --code-mirror-resize: ${resize}`}
 >
   <textarea tabindex="0" bind:this={textarea} readonly {value}></textarea>

packages/builder/src/components/design/Panel.svelte

@@ -10,6 +10,8 @@ export let showCloseButton: boolean | undefined = false
 export let onClickAddButton: () => void = () => {}
 export let onClickBackButton: () => void = () => {}
 export let onClickCloseButton: () => void = () => {}
+export let onClickHeader: () => void = () => {}
+export let headerClickable: boolean | undefined = false
 export let borderLeft: boolean | undefined = false
 export let borderRight: boolean | undefined = false
 export let borderBottomHeader: boolean | undefined = true
@@ -30,6 +32,11 @@ $: panelStyle =
     : resizable
       ? `flex: 1 1 auto; min-width: 260px;`
       : undefined
+
+const handleCloseButtonClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  onClickCloseButton()
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -43,11 +50,14 @@ $: panelStyle =
   style={panelStyle}
 >
   {#if title || customTitleContent}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="header"
       class:custom={customHeaderContent}
       class:borderBottom={borderBottomHeader}
       class:noHeaderBorder
+      class:clickable={headerClickable}
+      on:click={headerClickable ? onClickHeader : undefined}
     >
       {#if showBackButton}
         <Icon name="arrow-left" hoverable on:click={onClickBackButton} />
@@ -81,7 +91,11 @@ $: panelStyle =
         </div>
       {/if}
       {#if showCloseButton}
-        <Icon name={closeButtonIcon} hoverable on:click={onClickCloseButton} />
+        <Icon
+          name={closeButtonIcon}
+          hoverable
+          on:click={handleCloseButtonClick}
+        />
       {/if}
     </div>
   {/if}
@@ -188,6 +202,10 @@ $: panelStyle =
   .header.custom {
     border: none;
   }
+
+  .header.clickable {
+    cursor: pointer;
+  }
   .custom-content-wrap {
     border-bottom: var(--border-light);
   }

packages/builder/src/components/integration/ExtraQueryConfig.svelte

@@ -17,21 +17,49 @@ $: extraFields = Object.keys(config).map((key) => ({
 $: extraQueryFields = query.fields.extra || {}
 </script>
 
-{#each extraFields as { key, displayName, type }}
-  <Label>{displayName}</Label>
-  {#if type === "string"}
-    <Input
-      on:change={() => populateExtraQuery(extraQueryFields)}
-      bind:value={extraQueryFields[key]}
-    />
-  {/if}
-
-  {#if type === "list"}
-    <Select
-      on:change={() => populateExtraQuery(extraQueryFields)}
-      bind:value={extraQueryFields[key]}
-      options={config[key].data[query.queryVerb]}
-      getOptionLabel={current => current}
-    />
-  {/if}
-{/each}
+<div class="extra-fields">
+  {#each extraFields as { key, displayName, type }}
+    <div class="extra-field">
+      <Label>{displayName}</Label>
+      {#if type === "string"}
+        <Input
+          on:change={() => populateExtraQuery(extraQueryFields)}
+          bind:value={extraQueryFields[key]}
+        />
+      {/if}
+
+      {#if type === "list"}
+        <Select
+          on:change={() => populateExtraQuery(extraQueryFields)}
+          bind:value={extraQueryFields[key]}
+          options={config[key].data[query.queryVerb]}
+          getOptionLabel={current => current}
+        />
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .extra-fields {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-l);
+  }
+
+  .extra-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  .extra-field :global(.spectrum-Form-item) {
+    width: 100%;
+  }
+
+  @media (max-width: 700px) {
+    .extra-fields {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>