From 954b2d167300f447db763e5b85f65fe4d984a82a Mon Sep 17 00:00:00 2001
From: Rodolpho Lima <rcdl@odoo.com>
Date: Fri, 18 Aug 2023 13:01:17 +0000
Subject: [PATCH] [FIX] web_editor: notification when image can't be cropped

After convertion of the ImageCrop widget to an Owl component [1], the call
to `this.displayNotification` no longer applies. In fact, it produces a
traceback when trying to crop an image that cannot be cropped
(base64-encoded image not yet converted to an attachment, for example).

This commit replaces such call for the more suitable notification
service's `add` method.

task-3471481

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

closes odoo/odoo#132726

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/image_crop.js  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
index bb84c830d3e..8458471fdbf 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
@@ -9,8 +9,9 @@ import {
     onMounted,
     onWillDestroy,
     onWillUpdateProps,
+    markup,
 } from "@odoo/owl";
-import { Markup } from '@web/legacy/js/core/utils';
+import { useService } from "@web/core/utils/hooks";
 
 export class ImageCrop extends Component {
     static template = 'web_editor.ImageCrop';
@@ -46,6 +47,7 @@ export class ImageCrop extends Component {
         this.mountedPromise = new Promise((resolve) => {
             this.mountedResolve = resolve;
         });
+        this.notification = useService("notification");
         onMounted(async () => {
             const $el = $(this.elRef.el);
             this.$ = $el.find.bind($el);
@@ -133,11 +135,13 @@ export class ImageCrop extends Component {
         }
 
         if (this.uncroppable) {
-            this.displayNotification({
-              type: 'warning',
-              title: _t("This image is an external image"),
-              message: Markup(_t("This type of image is not supported for cropping.<br/>If you want to crop it, please first download it from the original source and upload it in Odoo.")),
-            });
+            this.notification.add(
+                markup(_t("This type of image is not supported for cropping.<br/>If you want to crop it, please first download it from the original source and upload it in Odoo.")),
+                {
+                    title: _t("This image is an external image"),
+                    type: 'warning',
+                }
+            )
             return this._closeCropper();
         }
         const $cropperWrapper = this.$('.o_we_cropper_wrapper');