Merge pull request #2931 from glific/autotranslate/confirmation-popup

Added popup for auto translate

src/containers/Flow/FlowTranslation.module.css

@@ -12,3 +12,7 @@
 .Radio {
   padding: 0px 8px;
 }
+
+.DialogContent {
+  text-align: center;
+}

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' });
+  });
 });

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<any>(null);
 
   const { t } = useTranslation();
 
@@ -91,19 +92,25 @@ 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();
     }
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setAction((event.target as HTMLInputElement).value);
   };
 
+  const handleAutoTranslate = () => {
+    if (autoTranslate === 'auto') {
+      handleAuto();
+    } else if (autoTranslate === 'export-auto') {
+      handleAutoExport();
+    }
+  };
+
   const importButton = (
     <ImportButton
       title={t('Import translations')}
@@ -175,7 +182,29 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
     </div>
   );
 
-  return (
+  let autoTranslateWarningDialog;
+  if (autoTranslate) {
+    autoTranslateWarningDialog = (
+      <DialogBox
+        title="Note"
+        alignButtons="center"
+        buttonOk="Continue"
+        buttonCancel="Cancel"
+        handleOk={handleAutoTranslate}
+        handleCancel={() => {
+          setAutoTranslate(null);
+        }}
+      >
+        <p className={styles.DialogContent}>
+          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.
+        </p>
+      </DialogBox>
+    );
+  }
+
+  let flowTranslationDialog = (
     <DialogBox
       title="Translate Options"
       alignButtons="center"
@@ -190,6 +219,13 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
       {dialogContent}
     </DialogBox>
   );
+
+  return (
+    <>
+      {flowTranslationDialog}
+      {autoTranslateWarningDialog}
+    </>
+  );
 };
 
 export default FlowTranslation;