mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
2a018833fd
## Context Part of marketplace integrations, this moves the last integration over to the new integrations UI Just a heads up though that the code changes imo are quite messy - am trying to figure out how to shift a lot of the integration logic (e.g installing, installation progress tracking, etc) into a code configuration within `Integrations.constants.ts` so pardon the mid-transition state. I reckon we'll be able to clean up things once requirements are bit more clearer. (Refer to "Moving forward" section below for details) ## Changes involved - Much of the details on the Stripe Sync Engine page will now live in the Installation panel <img width="1143" height="512" alt="image" src="https://github.com/user-attachments/assets/cb23e49d-cc4e-4ad6-8a47-0bc3fe81ede7" /> <img width="656" height="955" alt="image" src="https://github.com/user-attachments/assets/ff0e33c5-52ab-480f-b941-ebf3fd0708c5" /> - Code wise, `useStripeSyncStatus` will retrieve `ref` and `connectionString` itself, don't need to pass in as parameters ## To test - [ ] Verify that you can install + uninstall Stripe Sync Engine with the flag off - [ ] Verify that you can install + uninstall Stripe Sync Engine with the flag on ## Moving forward Couple of notes + open questions at the top of my head - We'll need to do away with integration-specific overview UI (e.g Queues, Data API, Webhooks, Wrappers, Stripe Sync Engine) - Everything needs to be defined in code, so `IntegrationDefinition` within `Integrations.constants.ts` is also a bit fluid at the moment as we figure out what properties we need / don't need - We'll need to figure out a way to do the following from a code config POV, keeping in mind that integrations will be fetched remotely from a DB - How to trigger the installation of the integration (e.g from a set of commands? SQL?) - How to track the progress of the installation (e.g We can do long polling but on what data?) - How to uninstall the integration (if applicable, e.g Stripe Sync Engine supports this) - How all this this can work for self-hosted/CLI <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * New modular integration install experience: interactive install sheet with form inputs, installation overview (Extensions & SQL), advanced per-extension schema settings, and dedicated installation settings. * New Stripe Sync Engine overview and action controls for install/upgrade/uninstall flows. * **Bug Fixes & Improvements** * Improved installation status handling, long-polling/status checks, progress/error reporting and telemetry; more robust install/uninstall flows and error recovery. * **Tests** * Updated install-sheet tests to better simulate form submission. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Writing pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)