Replace template literal / string concat path composition with named routes
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 146
Description
Part of #8094 (prerequisite: #8084)
## What
~10 places build route paths by concatenating strings with team slugs instead of using named routes with params. This is the most involved batch because some cases need more than a simple swap.
### Direct navigation (swap path for named route)
| File | Line | Current | Should be |
|------|------|---------|-----------|
| `pages/team/index.vue` | 131-133 | `` `/team/${slug}/billing` `` | `{ name: 'team-billing', params: { team_slug: slug } }` |
| `pages/instance/components/InstanceForm.vue` | 691 | `` `/team/${slug}/billing` `` | `{ name: 'team-billing', params: { team_slug: slug } }` |
| `pages/team/Billing/index.vue` | 251 | `` `/team/${slug}/overview` `` | `{ name: 'team-home', params: { team_slug: slug } }` |
| `pages/team/AuditLog.vue` | 112 | `` `/team/${slug}/overview` `` | `{ name: 'team-home', params: { team_slug: slug } }` |
| `pages/team/Settings/index.vue` | 55 | `` `/team/${slug}/overview` `` | `{ name: 'team-home', params: { team_slug: slug } }` |
| `pages/team/Members/Invitations.vue` | 133 | `` `/team/${slug}/members/general` `` | `{ name: 'team-members-members', params: { team_slug: slug } }` |
### Path comparison logic (needs a small refactor)
**`pages/team/index.vue` lines 112-126:**
This builds an array of allowed path strings and compares against `$route.path`:
```js
allowedRoutes.push('/team/' + this.team.slug + '/billing')
allowedRoutes.push('/team/' + this.team.slug + '/settings')
// ... etc
if (allowedRoutes.indexOf(route.path) === -1) { ... }
```
Should be refactored to compare `$route.name` against a list of allowed route names instead.
**`components/banners/TeamTrial.vue` line 61:**
Builds a path string in a computed property and uses `$route.path.includes(billingPath)` to check the current page:
```js
billingPath () { return '/team/' + this.team.slug + '/settings/change-type' }
onBillingPage () { return this.$route.path.includes(this.billingPath) }
```
Should check `$route.name === 'team-change-type'` instead.
**`components/banners/SubscriptionExpired.vue` line 51:**
Same pattern:
```js
billingPath () { return '/team/' + this.team.slug + '/billing' }
onBillingPage () { return this.$route.path.includes(this.billingPath) }
```
Should check `$route.name === 'team-billing'` instead.
Contributor guide
Research direction
Start by reading the listed locations in pages/team/index.vue, pages/instance/components/InstanceForm.vue, the team views, and the three banner components. Replace the six direct path constructions with the specified named routes, then refactor the path comparisons to use the listed route names. Done means no listed team-slug path composition remains and navigation checks use route names.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100