fix: prevent unsaved changes loss (#1786)

Author: stepan662

e2e/cypress/common/translations.ts

@@ -110,8 +110,8 @@ export const editCell = (oldValue: string, newValue?: string, save = true) => {
   }
 };
 
-export function confirmSaveChanges() {
-  cy.gcy('global-confirmation-confirm').contains('Save').click();
+export function confirmDiscard() {
+  cy.gcy('global-confirmation-confirm').contains('Discard').click();
 }
 
 export const toggleLang = (lang) => {

e2e/cypress/e2e/translations/with5translations/withViews.cy.ts

@@ -1,7 +1,7 @@
 import { getAnyContainingText } from '../../../common/xPath';
 import { ProjectDTO } from '../../../../../webapp/src/service/response.types';
 import {
-  confirmSaveChanges,
+  confirmDiscard,
   create4Translations,
   editCell,
   forEachView,
@@ -91,9 +91,8 @@ describe('Views with 5 Translations', () => {
       it('will ask for confirmation on changed edit', () => {
         editCell('Cool translated text 1', 'Cool translation edited', false);
         cy.contains('Cool translated text 4').click();
-        cy.contains(`Unsaved changes`).should('be.visible');
-        confirmSaveChanges();
-        cy.contains('Cool translation edited');
+        cy.contains(`Discard changes?`).should('be.visible');
+        confirmDiscard();
         cy.gcy('global-editor')
           .contains('Cool translation edited')
           .should('not.exist');

webapp/src/views/projects/translations/context/TranslationsContext.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import ReactList from 'react-list';
 import { useApiQuery } from 'tg.service/http/useQueryApi';
 
@@ -115,6 +115,18 @@ export const [
     selectionService.clear();
   };
 
+  useEffect(() => {
+    // prevent leaving the page when there are unsaved changes
+    if (editService.position?.changed) {
+      const handler = (e) => {
+        e.preventDefault();
+        e.returnValue = '';
+      };
+      window.addEventListener('beforeunload', handler);
+      return () => window.removeEventListener('beforeunload', handler);
+    }
+  }, [editService.position?.changed]);
+
   // actions
 
   const actions = {
@@ -126,18 +138,24 @@ export const [
       translationService.setUrlSearch(search);
       return handleTranslationsReset();
     },
-    setFilters(filters: Filters) {
-      translationService.setFilters(filters);
-      return handleTranslationsReset();
+    async setFilters(filters: Filters) {
+      if (await editService.confirmUnsavedChanges()) {
+        translationService.setFilters(filters);
+        return handleTranslationsReset();
+      }
     },
-    setEdit(edit: Edit | undefined) {
-      return editService.setEdit(edit);
+    async setEdit(edit: Edit | undefined) {
+      if (await editService.confirmUnsavedChanges(edit)) {
+        return editService.setPositionAndFocus(edit);
+      }
     },
     setEditForce(edit: Edit | undefined) {
       return editService.setPositionAndFocus(edit);
     },
-    updateEdit(edit: Partial<Edit>) {
-      return editService.updatePosition(edit);
+    async updateEdit(edit: Partial<Edit>) {
+      if (await editService.confirmUnsavedChanges(edit)) {
+        return editService.updatePosition(edit);
+      }
     },
     toggleSelect(index: number) {
       return selectionService.toggle(index);

webapp/src/views/projects/translations/context/services/useEditService.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { container } from 'tsyringe';
-import { T, useTranslate } from '@tolgee/react';
+import { T } from '@tolgee/react';
 
 import { components } from 'tg.service/apiSchema.generated';
 import {
@@ -37,7 +37,6 @@ export const useEditService = ({ translations, viewRefs }: Props) => {
   const putTranslation = usePutTranslation();
   const putTag = usePutTag();
   const deleteTag = useDeleteTag();
-  const { t } = useTranslate();
 
   useEffect(() => {
     // field is also focused, which breaks the scrolling
@@ -154,25 +153,37 @@ export const useEditService = ({ translations, viewRefs }: Props) => {
     });
   };
 
-  const setEdit = (newPosition: Edit | undefined) => {
-    if (position?.changed) {
-      setPositionAndFocus({ ...position, mode: 'editor' });
-      confirmation({
-        title: t('translations_unsaved_changes_confirmation_title'),
-        message: t('translations_unsaved_changes_confirmation'),
-        cancelButtonText: t('back_to_editing'),
-        confirmButtonText: t('translations_cell_save'),
-        onConfirm: () => {
-          changeField({
-            onSuccess() {
-              setPositionAndFocus(newPosition);
-            },
-          });
-        },
-      });
-    } else {
-      setPositionAndFocus(newPosition);
-    }
+  const confirmUnsavedChanges = (newPosition?: Partial<Edit>) => {
+    return new Promise<boolean>((resolve) => {
+      const fieldIsDifferent =
+        newPosition?.keyId !== undefined &&
+        (newPosition?.keyId !== position?.keyId ||
+          newPosition?.language !== position?.language);
+
+      if (
+        position?.changed &&
+        position.keyId !== undefined &&
+        (!newPosition || fieldIsDifferent)
+      ) {
+        setPositionAndFocus({ ...position, mode: 'editor' });
+        confirmation({
+          title: <T keyName="translations_discard_unsaved_title" />,
+          message: <T keyName="translations_discard_unsaved_message" />,
+          cancelButtonText: <T keyName="back_to_editing" />,
+          confirmButtonText: (
+            <T keyName="translations_discard_button_confirm" />
+          ),
+          onConfirm() {
+            resolve(true);
+          },
+          onCancel() {
+            resolve(false);
+          },
+        });
+      } else {
+        resolve(true);
+      }
+    });
   };
 
   const changeField = async (data: ChangeValue) => {
@@ -243,8 +254,8 @@ export const useEditService = ({ translations, viewRefs }: Props) => {
     setPosition,
     updatePosition,
     setPositionAndFocus,
-    setEdit,
     changeField,
+    confirmUnsavedChanges,
     isLoading:
       putKey.isLoading ||
       putTranslation.isLoading ||