mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
92952bf903
## Problem The S3 access key creation dialogs are wider than their contents, use plural titles for one key pair, and call the name field “Description” even though the table calls it “Name”. The save state also implies both values disappear, although only the secret does. ## Solution Use the small dialog size for both states. Use singular titles, label the field “Name”, shorten the create button to “Create”, and clarify when the secret must be copied. The API field remains `description`. ## Review instructions 1. Open a project’s **Storage > S3** page and select **New access key**. Check the dialog width, title, Name field, and Create button. 2. Create a key and check the save dialog width, singular title, and secret visibility guidance. | Before | After | | --- | --- | | <img width="1084" height="572" alt="CleanShot 2026-09-30 at 14 37 20@2x" src="https://github.com/user-attachments/assets/781706ee-0ecc-4535-abb5-f6ac65f02c71" /> | <img width="844" height="584" alt="CleanShot 2026-09-30 at 14 36 56@2x" src="https://github.com/user-attachments/assets/119df19f-2f39-4e23-94b4-26665583765c" /> | | <img width="1096" height="730" alt="CleanShot 2026-09-30 at 14 37 57@2x" src="https://github.com/user-attachments/assets/00481ed7-dc05-48b9-8cbc-e76d608aa4b1" /> | <img width="842" height="780" alt="CleanShot 2026-09-30 at 14 37 39@2x" src="https://github.com/user-attachments/assets/8c837101-250a-474f-a0fc-cf46ce491f83" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Updates** * The credential form now labels the field “Name” and uses “Create” for the submit button. * Confirmation text now clarifies that the access key is bucket-wide, bypasses RLS, and its secret is shown only once. It also refers to a single access key instead of using S3-specific wording. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}