Commit Graph
15 Commits
Author SHA1 Message Date
Gildas GarciaandIvan Vasilov 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
Francesco Sansalvadore c713135384 fix(studio): wrappers install state + one-click install (#46697)
- fix install badge state in wrappers detail page
- add "Install" button in top action bar
  - "Install wrapper" if required extensions _aren't_ installed
  - "Add new wrapper" if required extensions _are_ installed
- make wrappers "one-click install" by 
  - showing the required extensions in the CreateWrappersSheet 
  - and automatically installing them on wrapper submission

Only available behind `isMarketplaceEnabled` flag at the moment.

https://github.com/user-attachments/assets/38f5549d-938e-4e2f-a723-53b9a028e9dc
2026-06-09 12:34:20 +02:00
Francesco Sansalvadore 188ae53333 fix(studio): new wrapper form closing bug (#46698)
When trying to create a new wrapper from the integrations page and no
wrappers exist yet, then the sheet is not closable unless you submit the
form or refresh the page.

https://github.com/user-attachments/assets/7d46cce3-0a0f-4efd-ba98-d141cfcfe31c

## After

- The sheet is closable with confirmation modal
- added nuqs to open "new" wrapper form via `new=true` params


https://github.com/user-attachments/assets/36c4ae9e-7aa8-430c-9741-6d84978997f1

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

## Summary by CodeRabbit

* **Refactor**
* Improved state management for the wrapper creation dialog, enabling
state persistence through URL parameters for better shareability and
navigation consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-08 10:48:54 +02:00
Ali Waseem 908f92d885 feat(studio): keyboard shortcuts for integration tabs (#46350)
## Summary

Adds search / clear / new shortcuts to each integration tab. Search
inputs honor the staged-Escape pattern per the studio-shortcuts skill.

## Shortcuts

| Tab | Shortcuts |
|---|---|
| Queues | `Shift+F` search · `F C` clear · `Shift+N` Create queue |
| Cron jobs | `Shift+F` search · `F C` clear · `Shift+N` Create cron job
|
| Webhooks | `Shift+F` search · `F C` clear · `Shift+N` Create webhook |
| Vault secrets | `Shift+F` search · `F C` clear · `Shift+N` Add new
secret |
| Wrappers | `Shift+N` Add new wrapper |

All search inputs: `Esc` clears value (1st press), blurs (2nd).
Permission-gated "new" entries are hidden from Cmd+K when the user lacks
the permission.

Follow-up to #46348. Linear:
[FE-3416](https://linear.app/supabase/issue/FE-3416)

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

## Summary by CodeRabbit

* **New Features**
* Added keyboard shortcuts across studio list pages for enhanced
productivity: focus and manage search filters, and open creation dialogs
for webhooks, cron jobs, queues, secrets, and wrappers using keyboard
commands for faster navigation and item creation.

<!-- 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/46350?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 06:57:35 -06:00
Francesco SansalvadoreandJoshen Lim 7edbedcbec fix integration overview tab contents (#46179)
Restores proper content in new marketplace detail overview pages
compared to the legacy overview pages.

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

* **New Features**
* Added Data API URL settings and a visible "Required extensions"
section across integration overviews.
* Unified install/manage UIs for webhooks, Stripe Sync, wrappers,
queues, and others; marketplace mode now shows marketplace-specific
overview content.

* **Style**
* Improved marketplace detail rail and filter-bar button styling;
refined list/link row visuals.

* **Refactor**
* Overview pages reorganized to branch on marketplace mode and extract
shared overview content for consistency.

* **Tests**
  * Stabilized integration overview test data for deterministic runs.

<!-- 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/46179?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: Joshen Lim <joshenlimek@gmail.com>
2026-05-25 09:08:38 +02:00
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
Danny WhiteandJoshen Lim 8a5ad58f81 chore(studio): replace CloseConfirmationModal with DiscardChangesConfirmationDialog (#43430)
## What kind of change does this PR introduce?

Form handling improvement.

## What is the current behavior?

https://github.com/supabase/supabase/pull/43201/ standardised our
discard changes behaviour with a shared hook and
`DiscardChangesConfirmationDialog` component. But many forms and sheets
still:

1. Don’t have any Discard-confirm close behaviour, making it too easy to
make accidental discards
2. Use a more complicated, manually-created `CloseConfirmationModal`
approach

## What is the new behavior?

- Replaced all instances of `#2` above that had `CloseConfirmationModal`
with `DiscardChangesConfirmationDialog` and its hook
- Improved design system documentation around dirty form dismissal

| Before | After |
| --- | --- |
| <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-9A40EC7C-F335-4B26-B567-450FC0845463"
src="https://github.com/user-attachments/assets/363bed82-34d2-4cc8-9164-6d18cfdbdbbc"
/> | <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-F427F1FA-DECC-4194-B663-A9E5A6F285A1"
src="https://github.com/user-attachments/assets/d49fafdc-a5c2-46df-9b67-ec42bacbe716"
/> |

## To test

Try editing values these sheets in staging, then blurring the sheet or
pressing `esc`:

- CreateQueueSheet.tsx
- CronJobsTab.tsx
- CronJobPage.tsx
- EditWrapperSheet.tsx
- OverviewTab.tsx
- WrappersTab.tsx
- CreateFunction/index.tsx
- EditHookPanel.tsx
- TriggerSheet.tsx
- SidePanelEditor.tsx
- EditSecretSheet.tsx
- PolicyEditorModal/index.tsx
- PolicyEditorPanel/index.tsx

## Still to come

- [ ] Incrementally take on `#1`: implement
`DiscardChangesConfirmationDialog` and its hook in sheets or dialog
forms that have no dirty form dismissal handling

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-06 03:17:35 +00:00
Joshen Lim e48c909b31 Chore/deprecate use query state with select part 04 (#42747)
## Context

Related to FE-2461

More refactoring to clean up usage of `useQueryStateWithSelect`, in the
following pages
- Auth OAuth Apps
- Cron Jobs
- Vaults Secrets Management
- Database Hooks
- Wrappers

## To test

In each of those pages, verify that
- [ ] Clicking the "new" cta updates the URL params, and refreshing
should re-open the sheet
- [ ] Editing an existing item should update URL params, and refreshing
should re-open the sheet with the right item
- Verify that if the URL param has the wrong id, page should not open
the sheet, show a toast, and reset the URL param
- [ ] Deleting an existing item should update URL params, and refreshing
should re-open the sheet with the right item
- Verify that if the URL param has the wrong id, page should not open
the sheet, show a toast, and reset the URL param

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

* **Bug Fixes**
* Added "item not found" toasts and clearer feedback after
create/update/delete actions; prevent opening create flows when server
features are disabled.

* **Style**
* Standardized button labels, sizes and modal/dialog spacing; refined
table column widths and inline code formatting for readability.

* **Refactor**
* Simplified UI state flows across OAuth Apps, Hooks/Webhooks, Cron
Jobs, Vault Secrets, and Wrappers to use consistent URL-driven
interactions and centralized modals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-13 16:18:28 +08:00
CharisandAlaister Young 8828c4e734 refactor(close confirmation modal): abstract out useConfirmOnClose hook (#40310)
Abstract out a hook, useConfirmOnClose, for the pattern where we show a
confirmation modal on close, conditional on whether the user has made
edits.

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-11-11 13:34:50 -05: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
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 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
d75cb8b45c fix: studio circular imports (#36026)
* fix: studio circular imports

* Fix the import cycle on Wrappers tabs components.

* Remove duplicate declarations of the feature previews array.

* fix feature previews circular import

* Minor nit

* update all project contexts to use useSelectedProject

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-06-06 16:38:25 +08:00
Ivan Vasilov bff3d56eef fix: Integrations followup - clean up extra files (#30653)
* Remove all extra files obsoleted by integrations redesign.

* Move all wrappers files into integrations/wrappers.

* Move the Vault files into Integrations.

* Move all Queues files into the correct folder.

* Move all CronJobs related files into the correct folder.

* Change the case of the CronJobsTab file.

* Add a comment and a correct URL to the vault.
2024-11-26 01:15:25 +08:00
590ed362ab feat: Redesign for the integrations pages (#30476)
* Initial commit.

* Minor type fixes.

* Add a integration for Queues. Refactor some of the integration layout.

* Migrate the Cron integration to the new style.

* Add useInstalledIntegrations hook.

* Add an integration entry for vault.

* Add an integration entry for GraphiQL.

* Add supabase webhooks.

* Feat/integrations get layout (#30538)

* scroll based icon

* Update header.tsx

* remove dep from overview

* moar

* more table stuff

* moar

* alt nav put in

* fix MotionNumber issues

* more

* trying both layouts

* Fix bunch of type errors.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

* Migrate Vercel and Github files to their own folders.

* Switch all integrations with the new designs.

* More fixes for links, pages structure and other random stuff.

* Remove unneeded file.

* Another set of fixes. Migrated most of the extension integrations.

* Migrated Vault and webhooks to the new style.

* Various fixes to make the animation work.

* Remove extra code.

* Tiny fixes 😬 i swear its tiny

* Refactor IntegrationOverviewTab

* chore/ update integrations routes (#30585)

* init

* add child support in tabs

* add webhooks

* Update IntegrationPageHandler.tsx

* fix id issues

* use messageId instead

* animation tweaks

* Move the description to the wrappers array.

* The useInstalledIntegrations now provides integrations which could be installed.

* Add static content for the various integrations.

* Move the page handler logic into the integrations definitions.

* Clean up some extra code.

* Add logic to make the overview tab the default tab.

* Don't show the header until the integration id has been checked.

* Add logic to the integration pages to avoid weird loading bugs, deselecting tabs if the integration hasn't been installed etc.

* Fix the webhooks overview tab.

* Fix the buttons for enabling extensions.

* Add padding to all custom tab contents.

* Small fixes

* Prettier lint

* Fix icon color + add empty state for when available integrations are all installed

* Fix ts errors

* Fiox

* Add enable webhooks cta

* Fix key

* Fix all lints

* Fix the queues create sheet.

* Fix the deletion of wrappers.

* Fix the minimum version alert for the wrappers extension.

* Make the queues table fit the whole container.

* Fix an issue which reset the tab when installing an extension.

* Address comments

* Add loading state for installed integrations in side nav

* Fix edit secret not rendering value in input field after subsequent openings

* Fix vault keys auto filling search input with vault

* Fix search input placeholder for cron

* Minor fix in install database extension copy

* Fix a bad redirect when reloading.

* Fix bad url redirects.

* Fix scrolling in create new/edit wrapper sheet.

* Add y padding to the wrappers rows.

* Fix merge errors.

* More merge fixes.

* Fix bad imports during the merge.

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-25 13:26:22 +01:00