Follow-up 5a079f597eeb76eee36e1c0299dc9b6796ea561c - Fixes #5193 - Information about remote images is lost/not displayed in Zammad.

Co-authored-by: Dusan Vuckovic <dv@zammad.com>
Co-authored-by: Florian Liebe <fl@zammad.com>

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -83,7 +83,7 @@
     </div>
   </div>
 </div>
-<% if encryptionSuccess || signSuccess || encryptionWarning || signWarning || @article.preferences?.whatsapp?.media_error || @article.preferences?.remote_content_removed: %>
+<% if encryptionSuccess || signSuccess || encryptionWarning || signWarning || @article.preferences?.whatsapp?.media_error: %>
   <div class="article-meta-permanent">
     <% if encryptionWarning || signWarning: %>
       <div class="alert alert--warning">
@@ -114,14 +114,6 @@
     </div>
   <% end %>
 
-  <% if @article.preferences?.remote_content_removed: %>
-    <div class="alert alert--warning">
-      <div class="alert-row">
-        <%- @Icon('danger') %> <%- @T('This message contains content hosted by an external source. The content has been blocked by Zammad, but you can retrieve it by downloading the original formatting.') %>
-      </div>
-      <div class="btn btn--action btn--small js-fetchOriginalFormatting"><%- @T('Original Formatting') %></div>
-    </div>
-  <% end %>
   </div>
 <% end %>
 <div class="article-content">
@@ -143,6 +135,11 @@
             </div>
           </div>
         <% end %>
+        <% if @article.preferences?.remote_content_removed: %>
+          <div class="remote-content-message js-fetchOriginalFormatting" role="button">
+            <%- @Icon('danger') %> <%- @T('This message contains images or other content hosted by an external source. We blocked it, but you can download the original formatting here.') %>
+          </div>
+        <% end %>
         <%- @attachments %>
       </div>
     </div>

app/assets/stylesheets/zammad.scss

@@ -7352,6 +7352,32 @@ a.list-group-item.active > .badge,
   border-color: var(--border-article-customer-selected);
 }
 
+.remote-content-message {
+  border-top: 1px solid var(--background-modifier-border);
+  white-space: normal;
+  margin: 10px -20px -10px;
+  padding: 10px 20px 10px 40px;
+  text-indent: -20px;
+  position: relative;
+  font-size: 13px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--background-modifier-hover);
+  }
+
+  .icon-danger {
+    vertical-align: text-bottom;
+    color: var(--text-normal);
+  }
+
+  @include phone {
+    margin-left: -10px;
+    margin-right: -10px;
+    padding: 10px 15px 10px 30px;
+  }
+}
+
 .attachments.attachments--list:not(:empty) {
   border-top: 1px solid var(--background-modifier-border);
   white-space: normal;

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue

@@ -332,6 +332,7 @@ const onContextClick = () => {
           />
           <ArticleRemoteContentBadge
             v-if="remoteContentWarning"
+            :class="colorClasses"
             :original-formatting-url="remoteContentWarning"
           />
           <button

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleRemoteContentBadge.vue

@@ -34,7 +34,7 @@ const popupItems = computed(() =>
   <button
     v-bind="$attrs"
     type="button"
-    class="bg-yellow inline-flex h-7 grow items-center gap-1 rounded-lg px-2 py-1 text-xs font-bold text-black"
+    class="inline-flex h-7 grow items-center gap-1 rounded-lg px-2 py-1 text-xs font-bold"
     @click.prevent="showPopup = !showPopup"
     @keydown.space.prevent="showPopup = !showPopup"
   >
@@ -46,14 +46,14 @@ const popupItems = computed(() =>
       <div
         class="flex flex-col items-center gap-2 border-b border-b-white/10 p-4"
       >
-        <div class="text-yellow flex w-full items-center justify-center gap-1">
+        <div class="flex w-full items-center justify-center gap-1">
           <CommonIcon name="warning" size="tiny" />
           {{ $t('Blocked Content') }}
         </div>
         <div>
           {{
             $t(
-              'This message contains content hosted by an external source. The content has been blocked by Zammad, but you can retrieve it by downloading the original formatting.',
+              'This message contains images or other content hosted by an external source. We blocked it, but you can download the original formatting here.',
             )
           }}
         </div>

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/__tests__/ArticleRemoteContentBadge.spec.ts

@@ -40,7 +40,7 @@ describe('rendering remote content badge', () => {
     expect(within(popup).getByText('Blocked Content')).toBeInTheDocument()
     expect(
       within(popup).getByText(
-        'This message contains content hosted by an external source. The content has been blocked by Zammad, but you can retrieve it by downloading the original formatting.',
+        'This message contains images or other content hosted by an external source. We blocked it, but you can download the original formatting here.',
       ),
     ).toBeInTheDocument()
 

i18n/zammad.pot

@@ -1571,7 +1571,7 @@ msgstr ""
 msgid "Article Type"
 msgstr ""
 
-#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:356
+#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:357
 msgid "Article actions"
 msgstr ""
 
@@ -2459,7 +2459,7 @@ msgstr ""
 #: app/assets/javascripts/app/controllers/_integration/slack.coffee:33
 #: app/assets/javascripts/app/models/email_address.coffee:34
 #: app/assets/javascripts/app/models/postmaster_filter.coffee:8
-#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:155
+#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:152
 #: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleMetadataDialog.vue:110
 msgid "Channel"
 msgstr ""
@@ -9917,7 +9917,6 @@ msgid "Origin By"
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/article_view/item.coffee:89
-#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:122
 #: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleMetadataDialog.vue:69
 #: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleRemoteContentBadge.vue:21
 msgid "Original Formatting"
@@ -11744,7 +11743,7 @@ msgstr ""
 #: app/assets/javascripts/app/controllers/_ui_element/ticket_duplicate_detection.coffee:71
 #: app/assets/javascripts/app/controllers/article_view/item.coffee:444
 #: app/assets/javascripts/app/controllers/data_privacy.coffee:119
-#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:347
+#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:348
 msgid "See less"
 msgstr ""
 
@@ -11753,8 +11752,8 @@ msgstr ""
 #: app/assets/javascripts/app/controllers/data_privacy.coffee:116
 #: app/assets/javascripts/app/views/data_privacy/tasks.jst.eco:41
 #: app/assets/javascripts/app/views/generic/ticket_duplicate_detection/warning.jst.eco:21
-#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:142
-#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:347
+#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:134
+#: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue:348
 msgid "See more"
 msgstr ""
 
@@ -14480,9 +14479,9 @@ msgstr ""
 msgid "This message cannot be displayed due to HTML processing issues. Download the raw message below and open it via an Email client if you still wish to view it."
 msgstr ""
 
-#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:120
+#: app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco:140
 #: app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleRemoteContentBadge.vue:56
-msgid "This message contains content hosted by an external source. The content has been blocked by Zammad, but you can retrieve it by downloading the original formatting."
+msgid "This message contains images or other content hosted by an external source. We blocked it, but you can download the original formatting here."
 msgstr ""
 
 #: lib/secure_mailing/smime/incoming.rb:86

spec/system/ticket/zoom/remote_content_removed_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'Ticket Zoom > Remote Content Removed', authenticated_as: :user,
   context 'when a mail with an inline image is received' do
     it 'shows a message that the image was removed' do
       within(:active_content) do
-        expect(page).to have_text('This message contains content hosted by an external source. The content has been blocked by Zammad, but you can retrieve it by downloading the original formatting.')
+        expect(page).to have_text('This message contains images or other content hosted by an external source. We blocked it, but you can download the original formatting here.')
       end
     end