Version control option

Author: bso-odoo

addons/html_builder/static/src/core/core_plugins.js

@@ -21,6 +21,7 @@ import { ReplacePlugin } from "./replace_plugin";
 import { SavePlugin } from "./save_plugin";
 import { SaveSnippetPlugin } from "./save_snippet_plugin";
 import { SetupEditorPlugin } from "./setup_editor_plugin";
+import { VersionControlPlugin } from "./version_control_plugin";
 import { VisibilityPlugin } from "./visibility_plugin";
 
 export const CORE_PLUGINS = [
@@ -48,4 +49,5 @@ export const CORE_PLUGINS = [
     CachedModelPlugin,
     CoreBuilderActionPlugin,
     CustomizeTabPlugin,
+    VersionControlPlugin,
 ];

addons/html_builder/static/src/core/version_control_plugin.js

@@ -0,0 +1,39 @@
+import { Plugin } from "@html_editor/plugin";
+
+export class VersionControlPlugin extends Plugin {
+    static id = "versionControl";
+    static dependencies = ["builder-options"];
+    accessPerOutdatedEl = new WeakMap();
+    static shared = ["hasAccessToOutdatedEl", "giveAccessToOutdatedEl", "replaceWithNewVersion"];
+
+    hasAccessToOutdatedEl(el) {
+        if (this.accessPerOutdatedEl.has(el)) {
+            return this.accessPerOutdatedEl.get(el);
+        }
+        const snippetKey = el.dataset.snippet;
+        const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey);
+        let isUpToDate = true;
+        if (snippet) {
+            const {
+                vcss: originalVcss,
+                vxml: originalVxml,
+                vjs: originalVjs,
+            } = snippet.content.dataset;
+            const { vcss: elVcss, vxml: elVxml, vjs: elVjs } = el.dataset;
+            isUpToDate =
+                originalVcss === elVcss && originalVxml === elVxml && originalVjs === elVjs;
+        }
+        this.accessPerOutdatedEl.set(el, isUpToDate);
+        return isUpToDate;
+    }
+    giveAccessToOutdatedEl(el) {
+        this.accessPerOutdatedEl.set(el, true);
+    }
+    replaceWithNewVersion(el) {
+        const snippetKey = el.dataset.snippet;
+        const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey);
+        const cloneEl = snippet.content.cloneNode(true);
+        el.replaceWith(cloneEl);
+        this.dependencies["builder-options"].updateContainers(cloneEl);
+    }
+}

addons/html_builder/static/src/sidebar/option_container.js

@@ -2,6 +2,7 @@ import { BorderConfigurator } from "@html_builder/plugins/border_configurator_op
 import { ShadowOption } from "@html_builder/plugins/shadow_option";
 import { getSnippetName, useOptionsSubEnv } from "@html_builder/utils/utils";
 import { useService } from "@web/core/utils/hooks";
+import { useState } from "@odoo/owl";
 import { useOperation } from "../core/operation_plugin";
 import {
     BaseOptionComponent,
@@ -37,6 +38,11 @@ export class OptionsContainer extends BaseOptionComponent {
         useVisibilityObserver("content", useApplyVisibility("root"));
 
         this.callOperation = useOperation();
+        this.state = useState({
+            isUpToDate: this.env.editor.shared.versionControl.hasAccessToOutdatedEl(
+                this.props.editingElement
+            ),
+        });
     }
 
     get title() {
@@ -79,4 +85,15 @@ export class OptionsContainer extends BaseOptionComponent {
             });
         });
     }
+
+    // Version control
+    replaceElementWithNewVersion() {
+        this.callOperation(() => {
+            this.env.editor.shared.versionControl.replaceWithNewVersion(this.props.editingElement);
+        });
+    }
+    accessOutdated() {
+        this.env.editor.shared.versionControl.giveAccessToOutdatedEl(this.props.editingElement);
+        this.state.isUpToDate = true;
+    }
 }

addons/html_builder/static/src/sidebar/option_container.xml

@@ -39,14 +39,25 @@
                 </t>
             </div>
         </div>
-        <div class="we-bg-options-container pb-3" t-ref="content">
-            <t t-foreach="props.options" t-as="option" t-key="option.id">
-                <BuilderContext applyTo="option.applyTo">
-                    <t t-if="option.OptionComponent" t-component="option.OptionComponent" t-props="option.props || {}"></t>
-                    <t t-else="" t-call="{{option.template}}"/>
-                </BuilderContext>
-            </t>
-        </div>
+	    <t t-if="state.isUpToDate">
+            <div class="we-bg-options-container pb-3" t-ref="content">
+                <t t-foreach="props.options" t-as="option" t-key="option.id">
+                    <BuilderContext applyTo="option.applyTo">
+                        <t t-if="option.OptionComponent" t-component="option.OptionComponent" t-props="option.props || {}"></t>
+                        <t t-else="" t-call="{{option.template}}"/>
+                    </BuilderContext>
+                </t>
+            </div>
+        </t>
+        <t t-else="">
+            <div class="o_we_version_control alert alert-info d-flex flex-column p-3 pt-4 align-items-center text-center text-white">
+                <div>This block is outdated.</div>
+                <div>You might not be able to customize it anymore.</div>
+                <button type="button" class="btn o_we_bg_brand_primary py-2 my-4 border-0" t-on-click="() => this.replaceElementWithNewVersion()">REPLACE BY NEW VERSION</button>
+                <div>You can still access the block options but it might be ineffective.</div>
+                <button type="button" class="btn o_we_bg_brand_primary py-2 my-4 border-0" t-on-click="() => this.accessOutdated()">ACCESS OPTIONS ANYWAY</button>
+            </div>
+        </t>        
     </div>
 </t>
 

addons/html_builder/static/tests/options/option_container.test.js

@@ -0,0 +1,31 @@
+import { expect, test } from "@odoo/hoot";
+import { defineWebsiteModels, setupWebsiteBuilder } from "../website_helpers";
+import { contains } from "@web/../tests/web_test_helpers";
+
+defineWebsiteModels();
+
+const simpleTitleHtml = `
+    <section class="s_title" data-snippet="s_title" data-name="Title">
+        <h1>Title</h1>
+    </section>`;
+
+test("version control: bypass outdated", async () => {
+    await setupWebsiteBuilder(simpleTitleHtml, { versionControl: true });
+    await contains(":iframe .s_title").click();
+    expect(".o_we_version_control").toHaveCount(1);
+    expect(".we-bg-options-container:contains('Visibility'").toHaveCount(0);
+    await contains(".o_we_version_control button:contains('ACCESS')").click();
+    expect(".o_we_version_control").toHaveCount(0);
+    expect(".we-bg-options-container:contains('Visibility'").toHaveCount(1);
+});
+
+test("version control: replace outdated", async () => {
+    await setupWebsiteBuilder(simpleTitleHtml, { versionControl: true });
+    await contains(":iframe .s_title").click();
+    expect(".o_we_version_control").toHaveCount(1);
+    expect(".we-bg-options-container:contains('Visibility'").toHaveCount(0);
+    await contains(".o_we_version_control button:contains('REPLACE')").click();
+    expect(".o_we_version_control").toHaveCount(0);
+    expect(".we-bg-options-container:contains('Visibility'").toHaveCount(1);
+    expect(":iframe .s_title:contains('Your Site Title')").toHaveCount(1);
+});

addons/html_builder/static/tests/website_helpers.js

@@ -1,5 +1,6 @@
 import { Builder } from "@html_builder/builder";
 import { SetupEditorPlugin } from "@html_builder/core/setup_editor_plugin";
+import { VersionControlPlugin } from "@html_builder/core/version_control_plugin";
 import { EditInteractionPlugin } from "@html_builder/website_builder/plugins/edit_interaction_plugin";
 import { WebsiteSessionPlugin } from "@html_builder/website_builder/plugins/website_session_plugin";
 import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action";
@@ -65,6 +66,7 @@ export async function setupWebsiteBuilder(
         loadIframeBundles = false,
         loadAssetsFrontendJS = false,
         hasToCreateWebsite = true,
+        versionControl = false,
         styleContent,
         headerContent = "",
         beforeWrapwrapContent = "",
@@ -181,6 +183,14 @@ export async function setupWebsiteBuilder(
         });
     }
 
+    if (!versionControl) {
+        patchWithCleanup(VersionControlPlugin.prototype, {
+            hasAccessToOutdatedEl() {
+                return true;
+            },
+        });
+    }
+
     const iframe = queryOne("iframe[data-src^='/website/force/1']");
     if (isBrowserFirefox()) {
         await originalIframeLoaded;