Escape HTML tags in error messages on Source Data Information screen

[dhmjhu]

Summary

On the Source Data Information screen, not all parts of error messages returned by the server are properly escaped.

Example

Trying to select a Kilosort directory with an invalid params.py resulted in the following message:

Request Failed
invalid syntax (, line 3)

The actual response from the server was:

{"message": "invalid syntax (<string>, line 3)", "type": "SyntaxError"}

Cause

While angle brackets in text are converted to HTML entities, type is left alone.

nwb-guide/src/electron/frontend/core/components/pages/guided-mode/data/GuidedSourceData.js

Lines 123 to 130 in 29599c1

	const [type, ...splitText] = result.message.split(":");
	const text = splitText.length
	? splitText.join(":").replaceAll("<", "&lt").replaceAll(">", "&gt")
	: result.traceback
	? `<small><pre>${result.traceback.trim().split("\n").slice(-2)[0].trim()}</pre></small>`
	: "";
	const message = `<h4 style="margin: 0;">Request Failed</h4><small>${type}</small><p>${text}</p>`;

Fix

Performing the same replacements on type should resolve this.

I have not tested this change, as I don't have an appropriate environment set up right now.

[CodyCBakerPhD]

Thanks for catching this and pushing a fix!

I have not tested this change, as I don't have an appropriate environment set up right now.

Please give it a try and let us know (preferably with screenshot of new error to match expectation), since I don't have a version of the data with invalid params myself

The developer installation instructions can be found here: https://nwb-guide.readthedocs.io/en/stable/developer_guide.html#installation

[dhmjhu]

I'm not sure when I can get around to setting it up, but here's a minimal example: guide-error-example.zip

It's not valid data, but it gets far enough to trigger this bug.

[rly]

Thanks @dhmjhu for the PR and minimal example! I was able to demonstrate the fix:

[CodyCBakerPhD]

@rly Looks like you should generate and set a new token for chromatic

[rly]

Ah, I reset the Chromatic project token and it still failed. Then I realized this is a security feature of GitHub Actions -- PRs from forks do not have access to this repo's secrets. So Chromatic cannot run (unless we add the token to the fork). There are workarounds that have some risk. How do you think we should proceed @CodyCBakerPhD ?

[CodyCBakerPhD]

I would propose merging this to a copy of current main (staging) then merging that into main after chromatic checks pass

I've adjusted the target of this PR

[rly]

Good idea. Let's do that.