Edit & Create-UI: Use VueRouter guard to implement feature flags rather than replicating code in every view
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
## What is the problem?
In all three business UIs, we implement feature flags using code like this:
```javascript
if (!GetFeatureFlag('supported-correction-entities')?.includes(this.getEntityType)) {
window.alert('Corrections for this entity type are not available at the moment.\n' +
'Please check again later.')
this.$root.$emit('go-to-dashboard', true)
return
}
```
## What is the impact?
Similar code is duplicated in every edit-ui view or, in the case of create-ui, incorrectly added to App.vue.
## Proposed solution
Create a VueRouter guard instead. This approach eliminates duplication and is cleaner.
Add an entity_type route paramater and a feature flag to the route's meta data. Like this:
```javascript
{
path: '/correction/:entity_type',
name: RouteNames.CORRECTION,
component: Correction,
meta: {
launchDarklyFlag: 'supported-correction-entities',
requiresAuth: true,
isStaffOnly: true,
filingType: FilingTypes.CORRECTION
}
}
````
Then, create a guard like this:
```javascript
router.beforeEach((to, from) => {
GetFeatureFlag(to.meta.launchDarklyFlag)?.includes(to.params.entity_type)
window.alert('This page is not available at present. Please check again later')
return false
})
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.