feat(dashboard): i18n string extraction for 7 remaining pages (#3192)

Closes #3182

Author: OneStepAt4time

dashboard/src/__tests__/AccessibilityIssue309.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import SessionTable from '../components/overview/SessionTable';
@@ -152,9 +153,11 @@ describe('Issue 309 accessibility fixes', () => {
   it('renders a labeled session message input', () => {
     render(
       <MemoryRouter initialEntries={['/sessions/session-1']}>
+        <I18nProvider>
         <Routes>
           <Route path="/sessions/:id" element={<SessionDetailPage />} />
         </Routes>
+        </I18nProvider>
       </MemoryRouter>,
     );
 

dashboard/src/__tests__/AuthKeysPage.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter, Route, Routes, Navigate } from 'react-router-dom';
 import AuthKeysPage from '../pages/AuthKeysPage';
@@ -38,13 +39,15 @@ describe('AuthKeysPage', () => {
   function renderPage(initialPath: string = '/auth/keys'): void {
     render(
       <MemoryRouter initialEntries={[initialPath]}>
-        <Routes>
-          <Route
-            path="/users"
-            element={<Navigate to="/auth/keys" replace state={{ usersRedirect: true }} />}
-          />
-          <Route path="/auth/keys" element={<AuthKeysPage />} />
-        </Routes>
+        <I18nProvider>
+          <Routes>
+            <Route
+              path="/users"
+              element={<Navigate to="/auth/keys" replace state={{ usersRedirect: true }} />}
+            />
+            <Route path="/auth/keys" element={<AuthKeysPage />} />
+          </Routes>
+        </I18nProvider>
       </MemoryRouter>,
     );
   }
@@ -103,7 +106,7 @@ describe('AuthKeysPage', () => {
     });
 
     fireEvent.change(screen.getByLabelText('Key Name'), { target: { value: 'ops-primary' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Create new auth key' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Create Auth Key' }));
 
     await waitFor(() => {
       expect(mockCreateAuthKey).toHaveBeenCalledWith('ops-primary');

dashboard/src/__tests__/NewSessionPage.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import NewSessionPage from '../pages/NewSessionPage';
@@ -38,7 +39,9 @@ function getField(name: string) {
 async function renderPage(): Promise<void> {
   render(
     <MemoryRouter>
+      <I18nProvider>
       <NewSessionPage />
+    </I18nProvider>
     </MemoryRouter>,
   );
   await waitFor(() => {

dashboard/src/__tests__/PipelineDetailPage.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import PipelineDetailPage from '../pages/PipelineDetailPage';
@@ -41,9 +42,11 @@ const mockPipeline: PipelineInfo = {
 function renderPage(id = 'pipe-1'): void {
   render(
     <MemoryRouter initialEntries={[`/pipelines/${id}`]}>
+      <I18nProvider>
       <Routes>
         <Route path="/pipelines/:id" element={<PipelineDetailPage />} />
       </Routes>
+      </I18nProvider>
     </MemoryRouter>,
   );
 }

dashboard/src/__tests__/ScreenshotCapture319.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import SessionDetailPage from '../pages/SessionDetailPage';
@@ -82,9 +83,11 @@ vi.mock('../components/session/ApprovalBanner', () => ({
 function renderPage(): void {
   render(
     <MemoryRouter initialEntries={['/sessions/session-1']}>
+      <I18nProvider>
       <Routes>
         <Route path="/sessions/:id" element={<SessionDetailPage />} />
       </Routes>
+      </I18nProvider>
     </MemoryRouter>,
   );
 }

dashboard/src/__tests__/SessionDetailPage.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import SessionDetailPage from '../pages/SessionDetailPage';
@@ -57,9 +58,11 @@ vi.mock('../components/session/SessionSummaryCard', () => ({
 function renderPage(): void {
   render(
     <MemoryRouter initialEntries={['/sessions/session-1']}>
-      <Routes>
-        <Route path="/sessions/:id" element={<SessionDetailPage />} />
-      </Routes>
+      <I18nProvider>
+        <Routes>
+          <Route path="/sessions/:id" element={<SessionDetailPage />} />
+        </Routes>
+      </I18nProvider>
     </MemoryRouter>,
   );
 }

dashboard/src/__tests__/SessionHistoryPage.test.tsx

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import SessionHistoryPage from '../pages/SessionHistoryPage';
@@ -21,7 +22,9 @@ vi.mock('react-router-dom', async () => {
 function renderPage(initialPath = '/') {
   return render(
     <MemoryRouter initialEntries={[initialPath]}>
+      <I18nProvider>
       <SessionHistoryPage />
+    </I18nProvider>
     </MemoryRouter>,
   );
 }

dashboard/src/__tests__/SettingsPage.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { I18nProvider } from '../i18n/context';
 import { fireEvent, render, screen } from '@testing-library/react';
 import SettingsPage from '../pages/SettingsPage';
 
@@ -26,7 +27,7 @@ describe('SettingsPage', () => {
   });
 
   function renderPage(): void {
-    render(<SettingsPage />);
+    render(<I18nProvider><SettingsPage /></I18nProvider>);
   }
 
   it('renders the settings page with header and sections', () => {

dashboard/src/__tests__/TemplatesPage.test.tsx

@@ -7,6 +7,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { act } from 'react';
 import TemplatesPage from '../pages/TemplatesPage';
+import { I18nProvider } from '../i18n/context';
 import * as client from '../api/client';
 import type { SessionTemplate } from '../types';
 
@@ -50,7 +51,9 @@ const mockTemplates: SessionTemplate[] = [
 function renderPage() {
   return render(
     <BrowserRouter>
+      <I18nProvider>
       <TemplatesPage />
+    </I18nProvider>
     </BrowserRouter>,
   );
 }

dashboard/src/__tests__/a11y-pages.test.tsx

@@ -465,23 +465,27 @@ describe('a11y: page landmarks and ARIA', () => {
     it('steps table has aria-label after loading', async () => {
       render(
         <MemoryRouter initialEntries={['/pipelines/test-pipeline-id']}>
+          <I18nProvider>
           <Routes>
             <Route path="/pipelines/:id" element={<PipelineDetailPage />} />
           </Routes>
+          </I18nProvider>
         </MemoryRouter>,
       );
       await waitFor(() => {
-        const table = document.querySelector('table[aria-label="Pipeline steps"]');
+        const table = document.querySelector('table[aria-label="Steps"]');
         expect(table).not.toBeNull();
       }, { timeout: 3000 });
     });
 
     it('renders a page-level h1 after loading', async () => {
       render(
         <MemoryRouter initialEntries={['/pipelines/test-pipeline-id']}>
+          <I18nProvider>
           <Routes>
             <Route path="/pipelines/:id" element={<PipelineDetailPage />} />
           </Routes>
+          </I18nProvider>
         </MemoryRouter>,
       );
       await waitFor(() => {