diff --git a/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.test.tsx b/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.test.tsx index 56813486f..0c13fea11 100644 --- a/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.test.tsx +++ b/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.test.tsx @@ -1,13 +1,18 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; +import { ApI18nProvider } from '../../../i18n'; import { IterationNavigator } from './IterationNavigator'; import type { LoopIterationState } from './LoopNode.types'; +function renderWithI18n(ui: React.ReactElement) { + return render({ui}); +} + function renderNavigator(iterationState: Partial = {}) { const onActiveIndexChange = vi.fn(); - render( + renderWithI18n( { const user = userEvent.setup(); const { onActiveIndexChange } = renderNavigator({ activeIndex: 99, total: 3 }); + expect(screen.getByRole('group', { name: 'Loop iteration: 3 of 3' })).toBeTruthy(); expect(screen.getByTestId('loop-iteration-label')).toHaveTextContent('3 / 3'); expect(screen.getByRole('button', { name: 'Next loop iteration' })).toBeDisabled(); @@ -58,7 +64,7 @@ describe('IterationNavigator', () => { }); it('disables previous and next at iteration boundaries', () => { - const { rerender } = render( + const { rerender } = renderWithI18n( { expect(screen.getByRole('button', { name: 'Next loop iteration' })).not.toBeDisabled(); rerender( - + + + ); expect(screen.getByRole('button', { name: 'Previous loop iteration' })).not.toBeDisabled(); @@ -99,4 +107,10 @@ describe('IterationNavigator', () => { expect(screen.getByRole('button', { name: 'Previous loop iteration' })).toBeDisabled(); expect(screen.getByRole('button', { name: 'Next loop iteration' })).toBeDisabled(); }); + + it('preserves the host-provided iteration aria label', () => { + renderNavigator({ ariaLabel: 'Current item' }); + + expect(screen.getByRole('group', { name: 'Current item: 2 of 3' })).toBeTruthy(); + }); }); diff --git a/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.tsx b/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.tsx index b142d9977..1f114c46c 100644 --- a/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.tsx +++ b/packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.tsx @@ -1,6 +1,7 @@ import { cn } from '@uipath/apollo-wind'; import type { SyntheticEvent } from 'react'; import { useCallback } from 'react'; +import { useSafeLingui } from '../../../i18n'; import { clamp } from '../../utils'; import { CanvasIcon } from '../../utils/icon-registry'; import type { LoopIterationState } from './LoopNode.types'; @@ -46,12 +47,23 @@ export function IterationNavigator({ iterationState }: IterationNavigatorProps) } function NavigatorContent({ iterationState }: { iterationState: LoopIterationState }) { + const { _ } = useSafeLingui(); const { activeIndex, total, onActiveIndexChange, disabled, ariaLabel } = iterationState; const canInteract = !disabled && typeof onActiveIndexChange === 'function'; const canGoPrevious = canInteract && activeIndex > 0; const canGoNext = canInteract && activeIndex < total - 1; - const label = ariaLabel ?? 'Loop iteration'; + const label = ariaLabel ?? _({ id: 'loop-node.iteration.label', message: 'Loop iteration' }); const visibleIndex = activeIndex + 1; + const statusLabel = _({ + id: 'loop-node.iteration.status', + message: '{label}: {visibleIndex} of {total}', + values: { label, visibleIndex, total }, + }); + const previousLabel = _({ + id: 'loop-node.iteration.previous', + message: 'Previous loop iteration', + }); + const nextLabel = _({ id: 'loop-node.iteration.next', message: 'Next loop iteration' }); const handlePrevious = useCallback( (event: SyntheticEvent) => { @@ -84,9 +96,7 @@ function NavigatorContent({ iterationState }: { iterationState: LoopIterationSta onMouseDown={stopCanvasControlEvent} onDoubleClick={stopCanvasControlEvent} > - - {label}: {visibleIndex} of {total} - + {statusLabel} + + + ); } diff --git a/packages/apollo-react/src/canvas/locales/en.json b/packages/apollo-react/src/canvas/locales/en.json index 9cbfb0bbc..b6ce5eaa4 100644 --- a/packages/apollo-react/src/canvas/locales/en.json +++ b/packages/apollo-react/src/canvas/locales/en.json @@ -34,5 +34,13 @@ "sticky-note.toolbar.color": "Color", "sticky-note.toolbar.delete": "Delete", "sticky-note.toolbar.edit": "Edit", - "toolbox.search": "Search" + "toolbox.search": "Search", + "loop-node.add-node": "Add node to loop", + "loop-node.iteration.label": "Loop iteration", + "loop-node.iteration.next": "Next loop iteration", + "loop-node.iteration.previous": "Previous loop iteration", + "loop-node.iteration.status": "{label}: {visibleIndex} of {total}", + "loop-node.mode.parallel": "Parallel", + "loop-node.mode.sequential": "Sequential", + "loop-node.title": "Loop" } diff --git a/packages/apollo-react/src/i18n/useSafeLingui.test.tsx b/packages/apollo-react/src/i18n/useSafeLingui.test.tsx new file mode 100644 index 000000000..c83396cde --- /dev/null +++ b/packages/apollo-react/src/i18n/useSafeLingui.test.tsx @@ -0,0 +1,65 @@ +import { setupI18n } from '@lingui/core'; +import { I18nProvider } from '@lingui/react'; +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { useSafeLingui } from './useSafeLingui'; + +type TranslationDescriptor = { id: string; message?: string; values?: Record }; +type TranslationInput = TranslationDescriptor | string; + +function TranslationProbe({ descriptor }: { descriptor: TranslationInput }) { + const { _ } = useSafeLingui(); + const label = typeof descriptor === 'string' ? _(descriptor) : _(descriptor); + + return {label}; +} + +describe('useSafeLingui', () => { + it('returns string ids when no provider is mounted', () => { + render(); + + expect(screen.getByText('test.message')).toBeInTheDocument(); + }); + + it('returns descriptor messages when no provider is mounted', () => { + render(); + + expect(screen.getByText('Hello world')).toBeInTheDocument(); + }); + + it('formats descriptor values when no provider is mounted', () => { + render( + + ); + + expect(screen.getByText('Loop iteration: 1 of 3')).toBeInTheDocument(); + }); + + it('uses the mounted Lingui provider when available', () => { + const testI18n = setupI18n({ + locale: 'es', + messages: { + es: { + 'test.greeting': 'Hola {name}', + }, + }, + }); + + render( + + + + ); + + expect(screen.getByText('Hola Ada')).toBeInTheDocument(); + }); +}); diff --git a/packages/apollo-react/src/i18n/useSafeLingui.ts b/packages/apollo-react/src/i18n/useSafeLingui.ts index db85c1b9a..6d86e333e 100644 --- a/packages/apollo-react/src/i18n/useSafeLingui.ts +++ b/packages/apollo-react/src/i18n/useSafeLingui.ts @@ -1,3 +1,4 @@ +import { setupI18n } from '@lingui/core'; import { LinguiContext } from '@lingui/react'; import { useContext, useMemo } from 'react'; @@ -7,10 +8,21 @@ type Translate = { (id: string): string; }; -// Returns the `message` (English default baked into the macro call) when no +const fallbackI18n = setupI18n({ locale: 'en', messages: { en: {} } }); + +// Formats the `message` (English default baked into the macro call) when no // I18nProvider is mounted upstream. Falls back to `id` if no message is given. -const fallbackTranslate = ((arg: Descriptor | string): string => - typeof arg === 'string' ? arg : (arg.message ?? arg.id)) as Translate; +const fallbackTranslate = ((arg: Descriptor | string): string => { + if (typeof arg === 'string') { + return arg; + } + + if (!arg.message) { + return arg.id; + } + + return fallbackI18n._(arg); +}) as Translate; // Drop-in replacement for `useLingui()` from `@lingui/react` that does NOT // throw when there is no I18nProvider upstream. Reads `LinguiContext` directly