## Summary
Fixes
[FE-3987](https://linear.app/supabase/issue/FE-3987/contact-support-pre-fills-the-wrong-supabase-project-id):
the "Contact support" button shown in the Table Editor's inline error
banner (e.g. "Failed to retrieve rows from table") didn't pass the
current project or organization to the support form. This caused the
support form to fall back to the user's first organization/project
instead of the one actually affected — especially noticeable when the
Management API request used to resolve the org also fails.
## Test plan
- [ ] Open a project in Studio, go to **Table Editor**, open a table.
- [ ] Trigger a failing table query — either block the `rest/v1/<table>`
request in DevTools, or apply a filter with a mismatched type (e.g. `id
= 'abc'` on an int column).
- [ ] On the inline red "Failed to retrieve rows from table" banner,
click **Contact support**.
- [ ] Confirm the support form pre-fills the **correct organization and
project** — the one the failing table actually belongs to.
- [ ] Repeat with a project belonging to an organization that is *not*
first in your org list, to confirm it's not coincidentally correct.
- [ ] Repeat while simulating a Management API failure (e.g. block
`api.supabase.com`/`*.supabase.co/platform/*`) to confirm the org still
resolves correctly via the `orgSlug` fallback instead of silently
defaulting to your first org.
- [ ] Sanity check other "Contact support" entry points (header Feedback
dropdown, Help sidebar) are unaffected — they use a separate,
already-correct code path.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved error handling when project details cannot be loaded,
preserving relevant project and organization context.
* Improved fallback behavior for identifying the correct organization
when project information is unavailable or unresolved.
* Support requests opened from error messages now include applicable
project and organization information.
* Error messages now consistently display available additional actions
alongside contact support options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Fixes FE-4130.
## What is the current behavior?
When submitting the support form with required fields missing, the form
does not scroll to or focus the required empty field. Users have to
manually find which field they missed.
## What is the new behavior?
On submit, the form automatically scrolls to and focuses the first
required field that's missing a value - including "What issue are you
having?" and "Which library are you having issues with?".
## Additional context
The scroll wasn't working due to a Chrome bug where scrollIntoView is
blocked when overflow-x: hidden and overflow-y: auto are on the same
element (the sidebar scroll container). The fix manually walks the DOM
to find the scrollable parent and calls scrollTo() directly. Dropdown
fields (Radix Selects) were also unfindable via the usual name
attribute, so data-support-field attributes are used as a stable DOM
hook for those.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Bug Fixes
* Improved support form validation by automatically scrolling to the
first invalid or missing required field.
* Added smooth scrolling and focus behavior to help users quickly
correct form errors.
* Ensured the client library field is brought into view when required
information is missing.
* Improved field targeting for category and client library validation
messages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## Summary
Support access is granted per-project, but the "Allow support access"
toggle stayed visible and submittable even when "No specific project"
was selected. This hides the toggle and forces
`allowSupportAccess`/`allow_support_access` to `false` in that case,
across the standalone support form, sidebar form, and link-ticket form.
Addresses
[FE-3979](https://linear.app/supabase/issue/FE-3979/support-form-allows-support-access-without-a-project-selected).
## Test plan
- [x] Added/updated unit tests in `SupportFormPage.test.tsx` covering
toggle visibility and submitted payload when no project is selected
- [x] `pnpm vitest run components/interfaces/Support` passes (48 tests)
- [x] Typecheck and lint pass on changed files
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Support access is now offered only when a valid project and eligible
support category are selected.
* Support access is automatically disabled when no specific project is
selected.
* Form submissions now prevent unsupported support-access requests from
being enabled.
* **Tests**
* Added coverage for project clearing and scenarios without available
projects or organizations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Refactors our help sidebar within Studio to include the actual support
form itself when contact is selected. This PR also cleans up the initial
state of the sidebar and the options within.
## To test:
- Open an org and click the help icon top right
- Click contact support
- Submit a support ticket
- Click done to return to support sidebar state
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Support form V3 and support sidebar with status button; direct-email
helper and URL prefill
* Success screen supports onFinish callback and customizable finish
label
* AI Assistant and Help options accept optional click callbacks;
resource items gain keyboard/accessibility support
* **Refactor**
* Help panel split into home/support views with back navigation
* Support components accept flexible align/className props and
layout/styling tweaks
* Initial URL params loader added for support form
* **Tests**
* New/updated tests for support flows, success screen, and help options
interactions
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
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>
When the dashboard hits a DB connection timeout, users currently see a
raw error message with no
path forward. This PR adds an inline troubleshooting system that detects
known error types and
surfaces contextual next steps — restart the DB, read the docs, or debug
with AI.
## Changes
- New ErrorDisplay component (packages/ui-patterns) — styled error card
with a title, monospace error
block, optional troubleshooting slot, and a "Contact support" link that
always renders. Accepts
typed supportFormParams to pre-fill the support form.
- Error classification in handleError (data/fetchers.ts) — on every API
error, the message is tested
against ERROR_PATTERNS. If matched, handleError throws a typed subclass
(ConnectionTimeoutError
extends ResponseError) instead of a plain ResponseError. Stack traces
now show the exact error
class. All existing instanceof ResponseError checks continue to work.
- ErrorMatcher component — reads errorType from the thrown class
instance, does an O(1) lookup into
ERROR_MAPPINGS, and renders the matching troubleshooting accordion as
children of ErrorDisplay.
Falls back to plain ErrorDisplay for unclassified errors.
- Connection timeout mapping — first error type wired up, with three
troubleshooting steps: restart
the database, link to the docs, and "Debug with AI" (opens the AI
assistant sidebar with a
pre-filled prompt).
- Telemetry — three new typed events track when the troubleshooter is
shown, when accordion steps are
toggled, and which CTAs are clicked.
## Adding a new error type
1. Add a class to types/api-errors.ts
2. Add { pattern, ErrorClass } to data/error-patterns.ts
3. Create a troubleshooting component in errorMappings/
4. Add an entry to error-mappings.tsx
## What kind of change does this PR introduce?
UI improvement
## What is the current behavior?
The session expired dialog is quite hard to parse when, for most people,
the ask is simple.
## What is the new behavior?
Improved session expired dialog:
- Refactored to use AlertDialog
- Clarified copywriting
- Uses the new AlertCollapsible to hide all the complicated debugging
steps under a toggle
- This component is documented in the design-system
| Before | After |
| --- | --- |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/b2fcab68-fb29-4cb9-bd42-aecc57b9fa32"
/> |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/babd3711-5fdf-43b9-be06-d96268a191fd"
/> |
## To test
In apps/studio/hooks/misc/withAuth.tsx:
```diff
- const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(false)
+ const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(true) // Mocked as true for UI testing
```
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat(studio): clean up support form message
Support form message currently has the studio version and dashboard logs
link appended to the end. On request from the Support team, we're moving
this to metadata fields so it won't be as distracting.
* Hide IncidentAdmonition if event is maintenance
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* o11y: mirror and sanitize breadcrumbs
Mirror Sentry breadcrumbs as the basis for our own support logging. Also
adds more sanitization to breadcrumbs.
* feat(support form): toggle for attaching dashboard logs
Add a toggle to the support form when the category is "Dashboard bug",
to attach recent dashboard logs. Users can preview the attached logs and
opt out.
* feat(support links): dedicated support link component
Add a new component for support links, which:
- Uses the serializer for support link params to ensure
serialization/deserialization pairs correctly
- Snapshots breadcrumbs so the attached log on the support form will be
cut off at the support link click (otherwise we will get support form
actions cluttering up the log)
* tests(support form): extend timeout on flaky test
* Minor clean up
* fix(support form): allow url to specifically indicate no specified project
* minor nits
* Fix tests
* Fix tests
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* fix: add time zone to commit time and add to support message
The time zone isn't getting logged on the commit times, which makes it
confusing what the actual time is. Also added it to the support message
alongside the version number, to help quickly rule out outdated version
issues.
* Nit unrelated update auth users sort dropdown copy
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* fix(feedback): generate image urls on backend
* Fix support form skip generate attachment urls if no attachments
* Refactor to use useLocalStorageQuery
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Knowing the commit SHA will help us debug issues by matching them to Git
timeline. Added the commit SHA in two places:
1. Automatically as part of the message on support requests
2. Logged within the console, so we can ask the user to double-check
when checking if issues persist/are fixed
* fix(support form): api route to create attachment urls
* clean: remove console log
* fix staging and prod
* Minor clean up
* Shift generation of urls to data folder
* refactor
* Final
* Fix tests
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* refactor: refactor support form
Refactor support form to make it easier to maintain:
- Split up large components into smaller components and hooks
- Lift state up so we don't have to do complex child/parent
state-syncing via useEffect
- Use nuqs parsing for consistent serialization/deserialization of
support form prefilled fields
* test: support form
Add comprehensive tests for support form
* fix(support form): project and org empty state
* Nit clean up
* More clean up
* cleannnn
* fix(support form): allow case-insensitive category in url
* clean(support form tests): remove unused param
* fix(support form): incorrect logic for sending affected services in payload
* clean(support form): use NO_ORG_MARKER and NO_PROJECT_MARKER instead of strings
* fix(support form): don't show upgrade cta if already on enterprise
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
* Dont hide org field when project is selected
* Refactor SupportForm to use new form components and fix UX oddities identified
* Add scroll area to docs search results
* Address feedback
* Small padding nudge
* Add check
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
