Files
supabase/apps/studio/components
Danny White 68d5011514 fix(studio): hide secret visibility controls in pipeline edit forms (#51010)
## Problem

Pipeline edit forms hide stored credentials but still show visibility
controls beside their placeholders. The controls suggest that the stored
secret can be revealed.

## Solution

- Hide visibility controls in edit mode for ClickHouse, Snowflake,
DuckLake, and Analytics Bucket secret fields.
- Keep the controls available when creating a destination, with
accessible labels for the DuckLake and Analytics Bucket controls.

| Before | After |
| --- | --- |
| <img width="1024" height="196" alt="CleanShot 2026-09-29 at 16 48
56@2x"
src="https://github.com/user-attachments/assets/a9da9a32-ab17-4c07-abf3-dfa88b8c6475"
/> | <img width="1024" height="168" alt="CleanShot 2026-09-29 at 16 47
23@2x"
src="https://github.com/user-attachments/assets/fddeb880-cd23-4752-ae73-8f27348c647f"
/> |

## To test

1. Open **Database → Pipelines** and edit a destination of each type:
ClickHouse, Snowflake, DuckLake with custom parameters, and Analytics
Bucket. Check that the hidden secret fields have no eye button.
2. Start creating each destination and check that its secret fields
still offer a working visibility control.

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

## Summary

* **Improvements**
* Secret fields in replication destination forms remain masked when
editing an existing destination, and their visibility controls are
hidden. When creating a destination, supported secret fields can be
revealed.
* **Accessibility**
* Catalog-token visibility controls now use dynamic, descriptive labels.
DuckLake catalog URL and S3 secret-key reveal controls also have
descriptive labels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-30 09:55:45 +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>
}