doi-editor release ui inoperable under Firefox

[alexdunnjpl]

🐛 Describe the bug

When attempting to release one of the DOIs listed at https://pds-gamma.jpl.nasa.gov/tools/doi-editor/#/release/urn:nasa:pds:insight_cameras::1.0, the resulting page of the app shows an "API Unreachable" error banner and is inoperable.

This is specific to Firefox - the webapp works correctly under safari and chrome

📜 To Reproduce

Steps to reproduce the behavior:

1. Navigate to https://pds-gamma.jpl.nasa.gov/tools/doi-editor/#/release/urn:nasa:pds:insight_cameras::1.0
2. Click on "RELEASE" for one of the DOIs

🕵️ Expected behavior

@jordanpadams is Firefox intended to be supported? If so, the app should be made compatible. If not, I'd suggest detection of FF clients, and a corresponding warning be shown instead of the current page with error.

📚 Version of Software Used

pds-dio-ui==1.0.1
firefox==106.0.3 (64-bit)

[jordanpadams]

@eddiesarevalo @anilnatha do we know of a tool we can use in order to effectively test all browsers for web apps? some folks at RMS mentioned a tool a while back for this, but not sure if you know of others or could ask around in your group.

@c-suh should probably be looped in here too.

[alexdunnjpl]

@jordanpadams Selenium?

There's a learning curve for the full feature set, but the tool's really tight and shouldn't be onerous to ramp up on if we're wanting to get basic tests going.

You can pretty-much code up a UI story/flow directly into a set of HTML element interactions and synchronous waits, and assert stuff as you go, then run it against each browser.

[eddiesarevalo]

The bug that caused a crash on Firefox is fixable by adding the version number to the XSL stylesheet. Firefox is more strict about this than Chrome or Safari. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

https://github.com/NASA-PDS/doi-ui/blob/main/src/utils/xmlUtil.js

It turns out even by fixing this, the <xsl:output indent="yes"/>' tag doesn't work on Firefox so that the styling will still look jumbled on Firefox.

On Firefox:

On Chrome:

If we want to support firefox we should get rid of the XSL logic and use something off of npm like https://github.com/riversun/xml-beautify

[tloubrieu-jpl]

@eddiesarevalo can test the new styler, if that does not work will keep it as is with the bug fix on the xml.

[eddiesarevalo]

Used a different formatter so it looks formatted in Firefox and Chrome:

[tloubrieu-jpl]

cannot be tested because of #178