mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
5fdff9707f
## What kind of change does this PR introduce? Chore: component migration and copy update. ## What is the current behavior? `DownloadSnippetModal` and `RenameQueryModal` use an awkward tabs-based layout. The download action is labelled "Download" throughout, and the NPX toggle was incorrectly labelled "NPM". ## What is the new behavior? - Both modals are migrated to the `Dialog` component. - The download dialog replaces the tab layout with a select (Migration / Seed file / SQL file) and a CLI/NPX toggle. - Action language changed from "Download" to "Export" (context menu item, dialog title, select label) — more accurate since the user runs a CLI command rather than triggering a browser download. - NPM toggle label corrected to NPX; internal `npm` property key renamed to `npx` for consistency. | Before | After | | --- | --- | | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-C6F22F8B-19FF-486E-8C08-915895495875" src="https://github.com/user-attachments/assets/98637802-5e05-4431-87f8-b2e83216082a" /> | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-5B63AD0C-7CD0-4BB2-BEC8-5DBAE94963CE" src="https://github.com/user-attachments/assets/a8f48c2f-a7e2-42fd-b52c-89a133811ad8" /> | | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-1F28FADA-46D1-4C0A-BE96-6CFF2317FDCF" src="https://github.com/user-attachments/assets/afb904d0-689b-4756-b0b4-8177703934e4" /> | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-652E6E8D-1CD2-4465-BC82-46EDB974CD8C" src="https://github.com/user-attachments/assets/f1adfb6b-fba6-495f-b571-1713c3eebb4d" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated the SQL query export modal UI from a tabs-based interface to a dropdown-based selection for choosing export formats. * Revised menu and dialog labels to "Export query" for improved clarity. * Enhanced code block presentation in the export modal. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46242?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: Gildas Garcia <1122076+djhi@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA