R6.x HTML Reports

[tombrunet]

Epic Details

• Hill: Update the HTML report in the checker and packages to match extension's UI and content to make it easier for the user to flip back and forth between the extensions real time report and the saved HTML report without losing context.
• Playback Demonstration: Demonstrate the new HTML report with the new UI and content.
• Metric: Feedback from users.
• Comms: In the checker release notes.

What project/section is the Epic for?

• checker

Related Issues to this Epic:

Please mark as done once the ticket is done and have pass QA testing

• HTML Report Card Changes, and View and Filter menu changes #2024
• HTML Report Include Hidden #2026
• HTML Report Font and CSS Consistency #2035
• [HTML Reports] Update User & Quick guides to match improvements #2048

all in final PR

Definition of Done

• Results are added to the Release Mural with a description of what was accomplished, KPIs, etc
• All content has been reviewed for grammar, spelling, style and technical accuracy
• All code committed to main branch
• All unit tests pass (including accessibility)
• Demo works in staging environment
• At least one performance metric / monitor constructed

[tombrunet]

Basically how the report is built and used by tools:

• The as-is code is in the report-react folder and built with npm run build.
• When the build is run, the report-react/build/genReport.js and genReport.tsx files are created, which contain a function that takes a report as input and creates a stand-alone HTML file for the report as a string (which can then be written as a file)
• You can find how this function is called and the format of the report here: https://github.com/IBMa/equal-access/blob/master/common/module/src/report/ACReporterHTML.ts#L28

How the genReport function is created:

• The skeleton HTML files is at https://github.com/IBMa/equal-access/blob/master/report-react/public/index.html . You'll see ACEREPORT = {}; where the HTML report is injected into the file
• The root react file is https://github.com/IBMa/equal-access/blob/master/report-react/src/index.tsx
• https://github.com/IBMa/equal-access/blob/master/report-react/gulpfile.js takes the built .css and .js files and pushes them into the skeleton HTML file for a single stand-alone file.

Some basic problems with the current solution:

• The current built file is ~1MB (even for an almost empty report), which adds a lot of overhead to the reports
• The report design has not been kept up-to-date with the extension design (see below)

As-is design:

vs extension report designs:

Note: The checkboxes on the reports won't be needed, and the Export XLS also. Perhaps some other items might not make sense in a saved report.

Ideally, we can pull in the same code for both the extension and the report and keep them in sync (minus the checkbox behaviors). We can talk more about design specifics, but this is a general idea of the work needed.

[MHoov]

Notes from 29 August meeting:

• Tom said not to worry about the file size yet - get started with the design. Start with some easy elements
  • date, for example
  • just address the stuff above the table (see image)
• Josiah suggested starting with the cards.
• Create draft issues to plan out the actual work by sprint.

See recording in Teams for additional details.

[philljenkins]

Start reviewing this Epic. At the end of sprint 12 we should have the following documented in this Epic to share at the final Showcase:

Epic details

• Did you accomplish your Hill? If not, what is remaining?
• Will your final playback match what is recorded for Playback Demonstration?
• Collect your metrics
• Comm's

Definition of Done

• Indicate what has been completed
• Identify what needs to happen in the final sprint
• Lessons Learned about this activity or Release