[FIX] web: translation button use owned dialogs

Before this commit, if a translation dialog was open, and the view where
the button is unmounted, the dialog stays open.

Now, the dialog closes, when the view is unmounted.

closes odoo/odoo#104543

X-original-commit: 40596ed1eccdf0f37b4fa3a8a337e7a7cc3461ce
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Signed-off-by: Jorge Pinna Puissant (jpp) <jpp@odoo.com>

addons/web/static/src/views/fields/translation_button.js

@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { localization } from "@web/core/l10n/localization";
-import { useService } from "@web/core/utils/hooks";
+import { useOwnedDialogs, useService } from "@web/core/utils/hooks";
 import { TranslationDialog } from "./translation_dialog";
 import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
 
@@ -16,14 +16,14 @@ import { Component, useEnv } from "@odoo/owl";
  * when legacy code is removed.
  */
 export function useTranslationDialog() {
-    const dialog = useService("dialog");
+    const addDialog = useOwnedDialogs();
     const env = useEnv();
 
     async function openTranslationDialog({ record, fieldName, updateField }) {
         if (!record.resId) {
             let _continue = true;
             await new Promise((resolve) => {
-                dialog.add(ConfirmationDialog, {
+                addDialog(ConfirmationDialog, {
                     async confirm() {
                         _continue = await record.save({ stayInEdition: true });
                         resolve();
@@ -44,7 +44,7 @@ export function useTranslationDialog() {
         }
         const { resModel, resId } = record;
 
-        dialog.add(TranslationDialog, {
+        addDialog(TranslationDialog, {
             fieldName: fieldName,
             resId: resId,
             resModel: resModel,
@@ -60,8 +60,6 @@ export function useTranslationDialog() {
 export class TranslationButton extends Component {
     setup() {
         this.user = useService("user");
-        this.rpc = useService("rpc");
-        this.dialog = useService("dialog");
         this.translationDialog = useTranslationDialog();
     }
 

addons/web/static/tests/views/fields/char_field_tests.js

@@ -377,6 +377,61 @@ QUnit.module("Fields", (hooks) => {
         );
     });
 
+    QUnit.test("translation dialog should close if field is not there anymore", async function (assert) {
+        // In this test, we simulate the case where the field is removed from the view
+        // this can happend for example if the user click the back button of the browser.
+        serverData.models.partner.fields.foo.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+        patchWithCleanup(session.user_context, {
+            lang: "en_US",
+        });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="int_field" />
+                            <field name="foo"  attrs="{'invisible': [('int_field', '==', 9)]}"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method, model }) {
+                if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                    return Promise.resolve([
+                        ["en_US", "English"],
+                        ["fr_BE", "French (Belgium)"],
+                        ["es_ES", "Spanish"],
+                    ]);
+                }
+                if (route === "/web/dataset/call_kw/partner/get_field_translations") {
+                    return Promise.resolve([
+                        [
+                            { lang: "en_US", source: "yop", value: "yop" },
+                            { lang: "fr_BE", source: "yop", value: "valeur français" },
+                            { lang: "es_ES", source: "yop", value: "yop español" },
+                        ],
+                        { translation_type: "char", translation_show_source: false },
+                    ]);
+                }
+            },
+        });
+
+        assert.hasClass(target.querySelector("[name=foo] input"), "o_field_translate");
+
+        await click(target, ".o_field_char .btn.o_field_translate");
+        assert.containsOnce(target, ".modal", "a translate modal should be visible");
+        await editInput(target, ".o_field_widget[name=int_field] input", "9");
+        await nextTick();
+        assert.containsNone(target, "[name=foo] input", "the field foo should be invisible");
+        assert.containsNone(target, ".modal", "a translate modal should not be visible");
+    });
+
     QUnit.test("html field translatable", async function (assert) {
         assert.expect(5);