Feature Flags

Feature flags

Implementing feature flags is a way to deploy a piece of code in production while restricting access to only a subset of users. ⁽¹⁾

Create a feature flag

To create and enable a feature flag:

1. Within Admin menu, select Feature Flags
2. Click on ADD NEW FEATURE button on the top right
3. In Add a new feature forum, enter a feature name in camel-case.
4. Submit
5. Feature by default is not globally enabled.

Add a user to a feature

1. At Feature Flag page, click on a feature to expand the table row.
2. Click on add user icon on the right
3. Fill in user registered email in Add a suer to table
4. Submit.

Remove users from a user list

Enables the feature for all users.

Add feature flag Strategies to define how the flag should be applied. For each strategy, include the Type (defaults to All users) and Environments (defaults to all environments). Select Create feature flag. To change these settings, select Edit ( ) next to any feature flag in the list.

On the left sidebar, select Search or go to and find your project. Select Deploy > Feature flags. Select New feature flag. Enter a name that starts with a letter and contains only lowercase letters, digits, underscores (), or dashes (-), and does not end with a dash (-) or underscore (). Optional. Enter a description (255 characters maximum). Add feature flag Strategies to define how the flag should be applied. For each strategy, include the Type (defaults to All users) and Environments (defaults to all environments). Select Create feature flag. To change these settings, select Edit ( ) next to any feature flag in the list.

Next few points are a discussion on how this was implemented in our project to selectively remove the "Search this area" button:

• To implement feature flags, we created a custom react hook useFeatureFlag which returns a boolean, based on if the environment variable REACT_APP_FEATURE_FLAGS is present in the .env.local file (the .env.local file was added to the local environment with the aforementioned environment variable).
• The /client/.env.local path was also added to the .gitignore file so that the file is not part of the repo, however, .env.local file can be added in another environment, to use the environment variables as required. (A copy of .env.local file, named dotenvdotlocal, used for PR 1827, can be found in the development folder of our google drive here).
• Finally, we passed the advancedFilter parameter in the custom hook function within the resultmap.js file as follows: const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter"); reference link. The boolean value thus returned (depending on if the env variable is present in .env.local file) was then used with the "search this area" button (in this line) to turn on or off its visibility.

Similarly, this custom hook can be used while developing other features.

References/Resources

1. https://www.oreilly.com/library/view/managing-feature-flags/9781492028598/ch01.html
2. PR where this was implemented.
3. Link to development folder in Google drive.