Commit Graph

50 Commits

Author SHA1 Message Date
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
fadymak
19dfbd250a feat(auth): expose access token expiry under auth settings (#48236)
Exposes the access token expiry (`JWT_EXP`) under `Auth -> Sessions`
settings as opposed to the Legacy JWT settings previously used.

<img width="1632" height="1199" alt="Screenshot 2026-07-23 at 10 06 33"
src="https://github.com/user-attachments/assets/85356e57-da95-404c-852a-21cf9cab2b74"
/>
<img width="1198" height="1119" alt="Screenshot 2026-07-23 at 10 06 19"
src="https://github.com/user-attachments/assets/bfa64b3b-1902-45eb-83ed-ca8bc12673af"
/>
<img width="1237" height="513" alt="Screenshot 2026-07-23 at 10 03 44"
src="https://github.com/user-attachments/assets/85779e9b-30f2-48c5-9faa-4c650d450227"
/>


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

* **New Features**
* Added an **Access Tokens** section to configure JWT expiration with
dedicated Save/Cancel controls and success/error toasts.
* Enforced a maximum JWT expiration value (must be **less than 604800
seconds**).
* **Bug Fixes**
* Updated the Sessions auth page text to better clarify configuration
for access tokens, refresh tokens, and user sessions.
* **Documentation**
* Updated JWT expiration guidance to point to **Auth settings → Access
Tokens** (replacing legacy JWT secret references).
* **Chores**
* Expanded automated tests covering Access Tokens saving and validation.
* **Refactor**
* Removed JWT expiration editing from the legacy JWT Secrets area,
consolidating it under Access Tokens.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 10:13:10 +02:00
Joshen Lim
22b3419a28 Extract project creation form into its own component (#47957)
## Context

This is just a pre-requisite to consolidating the project creation UI as
there's another page that has the project creation flow too
[here](https://github.com/supabase/supabase/blob/master/apps/studio/pages/integrations/vercel/%5Bslug%5D/deploy-button/new-project.tsx).
So the next step will just be to use the same `ProjectCreationForm`
there

No functional changes here - just moving things around

## To test
- [ ] Verify that project creation still works



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

* **New Features**
* Added a full “create project” experience with eligibility-aware
defaults, advanced configuration sections, optional GitHub integration,
and compute-cost confirmation when applicable.
* **Improvements**
  * Enhanced project-creation success/error handling and navigation.
* Refined CLI backup/restore dialogs (better layout/wording,
accessibility updates, and improved section separation).
* **Documentation**
* Standardized all relevant documentation links across the app using a
shared `DOCS_URL` source.
* **Refactor**
* Refactored the “New Project” page to delegate the wizard UI and flow
to a reusable creation component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-16 14:00:55 +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
Gildas Garcia
7f1298e35e chore: dead code cleanup (#47129)
## Problem

We have many unused files, left overs from features refactoring

## Solution

- Remove unused files
- Move some files closer to their usage

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

* **Refactor**
* Removed multiple legacy Studio UI components and placeholders to
streamline the interface (including onboarding panels, navigation
elements, docs layout helpers, and various UI building blocks).
* **UI Updates**
* Updated the layout’s API keys section to use the Project-specific
presentation.
* **Maintenance**
* Adjusted internal sourcing for documentation tab menu logic without
changing visible behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-22 10:36:21 +02: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
Andrey A.
ca9b02b5ac feat(self-hosted): add minimal project settings (#46554) 2026-06-02 15:37:42 +02:00
Danny White
498d051d88 feat(studio): add project settings shortcuts (#46352)
## What kind of change does this PR introduce?

Feature. Resolves FE-3417.

## What is the current behavior?

Project Settings has a top-level `G then ,` shortcut, but its
subnavigation and repeated key/log drain actions do not have scoped
keyboard shortcuts or visible shortcut tooltips.

| Area | Current behaviour |
| --- | --- |
| Project Settings sidebar | Routes are click-only once users are inside
Settings. |
| API/JWT keys | Creation buttons do not expose keyboard shortcuts. |
| Log Drains | Add/save destination actions do not expose keyboard
shortcuts. |

## What is the new behavior?

Adds scoped Project Settings navigation chords, shortcut tooltips on the
sidebar rows, and page/action shortcuts for API keys, JWT standby keys,
and Log Drains.

| Area | New shortcut coverage |
| --- | --- |
| Project Settings sidebar | `S then G/C/I/N/W/K/J/L/A/D` for eligible
in-section routes. |
| API Keys | `Shift+P` and `Shift+S` open the publishable/secret key
dialogs; `Mod+Enter` submits the open dialog. |
| JWT Keys | `Shift+N` opens Create standby key; `Mod+Enter` submits the
open dialog. |
| Log Drains | `Shift+N` adds a destination when the primary action is
available; `Mod+Enter` saves the open destination sheet. |


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

* **New Features**
* Added keyboard shortcuts for Project Settings navigation and for
actions in API Keys, JWT Keys, and Log Drains (open, create/submit).

* **Improvements**
* Dialogs and forms now support keyboard-triggered open and submit
actions with improved enable/disable gating and updated settings menu
composition; shortcuts appear in the shortcuts reference.

* **Tests**
* Added tests covering shortcut wiring and shortcut-driven open/submit
behaviors across dialogs and action panels.

<!-- review_stack_entry_start -->

[![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/46352?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-05-26 15:48:50 +00:00
Gildas Garcia
2da5e69a4f chore: migrate Modal to Dialog (JWT, PITR) (#46366)
## Problem

Some pages still uses the deprecated `Modal` for:
- Legacy JWT new secret
- PITR recovery confirmation

## Test

Hard to test the JWT. I had to force its display by settings its `open`
prop to `true` in
`apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx`

## Solution

- use `Dialog` instead

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

* **Refactor**
* Improved database restore (PITR) confirmation: replaced modal flow
with an alert dialog, reorganized review sections (timing, warnings),
and made the restore action await completion for clearer feedback.
* Redesigned JWT secrets dialog: replaced modal with dialog primitives,
centralized form and state reset on open/close, moved confirmation into
dialog footer, and disabled confirm during submission.

<!-- review_stack_entry_start -->

[![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/46366?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 14:31:57 +02:00
Gildas Garcia
5d97339d41 chore: remove <Select> _Shadcn_ suffix (#45988)
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Select` components

## Solution

Remove it. No other changes

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

## Summary by CodeRabbit

* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.

<!-- review_stack_entry_start -->

[![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/45988)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 16:39:57 +02:00
Gildas Garcia
8c6d5036ea chore: remove <Label> _Shadcn_ suffix (#45986)
## Problem

The `_Shadcn_` suffix isn't needed anymore on label component

## Solution

Remove it. No other changes

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

* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.

<!-- review_stack_entry_start -->

[![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/45986)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 15:55:33 +02:00
Gildas Garcia
0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
2026-05-15 14:55:37 +02:00
Terry Sutton
4f88620c1a Fix jwxs format (#45697)
<img width="1244" height="1146" alt="CleanShot 2026-05-07 at 17 07 32"
src="https://github.com/user-attachments/assets/475cce46-a066-4a8b-a0e0-82261e1e4e73"
/>

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

* **Improvements**
* Public key display in JWT key details now shows a pretty-printed JWKS
(JSON Web Key Set) with updated JWKS-oriented labeling.
* The key textarea is wrapped in a positioned container for improved
layout and readability.

* **New Features**
* Added an overlaid Copy button labeled “Copy JWKS” to copy the
displayed JWKS directly from the key details view.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 20:28:01 +00:00
Gildas Garcia
678aec3845 chore: migrate Input usages to Shadcn component in various screens/components (#45604)
## Screenshots

### Table editor: foreign record selector
Before:
<img width="802" height="213" alt="image"
src="https://github.com/user-attachments/assets/82ee3ce6-ac72-4b49-b1b0-2e635688cbb1"
/>

After:
<img width="609" height="194" alt="image"
src="https://github.com/user-attachments/assets/e9cc09c1-1c6b-4099-8cae-abe08f50fda9"
/>


### Account - Add TOTP
Before:
<img width="527" height="679" alt="image"
src="https://github.com/user-attachments/assets/b9f4a626-e24b-46e3-8385-700ef181308b"
/>

After:
<img width="531" height="684" alt="image"
src="https://github.com/user-attachments/assets/549745a7-9655-4a7d-9e0e-51f75b6a1c61"
/>

### Organisation Audit Logs Details
Before:
<img width="673" height="1321" alt="image"
src="https://github.com/user-attachments/assets/0bb360cf-6f27-4574-b9af-485a3836b17b"
/>

After:
<img width="669" height="1273" alt="image"
src="https://github.com/user-attachments/assets/0382c662-e270-41fd-a8ee-08528dedfce3"
/>

### Data API Integration Docs
Before:
<img width="1115" height="891" alt="image"
src="https://github.com/user-attachments/assets/db0c7698-53b7-4422-aac3-5e674b0bf151"
/>

After:
<img width="1193" height="1272" alt="image"
src="https://github.com/user-attachments/assets/927e5c43-413b-49c1-9b71-8ab628179c70"
/>

### Edge Function Edit Secret
Before:
<img width="599" height="255" alt="image"
src="https://github.com/user-attachments/assets/d6aa2f87-e247-4724-9e43-02b71933241c"
/>

After:
<img width="596" height="261" alt="image"
src="https://github.com/user-attachments/assets/d94acb41-07e1-497f-9697-830390526f4a"
/>

### JWT Key Details
Before:
<img width="536" height="549" alt="image"
src="https://github.com/user-attachments/assets/43672adc-dc0e-4e65-b7d4-b4537d22f6ea"
/>

After:
<img width="523" height="517" alt="image"
src="https://github.com/user-attachments/assets/e501e8a8-7f41-46a0-bb69-d240cea594f0"
/>

### Realtime Filter Popover
Before:
<img width="403" height="576" alt="image"
src="https://github.com/user-attachments/assets/73842450-ba87-456b-98fc-625b99149449"
/>

After:
<img width="387" height="564" alt="image"
src="https://github.com/user-attachments/assets/f2b35035-947c-4342-84dd-3548f9bd5e9f"
/>

### Realtime broadcast message dialog
Before:
<img width="520" height="393" alt="image"
src="https://github.com/user-attachments/assets/4f4a1a93-e0cf-4268-ae4e-baf8b8a62e74"
/>

After:
<img width="525" height="392" alt="image"
src="https://github.com/user-attachments/assets/e1c1934a-1812-4013-8606-9b846dc2498d"
/>

### Impersonation Popover
Before:
<img width="604" height="501" alt="image"
src="https://github.com/user-attachments/assets/9abdc604-94f8-4ed4-9a95-4688e6504e76"
/>
<img width="587" height="599" alt="image"
src="https://github.com/user-attachments/assets/5293c80c-9abd-43eb-899f-da759c83b598"
/>

After:
<img width="594" height="585" alt="image"
src="https://github.com/user-attachments/assets/5eaf2162-2d7f-444c-9052-c9afb00080f6"
/>
<img width="590" height="597" alt="image"
src="https://github.com/user-attachments/assets/149dc7c1-689c-4e0f-a884-c6f5b0228ebc"
/>

### Storage move item
Before:
<img width="521" height="285" alt="image"
src="https://github.com/user-attachments/assets/7d0f945f-add5-412b-813a-9325b260ab28"
/>

After:
<img width="529" height="274" alt="image"
src="https://github.com/user-attachments/assets/ab0891a1-b31b-40b6-be53-92afc95095ea"
/>

### Table Editor - Spreadsheet import
Before:
<img width="673" height="506" alt="image"
src="https://github.com/user-attachments/assets/7a722908-10c2-4c04-95fb-b12d3c23557c"
/>

After:
<img width="671" height="638" alt="image"
src="https://github.com/user-attachments/assets/689b1fb6-031c-4a02-9e7f-739356c1453d"
/>

### Org Billing downgrade survey
Before:
<img width="788" height="655" alt="image"
src="https://github.com/user-attachments/assets/c7a0d4c6-e9b9-4c6c-9cf1-e7d05016233f"
/>

After:
<img width="1630" height="1354" alt="image"
src="https://github.com/user-attachments/assets/e3f5473b-db9a-42b1-9242-40480c25fc02"
/>

### Project API Docs
Before:
<img width="1030" height="396" alt="image"
src="https://github.com/user-attachments/assets/95643b21-811a-4ba7-918a-5e655c262ac1"
/>

After:
<img width="1012" height="457" alt="image"
src="https://github.com/user-attachments/assets/d5559646-bb89-43b6-ad62-c5684b54b3fb"
/>


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

* **Refactor**
* Standardized form field layouts across panels, dialogs, and modals for
a more consistent editing and reading experience.
* Replaced several Input-based textareas with dedicated
TextArea/ExpandingTextArea controls and aligned labels with wrapper
layouts for clearer accessibility.
* Introduced grouped/composable input controls, added additional
read-only detail fields and labeled value/copy blocks, and tightened
header/layout spacing and control alignment.
  * Swapped notice styles for improved warning/admonition presentation.

* **Chores**
  * Removed a deprecated AutoTextArea component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 17:07:11 +02:00
Ali Waseem
50ccd39b31 fix(studio): use warning tokens for previously used JWT signing key badge (#45460)
## Summary
- Replaces invalid Tailwind purple classes on the "previously used" JWT
key badge with the design system's warning tokens, matching the
bg-*-200/text-*-600/border-*-500 pattern used by the in_use and revoked
variants
- text-purple-1200 didn't exist (Tailwind purple scale stops at 950) and
the design system has no purple palette, which is why the badge rendered
with off-theme default Tailwind purple

Resolves
[FE-3128](https://linear.app/supabase/issue/FE-3128/fix-previous-key-button-color-in-jwt-rotation-modal)

## Test plan
- [x] Open the Rotate JWT signing key modal — "Previous key" badge
should match the warning palette and visually fit alongside
Standby/Current
- [x] JWT signing keys table row with status `previously_used` renders
with the same warning styling

## Example 
<img width="426" height="570" alt="image"
src="https://github.com/user-attachments/assets/34baca2b-48c0-4cd3-b997-d5c029182ad4"
/>
2026-05-01 14:18:17 +00: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
Ivan Vasilov
308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02:00
Gildas Garcia
416210d666 chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)
## Problem

With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore

## Solution

- [x] Remove the `_Shadcn_` suffix 
- [x] Update exports and imports 

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

## Summary by CodeRabbit

* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-27 11:07:06 +02:00
Gildas Garcia
0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## Problem

We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.

## Solution

- Remove the suffix
- Update all usages
2026-04-24 12:14:15 +02:00
Ali Waseem
8e2aa37c77 fix(studio): gate JWT migration behind a flag (#45098)
## Summary

Updated copy on transition from JWT keys to new publishable keys



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

* **New Features**
* JWT settings now toggle between legacy controls and a step-by-step
migration guide via a feature flag; legacy rotation/creation modals are
hidden when migration mode is enabled.
* The “How to change” section is now a collapsible with
context-sensitive content and a single link to the full migration guide.

* **UX Improvements**
* Secrets table action now clearly shows either “Rotate” or “Create
standby key” based on key state.
* Updated copy and spacing for JWT informational text and external
links.

* **Chores**
  * “API Keys” menu now links to the API Keys listing page.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: fadymak <dev@fadymak.com>
2026-04-22 06:33:43 -06:00
Gildas Garcia
d95fdfd566 fix: input-group don't have the proper validation attributes (#44703)
## Problem

The input groups components introduced in #44282 don't have the
validation attributes when invalid. This hurts accessibility and also
break the design:
<img width="1730" height="324" alt="image"
src="https://github.com/user-attachments/assets/a3fb8d86-f3a8-46bb-aa53-d0599c11f056"
/>

## Solution

This is because the wrapper `<FormControl_Shadcn_>` passes the
validation props to its direct child.
The solution is to avoid applying them on the `<InputGroup>` and to
apply them manually on the inputs.

I also fixed a small accessibility issue by moving the addon texts after
the input so that screen readers announce them in the correct order. No
visual change for this

<img width="587" height="158" alt="image"
src="https://github.com/user-attachments/assets/1f8858ea-6659-45f9-964e-8c43a7fe14ba"
/>


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

* **Style**
* Unified numeric input layout by moving unit labels/suffixes (e.g.,
"seconds", "GB", "%", "connections", "digits", "IOPS", "MB/s", "rows")
to appear after their inputs for a consistent, predictable form
appearance.

* **Accessibility**
* Form controls now expose IDs and ARIA attributes from form context
when available, improving screen-reader descriptions and error
association.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-10 11:45:30 +10:00
Gildas Garcia
875216d485 chore: update legacy jwt settings form to use react-hook-form (#44179)
## Problem

- The legacy jwt settings still uses `formik` and we want to remove it
in favour of `react-hook-form` to keep only one form library
- The legacy jwt settings does not follow the design system guidelines

## Solution

- Migrate to `react-hook-form`
- Apply the design system guidelines

## How to test

To test the custom JWT secret, I haven't found a better way than
inverting the condition at L337 (`!legacyKey` to `legacyKey`). This
allowed me to ensure the process worked at least up to the API call
which fails with my local instance as legacy tokens aren't supported
anymore.

## Screenshots

Before:
<img width="1199" height="599" alt="image"
src="https://github.com/user-attachments/assets/1c6e0bb1-0698-4238-847f-d2c72adf3462"
/>

After:
<img width="1228" height="646" alt="image"
src="https://github.com/user-attachments/assets/3b2a45a9-aa43-4c3e-9653-2b2610616889"
/>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-04-01 17:56:03 +02: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
Joshen Lim
564f4f66ee Joshen/fe 2660 clean up stale feature flags enabled for 2 months part 1 (#43329)
## Context 

Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months
- advisorRules
- newJwtSecrets
- isWorkOSTPAEnabled
- EnableOAuth21
- gitlessBranching
- showRefreshToast
- awsPrivateLinkIntegration
- useBedrockAssistant (Already not used)
- enableStripeSyncEngineIntegration
- ShowExplainWithAiInQueryPerformance

Doing it in 2 parts so its easier for review
2026-03-04 13:08:39 +08:00
Ali Waseem
1890624a1a fix: add missing keys to studio (#42957)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Cleanup from React Doctor! Components missing keys
2026-02-18 09:05:22 -07:00
Ivan Vasilov
cc47bcfa6d chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405)
* Add shimmering-loader CSS to ui-patterns.

* Import the shimmering-loader classes from the ui-patterns component.

* Remove ShimmeringLoader from studio.

* Migrate studio to use ui-patterns/ShimmeringLoader.

* Migrate away from using default import for ShimmeringLoader.

* Fix the css imports in docs and studio.
2025-12-17 14:54:07 +01:00
Joshen Lim
27188c147c Support creating multiple publishable keys, and deleting publishable keys (#41186)
* Support creating multiple publishable keys, and deleting publishable keys

* FIx types

* Smol

* Smol fix

* Address issues

* Update comment

* Replace all usage of useApiKeysVisiblity for checking permissions to just call useAsyncCheckPermissions directly

* Clean up and deprecate useApiKeysVisibility hook

* ADdress
2025-12-12 16:07:36 +08: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
Joshen Lim
e61d0e69cd Reinstate copy action for TextConfirmModal for staff only (#41042)
* Reinstate copy action for TextConfirmModal for staff only

* Clean

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-12-05 14:52:35 +00:00
Danny White
fea4053458 fix(studio): remove hardcoded badge capitalisation (#40970)
* fixes

* fixes

* www fixes

* Adjust JWT keys table

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-03 07:52:56 +11:00
Danny White
031b227165 studio(chore): badge component defrag (#40118)
* component clean up

* optically center

* docs and type size

* code badge variant

* sensible defaults

* fix product menu flex

* badge sweep

* new project badges

* logs

* compute badge

* studio badge sweep

* www sweep

* docs sweep

* clean up

* fixes

* cleanup

* fixes

* better docs

* fixes

* misc fixes

* consistency

* Minor fixes for issues i found

* simplify mt-0

* mt simplification

* remaining optical alignment

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-02 11:15:50 +11: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
Charis
a5e2c62ef4 fix: check for api key permissions before requesting (#40452)
To prevent sending unnecessary requests for API keys when the user can't
view them (Read-Only Role), first check the permissions.
2025-11-14 09:43:34 -05:00
Joshen Lim
1160f89b70 Address various console warnings (#38789) 2025-09-17 22:36:07 +08:00
Joshen Lim
d46525eac1 Chore/swap use check permissions with use async check project permissions part 8 (Season Finale) (#38619)
* Update perms checking in audit logs

* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used

* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions

* Fix TS
2025-09-16 17:05:57 +08:00
Han Qiao
0487fbf625 fix: let api handle signing key validation error (#38649)
* fix: let api handle signing key validation error

* Fix styles

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-12 17:50:27 +08:00
Joshen Lim
4124f0ed98 Shift useFlag hook and configcat library to common package, remove from Studio (#38203)
* Shift useFlag hook and configcat library to common package, remove from studio

* Fix test

* Fix test
2025-08-27 13:42:20 +07:00
Joshen Lim
e75c4b2960 Swap useCheckPermissions with useAsyncCheckProjectPermissions part 3 (#37899)
* Swap useCheckPermissions with useAsyncCheckProjectPermissions part 3

* Fix loading state in edge function secrets
2025-08-13 19:07:35 +07:00
Joshen Lim
a897cc27f0 Part 1 of swapping useCheckPermissions with useAsyncCheckProjectPermissions (#37751)
* Part 1 of swapping useCheckPermissions with useAsyncCheckProjectPermissions

* Update apps/studio/hooks/misc/useCheckPermissions.ts

Co-authored-by: Drake Costa <drake@saeris.io>

* Address feedback

---------

Co-authored-by: Drake Costa <drake@saeris.io>
2025-08-11 11:53:15 +07:00
Joshen Lim
cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* Replace all usage of useProjectContext with useSelectedProjectQuery

* Replace all usage of useSelectedProject with useSelectedProjectQuery

* Replace all usage of useProjectByRef with useProjectByRefQuery

* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery

* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks

* Deprecate ProjecContext
2025-08-06 10:53:10 +07:00
Charis
09b7cb6957 fix: typo (#37700) 2025-08-06 09:47:58 +07:00
Saxon Fletcher
c76707012d basic typography classes (#37613)
* basic typography classes

* Clean up classes for where we use h1 tags

* Clean up classes for where we use h2, h3, h4

* Clean up classes for where we use h6

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-04 20:55:34 +10:00
Joshen Lim
f93058ca73 Improve loading and success handlers for JWT keys (#37109) 2025-07-14 21:51:31 +08:00
Jonathan Summers-Muir
4b0bd73312 chore: jwt keys page table layout (#37097)
* Improve layout and truncation in SigningKeyRow

Added flex and truncation classes to ensure status labels and key IDs are properly truncated and aligned. This enhances the table's appearance and prevents overflow issues for long text.

* Improve icon layout and badge styling in UI components

Added flex-shrink-0 to icons in AlgorithmHoverCard for better alignment. Updated InfoPill to use min-w-0, overflow-hidden, and improved badge and label layout for consistent appearance and handling of long content.

* Remove unused cn import from InfoPill component

The cn utility import was removed from InfoPill.tsx as it is no longer used. The Badge component now uses a direct className string instead.

* Update JWT key table columns and add rotation info

Removed the 'Key ID' column and added a 'Last rotated at' column to the JWT secret keys table. The signing key row now displays the relative time since the key was last updated for previously used keys.

* Add Key ID column to JWT secret keys table

Introduces a new 'Key ID' column to the JWTSecretKeysTable component for improved visibility and management of JWT secret keys.

* Improve JWT key table UI and add tooltip to key ID

Updated the JWT secret keys table to enhance the empty state with an icon and explanatory text, and adjusted column alignment and visibility for 'Last rotated at'. Added a tooltip to the key ID for better accessibility and ensured the 'Last rotated at' column displays for both previously used and revoked keys.

* Improve API key table layout and responsiveness

API key name and description are now grouped together, with description shown under the name. The last seen column is hidden on smaller screens and displays 'Never used' when appropriate. ApiKeyPill max width is now responsive to screen size. The description column was removed from SecretAPIKeys to streamline the table.

* Adjust API key pill and input sizing for responsiveness

Reduced max-widths for ApiKeyPill and updated PublishableAPIKeys layout to improve responsiveness. ApiKeyInput now uses dynamic min/max widths for better display across breakpoints.

* Adjust lg breakpoint min-width for API key input

Changed the lg:min-w value from 40rem to 24rem for the API key input field to improve layout responsiveness at large screen sizes.

* Update PublishableAPIKeys.tsx

* Remove unused file

* Minor refactors

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-14 19:40:17 +08:00
Stojan Dimitrovski
e0a3ab2c74 fix: additional fixes for api keys, jwt signing keys (#37069)
* fix: additional fixes for api keys, jwt signing keys

* Smol fix

* fix issue with screen

* Fix success handler for migrate JWT secret

* Tiny

* text fix

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-14 10:04:24 +02:00
Stojan Dimitrovski
4eeac16a25 feat: final ui/ux updates for jwt signing keys (#36889) 2025-07-08 11:42:03 +02:00
Stojan Dimitrovski
c54842b8f9 feat: jwt signing key dialog supports bring your own key (#36730)
* feat: jwt signing key dialog supports bring your own key

* Minor structure fixes.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-07-03 12:41:11 +02:00
Stojan Dimitrovski
4e17ec6632 feat: improved jwt signing key rotation dialog (#36781)
* feat: improved jwt signing key rotation dialog

* small tweaks

* Minor CSS fixes.

* Minor CSS fixes for the  initial dialog for JWT keys.

* Fix the error to be better. when revoking too fast.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-07-03 10:23:50 +02:00
Stojan Dimitrovski
a403f1ceca feat: add publishable key in connect dialog (#36638) 2025-06-26 09:11:08 +02:00
Stojan Dimitrovski
4945ba1861 feat: add asymmetric JWT UI (#36519)
* original files from previous PR

* get rid of router in jwt-secrets to make it show up

* rename jwt-secrets page to jwt-signing-keys

* add jwt-signing-keys query

* add legacy jwt signing keys query

* wire-up JwtSecretKeysTable with queries

* add jwt signing keys page to settings menu

* deduplicate labels, descriptions, etc

* add create, update jwt-signing-key mutations

* update types

* remove unused components, to be refactored later

* make everything into a mostly working state

* legacy migration added

* put jwt keys page like api keys

* fully migrate legacy jwt secret page

* fix prettier

* fix typecheck ts-expect-error

* rm unneeded file

* Fix compile errors.

* Rename the files and move them to the same folder.

* Merge the two constant files.

* Fix the imports.

* Fix a bug in the API keys page when opening it in a new tab.

* Change the page to be at /signing-keys

* Fix some minor types.

* Break apart some of the components in the signing keys UI.

* Use a feature banner for the initial action.

* Make a create key dialog and move functionality there.

* Fix some cosmetic issues.

* Minor cosmetic fixes.

* Remove extra keys in RQ cache.

* Add a missing link

* Add a banner when the feature flag is false.

* Minor type fix.

* more tiny type fix

* fix error on create standby key

* add alert to prevent revoking legacy jwt secret without disabling legacy api keys first

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-06-23 09:36:07 +12:00