From 6201a2bdf10187b4b69868914d7e52725abe92fc Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 11 Mar 2024 16:35:15 +0100
Subject: [PATCH] UX: improve messages when images are failing

---
 public/css/index-tailwind-output.css          | 46 +++++++++----------
 .../ImageProviders/ImageUploadManager.ts      |  5 +-
 src/UI/Image/UploadFailedMessage.svelte       | 29 ++++++++++++
 src/UI/Image/UploadingImageCounter.svelte     | 34 +++++++-------
 4 files changed, 71 insertions(+), 43 deletions(-)
 create mode 100644 src/UI/Image/UploadFailedMessage.svelte

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 3e3a35150..e250a690b 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -777,10 +777,6 @@ video {
   float: left;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -793,6 +789,10 @@ video {
   margin: 0px;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -896,6 +896,10 @@ video {
   margin-right: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -928,10 +932,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -972,10 +972,6 @@ video {
   margin-left: -1.5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1606,14 +1602,14 @@ video {
   word-break: break-all;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -1819,6 +1815,10 @@ video {
   padding: 1rem;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1831,10 +1831,6 @@ video {
   padding: 0.125rem;
 }
 
-.p-0 {
-  padding: 0px;
-}
-
 .p-12 {
   padding: 3rem;
 }
@@ -1941,6 +1937,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1951,11 +1952,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
diff --git a/src/Logic/ImageProviders/ImageUploadManager.ts b/src/Logic/ImageProviders/ImageUploadManager.ts
index fc7e5d283..f20b689d2 100644
--- a/src/Logic/ImageProviders/ImageUploadManager.ts
+++ b/src/Logic/ImageProviders/ImageUploadManager.ts
@@ -101,7 +101,6 @@ export class ImageUploadManager {
             "osmid:" + tags.id,
         ].join("\n")
 
-        console.log("Upload done, creating ")
         const action = await this.uploadImageWithLicense(
             featureId,
             title,
@@ -110,6 +109,9 @@ export class ImageUploadManager {
             targetKey,
             tags?.data?.["_orig_theme"]
         )
+        if (!action) {
+            return
+        }
         if (!isNaN(Number(featureId))) {
             // This is a map note
             const url = action._url
@@ -145,6 +147,7 @@ export class ImageUploadManager {
             } catch (e) {
                 console.error("Could again not upload image due to", e)
                 this.increaseCountFor(this._uploadFailed, featureId)
+                return undefined
             }
         }
         console.log("Uploading done, creating action for", featureId)
diff --git a/src/UI/Image/UploadFailedMessage.svelte b/src/UI/Image/UploadFailedMessage.svelte
new file mode 100644
index 000000000..03550587c
--- /dev/null
+++ b/src/UI/Image/UploadFailedMessage.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+
+  export let failed: number
+  const t = Translations.t.image
+
+</script>
+<div class="alert flex">
+
+  <div class="flex flex-col items-start">
+    {#if failed === 1}
+      <Tr t={t.upload.one.failed} />
+    {:else}
+      <Tr t={t.upload.multiple.someFailed.Subs({ count: failed })} />
+    {/if}
+    <Tr cls="text-normal" t={t.upload.failReasons} />
+    <Tr cls="text-xs" t={t.upload.failReasonsAdvanced} />
+  </div>
+  <button
+    class="mt-2 h-fit shrink-0 rounded-full border-none p-0 pointer-events-auto"
+    on:click
+    style="border: 0 !important; padding: 0 !important;"
+  >
+    <XCircleIcon aria-hidden={true} class="h-8 w-8" />
+  </button>
+</div>
diff --git a/src/UI/Image/UploadingImageCounter.svelte b/src/UI/Image/UploadingImageCounter.svelte
index e78f4a009..4b2dcb66d 100644
--- a/src/UI/Image/UploadingImageCounter.svelte
+++ b/src/UI/Image/UploadingImageCounter.svelte
@@ -11,6 +11,8 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Loading from "../Base/Loading.svelte"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import UploadFailedMessage from "./UploadFailedMessage.svelte"
 
   export let state: SpecialVisualizationState
   export let tags: Store<OsmTags> = undefined
@@ -22,19 +24,22 @@
   const { uploadStarted, uploadFinished, retried, failed } =
     state.imageUploadManager.getCountsFor(featureId)
   const t = Translations.t.image
+  const debugging = state.featureSwitches.featureSwitchIsDebugging
+  let dismissed = 0
 </script>
 
-{#if $uploadStarted === 1}
+{#if $debugging}
+  <div class="low-interaction">Started {$uploadStarted} Done {$uploadFinished} Retry {$retried} Err {$failed}</div>
+{/if}
+{#if dismissed === $uploadStarted}
+  <!-- We don't show anything as we ignore this number of failed items-->
+{:else if $uploadStarted === 1}
   {#if $uploadFinished === 1}
     {#if showThankYou}
       <Tr cls="thanks" t={t.upload.one.done} />
     {/if}
   {:else if $failed === 1}
-    <div class="alert flex flex-col">
-      <Tr cls="self-center" t={t.upload.one.failed} />
-      <Tr t={t.upload.failReasons} />
-      <Tr t={t.upload.failReasonsAdvanced} />
-    </div>
+    <UploadFailedMessage failed={$failed} on:click={() => dismissed = $failed}/>
   {:else if $retried === 1}
     <Loading cls="alert">
       <Tr t={t.upload.one.retrying} />
@@ -45,8 +50,10 @@
     </Loading>
   {/if}
 {:else if $uploadStarted > 1}
-  {#if $uploadFinished + $failed === $uploadStarted && $uploadFinished > 0}
-    {#if showThankYou}
+  {#if $uploadFinished + $failed === $uploadStarted}
+    {#if $uploadFinished === 0}
+      <!-- pass -->
+    {:else if showThankYou}
       <Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $uploadFinished })} />
     {/if}
   {:else if $uploadFinished === 0}
@@ -64,14 +71,7 @@
     </Loading>
   {/if}
   {#if $failed > 0}
-    <div class="alert flex flex-col">
-      {#if $failed === 1}
-        <Tr cls="self-center" t={t.upload.one.failed} />
-      {:else}
-        <Tr cls="self-center" t={t.upload.multiple.someFailed.Subs({ count: $failed })} />
-      {/if}
-      <Tr t={t.upload.failReasons} />
-      <Tr t={t.upload.failReasonsAdvanced} />
-    </div>
+    
+   <UploadFailedMessage failed={$failed} on:click={() => dismissed = $failed}/>
   {/if}
 {/if}