(apisix-dashboard) branch master updated: fix(consumer): makes the username field read-only on the consumer edit page (#3396)

[baoyuan]

This is an automated email from the ASF dual-hosted git repository.

Baoyuantop pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new 20811c550 fix(consumer): makes the username field read-only on the 
consumer edit page (#3396)
20811c550 is described below

commit 20811c550f79635f50d4f4578c0aea8a18eefac7
Author: okaybase <75366457+okayb...@users.noreply.github.com>
AuthorDate: Wed Jun 3 18:22:14 2026 +0800

    fix(consumer): makes the username field read-only on the consumer edit page 
(#3396)
---
 e2e/tests/consumers.crud-all-fields.spec.ts      | 3 +++
 e2e/tests/consumers.crud-required-fields.spec.ts | 4 ++++
 src/components/form-slice/FormPartConsumer.tsx   | 8 +++++++-
 src/routes/consumers/add.tsx                     | 2 +-
 src/routes/consumers/detail.$username/index.tsx  | 2 +-
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/e2e/tests/consumers.crud-all-fields.spec.ts 
b/e2e/tests/consumers.crud-all-fields.spec.ts
index b13eb93ac..77f46be43 100644
--- a/e2e/tests/consumers.crud-all-fields.spec.ts
+++ b/e2e/tests/consumers.crud-all-fields.spec.ts
@@ -76,6 +76,9 @@ test('should CRUD consumer with all fields', async ({ page }) 
=> {
     // Enter edit mode
     await page.getByRole('button', { name: 'Edit' }).click();
 
+    // Verify username remains readonly in edit mode
+    await expect(page.getByRole('textbox', { name: 'Username' 
})).toHaveAttribute('readonly');
+
     // Update description
     await page.getByRole('textbox', { name: 'Description' }).fill('Updated: ' 
+ description);
 
diff --git a/e2e/tests/consumers.crud-required-fields.spec.ts 
b/e2e/tests/consumers.crud-required-fields.spec.ts
index 0354abc73..796d1f156 100644
--- a/e2e/tests/consumers.crud-required-fields.spec.ts
+++ b/e2e/tests/consumers.crud-required-fields.spec.ts
@@ -68,6 +68,10 @@ test('should CRUD consumer with required fields', async ({ 
page }) => {
     // Click the Edit button in the detail page
     await page.getByRole('button', { name: 'Edit' }).click();
 
+    // Verify username remains readonly in edit mode
+    const username = page.getByRole('textbox', { name: 'Username' });
+    await expect(username).toHaveAttribute('readonly');
+
     // Update the description field
     const descriptionField = page.getByRole('textbox', { name: 'Description' 
});
     await descriptionField.fill('Updated description for testing');
diff --git a/src/components/form-slice/FormPartConsumer.tsx 
b/src/components/form-slice/FormPartConsumer.tsx
index a931b93bd..e3fbd9f58 100644
--- a/src/components/form-slice/FormPartConsumer.tsx
+++ b/src/components/form-slice/FormPartConsumer.tsx
@@ -33,7 +33,12 @@ export const FormSectionPluginsOnly = () => {
   );
 };
 
-export const FormPartConsumer = () => {
+export type FormPartConsumerProps = {
+  readOnlyUsername?: boolean;
+};
+
+export const FormPartConsumer = (props: FormPartConsumerProps) => {
+  const { readOnlyUsername = false } = props;
   const { t } = useTranslation();
   const { control } = useFormContext<APISIXType['ConsumerPut']>();
 
@@ -47,6 +52,7 @@ export const FormPartConsumer = () => {
             name="username"
             label={t('form.consumers.username')}
             required
+            readOnly={readOnlyUsername}
           />
         }
       />
diff --git a/src/routes/consumers/add.tsx b/src/routes/consumers/add.tsx
index 137cf6936..6d3a33c64 100644
--- a/src/routes/consumers/add.tsx
+++ b/src/routes/consumers/add.tsx
@@ -62,7 +62,7 @@ const ConsumerAddForm = () => {
           putConsumer.mutateAsync(pipeProduce()(d))
         )}
       >
-        <FormPartConsumer />
+        <FormPartConsumer readOnlyUsername={false} />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
     </FormProvider>
diff --git a/src/routes/consumers/detail.$username/index.tsx 
b/src/routes/consumers/detail.$username/index.tsx
index c87835c5f..65f958c06 100644
--- a/src/routes/consumers/detail.$username/index.tsx
+++ b/src/routes/consumers/detail.$username/index.tsx
@@ -92,7 +92,7 @@ const ConsumerDetailForm = (props: Props) => {
         })}
       >
         <FormSectionGeneral showID={false} readOnly />
-        <FormPartConsumer />
+        <FormPartConsumer readOnlyUsername />
         {!readOnly && (
           <Group>
             <FormSubmitBtn>{t('form.btn.save')}</FormSubmitBtn>