diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json index f44eff34e73..cc5c727c1e8 100644 --- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json +++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json @@ -34,5 +34,7 @@ "well_allocations": "Well allocations: Describe where liquids should go in labware.", "what_if_you": "What if you don’t provide all of those pieces of information? OpentronsAI asks you to provide it!", "what_typeof_protocol": "What type of protocol do you need?", - "you": "You" + "you": "You", + "prompt_preview_submit_button": "Submit prompt", + "prompt_preview_placeholder_message": "As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol." } diff --git a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx index 8adb5bd86f8..ab7d69543ba 100644 --- a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx +++ b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx @@ -2,9 +2,13 @@ import { screen } from '@testing-library/react' import { describe, it, vi, beforeEach, expect } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { PROMPT_PREVIEW_PLACEHOLDER_MESSAGE, PromptPreview } from '..' +import { PromptPreview } from '..' + +const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE = + 'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.' const mockHandleClick = vi.fn() + const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, diff --git a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx index 6cc8e37320e..b789cfbb4c7 100644 --- a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx +++ b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx @@ -13,9 +13,7 @@ import { } from '@opentrons/components' import { PromptPreviewSection } from '../PromptPreviewSection' import type { PromptPreviewSectionProps } from '../PromptPreviewSection' - -export const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE = - 'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.' +import { useTranslation } from 'react-i18next' interface PromptPreviewProps { isSubmitButtonEnabled?: boolean @@ -49,6 +47,8 @@ export function PromptPreview({ handleSubmit, promptPreviewData = [], }: PromptPreviewProps): JSX.Element { + const { t } = useTranslation('protocol_generator') + const areAllSectionsEmpty = (): boolean => { return promptPreviewData.every(section => section.items.length === 0) } @@ -58,7 +58,7 @@ export function PromptPreview({ Prompt @@ -66,7 +66,7 @@ export function PromptPreview({ {areAllSectionsEmpty() && ( - {PROMPT_PREVIEW_PLACEHOLDER_MESSAGE} + {t('prompt_preview_placeholder_message')} )}