From 92952bf9033bc04cb0f4580edbecba46fc32e9a5 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Wed, 30 Sep 2026 15:21:47 +1000
Subject: [PATCH] fix(studio): clarify S3 access key dialogs (#51070)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 .../StorageSettings/CreateCredentialModal.tsx | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
index e0a9ff4e8ec..90fe0ebb353 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
@@ -16,6 +16,7 @@ import {
   DialogTitle,
   DialogTrigger,
   Form,
+  FormControl,
   FormField,
   Tooltip,
   TooltipContent,
@@ -51,7 +52,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
 
   const FormSchema = z.object({
     description: z.string().min(3, {
-      message: 'Description must be at least 3 characters long',
+      message: 'Name must be at least 3 characters long',
     }),
   })
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -110,6 +111,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
       </Tooltip>
 
       <DialogContent
+        size="small"
         onInteractOutside={(e) => {
           if (showSuccess) e.preventDefault()
         }}
@@ -117,10 +119,10 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
         {showSuccess ? (
           <>
             <DialogHeader>
-              <DialogTitle>Save your new S3 access keys</DialogTitle>
+              <DialogTitle>Save your new access key</DialogTitle>
               <DialogDescription>
-                You won't be able to see them again. If you lose these access keys, you'll need to
-                create a new ones.
+                Copy the access key ID and secret now. The secret won't be shown again. If you lose
+                it, create a new access key.
               </DialogDescription>
             </DialogHeader>
             <DialogSectionSeparator />
@@ -128,7 +130,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
               <FormItemLayout label="Access key ID" isReactForm={false}>
                 <Input className="input-mono" readOnly copy value={createS3KeyData?.access_key} />
               </FormItemLayout>
-              <FormItemLayout label={'Secret access key'} isReactForm={false}>
+              <FormItemLayout label="Secret access key" isReactForm={false}>
                 <Input className="input-mono" readOnly copy value={createS3KeyData?.secret_key} />
               </FormItemLayout>
             </DialogSection>
@@ -146,10 +148,9 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
         ) : (
           <>
             <DialogHeader>
-              <DialogTitle>Create new S3 access keys</DialogTitle>
+              <DialogTitle>Create new access key</DialogTitle>
               <DialogDescription>
-                S3 access keys provide full access to all S3 operations across all buckets and
-                bypass any existing RLS policies.
+                This access key grants full access to every bucket and bypasses RLS policies.
               </DialogDescription>
             </DialogHeader>
             <DialogSectionSeparator />
@@ -159,20 +160,22 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
                   <FormField
                     name="description"
                     render={({ field }) => (
-                      <FormItemLayout label="Description">
-                        <Input
-                          autoComplete="off"
-                          placeholder="My test key"
-                          type="text"
-                          {...field}
-                        />
+                      <FormItemLayout label="Name">
+                        <FormControl>
+                          <Input
+                            autoComplete="off"
+                            placeholder="My test key"
+                            type="text"
+                            {...field}
+                          />
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </DialogSection>
                 <DialogFooter>
                   <Button variant="primary" type="submit" loading={isCreating}>
-                    Create access key
+                    Create
                   </Button>
                 </DialogFooter>
               </form>