[Files] Enhance the view of the image previewer if the file does not exists

[cnasikas]

In cases, we show an entry in the user activity when you attach a file to the case. The user can click the name of the file and preview the file. The previewer works only for images at the moment.

If the file is deleted from the File UI management page the entry in the user activity is still there even if the file is not shown in the case file table. The user can click to preview a non-existing file. It would be nice if the previewer shows a "Non found" view.

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[elasticmachine]

Pinging @elastic/response-ops-cases (Feature:Cases)

[vadimkibana]

Currently, the image preview component from the Files Service is a very simple wrapper around <img>, essentially the way to think about it is as if it was <img> element. I could probably support, probably already does (I think it maybe be used in Image Embeddable), the standard onError property of <img> elements. You could use that to handle the missing image case.

Alternatively, if we want to build something more complex on top of it, like automatically rendering a nice React UI, then maybe it should be another layer on top of that simple <img>-like component.

It would be nice if the previewer shows a "Non found" view.

Could you please elaborate what you mean by "Not found" view, is it just text; or a custom view? What would be the ideal API?

[adcoelho]

Thanks for the answer @vadimkibana !

I could probably support, probably already does (I think it maybe be used in Image Embeddable), the standard onError property of elements. You could use that to handle the missing image case.

Coincidentally I was just playing around with this yesterday when you wrote your message.

It works but @mdefazio 's feedback was that it would be better if we could simply disable the link when there is nothing behind it.

Could you please elaborate what you mean by "Not found" view, is it just text; or a custom view? What would be the ideal API?

Something like the video below but supported natively:

https://user-images.githubusercontent.com/1533137/234192528-a7c4367b-25ed-46d4-ad79-e07736d9ef4c.mov

[cnasikas]

It works but @mdefazio 's feedback was that it would be better if we could simply disable the link when there is nothing behind it.

To do that we need to do a bulk get for all files shown in the user activity to know which ones are valid and which are not. As it is an edge case, for performance reasons, I prefer to inform the user when he/she acts. A nice "No preview available" React component would be sufficient. There isn't a need for it to be customizable. It can be the same across Kibana.

[mdefazio]

Makes sense @cnasikas. I was thinking disabling the link was going to be a simpler route, but also didn't want to try and push this too far right before the release.

A simple modal is fine by me. Below is a possible solution, but let me know if you would like to go another direction.

[vadimkibana]

I've dug into this and looked at the code, below are my thoughts:

• It is not possible to delete Cases files from the Files Management section anymore, so this edge case should not be a problem anymore.

• Currently, you are using the EUI image component, which is a wrapper around the native <img> HTML element. When the image is not present, it fires the "error" event, you can use that to render the "No preview available" modal. Like so:

• As you are not fetching the file metadata, nor using the image component from the files service to render the image preview, there is not much Shared UX can change to help.
  • If you were to download the image metadata when previewing, there is Status property, which is set to DELETED, if file is deleted. You could use that to display the No preview available.
  • If you would use the image component from the Files service, we could make it accept the full file metadata, and then inspect that Status field and render something appropriately. But that would still require you to fetch the file metadata first.
  • Alternatively, we could create a higher level component (akin to what I was posting above), which would just receive the file ID, like <ImageFile id={ ... } />; it would internally download the file metadata and render appropriately. But that is something we don't have yet, I think it would be a nice addition, but not something we need to solve this specific problem.

I'm thinking to solve this problem, maybe best to keep it lean and not fetch the file metadata, but instead just use the onError image prop.

[cnasikas]

Thanks, @vadimkibana for the suggestion. We will try the onError suggestion as a first step and let you know if our needs grow and would like to use your image component (the only reason we did not use it is because we wanted a different UI) or the <ImageFile id={ ... } /> component.