[IMP] website, web_editor, *: allows selection of a snippet from a modal

test_website, website_*

Enhance user snippet discovery by displaying actual previews instead of
simplified thumbnails.

With this commit, "meta-block" are added in the snippet menu. When a
"meta-block" is dropped into the page, a modal appears prompting all the
snippets available for that category.

"Meta-blocks" can also be clicked directly instead of dragged onto the
page. The snippet chosen in the "snippets dialog" will then be placed
below the visible snippet on the page. Note that clicked "meta-blocks"
do not get placed inside another snippet; for this, they must be
dragged. For example, a "Text" snippet within a "Table Of Content"
snippet. There is an exception for the "Popup" snippet, where if it is
open, a snippet added by clicking on a "meta-block" will be placed
correctly.

Once a snippet is dropped it can be replaced by another one by clicking
a new overlay "replace" button. Clicking it opens the same dialog as for
adding new snippets.

The link between a snippet and its meta-block (or snippet group) is made
using an XML attribute in the "snippets" template. The "meta-block" has
a "snippet-group" attribute with the group's name, and the linked
snippets have a "group" attribute with the same group name. Note that
snippets with a group attribute no longer need thumbnails.

Snippets like the "countdown" or "form", which can be dropped both as
sections and as inner content, are now defined twice in the "snippets"
template. These snippets appear both in the inner content section of the
sidebar and in the "snippets dialog".

This commit also adds two ways to display certain dynamic snippets in
the "snippets dialog":

- An image can be added, which will be placed inside the snippet's
section when displayed in the "snippets dialog". This image should be
added with the new "t-image-preview" attribute in the "snippets"
template (e.g., the "embed_code" snippet).

- It is also possible to include elements in a snippet's template that
should be present when the snippet is displayed in the
"snippets dialog". These elements have the class "s_dialog_preview".
When a snippet is added to the page from the "snippets dialog", elements
with the class "s_dialog_preview" are removed from the snippet.

task-3919405

closes odoo#166967

Related: odoo/enterprise#66150
Related: odoo/design-themes#817
Signed-off-by: Robin Lejeune (role) <[email protected]>

Author: bvr-odoo

addons/test_website/static/tests/tours/custom_snippets.js

@@ -10,8 +10,8 @@ import wTourUtils from "@website/js/tours/tour_utils";
  * -> customize banner (set text)
  * -> save banner as custom snippet
  * -> confirm save
- * -> ensure custom snippet is available
- * -> drag custom snippet
+ * -> ensure custom snippet is available in the "add snippet" dialog
+ * -> add custom snippet into the page
  * -> ensure block appears as banner
  * -> ensure block appears as custom banner
  * -> rename custom banner
@@ -29,80 +29,77 @@ wTourUtils.registerWebsitePreviewTour('test_custom_snippet', {
     ...wTourUtils.dragNDrop({
         id: 's_banner',
         name: 'Banner',
+        groupName: "Intro",
     }),
     {
-        content: "customize snippet",
+        content: "Customize snippet",
         trigger: ":iframe #wrapwrap .s_banner h1",
         run: "editor Test",
     },
     {
-        content: "save custom snippet",
+        content: "Save custom snippet",
         trigger: ".snippet-option-SnippetSave we-button",
         run: "click",
     },
     {
-        content: "confirm reload",
+        content: "Confirm reload",
         trigger: ".modal-dialog button:contains('Save and Reload')",
         run: "click",
     },
     {
-        content: "ensure custom snippet appeared",
-        trigger: "#oe_snippets.o_loaded .oe_snippet[name='Custom Banner']",
-        run: function () {
-            document.querySelector(
-                "#oe_snippets .oe_snippet[name='Custom Banner'] .o_rename_btn"
-            ).style.display = "block";
-            // hover is needed for rename button to appear
-        },
+        content: "Click on the Custom category block",
+        trigger: "#oe_snippets .oe_snippet[name='Custom'].o_we_draggable .oe_snippet_thumbnail",
+        run: "click",
     },
     {
-        trigger: ".oe_snippet[name='Custom Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+        content: "Ensure custom snippet preview appeared in the dialog",
+        trigger: ":iframe .o_snippet_preview_wrap[data-snippet-id='s_banner'] section[data-name='Custom Banner']",
     },
     {
-        content: "rename custom snippet",
-        trigger: ".oe_snippet[name='Custom Banner'] we-button.o_rename_btn",
+        content: "Rename custom snippet",
+        trigger: ":iframe .o_custom_snippet_wrap > .o_custom_snippet_edit > button",
         run: "click",
     },
     {
-        content: "set name",
-        trigger: ".oe_snippet[name='Custom Banner'] input",
+        content: "Set name",
+        trigger: ".o_rename_custom_snippet_dialog input[id='customSnippetName']",
         run: "edit Bruce Banner",
     },
     {
-        content: "confirm rename",
-        trigger: ".oe_snippet[name='Custom Banner'] we-button.o_we_confirm_btn",
+        content: "Confirm rename",
+        trigger: ".o_rename_custom_snippet_dialog footer .btn-primary",
         run: "click",
     },
-    ...wTourUtils.dragNDrop({ name: "Bruce Banner" }),
     {
-        content: "ensure banner section exists",
+        content: "Click on the 'Bruce Banner' snippet",
+        trigger: ":iframe .o_snippet_preview_wrap[data-snippet-id='s_banner']:has(section[data-name='Bruce Banner'])",
+        run: "click",
+    },
+    {
+        content: "Ensure banner section exists",
         trigger: ":iframe #wrap section[data-name='Banner']",
     },
     {
-        content: "ensure custom banner section exists",
+        content: "Ensure custom banner section exists",
         trigger: ":iframe #wrap section[data-name='Bruce Banner']",
-        run: function () {
-            document.querySelector(
-                "#oe_snippets .oe_snippet[name='Bruce Banner'] .o_delete_btn"
-            ).style.display = "block";
-            // hover is needed for delete button to appear
-        },
     },
     {
-        trigger: ".oe_snippet[name='Bruce Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+        content: "Click on the Custom category block",
+        trigger: "#oe_snippets .oe_snippet[name='Custom'].o_we_draggable .oe_snippet_thumbnail",
+        run: "click",
     },
     {
-        content: "delete custom snippet",
-        trigger: ".oe_snippet[name='Bruce Banner'] we-button.o_delete_btn",
+        content: "Delete custom snippet",
+        trigger: ":iframe .o_custom_snippet_wrap > .o_custom_snippet_edit > button + button",
         run: "click",
     },
     {
-        content: "confirm delete",
+        content: "Confirm delete",
         trigger: ".modal-dialog button:contains('Yes')",
         run: "click",
     },
     {
-        content: "ensure custom snippet disappeared",
-        trigger: "#oe_snippets:not(:has(.oe_snippet[name='Bruce Banner']))",
+        content: "Ensure custom snippet disappeared",
+        trigger: ":iframe .o_add_snippets_preview:not(:has(section[data-name='Bruce Banner']))",
     },
 ]);

addons/test_website/static/tests/tours/image_link.js

@@ -25,6 +25,7 @@ wTourUtils.registerWebsitePreviewTour('test_image_link', {
     ...wTourUtils.dragNDrop({
         id: 's_text_image',
         name: 'Text - Image',
+        groupName: "Content",
     }),
     ...selectImageSteps,
     {

addons/test_website/static/tests/tours/image_upload_progress.js

@@ -38,25 +38,27 @@ const patchMediaDialog = () => patch(FileSelectorControlPanel.prototype, {
 
 let unpatchMediaDialog = null;
 
-const setupSteps = [{
-    content: "reload to load patch",
-    trigger: ".o_website_preview",
-    run: () => {
-        unpatchMediaDialog = patchMediaDialog();
-    },
-}, {
-    content: "drop a snippet",
-    trigger: "#oe_snippets .oe_snippet[name='Text - Image'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-    run: "drag_and_drop :iframe #wrap",
-}, 
-{
-    trigger: "body.editor_has_snippets",
-},
-{
-    content: "drop a snippet",
-    trigger: "#oe_snippets .oe_snippet[name='Image Gallery'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-    run: "drag_and_drop :iframe #wrap",
-}];
+const setupSteps = function () {
+    return [
+        {
+            content: "reload to load patch",
+            trigger: ".o_website_preview",
+            run: () => {
+                unpatchMediaDialog = patchMediaDialog();
+            },
+        },
+        ...wTourUtils.dragNDrop({
+            id: "s_text_image",
+            name: "Text - Image",
+            groupName: "Content",
+        }),
+        ...wTourUtils.dragNDrop({
+            id: "s_image_gallery",
+            name: "Image Gallery",
+            groupName: "Images",
+        })
+    ];
+};
 
 const formatErrorMsg = "format is not supported. Try with: .gif, .jpe, .jpeg, .jpg, .png, .svg, .webp";
 
@@ -65,7 +67,7 @@ wTourUtils.registerWebsitePreviewTour('test_image_upload_progress', {
     test: true,
     edition: true,
 }, () => [
-    ...setupSteps,
+    ...setupSteps(),
     // 1. Check multi image upload
     {
         content: "click on dropped snippet",
@@ -207,7 +209,7 @@ wTourUtils.registerWebsitePreviewTour('test_image_upload_progress_unsplash', {
     test: true,
     edition: true,
 }, () => [
-    ...setupSteps,
+    ...setupSteps(),
     // 1. Check multi image upload
     {
         content: "click on dropped snippet",

addons/test_website/static/tests/tours/replace_media.js

@@ -35,7 +35,8 @@ wTourUtils.registerWebsitePreviewTour('test_replace_media', {
     },
     ...wTourUtils.dragNDrop({
         name: 'Title - Image',
-        id: 's_picture'
+        id: 's_picture',
+        groupName: "Images",
     }),
     {
         content: "select image",

addons/test_website/static/tests/tours/reset_views.js

@@ -21,11 +21,16 @@ wTourUtils.registerWebsitePreviewTour(
     },
     () => [
         {
-            content: "drop a snippet",
-            trigger: ".oe_snippet .oe_snippet_thumbnail[data-snippet=s_cover]",
+            content: "Drag the Intro snippet group and drop it in #oe_structure_test_website_page.",
+            trigger: '#oe_snippets .oe_snippet[name="Intro"] .oe_snippet_thumbnail:not(.o_we_already_dragging)',
             // id starting by 'oe_structure..' will actually create an inherited view
             run: "drag_and_drop :iframe #oe_structure_test_website_page",
         },
+        {
+            content: "Click on the s_cover snippet.",
+            trigger: ':iframe .o_snippet_preview_wrap[data-snippet-id="s_cover"]',
+            run: "click",
+        },
         ...wTourUtils.clickOnSave(),
         // 2. Edit that COW'd view in the HTML editor to break it.
         {

addons/test_website/static/tests/tours/restricted_editor.js

@@ -57,7 +57,7 @@ wTourUtils.registerWebsitePreviewTour('test_restricted_editor_only', {
     ...wTourUtils.clickOnEditAndWaitEditMode(),
     {
         content: "Check icons cannot be dragged",
-        trigger: "#oe_snippets .oe_snippet[name='Banner'].o_disabled",
+        trigger: "#oe_snippets .oe_snippet[name='Intro'].o_disabled",
     },
     ...wTourUtils.clickOnSave(),
     ...switchTo('fr'),
@@ -70,7 +70,7 @@ wTourUtils.registerWebsitePreviewTour('test_restricted_editor_only', {
     ...wTourUtils.clickOnEditAndWaitEditMode(),
     {
         content: "Check icons cannot be dragged",
-        trigger: "#oe_snippets .oe_snippet[name='Banner'].o_disabled",
+        trigger: "#oe_snippets .oe_snippet[name='Intro'].o_disabled",
     },
     ...switchTo('fr'),
     ...translate,
@@ -86,7 +86,7 @@ wTourUtils.registerWebsitePreviewTour('test_restricted_editor_test_admin', {
     ...wTourUtils.clickOnEditAndWaitEditMode(),
     {
         content: "Check icons cannot be dragged",
-        trigger: "#oe_snippets .oe_snippet[name='Banner'].o_disabled",
+        trigger: "#oe_snippets .oe_snippet[name='Intro'].o_disabled",
     },
     ...wTourUtils.clickOnSave(),
     ...switchTo('fr'),
@@ -99,13 +99,18 @@ wTourUtils.registerWebsitePreviewTour('test_restricted_editor_test_admin', {
     ...wTourUtils.clickOnEditAndWaitEditMode(),
     {
         content: "Check icons can be dragged",
-        trigger: "#oe_snippets .oe_snippet[name='Banner']:not(.o_disabled)",
+        trigger: "#oe_snippets .oe_snippet[name='Intro']:not(.o_disabled)",
     },
     {
-        content: "Drag the banner block",
-        trigger: `#oe_snippets .oe_snippet[name="Banner"].o_we_draggable .oe_snippet_thumbnail:not(.o_we_already_dragging)`,
+        content: "Drag the Intro snippet group",
+        trigger: '#oe_snippets .oe_snippet[name="Intro"] .oe_snippet_thumbnail:not(.o_we_already_dragging)',
         run: "drag_and_drop :iframe [data-oe-expression='record.website_description']",
     },
+    {
+        content: "Click on the s_banner snippet in the dialog",
+        trigger: ':iframe .o_snippet_preview_wrap[data-snippet-id="s_banner"]',
+        run: "click",
+    },
     {
         content: "Change name",
         trigger: ":iframe [data-oe-expression='record.name']",

addons/web_editor/__manifest__.py

@@ -193,12 +193,14 @@
             # widgets & plugins
             'web_editor/static/src/js/wysiwyg/widgets/**/*',
             'web_editor/static/src/js/editor/toolbar.js',
+            'web_editor/static/src/js/editor/add_snippet_dialog.js',
 
             # Launcher
             'web_editor/static/src/js/wysiwyg/wysiwyg_jquery_extention.js',
             'web_editor/static/src/js/wysiwyg/wysiwyg.js',
             'web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js',
 
+            'web_editor/static/src/xml/add_snippet_dialog.xml',
             'web_editor/static/src/xml/editor.xml',
             'web_editor/static/src/xml/grid_layout.xml',
             'web_editor/static/src/xml/snippets.xml',

addons/web_editor/models/ir_qweb_fields.py

@@ -79,16 +79,22 @@ def _compile_directive_snippet(self, el, compile_context, indent):
         view = self.env['ir.ui.view']._get(key).sudo()
         name = el.attrib.pop('string', view.name)
         thumbnail = el.attrib.pop('t-thumbnail', "oe-thumbnail")
+        image_preview = el.attrib.pop('t-image-preview', None)
         # Forbid sanitize contains the specific reason:
         # - "true": always forbid
         # - "form": forbid if forms are sanitized
         forbid_sanitize = el.attrib.pop('t-forbid-sanitize', None)
-        div = '<div name="%s" data-oe-type="snippet" data-oe-thumbnail="%s" data-oe-snippet-id="%s" data-oe-keywords="%s" %s>' % (
+        snippet_group = el.attrib.pop('snippet-group', None)
+        group = el.attrib.pop('group', None)
+        div = '<div name="%s" data-oe-type="snippet" data-o-image-preview="%s" data-oe-thumbnail="%s" data-oe-snippet-id="%s" data-oe-keywords="%s" %s %s %s>' % (
             escape(pycompat.to_text(name)),
+            escape(pycompat.to_text(image_preview)),
             escape(pycompat.to_text(thumbnail)),
             escape(pycompat.to_text(view.id)),
             escape(pycompat.to_text(el.findtext('keywords'))),
             f'data-oe-forbid-sanitize="{forbid_sanitize}"' if forbid_sanitize else '',
+            f'data-o-snippet-group="{snippet_group}"' if snippet_group else '',
+            f'data-o-group="{group}"' if group else '',
         )
         self._append_text(div, compile_context)
         code = self._compile_node(el, compile_context, indent)
@@ -104,15 +110,19 @@ def _compile_directive_snippet_call(self, el, compile_context, indent):
     def _compile_directive_install(self, el, compile_context, indent):
         key = el.attrib.pop('t-install')
         thumbnail = el.attrib.pop('t-thumbnail', 'oe-thumbnail')
+        image_preview = el.attrib.pop('t-image-preview', None)
+        group = el.attrib.pop('group', None)
         if self.env.user.has_group('base.group_system'):
             module = self.env['ir.module.module'].search([('name', '=', key)])
             if not module or module.state == 'installed':
                 return []
             name = el.attrib.get('string') or 'Snippet'
-            div = '<div name="%s" data-oe-type="snippet" data-module-id="%s" data-oe-thumbnail="%s"><section/></div>' % (
+            div = '<div name="%s" data-oe-type="snippet" data-module-id="%s" data-o-image-preview="%s" data-oe-thumbnail="%s" %s><section/></div>' % (
                 escape(pycompat.to_text(name)),
                 module.id,
-                escape(pycompat.to_text(thumbnail))
+                escape(pycompat.to_text(image_preview)),
+                escape(pycompat.to_text(thumbnail)),
+                f'data-o-group="{group}"' if group else '',
             )
             self._append_text(div, compile_context)
         return []