fix(frontend): preserve namespace picker selectors

Signed-off-by: dongmucat <1127093059@qq.com>

web/e2e/publish-flow-ui.spec.ts

@@ -35,7 +35,7 @@ test.describe('Publish Flow UI (Real API)', () => {
       const namespaceTrigger = page.locator('#namespace')
       await expect(namespaceTrigger).toBeVisible()
       await namespaceTrigger.click()
-      const namespaceOption = page.getByRole('option', {
+      const namespaceOption = page.getByRole('dialog').getByRole('button', {
         name: new RegExp(`\\(@${namespace.slug}\\)`),
       }).first()
       await expect(namespaceOption).toBeVisible()

web/src/pages/dashboard/publish.tsx

@@ -163,8 +163,9 @@ export function PublishPage() {
 
       <Card className="p-8 space-y-8">
         <div className="space-y-3">
-          <Label className="text-sm font-semibold font-heading">{t('publish.namespace')}</Label>
+          <Label htmlFor="namespace" className="text-sm font-semibold font-heading">{t('publish.namespace')}</Label>
           <NamespacePicker
+            id="namespace"
             value={namespaceSlug}
             onValueChange={setNamespaceSlug}
             status="ACTIVE"

web/src/shared/components/namespace-picker.test.tsx

@@ -79,6 +79,14 @@ describe('NamespacePicker', () => {
     }, true)
   })
 
+  it('forwards the trigger id for labels and stable form selectors', () => {
+    render(<NamespacePicker id="namespace" value="" onValueChange={vi.fn()} />)
+
+    expect(document.getElementById('namespace')).toBe(
+      screen.getByRole('button', { name: 'namespacePicker.placeholder' }),
+    )
+  })
+
   it('paginates bounded results and emits the selected slug', () => {
     const onValueChange = vi.fn()
     render(<NamespacePicker value="selected-outside-page" onValueChange={onValueChange} />)

web/src/shared/components/namespace-picker.tsx

@@ -16,6 +16,7 @@ import { useMyNamespacesPage } from '@/shared/hooks/use-namespace-queries'
 const PAGE_SIZE = 20
 
 interface NamespacePickerProps {
+  id?: string
   value: string
   onValueChange: (slug: string) => void
   status?: 'ACTIVE' | 'FROZEN' | 'ARCHIVED'
@@ -27,6 +28,7 @@ interface NamespacePickerProps {
  * Server-paged namespace selector that keeps request and render size bounded.
  */
 export function NamespacePicker({
+  id,
   value,
   onValueChange,
   status,
@@ -58,7 +60,7 @@ export function NamespacePicker({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button type="button" variant="outline" disabled={disabled} className="w-full justify-start">
+        <Button id={id} type="button" variant="outline" disabled={disabled} className="w-full justify-start">
           {value ? `@${value}` : emptyValueLabel ?? t('namespacePicker.placeholder')}
         </Button>
       </DialogTrigger>