[FIX] web_editor: unstuck the UI after an image crop is denied

Steps to produce:
- Drop 'Text - Image' block
- Replace image by illustration
- Try to crop image
- A notification is displayed
- Try saving

The issue is ImageCrop is still not opened and we are trying to wait
for image_cropper_destroyed to trigger, so here we check if ImageCrop
is not opened.

task-4246644

closes odoo#188577

Signed-off-by: Quentin Smetz (qsm) <[email protected]>
Co-authored-by: Mohammed Shekha <[email protected]>

Author: 2 people

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

@@ -6602,22 +6602,27 @@ registry.ImageTools = ImageHandlerOption.extend({
         const document = this.$el[0].ownerDocument;
         const imageCropWrapperElement = document.createElement('div');
         document.body.append(imageCropWrapperElement);
-        const imageCropWrapper = await attachComponent(this, imageCropWrapperElement, ImageCrop, {
-            rpc: this.rpc,
-            activeOnStart: true,
-            media: img,
-            mimetype: this._getImageMimetype(img),
-        });
 
-        await new Promise(resolve => {
-            this.$target.one('image_cropper_destroyed', async () => {
+        // Attach the event listener before attaching the component
+        const cropperPromise = new Promise(resolve => {
+            this.$target.one("image_cropper_destroyed", async () => {
                 if (isGif(this._getImageMimetype(img))) {
-                    img.dataset[img.dataset.shape ? 'originalMimetype' : 'mimetype'] = 'image/png';
+                    img.dataset[img.dataset.shape ? "originalMimetype" : "mimetype"] = "image/png";
                 }
                 await this._reapplyCurrentShape();
                 resolve();
             });
         });
+
+        const imageCropWrapper = await attachComponent(this, imageCropWrapperElement, ImageCrop, {
+            rpc: this.rpc,
+            activeOnStart: true,
+            media: img,
+            mimetype: this._getImageMimetype(img),
+        });
+
+        await cropperPromise;
+
         imageCropWrapperElement.remove();
         imageCropWrapper.destroy();
         this.trigger_up('enable_loading_effect');

addons/website/static/tests/tours/media_dialog.js

@@ -74,6 +74,24 @@ wTourUtils.registerWebsitePreviewTour("website_media_dialog_external_library", {
             }
         },
     },
+    {
+        content: "Click on the first illustration image",
+        trigger: ".o_select_media_dialog .o_we_attachment_highlight",
+    },
+    {
+        content: "Select the image",
+        trigger: "iframe .s_text_image img",
+    },
+    {
+        content: "Try to crop the image",
+        trigger: "#oe_snippets .o_we_customize_panel .o_we_user_value_widget[data-crop='true']",
+    },
+    {
+        content: "Observe the crop is denied for illustration image",
+        trigger: ".o_notification_manager .o_notification",
+        run: () => {}, // it's a check
+    },
+    ...wTourUtils.clickOnSave(),
 ]);
 
 wTourUtils.registerWebsitePreviewTour('website_media_dialog_icons', {