[dashboard] Fix PageWithSubMenu selection state by URL-encoding all links

[jankeromnes]

Description

Fixes PageWithSubMenu selection state when sub-menu links contain special characters (e.g. a space).

Related Issue(s)

Fixes #7231

How to test

1. Log in to the preview
2. Add a repository with a space in its name as a new Project (e.g. Gitpod Test)
3. Open this PR in Gitpod and run this:

$ kubectl port-forward mysql-0 3306 &
$ mysql -h 127.0.0.1 -pjBzVMe2w4Yi7GagadsyB gitpod
mysql> update d_b_project set slug = NULL;

4. Refresh the preview tab
5. Visit the Project Settings for your Project added in 2.

Expected: The current Project Settings subsection should have a different background in the left menu (without needing to hover):

Release Notes

NONE

Documentation

/uncc

[jankeromnes]

Reroll 🎲

/werft run

👍 started the job as gitpod-build-jx-fix-page-with-submenu-select.4

[jankeromnes]

Hard reroll 🎲

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-jx-fix-page-with-submenu-select.5

[jankeromnes]

Laurie, could you please take a look at this small fix when you have some time? 😊 🙏 (Priority: Low 🔅🌴)

[laushinka]

@jankeromnes I checked the project settings page before and after updating the DB.
Before the General tab was highlighted, but after that it's not..

+--------------------------------------+--------------+------+
| id                                   | name         | slug |
+--------------------------------------+--------------+------+
| b4797944-b2ee-4cf2-9268-752985d6c681 | Learn GitLab | NULL |
+--------------------------------------+--------------+------+

[jankeromnes]

@jankeromnes I checked the project settings page before and after updating the DB.

Cool, many thanks @laushinka! 🙏

Before the General tab was highlighted, but after that it's not..

Whoops, that's not expected. By any chance, did you stay on a project URL that was opened before the database change? (If so, I guess it still has the slug that got removed from the DB).

Or, put another way, does it work if you go back to your list of Projects, refresh, then open that Project again?

(If it does work, it's a bug in my testing instructions, and not the PR 😅 but if it still doesn't work, it's a bug in my PR 🙈)

[laushinka]

Or, put another way, does it work if you go back to your list of Projects, refresh, then open that Project again?

@jankeromnes Yes it works! Sorry that should've been obvious to make sure nothing's cached still. Great job!

/lgtm

[roboquat]

LGTM label has been added.

Git tree hash: cce4266bb44b3ce2148711a2734fdcc19027901c

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: laushinka

Associated issue: #7231

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• components/dashboard/OWNERS [laushinka]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gtsiolis]

Thanks @jankeromnes and @laushinka for fixing this! 🧡 🧡