Commit Graph

33 Commits

Author SHA1 Message Date
Danny White
887279ec2a fix(studio): align remaining platform auth labels (#49879)
## What kind of change does this PR introduce?

Copy fix in Studio platform UI.

## What is the current behavior?

Studio still uses mixed auth wording outside nav dropdowns: in-app API
docs use "Log in", account email change uses "Log out of",
forgot-password uses title-case "Sign In", and org invites use "Create
an account".

## What is the new behavior?

Aligns remaining Studio surfaces with **Sign in / Sign out / Sign up**.
Related to [#49874](https://github.com/supabase/supabase/pull/49874) and
[#49877](https://github.com/supabase/supabase/pull/49877).

CLI copy in `GeneratingTypes.tsx` is unchanged (`supabase login`).

## To test

- Account → change email (GitHub identity): instructions say **Sign out
of**
- `/forgot-password`: footer link says **Sign in**
- Org invite (signed out): secondary button says **Sign up**
- Project → API docs → User Management: section titles use **Sign in** /
**Sign out**

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Updated authentication terminology across user management guidance and
GitHub email-change instructions for consistency.

* **Improvements**
  * Changed the organization invitation link label to “Sign up.”
* Standardized the forgot-password page link capitalization to “Sign
in.”

* **Tests**
* Updated invitation view coverage to reflect the revised “Sign up”
label.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-04 16:52:28 +10:00
Danny White
840127cd69 let inline error callers own mutation failures (#48640)
## What kind of change does this PR introduce?

Code clean-up following #48470, #48471, #48472, #48473, and #48474.

## What is the current behavior?

Mutation hooks provide fallback error toasts, so callers that already
render errors inline must suppress those toasts with empty `onError`
handlers.

## What is the new behavior?

The affected callers own their error presentation. Inline interstitial
errors remain unchanged, API authorisation retains its state-reset
handlers, and Project Claim retains its combined caller-owned toast.

## To test

There is no useful before-and-after visual check for this PR: the
rendered error states should be identical on `master` and this branch.
The change only removes the default-toast and no-op-handler pair
underneath the UI.

The existing [Organisation
Invite](https://github.com/supabase/supabase/pull/48470), [API
authorisation, AWS
Marketplace](https://github.com/supabase/supabase/pull/48471), and
[Stripe Projects](https://github.com/supabase/supabase/pull/48472)
failure tests cover the inline errors and confirm that no duplicate
toast appears.
2026-08-06 16:06:38 +07:00
Danny White
2b26da360e show API and AWS authorization errors inline (#48471)
## 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>
2026-08-03 09:43:23 +10:00
Danny White
5edcaef74c chore: show organization invite errors inline (#48470)
## What kind of change does this PR introduce?

Bug fix and design-system documentation update.

## What is the current behavior?

Invite acceptance failures only appear in a transient toast.

## What is the new behavior?

Invite failures remain visible beside the actions. The design-system
guidance now distinguishes field, action, state, and toast feedback.

| Before | After |
| --- | --- |
| <img width="759" height="619" alt="Join Organization Supabase"
src="https://github.com/user-attachments/assets/ed8e974c-5da3-477a-81da-628d3f847131"
/> | <img width="741" height="768" alt="Join Organization Supabase"
src="https://github.com/user-attachments/assets/4c3f6bcd-4ed9-40b2-8280-e8c8a44ecbd6"
/> |

## To test

With local Studio running at `http://localhost:8082`:

1. Open
`apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts`.
2. At line 37, immediately inside `getOrganizationInviteStatus`, add:
   ```tsx
   return 'ready'
   ```
This deliberately bypasses invite lookup and account checks for the
visual test.
3. Open
`apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx`.
4. At line 30, change:
   ```tsx
   const [joinError, setJoinError] = useState<string>()
   ```
   to:
   ```tsx
const [joinError, setJoinError] = useState<string>('Invite token can
only be accepted via an SSO account')
   ```
5. Open `http://localhost:8082/join?token=test&slug=test` while signed
in.
6. Confirm the card says **Join an organization** and shows the error
below **Decline**, separated from the actions by a divider.
7. Revert both temporary edits before committing anything.

## Additional context

First PR in a five-PR stack.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a new connect interstitial example showcasing an inline
action-error state with clear retry guidance.

- **Bug Fixes**
- Invitation acceptance failures now show inline destructive feedback
under “Accept invite,” keeping the button enabled for retry (and
removing prior toast-based failure behavior).
  - Updated the invalid-invitation title to “Invalid invitation.”
  - Changed the “Decline” link destination to `/organizations`.

- **Documentation**
  - Expanded Sonner toast “When to use” guidance.
- Refined form and connect interstitial action-feedback patterns (inline
vs toast usage).

- **Tests**
- Updated and added coverage for the inline error rendering and “Invalid
invitation” text.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-31 06:23:24 +10:00
Alaister Young
0833c586ac fix(studio): use redirect({ to }) for internal TanStack redirects (#48469)
Hover-preloading any link that points at a redirecting path (e.g. the
org invite "Decline" link to `/projects`) hung the tab under the
TanStack runtime: `redirect({ href })` is treated as an opaque external
target, and the router's preload retry ignores `href` when rebuilding
the location, so it re-runs the same `beforeLoad`, throws the same
redirect, and recurses forever (TanStack/router#7141 — internal targets
must use `to`).

**Changed:**

- `routes/__root.tsx` — the redirect-table `beforeLoad` splits the
destination with `splitInternalUrl()` and throws `redirect({ to, search,
hash, statusCode })` instead of `redirect({ href })`. `to` is
basepath-relative, so the manual `BASE_PATH` prefix goes away too.
- `routes/index.tsx` — same `href` → `to`/`search`/`hash` switch for the
`/` redirects; the "targets aren't in the routeTree yet" comment was
stale (all three destinations resolve to real routes now).
- `OrganizationInvite.tsx` — "Decline" links straight to
`/organizations`, skipping the `/projects` redirect hop entirely.

## To test

- On the TanStack runtime, hover (don't click) a link to a redirecting
path — e.g. the auth overview's "Go to observability" link
(`/project/:ref/reports/auth`) or the 404 page's `/projects` link. The
page must stay responsive (this hung before).
- `/projects` → `/organizations` (307), `/project/:ref/database` →
`/database/tables` (308), `/` → `/org`.
- Query/hash semantics still hold: `/?next=new-project&projectName=x` →
`/new/new-project?projectName=x`;
`/project/:ref/database/wrappers?foo=bar` →
`/integrations?category=wrapper&foo=bar`; `/org/:slug/invoices#other` →
`/org/:slug/billing#invoices`.
- Chained redirects stay bounded: `/project/:ref/database/linter` →
`/advisors/security` in two hops.

All of the above verified locally via Playwright against the TanStack
dev server; `redirects.shared` / `internal-url` / compat-router unit
tests pass.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Fixed the invitation “Decline” action to route users to the
Organizations page instead of the Projects page.
- Improved Studio redirect/navigation handling by correctly preserving
URL search parameters and hash fragments and routing to the intended
destination.
- **Tests**
- Updated Organization Invite test expectations to reflect the corrected
“Decline” link destination.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-30 12:42:47 +08:00
Alaister Young
ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-29 00:48:56 +08:00
Gildas Garcia
b30db91d71 chore: cleanup UI patterns exports (#47406)
## Problem

We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.

## Solution

- Remove the UI patterns index file
- Fix invalid impors
2026-06-30 09:23:17 +02:00
Joshen Lim
37b072aac2 Improve UI for org invites if MFA is enforced (#47067)
## Context

When opening an invite to join an organization that's enforced MFA for
their members, if a member does not have MFA enabled yet, they'll see
this UI which is confusing as there's no clear direction on what to do
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/ca2d1047-20bf-40ca-a9ea-91e81c390e40"
/>

## Changes involved
- Updating the UI to consider this error message and prompt users to set
up MFA
<img width="501" height="317" alt="image"
src="https://github.com/user-attachments/assets/d074ac6d-fd74-4fe0-9078-473fd2401045"
/>
- Small UI nudges to account security page
  - Tight copywriting to explicitly say MFA
- Opt to use Card instead of Collapsible (collapsible seems unnecessary
given that this is the only UI on this page)
  - Before:
<img width="811" height="360" alt="image"
src="https://github.com/user-attachments/assets/1412da3b-3903-4966-85ea-46e0ff443177"
/>
  - After:
<img width="817" height="370" alt="image"
src="https://github.com/user-attachments/assets/02d5a2f5-8c1f-4f78-8a20-10c7a4ff563c"
/>
- Tiny change to the user dropdown, say "account" instead of "account
preferences" + change icon
- This imo aligns better as the account page covers more than just
preferences
  - Before:
<img width="307" height="178" alt="image"
src="https://github.com/user-attachments/assets/fea43cac-9b0c-4fe4-94a3-946ed0925901"
/>
  - After:
<img width="300" height="183" alt="image"
src="https://github.com/user-attachments/assets/800357fe-222f-49b8-b52b-ce4fabff7b95"
/>

## To test
- [ ] Have an organization on paid plan with MFA enforced
- [ ] Invite a user that doesn't have MFA enabled
- [ ] Try to join the organization with that user

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Organization invites now detect and handle MFA requirements with
specific error messaging
* Redesigned Multi-factor authentication section on account security
page

* **Improvements**
  * Updated TOTP authenticator help text for clarity
  * Updated account menu navigation label

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2026-06-18 18:50:40 +08:00
Gildas Garcia
96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00
Danny White
9660b0075c refine organisation invite state helpers (#45813)
## What kind of change does this PR introduce?

Code cleanup. Follow-up to #45774.

## What is the current behavior?

The organisation invite interstitial derives invite states, titles, and
descriptions from nested conditional logic in the component. That makes
the component harder to scan and pushes too much state coverage into
render tests.

## What is the new behavior?

See #45774 for screenshots of the general UI before-and-after (which
this one builds upon). That PR also contains testing instructions.

Extracts the invite status and content decisions into small pure
helpers, then covers those helpers with focused unit tests.

The component keeps the user-facing render and interaction coverage,
including the invalid lookup regression where a 404 should render the
invalid invite state instead of raw backend copy.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved organization invite flow with enhanced error state handling
for expired, invalid, and wrong-account scenarios.
* Better consistency in error messages and user guidance throughout the
invite process.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45813)

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 10:40:41 +10:00
Danny White
791fc74412 feat(studio): shared connect layout for organisation invites (#45774)
## What kind of change does this PR introduce?

Feature. Part of DEPR-279.

## What is the current behavior?

The organization invite page has its own bespoke centered card and
page-level Supabase logo.

## What is the new behavior?

Introduces a minimal shared interstitial layout and migrates `/join`
onto it as the first small connect-surface slice. The invite API and
accept-invite mutation paths are unchanged.

| Before | After |
| --- | --- |
| <img width="1024" height="794"
alt="Supabase-F2325C57-D5DE-445D-8083-12EF8A1EE0CA"
src="https://github.com/user-attachments/assets/b23dcc7a-c649-4b59-9393-9232d74f0c6b"
/> | <img width="1024" height="794" alt="Join Organization
Supabase-66CDA329-0531-4B12-AC32-A7E21931F876"
src="https://github.com/user-attachments/assets/454917ce-1a96-4e50-b003-6c16a541b39a"
/> |
| <img width="1060" height="822" alt="CleanShot 2026-03-13 at 11 04
43@2x-2616AECB-8203-4439-A1CD-45AB18FC4CA8
1-584A0600-CCE0-4F16-9111-9BEB94BE85EC"
src="https://github.com/user-attachments/assets/871c7dcb-120e-40cd-afc8-2cec95e4b7ae"
/> | <img width="1024" height="794" alt="Join Organization
Supabase-26AD978E-4CF9-4600-9885-082084349E94"
src="https://github.com/user-attachments/assets/ee9bfaff-dde4-4366-abae-77dc8a95c4ef"
/> |
| <img width="1024" height="794"
alt="Supabase-4993D74C-D62B-43B7-9681-826BE1591AC4"
src="https://github.com/user-attachments/assets/1c411ae0-90e7-481d-a4cc-3eac26267291"
/> | <img width="1024" height="794" alt="Join Organization
Supabase-C84D4E4C-24F5-463D-B1D6-D11D3256596F"
src="https://github.com/user-attachments/assets/688387a4-3c49-41db-b89c-7c5531e91aed"
/> |
| <img width="1024" height="794"
alt="Supabase-D9BD2601-98A4-489D-A51D-CEB73F51FA6F"
src="https://github.com/user-attachments/assets/6d1da65f-d655-4047-9f6a-db65f8c0a729"
/> | <img width="1024" height="794" alt="Join Organization
Supabase-50065F40-179A-4BD6-8F1D-6106FFD8A15C"
src="https://github.com/user-attachments/assets/e61809f9-dcec-4e51-ba94-91b04010ec50"
/> |

## Testing notes

Staging invite emails are generated with the fixed staging dashboard
origin, for example:

```text
https://supabase.green/dashboard/join?token=...&slug=...
```

To test this PR preview with a real invite token, keep the path and
query string from the email but replace the origin with the Vercel
preview origin, for example:

```text
https://studio-staging-git-dnywh-featconnect-interstitial-join-supabase.vercel.app/dashboard/join?token=...&slug=...
```

### Manual state checks

- **Signed out:** open the swapped invite URL in an incognito window or
a browser signed out of Studio. Expected: `View invitation`,
sign-in/create-account actions, and no loading skeleton hang.
- **Wrong account:** sign in to the PR preview as an account that is not
the invite recipient, then open the swapped invite URL. Expected: `Wrong
account`, warning callout, and `Sign out`.
- **Happy path:** sign in as the invited email address, then open the
swapped invite URL. Expected: `Join {Organization}`, signed-in account
row, `Accept invite`, and `Decline`. Accepting should join the
organization.
- **Invalid token:** alter one character in the token in the swapped
invite URL. Expected: invalid invite state.
- **No longer valid:** accept the invite once, then open the same
swapped invite URL again. Expected: no-longer-valid/already-used state,
depending on the backend response.

### Test-covered states

Expired invites, generic backend error, loading, and
create-account-disabled states are harder to force manually in staging.
They are covered by `tests/components/OrganizationInvite.test.tsx`.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Redesigned the organization invitation experience with an interstitial
layout, clearer early-return flows for signed-out, loading,
expired/invalid, wrong-account, and accepted-invite states; primary CTA
now reads “Accept invite”.
* Streamlined error and sign-out flows with clearer, focused messaging.

* **New Features**
* Added a reusable interstitial layout and compact account row for
invitation screens.

* **Tests**
* Added comprehensive tests covering invite states, accept/decline
actions, and error handling.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45774)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-12 10:41:47 +10:00
Jeremias Menichelli
c49eb8bb7d Revert "chore(studio + design-system): more flexible Admonition" (#45535) 2026-05-05 00:18:27 +08:00
Danny White
5bfbae22a9 chore(studio + design-system): more flexible Admonition (#45302)
## What kind of change does this PR introduce?

Feature and design-system cleanup. Resolves DEPR-551.

## What is the current behavior?

Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.

Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.

## What is the new behavior?

Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.

The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.

This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.

Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.

| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |

| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.

* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.

* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.

* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 07:15:00 -06:00
Ivan Vasilov
56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Charis
39e21ebef6 fix(studio): flash of sign in for join organization page (#41283)
The join organization page flashes the sign in screen briefly because it
does not check for loading status. Fixed so it goes directly from
loading skeleton to join confirmation view.

Resolves FE-2220
2025-12-11 20:14:07 +00:00
Ivan Vasilov
0d5be306ef chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.

* Migrate keepPreviousData usage.

* Migrate all uses of InfiniteQuery.

* Fix refetchInterval in queries.

* Migrate all use of isLoading to isPending in mutations.

* Fix accessing location in claim-project.

* Fix a bug in duplicate query keys.

* Migrate all queries to use isPending.

* Revert "Fix accessing location in claim-project."

This reverts commit 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Danny White
0399beba0e chore(studio): use Admonition and deprecate AlertError (#41095)
* use admonition and deprecate

* spot fix

* remove mb on admonition itself

* smart layout handling based on actions count

* fixes

* remove class

* fixes

* remove mb-0 instances

* remove redundant m-0

* remove single-use component

* use props

* reset leading

* remove redundant clause
2025-12-08 12:15:18 +11:00
Alaister Young
46f5baad78 [FE-2176] fix(studio): add missing sign up enabled flag for nimbus (#41019)
fix(studio): add missing sign up enabled flag for nimbus
2025-12-03 21:41:11 +08:00
Ivan Vasilov
43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
Aryan
482c225f29 fix : sign up redirect link added (#40261)
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-11-17 14:18:11 -07:00
Joshen Lim
64e3e047eb Final final cleaning up barrel files (#40018)
* Final final cleaning up barrel files

* Fix merge conflict
2025-10-31 14:02:59 +08:00
Joshen Lim
8ccc718cfd Fix organization invite missing logged out state (#38913) 2025-09-22 16:05:14 +07:00
Joshen Lim
584a3622b9 Improve member invite UI (#38851)
* Improve member invite UI

* Nit

* Update based on feedback
2025-09-22 10:35:45 +07:00
Jordi Enric
6ee89f79b1 update org invite error (#35832)
update error
2025-05-22 11:07:09 +02:00
Joshen Lim
fd98a08a4f Chore/default to new organization layout (#35515)
* Default to new organization layout + remove feature preview

* Remove feature preview

* Clean up LayoutUpdateBanner

* Clean up

* Fix

* Fixy fix

* Update comment

* Nit to fix layout shift
2025-05-13 11:25:35 +08:00
Joshen Lim
caae765a6e Obfuscate org invite name and slug if not logged in (#34986) 2025-04-14 13:36:04 +08:00
Joshen Lim
e6c249d9b5 Shift all uses of project api query to project settings v2 query, and deprecate project api query (#30029)
* Add perms check in projects API query

* Start deprecating use of projects-api-query, move to projects-settings-v2-query

* PRETTY

* Shift all uses of project api query to project settings v2 query, and deprecate project api query

* Fix

* Fix

* Small unrelated styling fix on join page

* Fix

* Update apps/studio/components/interfaces/Auth/Users/UserOverview.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2024-10-23 20:02:20 +08:00
Joshen Lim
2c7abaee95 Fix padding in join page (#29137)
* Fix padding in join page

* Don't show decline or join button if there's an error
2024-09-06 22:46:25 +08:00
Ivan Vasilov
df52ea7ee0 feat: Replace all toasts with sonner (#28250)
* Update the design of the sonner toasts. Add the close button by default.

* Migrate studio and www apps to use the SonnerToaster.

* Migrate all toasts from studio.

* Migrate all leftover toasts in studio.

* Add a new toast component with progress. Use it in studio.

* Migrate the design-system app.

* Refactor the consent toast to use sonner.

* Switch docs to use the new sonner toasts.

* Remove toast examples from the design-system app.

* Remove all toast-related components and old code.

* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.

* Fix the width of the toast progress.

* Use text-foreground-lighter instead of muted for ToastProgress text

* Rename ToastProgress to SonnerProgress.

* Shorten the text in sonner progress.

* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.

* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).

* Fix the playwright tests.

* Refactor imports to use ui instead of @ui.

* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.

* Remove react-hot-toast lib.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-08-31 07:50:51 +08:00
Alaister Young
be74acfad3 fix: minor invite flow fixes (#28158)
* fix: minor invite flow fixes

* invalidate organizations
2024-07-24 16:13:26 +08:00
Joshen Lim
d4116e9bfc Reinstate old org invite flow endpoints (#27681) 2024-07-02 10:54:05 +08:00
Joshen Lim
1127c4ba88 Project Level Permissions (#27347)
* fix: update Permission params

* fix: upgrade check permission hook to support project level role

* fix: usePermissionsLoaded

* fix: Permission params can be undefined

* Scaffold new access management UI

* Add validation

* Update roles view

* Add tooltip

* Add button to apply role to all projects

* Update UI to select projects first instead of roles

* Merge master update UI

* Midway trying to implementation project level perms API

* First pass implementating updating project level permissions

* Add client side validation for assigning/removing roles

* Midway implementing new invites

* Integrate most of the project level permissions functionality

* fix: filter out org-level permissions before checking

* Add relevant UI guards in org level pages for project role POV

* Minor refactors

* Small refactors

* More fixes

* Moar refactors

* More fixes

* More fixes

* Refactor update role logic and smack some test cases on it

* Fixes

* Fix type issue

* Fix type

* more fixes, refactors, adding checks...

* MORE fixes

* Add perms checking for replicas

* Add ButtonTooltip component and use them to prevent repetition of pointer events auto for buttons with tooltips

* Convert all buttons with tooltips to use ButtonTooltip

* refactor

* PRettier

* Small fix

* Remove commented out code in organization-invitation-accept-mutation

* fix: switch to use the platform oauth authorizations routes

* Add perms checking for org audit logs and org oauth apps

* PRettier

* Fix incorrect URL for oauth app flow

* Fix incorrect URL for oauth app flow

* Fix

* Add perms checking for warehouse related UI

* Update roles helper icon

* remove unused lib

* Update package lock... again

* Update package lock... again

* Smalllll update

* Update some checks

* Add gate for project level permissions

* Last fix

* update codegen

* Update warehouse endpoint routes

* Fix

---------

Co-authored-by: phamhieu <phamhieu1998@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
2024-07-01 17:59:54 +08:00