[FIX] web_editor, *: restore custom snippets thumbnails

*: website

Since [1], the thumbnails of the saved snippets were not right anymore,
all fallbacking to the default image. This is because snippets thumbs
now use svg files instead of png and the snippet saving feature did not
allow it. This commit fixes that and makes the feature more robust.

- Allow to use any original thumbnail, and not only for website app.
- Remove useless defaut image, a fallback for when the feature is broken
  is useless.
- Identify snippets by key instead of by main class (possible since
  the new `data-snippet` attribute on snippets).

[1]: https://github.com/odoo/odoo/commit/b7fe2bdae2f45372c0d538767a226a413b806f3f

closes odoo/odoo#55896

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/models/ir_ui_view.py

@@ -289,10 +289,6 @@ class IrUiView(models.Model):
     # Snippet saving
     # --------------------------------------------------------------------------
 
-    @api.model
-    def _get_default_snippet_thumbnail(self, snippet_class=None):
-        return '/web_editor/static/src/img/snippets_thumbs/s_custom_snippet.png'
-
     @api.model
     def _get_snippet_addition_view_key(self, template_key, key):
         return '%s.%s' % (template_key, key)
@@ -302,7 +298,7 @@ class IrUiView(models.Model):
         return {}
 
     @api.model
-    def save_snippet(self, name, arch, template_key, snippet_class=None, thumbnail_url=None):
+    def save_snippet(self, name, arch, template_key, snippet_key, thumbnail_url):
         """
         Saves a new snippet arch so that it appears with the given name when
         using the given snippets template.
@@ -311,24 +307,20 @@ class IrUiView(models.Model):
         :param arch: the html structure of the snippet to save
         :param template_key: the key of the view regrouping all snippets in
             which the snippet to save is meant to appear
-        :param snippet_class: a className which is supposed to uniquely-identify
+        :param snippet_key: the key (without module part) to identify
             the snippet from which the snippet to save originates
         :param thumbnail_url: the url of the thumbnail to use when displaying
-            the snippet to save (default: see '_get_default_snippet_thumbnail')
+            the snippet to save
         """
-        if not thumbnail_url:
-            thumbnail_url = self._get_default_snippet_thumbnail(snippet_class)
-
         app_name = template_key.split('.')[0]
-        snippet_class = snippet_class or 's_custom_snippet'
-        key = '%s_%s' % (snippet_class, uuid.uuid4().hex)
-        snippet_key = '%s.%s' % (app_name, key)
+        snippet_key = '%s_%s' % (snippet_key, uuid.uuid4().hex)
+        full_snippet_key = '%s.%s' % (app_name, snippet_key)
 
         # html to xml to add '/' at the end of self closing tags like br, ...
         xml_arch = etree.tostring(html.fromstring(arch))
         new_snippet_view_values = {
             'name': name,
-            'key': snippet_key,
+            'key': full_snippet_key,
             'type': 'qweb',
             'arch': xml_arch,
         }
@@ -338,7 +330,7 @@ class IrUiView(models.Model):
         custom_section = self.search([('key', '=', template_key)])
         snippet_addition_view_values = {
             'name': name + ' Block',
-            'key': self._get_snippet_addition_view_key(template_key, key),
+            'key': self._get_snippet_addition_view_key(template_key, snippet_key),
             'inherit_id': custom_section.id,
             'type': 'qweb',
             'arch': """
@@ -350,7 +342,7 @@ class IrUiView(models.Model):
                         <t t-snippet="%s" t-thumbnail="%s"/>
                     </xpath>
                 </data>
-            """ % (template_key, snippet_key, thumbnail_url),
+            """ % (template_key, full_snippet_key, thumbnail_url),
         }
         snippet_addition_view_values.update(self._snippet_save_view_values_hook())
         self.create(snippet_addition_view_values)

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -828,6 +828,7 @@ var SnippetsMenu = Widget.extend({
         'snippet_removed': '_onSnippetRemoved',
         'snippet_cloned': '_onSnippetCloned',
         'snippet_option_visibility_update': '_onSnippetOptionVisibilityUpdate',
+        'snippet_thumbnail_url_request': '_onSnippetThumbnailURLRequest',
         'reload_snippet_dropzones': '_disableUndroppableSnippets',
         'request_save': '_onSaveRequest',
         'update_customize_elements': '_onUpdateCustomizeElements',
@@ -2307,6 +2308,14 @@ var SnippetsMenu = Widget.extend({
         }
         await this._updateInvisibleDOM(); // Re-render to update status
     },
+    /**
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onSnippetThumbnailURLRequest(ev) {
+        const $snippet = this.$snippets.has(`[data-snippet="${ev.data.key}"]`);
+        ev.data.onSuccess($snippet.length ? $snippet[0].dataset.oeThumbnail : '');
+    },
     /**
      * @private
      * @param {OdooEvent} ev

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4355,6 +4355,12 @@ registry.SnippetSave = SnippetOptionWidget.extend({
                         const snippetName = dialog.el.querySelector('.o_we_snippet_name_input').value;
                         const targetCopyEl = this.$target[0].cloneNode(true);
                         delete targetCopyEl.dataset.name;
+                        const snippetKey = this.$target[0].dataset.snippet;
+                        let thumbnailURL;
+                        this.trigger_up('snippet_thumbnail_url_request', {
+                            key: snippetKey,
+                            onSuccess: url => thumbnailURL = url,
+                        });
                         await this._rpc({
                             model: 'ir.ui.view',
                             method: 'save_snippet',
@@ -4362,7 +4368,8 @@ registry.SnippetSave = SnippetOptionWidget.extend({
                                 'name': snippetName,
                                 'arch': targetCopyEl.outerHTML,
                                 'template_key': this.options.snippets,
-                                'snippet_class': [...this.$target[0].classList].filter(x => /\bs_./g.test(x))[0],
+                                'snippet_key': snippetKey,
+                                'thumbnail_url': thumbnailURL,
                             },
                         });
                         this.trigger_up('reload_snippet_template');

addons/website/models/ir_ui_view.py

@@ -500,14 +500,6 @@ class View(models.Model):
     # Snippet saving
     # --------------------------------------------------------------------------
 
-    @api.model
-    def _get_default_snippet_thumbnail(self, snippet_class=None):
-        if snippet_class:
-            for path in website.__path__:
-                if os.path.isfile(path + '/static/src/img/snippets_thumbs/%s.png' % snippet_class):
-                    return '/website/static/src/img/snippets_thumbs/%s.png' % snippet_class
-        return super()._get_default_snippet_thumbnail()
-
     @api.model
     def _snippet_save_view_values_hook(self):
         res = super()._snippet_save_view_values_hook()