Commit Graph
12 Commits
Author SHA1 Message Date
Joshen LimandKaterina Skroumpelou 9949b75011 Joshen/fe 2670 dashboard to pull partner integrations into project (#43545)
## Context

Initial ground work for Marketplace Integrations (feature flagged under
the flag `marketplaceIntegrations`), in which some integrations will be
fetched over a network request (than hard-coded within the repo).
Feature flag just controls whether to we need to fetch them.

Similarly, categories under "Explore" will also be fetched, and the flag
just decides whether that should be enabled.

We're also planning to update the overview tab for integrations as well,
in which integrations fetched over the network request will use the new
UI (altho not functional just yet)

## To test
Note that the LOC changes are seemingly large, but that's just because
I've added in a types file for the Supabase project that we're using to
store the integrations data
- [x] Verify that behaviour is status quo with the flag off (Priority)
- [x] Verify that behaviour is status quo on CLI / self-host env
- [x] Verify that with the flag on you'll see one of the new
integrations fetched over network (Grafana), including an additional
category "Observability" (and clicking into it will show the new UI)
- [x] Verify that all other existing integrations are status quo

---------

Co-authored-by: Katerina Skroumpelou <sk.katherine@gmail.com>
2026-03-11 15:17:41 +07:00
Raminder SinghandJoshen Lim ca7ba8f564 feat: improve stripe sync engine page behaviour (#43186)
* Moved sync status admonition to the settings page.
* The **Install integration** and **Uninstall integration** buttons now
show loading states during installation/uninstallation.
* Made the content of the `StripeSyncChangesCard` dynamic based on the
installation status.
* Fixed a bug in which the comment on the stripe schema was not parsed
correctly.

Screenshots for each state:

**Not installed**

<img width="897" height="884" alt="image"
src="https://github.com/user-attachments/assets/be567059-1deb-47d1-86df-af9f1c3b4fde"
/>

**Installing**

<img width="897" height="884" alt="image"
src="https://github.com/user-attachments/assets/664af71e-9407-4236-b4e5-1e7170a2f31f"
/>


**Install Error**

<img width="897" height="933" alt="image"
src="https://github.com/user-attachments/assets/0d6e4fbd-107a-4f95-8a5e-6bd1a1d6a1be"
/>


**Installed**

<img width="897" height="901" alt="image"
src="https://github.com/user-attachments/assets/e686e050-b3d2-42d0-bd3c-11d81540433a"
/>


**Uninstalling**

<img width="897" height="901" alt="image"
src="https://github.com/user-attachments/assets/7cd90d1c-ff83-4e7d-884e-4e340a1dcc75"
/>


**Uninstall Error**

<img width="897" height="938" alt="image"
src="https://github.com/user-attachments/assets/de0c1bc8-11c5-4c3f-a0ca-00b1f9e32ed3"
/>

**Settings Page (Sync Done)**

<img width="897" height="572" alt="image"
src="https://github.com/user-attachments/assets/ec5dd2a3-d183-42e1-8953-13bcf70082f5"
/>

**Settings Page (Sync in Progress)**

<img width="897" height="572" alt="image"
src="https://github.com/user-attachments/assets/7400c479-3e4f-4490-8857-414a93ebdc51"
/>


The idea behind these changes is that in future:

* We allow users to configure sync interval from the settings page.
* The overview page is mainly for the install/uninstall behaviour only,
rest everything goes to the settings page.
* We can show more granular progress during install/uninstall by showing
what is being installed/uninstalled: migrations are running, edge
functions are being deployed and so on.
* We can show more accurate error messages: migrations succeeded but
edge functions could not be deployed. This helps users troubleshoot and
in the worst case recover via manual actions.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-02 17:59:12 +08:00
Raminder SinghandJoshen Lim 3d14b5e7bf fix: show uninstall progress (#42860)
This PR makes the following changes:

* Refactors the Stripe sync engine integration so that impossible states
are unrepresentable in the code.
* Factors out common code and functions into a single location to avoid
duplication.
* Factors out code to fetch installation/uninstallation and sync status
into a separate hook to make the code more readable.
* Shows uninstall progress when the user uninstalls the integration.
* Moves the **Uninstall integration** button from the **Settings** page
to the **Overview** page. This is done to avoid us having to track the
uninstallation progress via the url query params when the user is
redirected to the **Overview** page during uninstallation. Also it makes
sense for installation/uninstallation to be available on the same
location.

Note that even with the above changes there are some limitations to how
the uninstallation progress is shown. In particular, if the user
refreshes the page, the uninstallation status is lost because the
background uninstallation procedure currently doesn't update the comment
on the stripe schema during uninstallation. We are making a change in
the stripe sync engine code for that here:
https://github.com/stripe-experiments/sync-engine/pull/113

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-20 10:02:11 +00:00
Joshen LimandAlaister Young 1706a67335 Joshen/fe 2410 add default label to pg cron extension schema selector (#42281)
## Context

Addresses a UX confusion where users are unsure of which schema to
install database extensions in. Am opting to show a "Default" badge on
the extensions schema just to lower the cognitive load for this step if
the extension doesn't have a specific schema it needs to be installed in

<img width="416" height="322" alt="image"
src="https://github.com/user-attachments/assets/b938afdb-31d7-4e9f-a065-7b3b185ac8e1"
/>

If the extension has a recommended schema, we'll show a badge as well
(Related [PR](https://github.com/supabase/supabase/pull/40968))
<img width="429" height="300" alt="image"
src="https://github.com/user-attachments/assets/cf42bce3-a99c-4877-9d16-9f2013b91e16"
/>

Otherwise, if there's a fixed schema, then no badge
<img width="427" height="283" alt="image"
src="https://github.com/user-attachments/assets/608c0c4f-ea8e-4462-ad66-9e3b3bb43265"
/>

## Other changes
- Refactored `EnableExtensionModal` to use react hook form + Dialog
component
- Refactored checking of default schema to use React Query

## To test

- [ ] Verify the UI changes
- [ ] Verify that you can still enable / disable extensions - and ensure
that they're being installed in the right schemas

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

* **New Features**
* Enhanced extension enable dialog with form-driven schema selection,
read-only default-schema display, and "create custom schema" flow
* "Recommended" and "Default" badges next to schema choices;
platform-specific warnings and callouts
* Fetches and surfaces extension default/recommended schema to guide
selection

* **Refactor**
* Dialog-based UI with integrated form validation and improved enable
workflow
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2026-02-02 17:50:39 +08:00
0e2c31bf60 feat: Stripe Sync Engine integration (#41317)
* add initial installation flow of stripe sync engine

* update docs link

* Add supabase_vault extension dep

* Add stripe logo to sync engine integration

* Move overview content to bottom of integration pages

* Add sync state to stripe sync page

* only check sync state if stripe integration is installed

* Use proper stripe-sync package and setup flows

* Improve sync engine installation ux

* Remove unused hardcoded dep

* Add alpha status to stripe sync engine integration

* fix typo

* run format

* fix types

* Rename the stripe-sync path to remove the 'integration". The path needs to have BASE_PATH to work on prod.

* Design tidy up (#41337)

UI tidy up

* update to latest sync engine package

* Add stripe key verification

* Remove noop try/catch

* Add integration isntallation telelemtry

* Add basic settings page

* Address coderabbit comments

* remove unused dep

* Remove state setting on render

* s/description/comment

* Cleanup settings screen UI

* Improve settings screen design

* update schema test snapshot

* Use latest stripe-sync-engine package

* Update repo url to new official location

* revert marketing change

* Update stripe sync engine package

* Add link to table from overview page

* Add feature flag and improve telemetry

* Fix missing useMemo dep

* add uninstall telemetry note

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2025-12-20 00:42:10 +00:00
Ivan Vasilov c5bf65b0b4 feat: Create FDW for S3 Vectors buckets (#40206)
* Fix childProps in Admonition so that they're added as a prop to the main div.

* Replace the admonition with Alert in Wrapper tab page to add a gap between childs.

* Add s3 vectors fdw.

* Minor fix to FormSection.

* Update the fdw mutations to support passing in options.

* Refactor the vector flow to create fdws.

* Revert cron description change.

* If the bucket can't be created, don't create a fdw.

* Update/delete the fdw when deleting a table or a bucket.

* Minor fixes.

* Clean up the delete modal.

* Handle edge cases when missing a wrapper.

* Remove the admonition in the create bucket modal.

* Fix the loading state when creating a bucket.

* Fix the createWrapper sheet to work with s3 vectors.

* Fix undefined wrapperMeta issue.

* Create the schema when installing a wrapper.

* Tiny cleanup.

* Clean up unneeded useState. Create a wrapper only if the all conditions are met.

* Fix all comments.

* Add s3 vectors for docs.

* Add a link and fix the file name for S3 Vectors in docs.

* Hide the table editor button if the wrapper instance is missing.

* Small fixes.
2025-11-12 11:00:38 +01: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
Ivan VasilovandJoshen Lim 32c3eeb389 feat: Create new schema when creating a FDW with the schema option (#37205)
* Change the import foreign schema to always create a schema.

* Fix the Iceberg wrapper.

* Refactor the create wrapper to always create a new schema.

* Remove unneeded props.

* Smol fixes

* Prevent double error toasts

* Smol fix

* Fix the wrapper creation to include the correct api key.

* Fix a bug with the new api keys.

* Handle both types of keys when fetching the iceberg namespaces.

* Add a field to all wrappers to hold the schema name which can import foreign schema.

* sq

* When importing a foreign schema, save the schema in a special field.

* Fix a type error.

* Fix importing foreign schema overriding wrapper server options with unencrypted values

* Add comment

* Handle duplicate and empty schemas when importing a foreign schema.

* Update the copy in the foreign schema wrappers.

* Remove unnecessary code.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-25 10:54:17 +02:00
Francesco Sansalvadore ecd181bcd9 studio mobile v2 (#32630)
* improve some studio mobile layouts

* improve some studio mobile layouts

* improve settings

* assistant mobile

* assistant mobile

* assistant mobile

* responsive formlayout and new project layout

* improve dashboard pages headers

* improve dashboard auth pages

* mobile org settings

* mobile billing fixes

* adjust paused project container height

* remove comments

* triggers

* leftovers

* ai assistant

* fix errors

* remove 16px input size

* fix test

* merge access tokens settings page conflicsts

* smol integrations here and there
2025-01-17 19:07:35 +01:00
Ivan Vasilov af5e55535f feat: Show alert to upgrade DB on queues integration (#30925)
* List all integrations in the landing page.

* Add a configuration in the integration definitions to show an alert if all their dependencies can't be installed.

* Refactor the Integration Overview tab to show an integration specific alert if all its dependencies can't be met because of outdated image.

* Fix smol misspell.

* Update copy.

* Fix copy.
2024-12-05 14:28:04 +00:00
Terry SuttonandIvan Vasilov 9e5cb99329 Chore/misc integration nudges (#30720)
* Misc fixes

* Add webhooks as a module

* Tiny little things

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-11-29 09:55:55 -03:30
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