Report URL opened from MTA extension breaks CSS/JS URLs

[dfuenzalida]

• OS: Windows 10 21H1
• Java version: OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
• VSCode Version: 1.67
  • Node.js: 16.13.0
• Extension version: Migration Toolkit for Applications v0.0.98 (preview)
• Browsers:
  • Microsoft Edge 101.0.1210.32 (Official build) (64-bit)
  • Google Chrome 100.0.4896.127 (Official Build) (64-bit)

I tried the extension today and I was able to see the issues reported inside VSCode for a sample application, but when opening the report from VSCode it looks broken because the CSS/JS are not found, as in the screenshot below:

Opening the report in VSCode:

Website open in Edge (with the Developer Tools panel enabled):

The following URLs were broken (HTTP 404):

• http://localhost:61435/reports/resources/css/bootstrap.min.css
• http://localhost:61435/reports/resources/css/font-awesome.min.css
• http://localhost:61435/reports/resources/css/windup.css
• http://localhost:61435/reports/resources/js/jquery-3.3.1.min.js
• ... and so on

Likely cause

The problem seems to be that there is a / encoded in the URL used to open the report. The extension tries to open the address http://localhost:61435/54fkx96i7-lqqqufhqb%5Cindex.html but it should be http://localhost:61435/54fkx96i7-lqqqufhqb/index.html instead (note the %5C is the / encoded). This encoded character causes the paths to all the CSS/JS resources to be computed as relative to the root of the web address, instead of relative to the folder (54fkx96i7-lqqqufhqb in this case).

When the correct URL is used, the report works correctly:

The correct location of the resources have the unique identifier in them, like this:

• http://localhost:61435/54fkx96i7-lqqqufhqb/reports/resources/css/bootstrap.min.css