Add a (optional) newly redesigned ScoreBoard

[J12934]

Description

This PR adds a new (currently) optional replacement of the ScoreBoard based on the designs of Vibhuti Arora.

The new Score Board looks something like the following and is currently available under the /#/score-board-preview path.

The goal is to include the ScoreBoard as a optional replacement in the next release to get more user feedback and remove the existing ScoreBoard in a later release.

Open Todos

• Add buttons for file based progress import / backup
• Add link to the preview ScoreBoard onto the old ScoreBoard page (and a link back)
• Handle initial loading state (before the Challenges & Application configuration are loaded via ajax more gracefully, currently a bit janky)
• Implement restrictToTutorialsFirst mode in new ScoreBoard.
• Adjust color choices to work better across all supported themes. (theming already works, some of them just look awful right now)

Affirmation

• My code follows the CONTRIBUTING.md guidelines

[cypress]

Passing run #281 ↗︎

0

218

16

0

0

Details:

Temporarily disable feedback api spec
Project: OWASP Juice Shop	Commit: f6d8409118
Status: Passed	Duration: 45:42 💡
Started: Aug 22, 2023 6:41 PM	Ended: Aug 22, 2023 7:27 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[cypress]

1 failed test on run #296 ↗︎

1

217

16

0

0

Details:

Merge 0a5b61f into 7c77c47...
Project: OWASP Juice Shop	Commit: e0c8950225 ℹ️
Status: Failed	Duration: 22:14 💡
Started: Aug 28, 2023 5:35 PM	Ended: Aug 28, 2023 6:58 PM

  test/cypress/integration/e2e/complain.spec.ts • 1 failed test • chrome @ macos-latest

View Output Video

Test		Artifacts
/#/complain > challenge "videoXssChallenge" > should be possible to inject js in subtitles by uploading zip file with filenames having path traversal		Output Screenshots Video

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[bkimminich]

Woohoo, build passed!

[J12934]

restrictToTutorialsFirst should now be working pretty much as it did on the old ScoreBoard. Filters are just completly hidden until the users completed all tutorials and a note banner is show over the challenges.

Also did some work to align the design & code of all of these banners we have now:

The old ScoreBoard now also features a navigation link to the new ScoreBoard.
@bkimminich if you want to tweak the texts feel free :D
(Also the link to the communication channels (OWASP Project Web Page) is only shown, if the instance is configured to show github links to don't break white labeled instances, link is in translation so its not perfect like most white labeling we have.)

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. 📆 It will be closed automatically in two weeks if no further activity occurs.

[J12934]

I've tinkered around a bit more and think this is now in a mergable / releasble state.

I've done quite a bit of investigation on how to best integrate the file based backups from / for the new score board.
Two thoughts on that:

1. In the original design we had two buttons in the row of the score board filters. I've tried that and that seemed really confusing as this has little to do with filtering. I've decided that to me it would be clearer to have a "Additional ScoreBoard Settings" modal from which to trigger these buttons. (See screenshots below)
2. It will be really hard to support both score board from being updated simmultaniously by the same backup / backup as the store their state completely differently (not to mention coming up with a config format which supports both). I tried for a while but didn't come up with anything I liked. Right now the score board section in the backup will only be applied to the old score-board, even when it's applied from the new score-board.

I'd suggest we keep it this way and remove the score-board section from the backup file format alltogether when we remove the old score-board in a future release.

I've also added an option to configure a default score-board from this menue so that you can already get the preview linked in the sidebar as you "default ScoreBoard"

[bkimminich]

Just tried the new board locally and I do see scrollbars in each challenge on my 2560x1440 monitor:

[J12934]

ah yes, always hard to spot on macs as it doesn't show scrollbars until you actually scroll :)
changed it now 0555e4d