Files
supabase/apps/studio/components
Danny White 6b7c91a773 docs(pipelines): clarify ClickHouse setup and form copy (#51009)
## Problem

The ClickHouse destination guide leaves parts of resource setup unclear.
The pipeline form suggests the `default` ClickHouse user and database
even when a dedicated user and database are prepared.

## Solution

- Clarify the ClickHouse setup path, connection details, engine choice,
and query example in the guide.
- Align the pipeline form's labels, examples, and help text with that
setup path.
- Include **Start pipeline** in the BigQuery guide before the cost
confirmation and **Create and start pipeline**.

## Review instructions

1. Open **Database → Pipelines**, add a pipeline, and choose
**ClickHouse**. Check the endpoint label, user and database examples,
and table engine help.
2. Read the [ClickHouse destination
guide](https://supabase.com/docs/guides/database/replication/pipelines/clickhouse),
especially **Prepare ClickHouse resources** and **Configure ClickHouse
as a destination**.

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

* **Documentation**
* Updated the BigQuery guide to explain the pipeline validation, cost
review, and start steps.
* Expanded the ClickHouse guide with destination setup requirements,
engine behavior, and querying guidance for current-state views and
append-only history.
* **User Experience**
* Clarified ClickHouse connection field labels and descriptions,
password visibility controls, and table-engine options in the setup
form.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-30 09:44:06 +10:00
..

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-cleaned folder 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.tsx as 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 — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}