From 2e6b59a8e4f0cdc6b0989c0e88a5eee5bd04ca3e Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 13 Jul 2022 12:23:55 +0000
Subject: [PATCH] [FIX] web_editor: fix upload progress toast visibility

Before this commit, when uploading multiple files and clicking on the
cross button, the toast was reappearing every time a new file was
succesfully uploaded.

This commit changes its state so that it is only visible when one or
multiple files are added to the uploading queue. The user can still hide
it with the cross.

task-2687506

Part-of: odoo/odoo#95955
---
 .../upload_progress_toast.js                  | 20 +++++++++----------
 .../upload_progress_toast.xml                 |  6 ++----
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
index 01ea712306f..997591fa335 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
@@ -11,21 +11,21 @@ ProgressBar.template = 'web_editor.ProgressBar';
 
 export class UploadProgressToast extends Component {
     setup() {
-        this.state = useState({ hide: false });
+        this.state = useState({
+            isVisible: false,
+            numberOfFiles: 0,
+        });
 
         useEffect((numberOfFiles) => {
-            if (numberOfFiles) {
-                this.state.hide = false;
+            if (numberOfFiles === 0) {
+                this.state.isVisible = false;
             }
+            if (numberOfFiles > this.state.numberOfFiles) {
+                this.state.isVisible = true;
+            }
+            this.state.numberOfFiles = numberOfFiles;
         }, () => [Object.keys(this.props.files).length]);
     }
-
-    get show() {
-        if (!this.props.files || !Object.keys(this.props.files).length) {
-            return false;
-        }
-        return !this.state.hide;
-    }
 }
 UploadProgressToast.defaultProps = {
     files: {},
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
index ac8a864d0cd..c31620f3b39 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
@@ -18,10 +18,8 @@
 
 <t t-name="web_editor.UploadProgressToast" owl="1">
     <div class="o_notification_manager o_upload_progress_toast">
-        <div t-if="show" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
-            <button type="button" class="close o_notification_close" aria-label="Close" t-on-click="() => this.state.hide = true">
-                <i class="oi oi-close"/>
-            </button>
+        <div t-if="state.isVisible" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
+            <button type="button" class="btn btn-close o_notification_close p-2" aria-label="Close" t-on-click="() => state.isVisible = false"/>
             <div class="o_notification_body ps-2 pe-4 py-2">
                 <div class="me-auto o_notification_content">
                     <div t-foreach="props.files" t-as="file" t-key="file" class="o_we_progressbar">