FlowFuse / FlowFuse/flowfuse

Replace template literal / string concat path composition with named routes

Open
#8,098 0 comments 0 reactions 0 assignees View on GitHub
area:frontend size:S type:enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.