Skip to content

Feature/api connectors automations#18978

Open
melohagan wants to merge 24 commits into
masterfrom
feature/api-connectors-automations-2
Open

Feature/api connectors automations#18978
melohagan wants to merge 24 commits into
masterfrom
feature/api-connectors-automations-2

Conversation

@melohagan

@melohagan melohagan commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Description

Adds connector steps to automations, combining existing REST Templates with the API Request step.

  • Rotate '+' icon on the 'Add a step' button when the automation step panel is open
  • Toggle the add step panel on repeated button clicks
  • Close the add step panel with the Escape key
  • Fix automation toolbar shifting when the step settings panel opens

Addresses

Screenshots

diagram connector list filter list

Launchcontrol

Adds connectors to automations.
Improved automation toolbar UX with icon rotation, toggle behavior, Escape key support, and fixed panel positioning. Connector steps now open the side panel directly instead of a modal.


Summary by cubic

Adds connector steps to automations by combining REST Templates with the API Request step, improving the step picker, and keeping the API explorer in the side panel for a faster, smoother build flow. Connector steps now open the side panel directly and streamline building API automations.

  • New Features

    • Added a Connectors section to the add-step side panel; selecting a connector inserts an API Request step prefilled with restTemplateId and opens the API explorer in-panel.
    • APIEndpointViewer, QuerySelect, and ConnectionSelect filter to the chosen template; pass restTemplateId, restrict connection choices when needed, and support custom popover portal/z-index.
    • Auto-start connector drafts and preselect the only matching connection; don’t default to the first REST datasource for new requests; emit savedQuery on save-and-close.
    • Show connector icons in flow item headers and the setup panel.
  • Bug Fixes

    • Stop toolbar shifting by overlaying side panels; keep selected nodes fully visible beside the panel.
    • Add-step button now toggles the panel, rotates the “+” when open, and supports Escape to close.
    • Open connector selection in the side panel (not a modal) and reset stale state when switching drafts; prefer the existing query’s datasource over draft state; fix APIEndpointViewer datasource selection and avoid auto-opening the connection menu when a connection is already selected.

Written for commit 735fa68. Summary will update on new commits.

Review in cubic

melohagan and others added 23 commits June 8, 2026 16:04
- Rotate '+' icon when add step panel is open (matches app screen pattern)
- Toggle add step panel on repeated button clicks
- Close add step panel with Escape key
- Fix toolbar shifting when step settings panel opens by making side panels
  overlay absolutely instead of participating in grid layout
@readme-ai-writer

readme-ai-writer Bot commented Jun 15, 2026

Copy link
Copy Markdown

Documentation Changes Added

Page Section Action Summary
automation-actionsGuides📝 UpdatedAdded mention of connectors (REST Templates) in the automation step selection panel and API Request step to the action steps list.
rest-templatesGuides📝 UpdatedAdded a section about using REST templates as connector steps in automations.

🔗 View all changes in ReadMe


Actions

  • Merge documentation branch with PR merge
  • Delete documentation branch with PR close

If neither actions are selected, on PR close/merge the docs branch in ReadMe will remain open.

@melohagan melohagan changed the title Feature/api connectors automations 2 Feature/api connectors automations Jun 15, 2026

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 23 files

Confidence score: 3/5

  • In packages/builder/src/components/integration/APIEndpointViewer.svelte, selectedDatasourceId prioritizing queryDatasourceId over activeDatasourceId means datasource changes for existing queries can be ignored, and with connection edits now enabled for restTemplateId queries this can silently snap selections back to an older datasource. This is a concrete user-facing regression risk in query editing flows—update the selection precedence/sync logic and verify with an edit-path test before merging.

Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic

Comment thread packages/builder/src/components/integration/APIEndpointViewer.svelte Outdated

$: isAddStepPanelOpen = !!$automationStore.actionPanelBlock

const openAddStepPanel = () => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not opening anymore. Should that be called toggle?

@@ -1 +1 @@
<script>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we TS this file, if easy?

>
<div class="item-body">
<img
width={17.5}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come this is not 18px in here?


await fireEvent.click(screen.getByText("Open API explorer"))

await waitFor(() => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not important, but this pattern might cause false positives, as the empty state is the default one. So it can be initially empty and then to be populated on some part of the livecycle

// The step input properties
$: inputData = automationStore.actions.getInputData(block)
$: fieldKey = "query"
$: restTemplateId = (inputData as Record<string, any> | undefined)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should type the inputData, instead of casting it in here. Or even better, typing automationStore.actions.getInputData

// Source for current query, if any
$: dataSource =
restSources?.find(ds => ds._id === targetSource) || restSources?.[0]
// Source for current query, if any. Do not default to the first REST source:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this comment even needed?

saveAndClose={true}
settingsLocked={true}
connectionPopoverPortalTarget=".spectrum"
connectionPopoverZIndex={9999}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This crazy z-index is usually not a good pattern, as the code end up with a mess of them. Could this not be solved by positioning the components in the right order?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants