Fix: navigation in new tab and/or window

[Squixx]

Description

Currently, when running dependency track on any path other than /, whenever you open any link in 'new tab' or new window, you will be directed to the application on your base domain. Making opening up several issues etc a bit annoying.

By making all internal links relative to the root of the application (index.html) browsers will actually resolve these links relative to the current path e.g. domain.com/depenencytrack/ and it will actually work

Addressed Issue

Havent actually created an issue for this yet

Additional Details

Checklist

• I have read and understand the contributing guidelines
• This PR introduces new or alters existing behavior, and I have updated the documentation accordingly

[nscuro]

Thanks! I think a safer approach would be to use the Vue router instead of hardcoding URL paths, since it should work in all cases.

You'll want to use router.push, like so:

frontend/src/views/portfolio/projects/Component.vue

Line 162 in 58f5231

$router.push(`/components#/search/PACKAGE_URL/${component.purl}`)

It's also possible to reference routes by name, e.g.:

frontend/src/shared/common.js

Line 45 in 58f5231

router.resolve({ name: 'Projects', query: { tag: tag.name } }).href

Relevant router docs are here: https://router.vuejs.org/guide/essentials/navigation.html#Navigate-to-a-different-location

For formatter functions specifically, as commonly used in tables, you might need to utilize this hack to gain access to the router:

frontend/src/views/portfolio/projects/ProjectList.vue

Lines 254 to 256 in 58f5231

	routerFunc: () => this.$router, // Injecting $router directly causes recursion errors in Vue...
	formatter(value, row, index) {
	const router = this.routerFunc();

The routes are defined here:

frontend/src/router/index.js

Line 113 in 58f5231

function configRoutes() {

[Squixx]

I tried this, however that seems to break internal navigation, as when i click a link within the app it'll navigate to /basepath/basepath/path

while the links correctly translate to /basepath/path in the dom. So seems the router is doing something internally. any ideas?

(see [https://github.com/Squixx/frontend/tree/feat/use-router](this branch))

update:

So basically from what i'm understanding. The way the tables are built means that the content is injected outside of vue, so any template binding basically is not available. Ideally you'd just use a router-link component. But with the current setup thats not possible.

as a simple 'href' cant be two things at the same time. It's either /base/path, or /path.

It needs to be /path for the router to correctly route inside the SPA context. and /base/path for the browser to correctly know the route outside of the SPA context.

using a relative link allows this to work for both contexts.

To actually use the router inside this context you'd have to rebuild most tables, probably isnt worth it? My suggestion would be to actually go with relative links as it'll be easier to work with without refactoring most of the application