Add support for externalised attachments

davidjgoss commented 2 months ago

🤔 What's changed?

This PR adds support for externalised attachment content.

Where an attachment message has a populated url field, the <Attachment/> component will now handle that accordingly depending on the media type. The specific variants are:

For binary/unknown attachments (including PDF etc), a download link will be shown pointing to the url
For image or video attachment, the url will populate the src attribute of the appropriate element
For text/JSON attachments, we'll attempt to fetch the content from the url and render it as normal
- If there's an error, we'll show a message advising to check your browser console

Also included are a general refactor of <Attachment/> internals to use a more React-y component structure, the addition of an error boundary to handle any errors that happen for a given attachment, and a simpler visual treatment for text/x.cucumber.log+plain attachments:

⚡️ What's your motivation?

https://github.com/cucumber/html-formatter/issues/281#issuecomment-1899935418

🏷️ What kind of change is this?

:zap: New feature (non-breaking change which adds new behaviour)

The next step after this will be to modify the HTML formatter implementation(s) to support externalising some kinds of attachment. I'll probably start with JS.

📋 Checklist:

[x] I agree to respect and uphold the Cucumber Community Code of Conduct
[x] I've changed the behaviour of the code
- [x] I have added/updated tests to cover my changes.
[ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
[x] Users should know about my change
- [x] I have added an entry to the "Unreleased" section of the CHANGELOG, linking to this pull request.

This text was originally generated from a template, then edited by hand. You can modify the template here.

netlify[bot] commented 2 months ago

Deploy Preview for cucumber-react-components ready!

Name	Link
Latest commit	07bdc16b894bf78624cda2fb99853b246656cebb
Latest deploy log	https://app.netlify.com/sites/cucumber-react-components/deploys/667536e140870b0008996818
Deploy Preview	https://deploy-preview-353--cucumber-react-components.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mpkorstanje commented 2 months ago

What happens when resources can't be fetched?

davidjgoss commented 2 months ago

What happens when resources can't be fetched?

You get an error shown in place of only that attachment - doesn't affect the rest of the step. See this story https://deploy-preview-353--cucumber-react-components.netlify.app/?story=gherkin--attachment--externalised-error

mpkorstanje commented 2 months ago

Mmh. That error message isn't very helpful. I think it would be good to add some detail to ensure people don't come to us and ask us why their attachments can't be loaded.

For example, Jenkins is commonly used and has rather restrictive CORS settings. Unless configured correctly reports with attachments are always problematic.

So two scenarios that are important to be handled nicely.

Someone loads the html report from the file system. And the attachment files have been removed. Is it clear that the attachment isn't there?
Someone loads the report from a server that can't or won't serve the files. Can we make it clear that the server didn't allow the request and possibly show the servers response (http code, responses body).

davidjgoss commented 2 months ago

Okay, good feedback, let me see if I can make that better.

cucumber / react-components