feat: Adding feature flag infrastructure #4428

pavolum · 2020-10-19T19:11:44Z

Description

This PR adds a feature flag implementation that allows developers to put preview and in development features behind configurable flags.

This PR consists of three groups of changes:

Lib workspace: Addition of shared feature flag utilities
Server changes: Addition of a controller and service to handle server side feature flag state management where applications featureFlagState is maintained in data.json.
Client changes: Addition of feature flag state (initialized on data.json values on app start) and dispatch, UI to toggle feature flags and server calls for maintaining parity with server side data,json feature flag state
documentation added to docs/internal directory

Adding a feature Flag

Add a new FeatureFlag object to @bfc/shared: DefaultFeatureFlags.ts and indicate the name, description, default boolean value and type (hidden vs not hidden) of your feature flag
- hidden attribute is used to indicate whether this feature can be turned on/off by the end user through Composer UI. I feature flag that has hidden: true does not get rendered for front end toggling and are configurable instead through env variables.
Put any server or front end code behind the respective feature flag using provided feature flag utils.
- For features that are added as front end react components a HOC is available that abstracts feature flag checking and renders children based on the current value of the provided featureFlagName.
  - i.e. <Feature featureFlagMap={featureFlagMap} featureFlagName="Show Tutorial"><NewFeature /> </Feature>
- For features that are not integrated as react components a checkFeatureFlag util function is available
  - i.e. getFeatureFlagValue(featureFlagName, featureFlagMap)

Feature flag flow

User flow when working with feature flags:

On app start
- Current applications feature flag configuration is pulled from data.json.
- Current application feature flag configuration adds and/or removes any feature flags that have been added/removed from defaultFeatureFlags.tsx since last app start
- Front end feature flag state is initialized from the current applications feature flag configuration
Changing Feature flag value
- Front end feature flag state drives the UI in the application settings page where users can toggle the values of any given, non hidden, feature flag.
- When the user toggles a feature flag value through the UI toggle (non hidden feature flags) or env variables (hidden feature flags) it triggers a change to front end and back end feature flag state.

Task Item

Current:
fixes #4291
fixes #4427
fixes #4426
fixes #4425

Screenshots

Electron app settings

Web app app settings

…d feature flag toggle per new designs.

Composer/packages/client/src/App.tsx

Composer/packages/server/src/store/data.template.ts

Composer/packages/server/src/services/featureFlags.ts

Composer/packages/server/src/router/api.ts

Composer/packages/client/src/pages/setting/app-settings/FeatureFlagToggle.tsx

Composer/packages/lib/shared/src/featureFlagUtils/DefaultFeatureFlags.ts

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx

Composer/packages/client/src/recoilModel/dispatchers/storage.ts

Composer/packages/lib/shared/src/featureFlagUtils/Feature.tsx

…variables

Composer/packages/server/src/locales/en-US.json

…simplifying types

…are of recoil state

Composer/packages/client/src/pages/setting/app-settings/SettingToggle.tsx

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx

hatpick · 2020-10-20T20:30:45Z

Are you planning to allow grouping on the feature flags (according to UX)?

… hook for filtered templates, replaced env variable featue flag with new feature flag

…ture flag hook for reuse, type and name fixes

pavolum · 2020-10-23T16:52:50Z

Are you planning to allow grouping on the feature flags (according to UX)?

Not for the first implementation and design is okay with that. I will create a task for this in the R12 bucket for tracking

…gn spec

autogenerated file updates

coveralls · 2020-10-24T00:43:44Z

Coverage decreased (-0.2%) to 55.01% when pulling 7f5511f on pavolum/featureFlags into ff51727 on main.

* initial front end feature flag implementation * Initial server implementation * Converting state to object over array * Cleaning up dev test changes * created HOC to abstract feature flag checking for UI features. Changed feature flag toggle per new designs. * Added feature flag value population for hidden feature flags via env variables * Making PR changes: variable and file name changes, general clean up, simplifying types * adding format message for feature flag strings * moving ComposerFeature HOC to client workspace so it is implicitly aware of recoil state * changed default feature flags to function for format message, created hook for filtered templates, replaced env variable featue flag with new feature flag * adding selector for feature flag filtered template state, created feature flag hook for reuse, type and name fixes * removing unneeded div * Adding util functions and reusing hook in HOC * Updating UI for electron and web view of feature flag toggle per design spec * Added feature flag documentation * removing unused imports and variables * Updated unit tests, added build locale autogenerated file updates Co-authored-by: Patrick Volum <[email protected]> Co-authored-by: Chris Whitten <[email protected]>

pavolumMsft added 6 commits October 6, 2020 09:47

initial front end feature flag implementation

101243c

Merging latest

912d101

Initial server implementation

a1d73da

Converting state to object over array

a788f58

Cleaning up dev test changes

239a45b

created HOC to abstract feature flag checking for UI features. Change…

19a1561

…d feature flag toggle per new designs.

hatpick reviewed Oct 19, 2020

View reviewed changes

hatpick reviewed Oct 20, 2020

View reviewed changes

Composer/packages/lib/shared/src/featureFlagUtils/Feature.tsx Outdated Show resolved Hide resolved

Added feature flag value population for hidden feature flags via env …

f65cf8a

…variables

srinaath reviewed Oct 20, 2020

View reviewed changes

Composer/packages/server/src/locales/en-US.json Show resolved Hide resolved

pavolumMsft added 3 commits October 20, 2020 10:37

Making PR changes: variable and file name changes, general clean up, …

7e24fce

…simplifying types

adding format message for feature flag strings

8a4684e

moving ComposerFeature HOC to client workspace so it is implicitly aw…

bb97679

…are of recoil state

pavolum marked this pull request as ready for review October 20, 2020 17:59

pavolum requested review from GeoffCoxMSFT, a-b-r-o-w-n, beyackle, boydc2014, cwhitten and tonyanziano as code owners October 20, 2020 17:59

hatpick reviewed Oct 20, 2020

View reviewed changes

Composer/packages/client/src/pages/setting/app-settings/SettingToggle.tsx Outdated Show resolved Hide resolved

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx Outdated Show resolved Hide resolved

pavolumMsft added 4 commits October 21, 2020 16:42

changed default feature flags to function for format message, created…

ecf4f25

… hook for filtered templates, replaced env variable featue flag with new feature flag

merging latest

76008bf

adding selector for feature flag filtered template state, created fea…

08da677

…ture flag hook for reuse, type and name fixes

removing unneeded div

f1ec8c8

pavolum closed this Oct 23, 2020

pavolum reopened this Oct 23, 2020

Adding util functions and reusing hook in HOC

7f1b773

pavolumMsft added 2 commits October 23, 2020 14:46

Updating UI for electron and web view of feature flag toggle per desi…

45ae235

…gn spec

Added feature flag documentation

5c4373a

pavolum requested a review from benbrown as a code owner October 23, 2020 22:13

Merging latest

3bf1f67

pavolum changed the title ~~Pavolum/feature flags~~ [feature] Adding feature flag infrastructure Oct 23, 2020

pavolum changed the title ~~[feature] Adding feature flag infrastructure~~ feat: Adding feature flag infrastructure Oct 23, 2020

pavolumMsft added 2 commits October 23, 2020 15:37

removing unused imports and variables

be7db2a

Updated unit tests, added build locale

1101fe5

autogenerated file updates

Merge branch 'main' into pavolum/featureFlags

7f5511f

cwhitten approved these changes Oct 24, 2020

View reviewed changes

cwhitten merged commit b534797 into main Oct 24, 2020

cwhitten deleted the pavolum/featureFlags branch October 24, 2020 16:27

cwhitten mentioned this pull request Nov 13, 2020

release: 1.2.0 #4796

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Adding feature flag infrastructure #4428

feat: Adding feature flag infrastructure #4428

Uh oh!

pavolum commented Oct 19, 2020 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hatpick commented Oct 20, 2020

Uh oh!

pavolum commented Oct 23, 2020

Uh oh!

coveralls commented Oct 24, 2020 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat: Adding feature flag infrastructure #4428

feat: Adding feature flag infrastructure #4428

Uh oh!

Conversation

pavolum commented Oct 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Adding a feature Flag

Feature flag flow

Task Item

Screenshots

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hatpick commented Oct 20, 2020

Uh oh!

pavolum commented Oct 23, 2020

Uh oh!

coveralls commented Oct 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

pavolum commented Oct 19, 2020 •

edited

Loading

coveralls commented Oct 24, 2020 •

edited

Loading