Custom REST UX updates

[deanhannigan]

Description

Some UX updates to the API REST UX.

• In the recent update, the base URL and path were separated in the query editor. This was done to highlight the new base url config functionality and establish some commonality between the custom and templated request UX. This has been replaced.
• The base url functionality remains, but it has been updated to accomodate the combined URL approach. The globe icon will still surface the base url (if configured) and prepend it as before.
• Query parsing on the URL has been improved and any valid query params will be parsed and added appropriately to the request
• In the API section, base url was moved from Credentials to underneath the main display name of the API.
• Increased test coverage for the APIEndpointViewer, ResponsePanel and the query utils.
• The Raw tab has been put back in the response panel.
• Some layout refactoring of the ResponsePanel.

Screenshots

The base url and path have been reunified.

Raw response has been restored.

---

Summary by cubic

Restored a single URL field for custom REST requests, brought back the Raw response tab, improved query param parsing on blur, and tightened URL validation so Save only enables for valid http(s) URLs or {{ }} bindings. Also made “new” and templated modes more robust by clearing state and disabling actions until a datasource or endpoint is selected.

• New Features

  • Single URL input; globe menu applies the connection base URL via applyBaseUrl, preserving path/query/hash and {{ }} templates. On blur, the query string moves to Params and merges (overwrites duplicates).
  • Existing queries load their stored full URL; if a queryString exists, the URL input shows only the path. New queries prefill with the datasource base URL; switching datasources updates the menu but doesn’t overwrite saved URLs. Custom URL input is disabled until a datasource is selected. Bindings “Add” is disabled in custom mode until a datasource is selected.
  • URL validation: Save is disabled for invalid URLs and enabled for {{ }} bindings. In API settings, Base URL now validates with the same rules, trims trailing slashes, shows inline errors on blur, and blocks Save when invalid. Base URL now sits under the display name.
  • Response panel: restored “Raw” tab with full‑height, scrollable text; tabs fill available height; status/time/size use success/error colors.
  • Template mode: hides endpoint details and the Pagination tab when none is selected; Send/Add binding are disabled until an endpoint is chosen; deselecting an endpoint clears endpoint data, params, and previews. URL validation does not block Save in template mode.

• Refactors

  • Consolidated to a single .url-input; query name editor replaced with a standard input (Enter blurs). Renamed isAbsoluteUrl to isValidEndpointUrl and removed client‑side binding resolution.
  • Expanded tests for URL commit/param merging, datasource switching, HBS handling, template endpoint selection/clearing, the Response panel (Raw tab and status styling), and applyBaseUrl/isValidEndpointUrl.

^{Written for commit 619eb55. Summary will update on new commits.}

[cubic-dev-ai]

6 issues found across 8 files

Confidence score: 3/5

• There’s a concrete user-facing risk in packages/builder/src/components/integration/query.ts: selecting a base URL can drop relative custom paths, which could break request routing for existing configs.
• packages/builder/src/components/integration/APIEndpointViewer.svelte can overwrite user-entered custom URLs on datasource updates, and packages/builder/src/settings/pages/connections/APIEditor.svelte ignores persisted OAuth2 base URL edits, so behavior may feel inconsistent.
• Score reflects multiple medium-severity functional risks rather than just test hygiene; these could affect URL construction and persistence for users.
• Pay close attention to packages/builder/src/components/integration/query.ts, packages/builder/src/components/integration/APIEndpointViewer.svelte, packages/builder/src/settings/pages/connections/APIEditor.svelte - URL construction, reactive overwrites, and OAuth2 base URL persistence.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/builder/src/components/integration/APIEndpointViewer.svelte">

<violation number="1" location="packages/builder/src/components/integration/APIEndpointViewer.svelte:202">
P2: The reactive `customUrl` initializer can overwrite user-entered URLs for new custom queries when datasource state updates.</violation>
</file>

<file name="packages/builder/src/components/integration/APIEndpointViewer.spec.ts">

<violation number="1" location="packages/builder/src/components/integration/APIEndpointViewer.spec.ts:1253">
P2: This test is incomplete: it never performs a datasource switch or asserts the post-switch state, so it does not verify the behavior in its name.</violation>
</file>

<file name="packages/builder/src/components/integration/ResponsePanel.spec.ts">

<violation number="1" location="packages/builder/src/components/integration/ResponsePanel.spec.ts:37">
P2: The test setup leaks DOM state by appending a new `.modal-container` before each test without removing previous ones.</violation>
</file>

<file name="packages/builder/src/components/integration/query.ts">

<violation number="1" location="packages/builder/src/components/integration/query.ts:505">
P1: Selecting a base URL now drops relative custom paths because `applyBaseUrl` only parses absolute URLs.</violation>

<violation number="2" location="packages/builder/src/components/integration/query.ts:507">
P2: Trim the trailing slash from `newBase` before appending the preserved path, otherwise base URLs ending in `/` generate `//` in the request URL.</violation>
</file>

<file name="packages/builder/src/settings/pages/connections/APIEditor.svelte">

<violation number="1" location="packages/builder/src/settings/pages/connections/APIEditor.svelte:537">
P2: `Base URL` is now shown for OAuth2 connections, but OAuth2 save flow ignores `data.baseUrl`, so edits in this field are not persisted.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[melohagan]

I've come across a bug that will need to be fixed:

1. Create new custom REST connection
2. Add binding: baseUrl (with valid value)
3. Enter {{baseUrl}} into the url text box
4. Hit send
5. Response is valid, but the save button is not enabled

[deanhannigan]

I've come across a bug that will need to be fixed:

1. Create new custom REST connection
2. Add binding: baseUrl (with valid value)
3. Enter {{baseUrl}} into the url text box
4. Hit send
5. Response is valid, but the save button is not enabled

Nice catch. I ran through it there and added in accommodation for this kind of URL. I also added in chained support, so that if they add a query binding with {{Connection.static.myBinding}} it will also resolve those as best it can 👍

[cubic-dev-ai]

1 issue found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/builder/src/components/integration/query.ts">

<violation number="1" location="packages/builder/src/components/integration/query.ts:489">
P2: Environment-variable URL bindings won't validate here, so custom REST queries using `{{env.*}}` stay unsaveable.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[melohagan]

Just a minor silly thing, but we should add some validation to the REST query names:

Screen.Recording.2026-03-19.at.14.00.35.mov

[cubic-dev-ai]

1 issue found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/builder/src/components/integration/query.ts">

<violation number="1" location="packages/builder/src/components/integration/query.ts:489">
P1: The fallback validation accepts relative URLs whenever they contain a binding. Restrict the catch-path to only unresolved values that could still resolve to an absolute URL.

(Based on your team's feedback about requiring absolute URLs for custom endpoints.) [FEEDBACK_USED]</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[melohagan]

A couple more bugs:

Adding a binding when no connection is selected in the dropdown:

[deanhannigan]

A couple more bugs:

Adding a binding when no connection is selected in the dropdown:

• Added a fix for the disabled behaviour in custom mode.

Trying to use a baseUrl binding. Have tried with/without 'https://'

• Not able to repro locally

[melohagan]

Excellent tests - great job!