From 59b96b0742fe8da31eecf896f7a6157811d49de5 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 15 Dec 2021 18:07:40 +0100
Subject: [PATCH] [IMP] website: add client action to display current website
 in an iframe

This commit adds a new client action, that will display the frontend
website in an iframe, inside the backend.
Besides that iframe will be instantiated the edition components (the
snippets menu, or the translate menu).

This allows for a better integration with the other odoo apps, an easier
mobile edition. It also avoid reloading the edition components when
navigating inside the website.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  5 ++-
 .../website_preview/website_preview.js        | 37 +++++++++++++++++++
 .../website_preview/website_preview.scss      | 11 ++++++
 .../website_preview/website_preview.xml       |  8 ++++
 .../static/src/js/backend/dashboard.js        |  2 +-
 .../static/src/services/website_service.js    | 21 +++++++++++
 addons/website/views/website_views.xml        | 18 ++++++---
 7 files changed, 94 insertions(+), 8 deletions(-)
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.js
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.scss
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.xml
 create mode 100644 addons/website/static/src/services/website_service.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 1a80ba97813..456a70bf346 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -169,6 +169,9 @@
             'website/static/src/js/widget_iframe.js',
             'website/static/src/js/theme_preview_kanban.js',
             'website/static/src/js/theme_preview_form.js',
+            'website/static/src/client_actions/*/*.js',
+            'website/static/src/client_actions/*/*.scss',
+            'website/static/src/services/website_service.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
@@ -239,7 +242,7 @@
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
-            'website/static/src/client_actions/configurator/configurator.xml',
+            'website/static/src/client_actions/*/*.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
new file mode 100644
index 00000000000..d6f9c2889be
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -0,0 +1,37 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+import { useService } from '@web/core/utils/hooks';
+
+const { Component, onWillStart } = owl;
+
+export class WebsitePreview extends Component {
+    setup() {
+        this.websiteService = useService('website');
+
+        onWillStart(async () => {
+            await this.websiteService.fetchWebsites();
+            const encodedPath = encodeURIComponent(this.path);
+            this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
+        });
+    }
+
+    get websiteId() {
+        let websiteId = this.props.action.context.params && this.props.action.context.params.website_id;
+        if (!websiteId) {
+            websiteId = this.websiteService.websites[0].id;
+        }
+        return websiteId;
+    }
+
+    get path() {
+        let path = this.props.action.context.params && this.props.action.context.params.path;
+        if (!path) {
+            path = '/';
+        }
+        return path;
+    }
+}
+WebsitePreview.template = 'website.WebsitePreview';
+
+registry.category('actions').add('website_preview', WebsitePreview);
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
new file mode 100644
index 00000000000..89b84d2f969
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -0,0 +1,11 @@
+.o_website_preview {
+    position: relative;
+    height: 100%;
+
+    > iframe {
+        @include o-position-absolute(0, 0, 0, 0);
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+}
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
new file mode 100644
index 00000000000..e856f8453c9
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.WebsitePreview" owl="1">
+    <div class="o_website_preview">
+        <iframe t-att-src="initialUrl" class="o_iframe"/>
+    </div>
+</t>
+</templates>
diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index 4fd02f41ccd..8610a1374fa 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -138,7 +138,7 @@ var Dashboard = AbstractAction.extend({
     on_go_to_website: function (ev) {
         ev.preventDefault();
         var website = _.findWhere(this.websites, {selected: true});
-        window.location.href = `/website/force/${website.id}`;
+        window.location.replace(`/web#action=website.website_preview&website_id=${website.id}`);
     },
 
     on_save_ga_client_id: function(ga_client_id, ga_analytics_key) {
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
new file mode 100644
index 00000000000..bc347e4a005
--- /dev/null
+++ b/addons/website/static/src/services/website_service.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+
+export const websiteService = {
+    dependencies: ['orm'],
+    async start(env, { orm }) {
+        let websites = [];
+        return {
+            get websites() {
+                return websites;
+            },
+            async fetchWebsites() {
+                const allWebsites = await orm.searchRead('website', []);
+                websites = [...allWebsites];
+            },
+        };
+    },
+};
+
+registry.category('services').add('website', websiteService);
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 672f4321233..689b5d1dde8 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -400,6 +400,11 @@
             <field name="tag">backend_dashboard</field>
         </record>
 
+        <record id="website_preview" model="ir.actions.client">
+            <field name="name">Website Preview</field>
+            <field name="tag">website_preview</field>
+        </record>
+
         <record id="ir_actions_server_website_dashboard" model="ir.actions.server">
             <field name="name">Website: Dashboard</field>
             <field name="model_id" ref="website.model_website"/>
@@ -525,8 +530,8 @@
             groups="base.group_user"
             web_icon="website,static/description/icon.svg"/>
 
-        <menuitem id="menu_dashboard"
-            name="Dashboard"
+        <menuitem id="menu_site"
+            name="Site"
             sequence="1"
             parent="website.menu_website_configuration"/>
 
@@ -535,10 +540,11 @@
             sequence="99"
             parent="website.menu_website_configuration"/>
 
-        <!-- Force empty action, to ease upgrade -->
-        <record id="menu_dashboard" model="ir.ui.menu">
-            <field name="action" eval="False"/>
-        </record>
+        <menuitem id="menu_website_preview"
+            parent="menu_site"
+            sequence="10"
+            name="Go to Website"
+            action="website.website_preview"/>
 
         <menuitem id="menu_website_pages_list"
             parent="menu_site"