[IMP] website: hide edit button when a page is not editable

This commit hides the Edit button when visiting a page that is not
editable (e.g. sitemap.xml, a link to an image, etc).

See merge commit for more information.

task-2687506

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

@@ -192,17 +192,22 @@ export class WebsitePreview extends Component {
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
         this.websiteService.contentWindow = this.iframe.el.contentWindow;
+
+        // This is needed for the registerThemeHomepageTour tours
+        const { editable, viewXmlid } = this.websiteService.currentWebsite.metadata;
+        this.container.el.dataset.viewXmlid = viewXmlid;
+        if (!editable) {
+            this.iframefallback.el.classList.add('d-none');
+        }
+
         this.iframe.el.contentWindow.addEventListener('PUBLIC-ROOT-READY', (event) => {
             this.iframe.el.setAttribute('is-ready', 'true');
-            if (!this.websiteContext.edition) {
+            if (!this.websiteContext.edition && editable) {
                 this.addWelcomeMessage();
             }
             this.websiteService.websiteRootInstance = event.detail.rootInstance;
         });
 
-        // This is needed for the registerThemeHomepageTour tours
-        this.container.el.dataset.viewXmlid = this.iframe.el.contentDocument.documentElement.dataset.viewXmlid;
-
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
@@ -238,8 +243,11 @@ export class WebsitePreview extends Component {
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
         // Chrome Windows/Linux).
-        if (!this.websiteContext.edition) {
+        // If the iframe is currently displaying an XML file, the body does not
+        // exist, so we do not replace the iframefallback content.
+        if (!this.websiteContext.edition && this.iframe.el.contentDocument.body) {
             this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
+            this.iframefallback.el.classList.remove('d-none');
             $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
         }
     }

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

@@ -121,7 +121,7 @@ patch(NavBar.prototype, 'website_navbar', {
     },
 
     canShowAceEditor() {
-        return this.websiteService.pageDocument && this.websiteService.pageDocument.documentElement.dataset.viewXmlid
+        return this.websiteService.currentWebsite && this.websiteService.currentWebsite.metadata.viewXmlid
             && !this.websiteContext.showNewContentModal && !this.websiteContext.edition;
     },
 });

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

@@ -88,17 +88,28 @@ export const websiteService = {
                 if (!document) {
                     return;
                 }
-                const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable } = document.documentElement.dataset;
+                // Not all files have a dataset. (e.g. XML)
-                currentMetadata = {
+                if (!document.documentElement.dataset) {
-                    path: document.location.href,
+                    currentMetadata = {};
-                    mainObject: unslugHtmlDataObject(mainObject),
+                } else {
-                    seoObject: unslugHtmlDataObject(seoObject),
+                    const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable, viewXmlid } = document.documentElement.dataset;
-                    isPublished: isPublished === 'True',
+                    currentMetadata = {
-                    canPublish: canPublish === 'True',
+                        path: document.location.href,
-                    editableInBackend: editableInBackend === 'True',
+                        mainObject: unslugHtmlDataObject(mainObject),
-                    title: document.title,
+                        seoObject: unslugHtmlDataObject(seoObject),
-                    translatable: !!translatable,
+                        isPublished: isPublished === 'True',
-                };
+                        canPublish: canPublish === 'True',
+                        editableInBackend: editableInBackend === 'True',
+                        title: document.title,
+                        translatable: !!translatable,
+                        // TODO: Find a better way to figure out if
+                        // a page is editable or not. For now, we use
+                        // the editable selector because it's the common
+                        // denominator of editable pages.
+                        editable: !!document.getElementById('wrapwrap'),
+                        viewXmlid: viewXmlid,
+                    };
+                }
                 websiteSystrayRegistry.trigger('CONTENT-UPDATED');
             },
             get pageDocument() {

addons/website/static/src/systray_items/edit_website.js

@@ -59,6 +59,7 @@ EditWebsiteSystray.template = "website.EditWebsiteSystray";
 
 export const systrayItem = {
     Component: EditWebsiteSystray,
+    isDisplayed: (env) => env.services.website.currentWebsite.metadata.editable,
 };
 
 registry.category("website_systray").add("EditWebsite", systrayItem, { sequence: 8 });