[IMP] website: remove navbar xml patch

This commit adds the PagePropertiesDialogWrapper and
AceEditorComponentAdapter as children of the client action, instead of
the NavBar. Both of the components are displayed conditionally based on
the websiteContext. It allows us to remove the navbar xml patch.

With the PagePropertiesDialogWrapper rendered only when needed, it can
open directly the appropriate dialog in the onRendered hook, so that we
can avoid passing the widget to the parent that would later open it.

Follows the merge of the "website in backend" task at [1].

[1]: 31cc10b

task-2687506

Part-of: #81485

addons/website/__manifest__.py

@@ -258,7 +258,6 @@
             'website/static/src/components/dialog/*.xml',
             'website/static/src/components/editor/editor.xml',
             'website/static/src/components/fields/fields.xml',
-            'website/static/src/components/navbar/navbar.xml',
             'website/static/src/components/translator/*.xml',
             'website/static/src/systray_items/*.xml',
             'website/static/src/xml/website.backend.xml',

addons/website/static/src/client_actions/website_preview/website_preview.js

@@ -3,6 +3,8 @@
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 import core from 'web.core';
+import { AceEditorAdapterComponent } from '../../components/ace_editor/ace_editor';
+import { PagePropertiesDialogWrapper } from '../../components/dialog/page_properties';
 import { WebsiteEditorComponent } from '../../components/editor/editor';
 import { WebsiteTranslator } from '../../components/translator/translator';
 import {OptimizeSEODialog} from '@website/components/dialog/seo';
@@ -256,6 +258,8 @@ WebsitePreview.components = {
     WebsiteEditorComponent,
     BlockIframe,
     WebsiteTranslator,
+    AceEditorAdapterComponent,
+    PagePropertiesDialogWrapper,
 };
 
 registry.category('actions').add('website_preview', WebsitePreview);

addons/website/static/src/client_actions/website_preview/website_preview.xml

@@ -32,6 +32,8 @@
         <WebsiteTranslator t-if="websiteContext.translation"
             reloadIframe.bind="this.reloadIframe"
             removeWelcomeMessage.bind="this.removeWelcomeMessage"/>
+        <AceEditorAdapterComponent t-if="websiteContext.showAceEditor"/>
+        <PagePropertiesDialogWrapper t-if="websiteContext.showPageProperties"/>
     </div>
 </t>
 

addons/website/static/src/components/ace_editor/ace_editor.js

@@ -130,7 +130,7 @@ export class AceEditorAdapterComponent extends ComponentAdapter {
         return [
             this.website.pageDocument && this.website.pageDocument.documentElement.dataset.viewXmlid,
             {
-                toggleAceEditor: this.props.toggleAceEditor,
+                toggleAceEditor: () => this.website.context.showAceEditor = false,
                 defaultBundlesRestriction: [
                     'web.assets_frontend',
                     'web.assets_frontend_minimal',
@@ -142,5 +142,7 @@ export class AceEditorAdapterComponent extends ComponentAdapter {
             }
         ];
     }
-
 }
+AceEditorAdapterComponent.defaultProps = {
+    Component: WebsiteAceEditor,
+};

addons/website/static/src/components/dialog/page_properties.js

@@ -8,7 +8,7 @@ import {FormViewDialog} from 'web.view_dialogs';
 import {standaloneAdapter} from 'web.OwlCompatibility';
 import {qweb} from 'web.core';
 
-const {Component, onWillStart, useState, xml, useRef, markup, onWillRender} = owl;
+const {Component, onWillStart, useState, xml, useRef, markup, onRendered} = owl;
 
 export class PageDependencies extends Component {
     setup() {
@@ -173,32 +173,26 @@ export class PagePropertiesDialogWrapper extends Component {
             this.orm = useWowlService('orm');
         }
 
-        onWillRender(this.setDialogWidget);
+        onRendered(this.createDialog);
     }
 
     createDialog() {
         if (this.props.mode === 'clone') {
-            return {
-                component: DuplicatePageDialog,
-                open: () => this.dialogService.add(DuplicatePageDialog, {
-                    pageId: this.pageId,
-                    onClose: this.props.onClose,
-                }),
-            };
+            this.dialogService.add(DuplicatePageDialog, {
+                pageId: this.pageId,
+                onClose: this.props.onClose,
+            });
         } else if (this.props.mode === 'delete') {
-            return {
-                component: DeletePageDialog,
-                open: () => this.dialogService.add(DeletePageDialog, {
-                    pageId: this.pageId,
-                    onClose: this.props.onClose,
-                }),
-            };
+            this.dialogService.add(DeletePageDialog, {
+                pageId: this.pageId,
+                onClose: this.props.onClose,
+            });
         } else {
             const parent = standaloneAdapter({Component});
             const formViewDialog = new FormViewDialog(parent, this.dialogOptions);
             formViewDialog.buttons = [...formViewDialog.buttons, ...this.extraButtons];
-            formViewDialog.on('form_dialog_discarded', parent, this.setDialogWidget.bind(this));
-            return formViewDialog;
+            formViewDialog.on('form_dialog_discarded', parent, () => this.websiteService.context.showPageProperties = false);
+            formViewDialog.open();
         }
     }
 
@@ -250,14 +244,9 @@ export class PagePropertiesDialogWrapper extends Component {
             },
         }];
     }
-
-    setDialogWidget() {
-        this.props.setPagePropertiesDialog(this.createDialog());
-    }
 }
 PagePropertiesDialogWrapper.template = xml``;
 PagePropertiesDialogWrapper.props = {
-    setPagePropertiesDialog: Function,
     onClose: {
         type: Function,
         optional: true,

addons/website/static/src/components/navbar/navbar.js

@@ -6,8 +6,6 @@ import { registry } from "@web/core/registry";
 import { patch } from 'web.utils';
 import { EditMenuDialog } from '@website/components/dialog/edit_menu';
 import { OptimizeSEODialog } from '@website/components/dialog/seo';
-import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/ace_editor/ace_editor';
-import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
 
 const websiteSystrayRegistry = registry.category('website_systray');
 const { useState } = owl;
@@ -17,7 +15,6 @@ patch(NavBar.prototype, 'website_navbar', {
         this._super();
         this.websiteService = useService('website');
         this.websiteContext = useState(this.websiteService.context);
-        this.aceEditor = WebsiteAceEditor;
 
         // The navbar is rerendered with an event, as it can not naturally be
         // with props/state (the WebsitePreview client action and the navbar
@@ -30,13 +27,6 @@ patch(NavBar.prototype, 'website_navbar', {
 
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.render(true));
 
-        this.toggleAceEditor = (show) => {
-            this.websiteContext.showAceEditor = show;
-        };
-        this.setPagePropertiesDialog = (dialog) => {
-            this.pagePropertiesDialog = dialog;
-        };
-
         this.websiteEditingMenus = {
             'website.menu_edit_menu': {
                 Component: EditMenuDialog,
@@ -47,11 +37,11 @@ patch(NavBar.prototype, 'website_navbar', {
                 isDisplayed: () => this.websiteService.currentWebsite && !!this.websiteService.currentWebsite.metadata.mainObject,
             },
             'website.menu_ace_editor': {
-                openWidget: () => this.toggleAceEditor(true),
+                openWidget: () => this.websiteContext.showAceEditor = true,
                 isDisplayed: () => this.canShowAceEditor(),
             },
             'website.menu_page_properties': {
-                openWidget: () => this.pagePropertiesDialog.open(),
+                openWidget: () => this.websiteContext.showPageProperties = true,
                 isDisplayed: () => this.canShowPageProperties(),
             },
         };
@@ -125,5 +115,3 @@ patch(NavBar.prototype, 'website_navbar', {
             && !this.websiteContext.showNewContentModal && !this.websiteContext.edition;
     },
 });
-
-NavBar.components = {...NavBar.components, AceEditorAdapterComponent, PagePropertiesDialogWrapper};

addons/website/static/src/js/website_page_list.js

@@ -32,13 +32,6 @@ const WebsitePageListController = ListController.extend({
             this.$buttons.appendTo($node);
         }
     },
-    /**
-     * Used to set the new dialog (created by PagePropertiesDialogWrapper for page
-     * record).
-     */
-    setPageManagerDialog(dialog) {
-        this.pageManagerDialog = dialog;
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -56,15 +49,12 @@ const WebsitePageListController = ListController.extend({
                 break;
             case 'action_manage_page':
                 await this._addDialog(record);
-                this.pageManagerDialog.open();
                 break;
             case 'action_clone_page':
                 await this._addDialog(record, 'clone');
-                this.pageManagerDialog.open();
                 break;
             case 'action_delete_page':
                 await this._addDialog(record, 'delete');
-                this.pageManagerDialog.open();
                 break;
             case 'action_edit_page':
                 this.do_action({
@@ -97,7 +87,6 @@ const WebsitePageListController = ListController.extend({
      */
     async _addDialog(record, mode = '') {
         this._pagePropertiesDialog = new ComponentWrapper(this, PagePropertiesDialogWrapper, {
-            setPagePropertiesDialog: this.setPageManagerDialog.bind(this),
             currentPage: record.data.id,
             onClose: this._onCloseDialog.bind(this),
             mode: mode,

addons/website/static/src/services/website_service.js

@@ -44,6 +44,7 @@ export const websiteService = {
             isPublicRootReady: false,
             snippetsLoaded: false,
             isMobile: false,
+            showPageProperties: false,
         });
         const bus = new EventBus();