Home New: Getting Started #38574
Home New: Getting Started #38574
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
SaxonF
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Error
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive "Getting Started" section to the home page that provides interactive guided workflows for new users. It implements a toggle between "no-code" and "code" workflows, each with customized step-by-step guidance and deep integration with documentation, dashboard features, and AI assistant.
- Introduces a new GettingStartedSection with sortable positioning in the home layout
- Implements code and no-code workflow paths with different step sequences
- Integrates with existing project state to show completion status for various steps
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| Home.tsx | Adds GettingStartedSection import and renders it conditionally within the sortable sections |
| GettingStartedSection.tsx | Main component containing workflow logic, step definitions, and state management |
| GettingStarted.tsx | Renders the step cards in a responsive grid layout with action buttons |
| FrameworkSelector.tsx | Dropdown component for selecting development frameworks within getting started steps |
| Connect.tsx | Updates Connect dialog to support URL parameters for pre-selecting tabs and frameworks |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
Show resolved
Hide resolved
SaxonF
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Error
| () => [ | ||
| { | ||
| key: 'install-cli', | ||
| status: 'incomplete', |
There was a problem hiding this comment.
Should there be a way to manually mark these steps (that can't be auto-checked) as complete? I personally would find it mildly infuriating to have them sitting around as incomplete perpetually 😄
There was a problem hiding this comment.
Agree. Will create a follow-up PR adding this functionality
| }, | ||
| { | ||
| key: 'design-db', | ||
| status: tablesCount > 0 ? 'complete' : 'incomplete', |
There was a problem hiding this comment.
This might be sort of confusing given that it's mixing local and hosted flows. Since this is a local CLI Flow, 'design' should be considered complete once the user has a local migration file written (or pushed to their local DB), but this won't be complete until they have a table in their hosted DB.
There was a problem hiding this comment.
Code first can be broken down further into local vs remote code first. For local, you run local env etc. For remote, you still use remote database but cli for pushing/pulling. Starting with remote flow first, then can maybe break down into local later?
There was a problem hiding this comment.
Ahh fair point, makes sense!
| ], | ||
| }, | ||
| { | ||
| key: 'add-rls-policies', |
There was a problem hiding this comment.
Again, this step might be confusing because of local/hosted mix.
We've been assuming that the user is working locally all along but 'Create a migration file' suddenly gets them to create a policy in hosted dashboard
SaxonF
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Failure
3 participants
Adds GettingStarted row to the home page. This gives us a framework to start building more interactive steps with deeper integration with docs, dashboard, assistant.