diff --git a/src/containers/Flow/FlowTranslation.module.css b/src/containers/Flow/FlowTranslation.module.css index 7d5b28f5b..a4064ee70 100644 --- a/src/containers/Flow/FlowTranslation.module.css +++ b/src/containers/Flow/FlowTranslation.module.css @@ -12,3 +12,7 @@ .Radio { padding: 0px 8px; } + +.DialogContent { + text-align: center; +} diff --git a/src/containers/Flow/FlowTranslation.test.tsx b/src/containers/Flow/FlowTranslation.test.tsx index b843fad9c..0caa6beaf 100644 --- a/src/containers/Flow/FlowTranslation.test.tsx +++ b/src/containers/Flow/FlowTranslation.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor, fireEvent } from '@testing-library/react'; +import { render, waitFor, fireEvent, screen } from '@testing-library/react'; import { vi } from 'vitest'; import { MockedProvider } from '@apollo/client/testing'; import * as Notification from 'common/notification'; @@ -37,6 +37,13 @@ describe('Testing Translation flows', () => { const button = getByText('Submit'); fireEvent.click(button); + + await waitFor(() => { + expect(screen.getByText('Note')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByText('Continue')); + await waitFor(() => { expect(notificationSpy).toHaveBeenCalledWith('Flow has been translated successfully'); }); @@ -48,6 +55,11 @@ describe('Testing Translation flows', () => { const button = getByText('Submit'); fireEvent.click(button); + await waitFor(() => { + expect(screen.getByText('Note')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByText('Continue')); await waitFor(() => { expect(notificationSpy).toHaveBeenCalledWith('Sorry! Unable to translate flow', 'warning'); }); @@ -70,6 +82,13 @@ describe('Testing Translation flows', () => { fireEvent.click(getByText('Export with auto translate')); const submitButton = getByText('Submit'); fireEvent.click(submitButton); + + await waitFor(() => { + expect(screen.getByText('Note')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByText('Continue')); + await waitFor(() => { expect(mockSetDialog).toHaveBeenCalledWith(false); }); @@ -106,4 +125,28 @@ describe('Testing Translation flows', () => { expect(mockSetDialog).toHaveBeenCalledWith(false); }); }); + it('it closes the warning dialog box', async () => { + const { getByText, container } = render(flowTranslation()); + await waitFor(() => { + expect(container).toBeInTheDocument(); + }); + + const button = getByText('Submit'); + fireEvent.click(button); + + await waitFor(() => { + expect(screen.getByText('Note')).toBeInTheDocument(); + }); + + fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape', code: 'esc' }); + }); + + it('closes the translation dialog box', async () => { + const wrapper = render(flowTranslation()); + await waitFor(() => { + expect(wrapper.container).toBeInTheDocument(); + }); + + fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape', code: 'esc' }); + }); }); diff --git a/src/containers/Flow/FlowTranslation.tsx b/src/containers/Flow/FlowTranslation.tsx index ca6b611e2..0d1919b97 100644 --- a/src/containers/Flow/FlowTranslation.tsx +++ b/src/containers/Flow/FlowTranslation.tsx @@ -34,6 +34,7 @@ export const BackdropLoader = ({ text }: any) => ( export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTranslationProps) => { const [action, setAction] = useState('auto'); const [importing, setImporting] = useState(false); + const [autoTranslate, setAutoTranslate] = useState(null); const { t } = useTranslation(); @@ -91,12 +92,10 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans }; const handleOk = () => { - if (action === 'auto') { - handleAuto(); - } else if (action === 'export') { + if (action === 'auto' || action === 'export-auto') { + setAutoTranslate(action); + } else { handleExport(); - } else if (action === 'export-auto') { - handleAutoExport(); } }; @@ -104,6 +103,14 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans setAction((event.target as HTMLInputElement).value); }; + const handleAutoTranslate = () => { + if (autoTranslate === 'auto') { + handleAuto(); + } else if (autoTranslate === 'export-auto') { + handleAutoExport(); + } + }; + const importButton = ( ); - return ( + let autoTranslateWarningDialog; + if (autoTranslate) { + autoTranslateWarningDialog = ( + { + setAutoTranslate(null); + }} + > +

+ Auto translate only adds translation in languages nodes which are empty. To get the latest + translations of updated content in your default language flow, please clear the nodes in + the language nodes. +

+
+ ); + } + + let flowTranslationDialog = ( ); + + return ( + <> + {flowTranslationDialog} + {autoTranslateWarningDialog} + + ); }; export default FlowTranslation;