bcgov / bcgov/entity

Edit & Create-UI: Use VueRouter guard to implement feature flags rather than replicating code in every view

Open
#16,060 1 comment 1 reaction 0 assignees View on GitHub
ENTITY - DO NOT USE techdebt
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.