From 8dda736df494c2738e27b563cfae58ea3d402458 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Mon, 18 Jul 2022 06:34:59 +0000
Subject: [PATCH] [FIX] web: FormViewDialog: fallback on LegacyFormViewDialog

It might happen that one wants to spawn a FormViewDialog with a
view that has a js_class, and the corresponding js code hasn't
been converted to owl yet (it is still an extension of the legacy
FormView). Before this commit, when that happened, the control
panel buttons of the form view weren't moved to the footer of the
dialog, because this isn't supported with legacy views. This
commit is a workaround, as it fallbacks on the legacy FormViewDialog
in this situation.

Without this commit, the main flow tour fails.

Part-of: odoo/odoo#78221
---
 addons/web/static/src/views/view.js           |  5 +++
 .../views/view_dialogs/form_view_dialog.js    | 41 +++++++++++++++++--
 .../views/view_dialogs/form_view_dialog.xml   |  2 +-
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
index 10f338c3f1e..05c47c85c5a 100644
--- a/addons/web/static/src/views/view.js
+++ b/addons/web/static/src/views/view.js
@@ -100,6 +100,7 @@ export function getDefaultConfig() {
  */
 
 export class ViewNotFoundError extends Error {}
+export class LegacyFormViewInDialogError extends Error {}
 
 const STANDARD_PROPS = [
     "resModel",
@@ -270,6 +271,10 @@ export class View extends Component {
             }
         }
 
+        if (descr.type === "form" && descr.isLegacy && this.env.inDialog) {
+            throw new LegacyFormViewInDialogError();
+        }
+
         Object.assign(this.env.config, {
             viewId: viewDescription.id,
             viewType: type,
diff --git a/addons/web/static/src/views/view_dialogs/form_view_dialog.js b/addons/web/static/src/views/view_dialogs/form_view_dialog.js
index 93b8aaf66bf..30d9061a97f 100644
--- a/addons/web/static/src/views/view_dialogs/form_view_dialog.js
+++ b/addons/web/static/src/views/view_dialogs/form_view_dialog.js
@@ -2,9 +2,11 @@
 
 import { Dialog } from "@web/core/dialog/dialog";
 import { useChildRef } from "@web/core/utils/hooks";
-import { View } from "@web/views/view";
+import { LegacyFormViewInDialogError, View } from "@web/views/view";
+import { FormViewDialog as LegacyFormViewDialog } from "web.view_dialogs";
+import { standaloneAdapter } from "web.OwlCompatibility";
 
-const { Component, onMounted } = owl;
+const { Component, onError, onMounted, onWillDestroy, useState } = owl;
 
 export class FormViewDialog extends Component {
     setup() {
@@ -51,7 +53,10 @@ export class FormViewDialog extends Component {
         };
 
         onMounted(() => {
-            if (this.modalRef.el.querySelector(".modal-footer").childElementCount > 1) {
+            if (
+                !this.state.error &&
+                this.modalRef.el.querySelector(".modal-footer").childElementCount > 1
+            ) {
                 const defaultButton = this.modalRef.el.querySelector(
                     ".modal-footer button.o-default-button"
                 );
@@ -60,6 +65,36 @@ export class FormViewDialog extends Component {
                 }
             }
         });
+
+        // FIXME: If the form view to instantiate is a js_class that hasn't been converted yet,
+        // we can't use the new FormViewDialog, as it would instantiate the legacy form view. As
+        // a consequence, the control panel buttons would not be moved to the footer. In this case,
+        // View triggers an error that we catch here, and we spawn a legacy FormViewDialog instead.
+        this.state = useState({ error: null });
+        this.dialogClose = [];
+        onError((e) => {
+            if (e.cause instanceof LegacyFormViewInDialogError) {
+                this.state.error = e.cause;
+                const adapterParent = standaloneAdapter({ Component });
+                const dialog = new LegacyFormViewDialog(adapterParent, {
+                    res_model: this.props.resModel,
+                    context: this.props.context || {},
+                    title: this.props.title,
+                    disable_multiple_selection: true,
+                    on_saved: async (record) => {
+                        await this.props.onRecordSaved(record);
+                        this.props.close();
+                    },
+                });
+                dialog.open();
+                this.dialogClose.push(() => dialog.close());
+                return;
+            }
+            throw e;
+        });
+        onWillDestroy(() => {
+            this.dialogClose.forEach((close) => close());
+        });
     }
 }
 
diff --git a/addons/web/static/src/views/view_dialogs/form_view_dialog.xml b/addons/web/static/src/views/view_dialogs/form_view_dialog.xml
index 3a1891de2d0..13584b0b7f1 100644
--- a/addons/web/static/src/views/view_dialogs/form_view_dialog.xml
+++ b/addons/web/static/src/views/view_dialogs/form_view_dialog.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
   <t t-name="web.FormViewDialog" owl="1">
-    <Dialog title="props.title" contentClass="'o_form_view_dialog'" modalRef="modalRef">
+    <Dialog title="props.title" contentClass="'o_form_view_dialog'" modalRef="modalRef" t-if="!state.error">
       <View t-props="viewProps"/>
       <t t-set-slot="footer">
         <t t-if="props.preventEdit and props.preventCreate">