fix(ui): associate save plan title label (#1331)

* fix(ui): associate save plan title label

* test(ui): make save plan label test locale-independent

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>

packages/ui/src/components/session/SaveProjectPlanDialog.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { describe, expect, mock, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { I18nProvider } from '@/lib/i18n';
+
+type MockDialogProps = React.PropsWithChildren<{ open?: boolean; className?: string }>;
+
+mock.module('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open = true }: MockDialogProps) => (open ? <>{children}</> : null),
+  DialogContent: ({ children }: MockDialogProps) => <div>{children}</div>,
+  DialogDescription: ({ children }: MockDialogProps) => <p>{children}</p>,
+  DialogFooter: ({ children }: MockDialogProps) => <div>{children}</div>,
+  DialogHeader: ({ children }: MockDialogProps) => <div>{children}</div>,
+  DialogTitle: ({ children }: MockDialogProps) => <h2>{children}</h2>,
+}));
+
+const { SaveProjectPlanDialog } = await import('./SaveProjectPlanDialog');
+
+describe('SaveProjectPlanDialog', () => {
+  test('associates the title label with the title input', () => {
+    const markup = renderToStaticMarkup(
+      <I18nProvider>
+        <SaveProjectPlanDialog
+          open={true}
+          onOpenChange={() => {}}
+          initialTitle="Implementation plan"
+          sourceText="Plan content"
+          onSave={() => {}}
+        />
+      </I18nProvider>,
+    );
+
+    const labelMatch = markup.match(/<label[^>]*for="([^"]+)"[^>]*>/);
+    if (!labelMatch) {
+      throw new Error('Expected a label associated with the title input');
+    }
+
+    const [, titleInputId] = labelMatch;
+    expect(markup).toContain(`id="${titleInputId}"`);
+  });
+});

packages/ui/src/components/session/SaveProjectPlanDialog.tsx

@@ -23,6 +23,7 @@ type SaveProjectPlanDialogProps = {
 export function SaveProjectPlanDialog(props: SaveProjectPlanDialogProps) {
   const { t } = useI18n();
   const { open, onOpenChange, initialTitle, sourceText, saving = false, onSave } = props;
+  const titleInputId = React.useId();
   const [title, setTitle] = React.useState(initialTitle);
 
   React.useEffect(() => {
@@ -43,8 +44,9 @@ export function SaveProjectPlanDialog(props: SaveProjectPlanDialogProps) {
 
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <label className="typography-ui-label font-medium text-foreground">{t('saveProjectPlanDialog.field.title')}</label>
+            <label htmlFor={titleInputId} className="typography-ui-label font-medium text-foreground">{t('saveProjectPlanDialog.field.title')}</label>
             <Input
+              id={titleInputId}
               value={title}
               onChange={(event) => setTitle(event.target.value)}
               placeholder={t('saveProjectPlanDialog.field.titlePlaceholder')}