vtadmin: fix tab navigation URL corruption in splat routes

[yushuqin]

Description

Fixes #20411

After the react-router v5→v7 migration (#19615), relative paths in Tab NavLinks resolve against the full URL (including the splat portion) rather than the route definition path. This causes tab clicks to append path segments, producing corrupted URLs like:

/keyspace/cluster/ks/shards/vschema/json/json_tree/vschema/shards

Instead of the expected:

/keyspace/cluster/ks/vschema

Root Cause

In react-router v7, relative links within splat routes (/*) resolve relative to the full matched URL. The migration changed:

// Before (v5) — absolute path via useRouteMatch
const { url } = useRouteMatch();
<Tab to={`${url}/vschema`} />

to:

// After (v7) — relative path, broken in splat routes
<Tab to="vschema" />

Fix

Use absolute paths constructed from route params in all Tab components within splat routes:

<Tab to={`/keyspace/${clusterID}/${name}/vschema`} />

Affected pages

• Keyspace
• Tablet
• Shard
• Stream
• Workflow

Related Issue(s)

Fixes #20411
Regression from #19615

Testing

Deployed to staging and verified tab navigation works correctly on all affected pages.

Co-Authored-By: Claude svc-devxp-claude@slack-corp.com

[vitess-bot]

Review Checklist

Hello reviewers! 👋 Please follow this checklist when reviewing this Pull Request.

General

• Ensure that the Pull Request has a descriptive title.
• Ensure there is a link to an issue (except for internal cleanup and flaky test fixes), new features should have an RFC that documents use cases and test cases.

Tests

• Bug fixes should have at least one unit or end-to-end test, enhancement and new features should have a sufficient number of tests.

Documentation

• Apply the release notes (needs details) label if users need to know about this change.
• New features should be documented.
• There should be some code comments as to why things are implemented the way they are.
• There should be a comment at the top of each new or modified test to explain what the test does.

New flags

• Is this flag really necessary?
• Flag names must be clear and intuitive, use dashes (-), and have a clear help text.

If a workflow is added or modified:

• Each item in Jobs should be named in order to mark it as required.
• If the workflow needs to be marked as required, the maintainer team must be notified.

Backward compatibility

• Protobuf changes should be wire-compatible.
• Changes to _vt tables and RPCs need to be backward compatible.
• RPC changes should be compatible with vitess-operator
• If a flag is removed, then it should also be removed from vitess-operator and arewefastyet, if used there.
• vtctl command output order should be stable and awk-able.

[Copilot]

Pull request overview

Fixes a vtadmin regression introduced during the react-router v5→v7 migration where tab navigation inside splat (/*) routes resolves relative to the full matched URL (including the splat portion), causing tabs to append extra path segments and corrupt the destination URL. The PR addresses this by switching Tab to targets from relative paths to absolute, param-constructed paths for affected route components.

Changes:

• Update Workflow page tabs to use absolute /workflow/:clusterID/:keyspace/:name/... URLs.
• Update Tablet, Keyspace, and Shard page tabs to use absolute /tablet/... and /keyspace/... URLs.
• Update Stream page tabs to use absolute stream-detail URLs under /workflow/.../stream/....

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web/vtadmin/src/components/routes/workflow/Workflow.tsx	Converts workflow tab links from relative to absolute URLs to avoid splat-relative corruption.
web/vtadmin/src/components/routes/tablet/Tablet.tsx	Converts tablet tab links (including Advanced) to absolute URLs under /tablet/....
web/vtadmin/src/components/routes/stream/Stream.tsx	Converts stream tab links to absolute URLs matching the stream splat route.
web/vtadmin/src/components/routes/shard/Shard.tsx	Converts shard tab links to absolute URLs under /keyspace/.../shard/....
web/vtadmin/src/components/routes/keyspace/Keyspace.tsx	Converts keyspace tab links (including Advanced) to absolute URLs under /keyspace/....

[mattlord]

This LGTM. I will approve, but while we wait for the second reviewer... it would be great if we could also add a small MemoryRouter test for one representative splat route would help prevent this from regressing again.

Thanks, @yushuqin !