## What kind of change does this PR introduce?
Bug fix and design-system update.
## What is the current behavior?
API authorisation and AWS Marketplace action failures use transient
toasts. The inline action-error treatment introduced for organisation
invitations is implemented locally.
## What is the new behavior?
Action failures remain visible below their actions and clear on retry or
organisation change.
This PR adds a shared `InterstitialActionError` component, updates the
connect-interstitial guidance and demo to use it, and retroactively
applies it to `OrganizationInvite`.
Mutation errors are read directly from their mutation hooks rather than
copied into component state.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Authorize API Access Supabase"
src="https://github.com/user-attachments/assets/9520aff3-496d-44b1-b5b5-02b331872e32"
/> | <img width="1024" height="759" alt="Authorize API Access Supabase"
src="https://github.com/user-attachments/assets/2d09e337-573a-45b5-80ac-7c546ed1401d"
/> |
| <img width="1024" height="759" alt="Link AWS Marketplace Supabase"
src="https://github.com/user-attachments/assets/bb1a4581-0399-432a-8037-d84ab15ecc4b"
/> | <img width="1024" height="759" alt="Link AWS Marketplace Supabase"
src="https://github.com/user-attachments/assets/f9d43cd9-c661-42ed-91c0-e45ccb9c19f5"
/> |
_Note since taking that AWS screenshot: the error message now replaces
the prior footer text. I.e. “Learn more about billing through AWS.” is
now gone when an error message is present._
## To test
### AWS Marketplace
For a visual check with local Studio running:
1. In
`apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx`,
immediately before `if (!buyerId)`, temporarily add:
```tsx
return (
<AwsMarketplaceInterstitial>
<div className="flex flex-col gap-5">
<InterstitialAccountRow displayName="reviewer@example.com" />
<OrganizationSelector
organizations={[
{
name: 'Example Organization',
slug: 'example-organization',
plan: { id: 'pro', name: 'Pro' },
} as Organization,
]}
selectedSlug="example-organization"
disabled
onSelect={() => undefined}
/>
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-2">
<Button variant="primary" block>
Link organization
</Button>
<InterstitialActionError error="Failed to link organization: Test error"
/>
</div>
<p className="text-center text-xs text-foreground-lighter text-balance">
<InlineLink href={`${DOCS_URL}/guides/platform/aws-marketplace`}>
Learn more
</InlineLink>{' '}
about billing through AWS.
</p>
</div>
</div>
</AwsMarketplaceInterstitial>
)
```
2. Open `http://localhost:8082/aws-marketplace-onboarding?buyer_id=test`
while signed in.
3. Confirm the error appears below **Link organization** with a divider.
Remove the temporary return before committing anything.
### API authorization
For a visual check with local Studio running:
1. In
`apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Valid.tsx`,
immediately before `if (isLoading)`, temporarily add:
```tsx
return (
<ApiAuthorizationMainView
approvalState="indeterminate"
form={form}
requester={{
name: 'Test App',
website: 'https://example.com',
icon: null,
domain: 'example.com',
scopes: [],
expires_at: '2099-01-01T00:00:00.000Z',
approved_at: null,
registration_type: 'static',
}}
organizations={{
_tag: 'success',
organizations: [
{ name: 'Example Organization', slug: 'example-organization' } as
Organization,
],
}}
requestedOrganizationSlug={undefined}
actionError="Failed to authorize request: Test error"
onOrganizationChange={() => undefined}
onApprove={() => undefined}
onDecline={() => undefined}
/>
)
```
2. Open `http://localhost:8082/authorize?auth_id=test` while signed in.
3. Confirm the error appears below the authorisation actions with a
divider.
Remove the temporary return before committing anything.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added consistent inline error messaging for authorization,
organization invitations, and AWS Marketplace onboarding.
* Error messages now appear within the relevant interstitial and replace
supporting footer content until resolved.
* Retry and action buttons remain available after failed operations.
* **Bug Fixes**
* AWS Marketplace linking failures no longer trigger toast
notifications.
* Billing guidance is hidden while an onboarding error is displayed.
* **Tests**
* Added coverage for authorization, cancellation, and AWS Marketplace
failure states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
