Attached textfiles break "RAW"-Link if last attachment in list

[MrGeneration]

Infos:

• Used Zammad version: 2.9
• Installation method (source, package, ..): any
• Operating system: any
• Database + version: any
• Elasticsearch version: any
• Browser + version: current versions of Microsoft Edge, Google Chrome and Mozilla Firefox.
  • Interestingly Internet Explorer does not apply and act completely different
• Ticket-ID: #1040542

Expected behavior:

• When looking at article details, you'll be able to download the original eml-file after clicking on "RAW".

Actual behavior:

• When looking at article details, you'll download the last attachment that's attached to the article, if it's extension is "txt".
  • The order is important! The last attachment within the article needs to be a txt-file, it doesn't matter what other attachments you have in that article.

Steps to reproduce the behavior:

• Send or Receive a E-Mail with a attached text file
• open the ticket in Zammad and try to download the RAW-EML

Screenshot of the issue:

Yes I'm sure this is a bug and no feature request or a general question.

[martinvonwittich]

We also just stumbled over this. The root cause seems to be a broken icon - it tries to display <svg class="icon icon-file-text "><use xlink:href="assets/images/icons.svg#icon-file-text"></use></svg>, but icons.svg doesn't actually contain a icon-file-text. This causes the browser to display an empty SVG, and the default size of an empty SVG is apparently 300x150 px:

https://svgwg.org/specs/integration/#svg-css-sizing

If any of the sizing attributes are missing, resolve the missing ‘svg’ element width to '300px' and missing height to '150px' (using CSS 2.1 replaced elements size calculation).

It's easy to see if you add border: 1px solid; to the SVG in the browser's dev tools:

[thorsteneckel]

Thanks a ton for digging into it @martinvonwittich ! @mrflix - can you please check where our text icon went? 🏖

[martinvonwittich]

I'd argue it was never there in the first place :D

zammad@martin.mein-iserv.de ~ (develop) % git grep 'icon-file-text' $(git rev-list --all -- public/assets/images/icons.svg) -- public/assets/images/icons.svg   
zammad@martin.mein-iserv.de ~ (develop) % 

A comparison with another icon:

zammad@martin.mein-iserv.de ~ (develop) % git grep 'icon-file-archive' $(git rev-list --all -- public/assets/images/icons.svg) -- public/assets/images/icons.svg
e26db17d75866d4a04dea925d9ab840be5cbb5ed:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
80c7dec6246a3adb90eff7c0b3aef84ee463f7a0:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
0db8c28bd57b7cad7deb8d96e08c618dd34b8692:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
22b2f44ba02bfab05c6f9f4e4f56d089d9c339dd:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
b411cabe5b640208ac910bd523e4cce0d0274725:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
0445b4ee490376f1d3bd23883f2d08c0602d0b11:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
3186d5e4d763f8e367f8cf9d5c4eae918284bdbf:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
f4c50ae0fa23faa6ed4e461e2fc5202961b34598:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
690843fcf110bb56ff6ac07dd8ac9abdc27c08c8:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
7966bb3b16c2ce078e664636b3626ec47a831ce2:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
95e5eb57a8a067427d4aa1d51678036e28f497ba:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
b0597ad04d3e141dd2ba97addabdea2a73a875aa:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">

Next to the missing icon in icons.svg itself, I believe icon-file-text is also missing in app/assets/stylesheets/svg-dimensions.css:

zammad@martin.mein-iserv.de ~ (develop) % git diff app/assets/stylesheets/svg-dimensions.css
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index 24e902dd3..f04d6dd70 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/app/assets/stylesheets/svg-dimensions.css
@@ -31,6 +31,7 @@
 .icon-file-powerpoint { width: 24px; height: 31px; }
 .icon-file-unknown { width: 24px; height: 31px; }
 .icon-file-word { width: 24px; height: 31px; }
+.icon-file-text { width: 24px; height: 31px; }
 .icon-form { width: 17px; height: 17px; }
 .icon-forward { width: 16px; height: 17px; }
 .icon-full-logo { width: 175px; height: 50px; }

I thought it would also be useful to somehow provide a default size for the , in case that other .icon-file-* definitions are missing that we haven't noticed yet, but I can't really figure out how to do that in CSS so that the .icon-file-* styles will override the default size. I assume using .icon for this wouldn't be acceptable because that would apply to all icons, not only to the file icon?

.icon { width: 24px; height: 31px; }

Should we add a new CSS class (e.g. .file-icon) that defines the default size, and then set the SVG class to icon file-icon file-icon-*?

[mrflix]

@martinvonwittich nice git command skills! Thank's for looking into this. The icon name is mapped in view_helpers.coffee but – as you correctly assessed – didn't actually exist.
So created the icon: