[Cases] Show image thumbnail

[cesco-f]

This PR closes #222066.

Before:

Screen.Recording.2025-07-01.at.15.01.47.mov

After:

Screen.Recording.2025-07-01.at.15.01.08.mov

Acceptance criteria:

• On the files attachment tab, show the thumbnails for attached images ✅
• In the activity feed, show the thumbnails for attached images ✅

[benakansara]

is it possible to show icon for file type when it't not an image (so there is always a thumbnail/icon in front of file name)?

[cesco-f]

is it possible to show icon for file type when it't not an image (so there is always a thumbnail/icon in front of file name)?

For sure it's possible, but I'm not sure how complicated that would be.
Do we already have icons in the repo for all the possible file types that can be uploaded in cases?

Maybe as first solution we can have a generic icon for all attachments that are not images.

[benakansara]

We can use below icons based on file extension and fallback to paperClip or document icon if extension is not known or not in our list. wdyt @maciejforcone?

Except when we can show image thumbnail (so we need to exclude those file extensions)

Icons

Sample code

switch (extension.toLowerCase()) {
    case 'csv':
    case 'xls':
    case 'xlsx':
      return 'visTable';
    case 'png':
    case 'jpg':
    case 'jpeg':
    case 'gif':
    case 'svg':
      return 'image';
    case 'js':
    case 'ts':
    case 'json':
    case 'xml':
    case 'py':
    case 'html':
      return 'console';
    case 'zip':
    case 'rar':
    case '7z':
      return 'folderClosed';
    case 'pdf':
    case 'doc':
    case 'docx':
    case 'txt':
      return 'document';
    default:
      return 'paperClip'; // or 'document'
  }

[cesco-f]

@benakansara I've implemented your suggestion and checked with @maciejforcone, here the result:

[benakansara]

@cesco-f I think it's hard to list all related extensions. We should instead use parseMimeType function which is also used to display "Type" column in Files table

[cesco-f]

The possible mime types are imageMimeTypes, textMimeTypes, compressionMimeTypes and pdfMimeTypes.

So I'm showing the document icon if the mime type is either textMimeTypes or pdfMimeTypes, the folderClosed icon if it's a compressionMimeTypes, the clickable image if it's imageMimeTypes and the paperClip icon in all the other cases.

Is this what you had in mind? Or how would you use the parseMimeType function you mentioned?

[benakansara]

yes exactly, thank you!

[janmonschke]

kibana-cases changes lgtm

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 23f70e1

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cases	1135	1137	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
cases	1.3MB	1.3MB	+2.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
cases	135.6KB	135.8KB	+220.0B

Unknown metric groups

async chunk count

id	before	after	diff
cases	36	37	+1

History

• 💚 Build #316650 succeeded d78c97a
• 💚 Build #316486 succeeded 06b9aba
• 💚 Build #316361 succeeded 739f0c7
• 💛 Build #316255 was flaky 204cc6d
• 💚 Build #316097 succeeded e3dba82
• 💛 Build #315508 was flaky 59e452b