Connections UX feedback

[deanhannigan]

Description

Some feedback updates and bug fixes.

• REST template groups replaced with nested RestTemplate collections with a connectionMode field (shared/independent). HubSpot, Twilio, Zendesk restructured accordingly.
  • This was to accomodate the scenario where something like Microsoft Sharepoint shares its settings, like base url or auth, with all its children. Allowing 1 parent auth to cover them all.
  • Conversely, Twilio does not share base urls with its children and so they remain independent.
  • Query editor now handles shared (child picker at query time) and independent (child encoded in datasource) collection modes
• Added a mixin prop to RestTemplate to accomodate general fixes for 3rd Party specs. In this instance, added the Microsoft graph server base url as it is omitted by Microsoft intentionally.
• Added draft connection state to WorkspaceConnectionStore - tracks in-progress new connection/query in the sidebar before save
• bb.hideSettings() now accepts an optional path argument. On close you can decide the default page to load. This is handy for the save and close flow. When it reopens it will navigate accordingly.
• Added featured connections:Slack, Jira, BambooHR, HubSpot, Stripe, and GitHub.

Bug fixes

• Fixed default auth not being applied to saved queries with no authConfigId (reactive ordering)
• Fixed binding edits being wiped on a new query by applyEndpointDefaults re-running every cycle (wrong guard field)
• Fixed connection create not navigating to the new connection route in the settings modal.
• Regression tests for the above bug fixes; cleaned up test structure

Screenshots

New API button will kick of the new create flow.

Clicking it will create a new "draft" query/api with the selected.

The request verb, query name and connection name will update accordingly.

A Shared connection. Microsoft Sharepoint can now act as a shared connection

With shared connections, you will be prompted to confirm the nested spec you are trying to use

Independent connections like Twilo, that do not share base url, confirm the nested spec on the connection.

---

Summary by cubic

Improves the Connections and API creation UX with nested RestTemplate collections, a shared/independent model, and a draft flow for new connections/queries. Polishes selection and navigation, adds a child spec picker, and refines unsaved-change handling.

• New Features

  • Replaced REST template groups with nested RestTemplate collections and connectionMode (shared/independent); restructured HubSpot, Twilio, Zendesk, and added Microsoft SharePoint (via mixin).
  • Added TemplateEndpointInput to pick child specs for shared collections; improved endpoint icons/verbs; added “Open operation” link on collections (hidden for drafts); CustomEndpointInput now derives verbs from QUERY_VERB_MAP.
  • Draft connection/query state in WorkspaceConnectionStore: “New API” creates a sidebar draft, updates verb/name live, hides draft from menus/context actions, keys the view to reset on draft changes, and makes unsaved prompts skip-able.
  • ConnectionSelect UI polish with featured templates (slack-web-api, jira-cloud, bamboohr, hubspot, stripe, github) and styling tweaks; refined NavHeader add/search behavior; datasource nav disables context menu for drafts.
  • Navigation improvements: bb.hideSettings(path?) for save-and-close; confirm() handlers can control closing via return value.
  • Types: added restTemplateId to query metadata.

• Bug Fixes

  • Apply default auth to saved queries with no authConfigId.
  • Prevent binding edits being reset by endpoint default application.
  • Ensure creating a connection navigates to the new route; added regression tests and test polyfills for portal/animation.

^{Written for commit 66933d7. Summary will update on new commits.}

[cubic-dev-ai]

5 issues found across 23 files

Confidence score: 3/5

• Some risk remains because there are concrete user-facing flow issues in packages/builder/src/settings/pages/connections/APIEditor.svelte: validation can be bypassed due to stale hasErrors, and loadingOpenApiInfo may stay stuck after API.getImportInfo failures, leaving the form disabled.
• packages/builder/src/helpers/confirm.ts has a behavior regression where result || true turns an intentional false into true, so callers cannot block confirm actions as designed.
• packages/builder/src/components/integration/APIEndpointViewer.svelte may redirect unexpectedly during "Save and continue" when saving new drafts, and packages/builder/src/components/integration/APIEndpointViewer.spec.ts has mock leakage risk that can cause order-dependent tests.
• Pay close attention to packages/builder/src/settings/pages/connections/APIEditor.svelte, packages/builder/src/helpers/confirm.ts, and packages/builder/src/components/integration/APIEndpointViewer.svelte - they contain the highest-impact validation, loading-state, and navigation behavior regressions.

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/settings/pages/connections/APIEditor.svelte">

<violation number="1" location="packages/builder/src/settings/pages/connections/APIEditor.svelte:260">
P2: `loadingOpenApiInfo` isn’t cleared if `API.getImportInfo` throws, so the form can stay disabled indefinitely after a failed load. Wrap the await in a try/finally to ensure the flag resets.</violation>

<violation number="2" location="packages/builder/src/settings/pages/connections/APIEditor.svelte:498">
P2: `hasErrors` is a reactive derived value, so it won’t update immediately after `errors = newErrors` in this function. This can let saves proceed even when validation just added errors. Use `newErrors` (or re-check `errors`) directly in this guard.</violation>
</file>

<file name="packages/builder/src/helpers/confirm.ts">

<violation number="1" location="packages/builder/src/helpers/confirm.ts:17">
P2: `onConfirm` now allows returning `false`, but the handler still resolves with `result || true`, which converts `false` to `true`. Callers won’t be able to return `false` as intended. Use a nullish check (`result ?? true`) so explicit `false` is respected.</violation>
</file>

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

<violation number="1" location="packages/builder/src/components/integration/APIEndpointViewer.svelte:989">
P2: Using `saveQuery(isNewQuery)` inside the navigation guard will redirect to the new query when saving a new draft, interrupting the "Save and continue" navigation. Save without redirect here so the original navigation can proceed.</violation>
</file>

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

<violation number="1" location="packages/builder/src/components/integration/APIEndpointViewer.spec.ts:1540">
P3: Restore this spy (or reset all mocks) after the test. `vi.clearAllMocks()` does not reset mock implementations, so this mocked `fetchImportInfo` leaks into later tests and can make them order-dependent.</violation>
</file>

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

[cubic-dev-ai]

1 issue found across 1 file (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/backend/DatasourceNavigator/DatasourceNavigator.svelte">

<violation number="1" location="packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte:164">
P2: Hide "New API operation" for the draft datasource (`__draft__`), otherwise clicking it navigates with an invalid datasource ID and immediately redirects.</violation>
</file>

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