Migrated env feature flags to openfeature

knowledge_base/ADRs/002-OpenFeature.md

@@ -0,0 +1,31 @@
+# ADR 002: OpenFeature as our feature flagging adapter
+
+Using OpenFeature provides use with the flexibility to swap out feature flagging providers.
+
+## Status
+
+Proposed: 240212 by Kurtis Assad (@kurtisassad)
+
+## Context
+
+We need a more robust feature flagging system than what we currently had. We were using .env variables directly.
+This was a problem because webpack eagerly evaluates these, which means that if we want to change a feature flag
+on production, we would need to perform a re-deploy which would take about 20 minutes. We need a system that would
+allow us to toggle these features at runtime.
+
+## Decision
+
+We have decided to use the OpenFeature for our feature flagging system.
+
+## Rationale
+
+OpenFeature allows us to:
+
+1. **Ability to toggle features at runtime**: The main purpose of this system, we want to be able to turn features on or off at runtime
+2. **Allow us to roll out these features to a subset of users**: We want the ability to be able to roll out some features to specific communities or users.
+3. **Allow us the ability to A/B test features**: We want the ability to A/B test features.
+
+## Consequences
+
+As OpenFeature is an interface across many feature flagging providers, it can impose constraints on some providers,
+which would not allow us to utilize their full functionality.

package.json

@@ -57,6 +57,7 @@
     "@babel/register": "^7.4.0",
     "@canvas-js/core": "0.5.0-alpha4",
     "@istanbuljs/nyc-config-typescript": "^0.1.3",
+    "@openfeature/web-sdk": "^0.4.12",
     "@openzeppelin/contracts": "^2.4.0",
     "@openzeppelin/contracts-governance": "npm:@openzeppelin/contracts@^4.3.2",
     "@osmonauts/lcd": "^0.10.0",

packages/commonwealth/client/scripts/App.tsx

@@ -1,3 +1,5 @@
+import { OpenFeatureProvider } from '@openfeature/react-sdk';
+import { InMemoryProvider, OpenFeature } from '@openfeature/web-sdk';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import useInitApp from 'hooks/useInitApp';
@@ -6,6 +8,7 @@ import React, { StrictMode } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { queryClient } from 'state/api/config';
+import { featureFlags } from './helpers/feature-flags';
 import { CWIcon } from './views/components/component_kit/cw_icons/cw_icon';
 
 const Splash = () => {
@@ -17,19 +20,23 @@ const Splash = () => {
   );
 };
 
+OpenFeature.setProvider(new InMemoryProvider(featureFlags));
+
 const App = () => {
   const { customDomain, isLoading } = useInitApp();
 
   return (
     <StrictMode>
       <QueryClientProvider client={queryClient}>
-        {isLoading ? (
-          <Splash />
-        ) : (
-          <RouterProvider router={router(customDomain)} />
-        )}
-        <ToastContainer />
-        <ReactQueryDevtools />
+        <OpenFeatureProvider client={undefined}>
+          {isLoading ? (
+            <Splash />
+          ) : (
+            <RouterProvider router={router(customDomain)} />
+          )}
+          <ToastContainer />
+          <ReactQueryDevtools />
+        </OpenFeatureProvider>
       </QueryClientProvider>
     </StrictMode>
   );

packages/commonwealth/client/scripts/helpers/feature-flags.ts

@@ -1,12 +1,25 @@
-// As of 240205, we are moving away from the use of env vars for feature flags,
-// and towards the use of Unleash for all flag management.
+// This is our in memory provider setup. It does not automatically ensure your
+// feature flag is set on our Unleash instance (May not be available on prod).
 //
-// See knowledge_base/Feature-Flags.md for info.
+// See knowledge_base/Feature-Flags.md for more info.
+
+const buildFlag = (env: string) => {
+  return {
+    variants: {
+      on: true,
+      off: false,
+    },
+    disabled: false,
+    defaultVariant: env === 'true' ? 'on' : 'off',
+  };
+};
 
 export const featureFlags = {
-  proposalTemplates: process.env.FLAG_PROPOSAL_TEMPLATES === 'true',
-  communityHomepage: process.env.FLAG_COMMUNITY_HOMEPAGE === 'true',
-  newAdminOnboardingEnabled: process.env.FLAG_NEW_ADMIN_ONBOARDING === 'true',
-  communityStake: process.env.FLAG_COMMUNITY_STAKE === 'true',
-  newSignInModal: process.env.FLAG_NEW_SIGN_IN_MODAL === 'true',
+  proposalTemplates: buildFlag(process.env.FLAG_PROPOSAL_TEMPLATES),
+  communityHomepage: buildFlag(process.env.FLAG_COMMUNITY_HOMEPAGE),
+  newAdminOnboarding: buildFlag(process.env.FLAG_NEW_ADMIN_ONBOARDING),
+  communityStake: buildFlag(process.env.FLAG_COMMUNITY_STAKE),
+  newSignInModal: buildFlag(process.env.FLAG_NEW_SIGN_IN_MODAL),
 };
+
+export type AvailableFeatureFlag = keyof typeof featureFlags;

packages/commonwealth/client/scripts/hooks/useFlag.ts

@@ -0,0 +1,8 @@
+import { useBooleanFlagValue } from '@openfeature/react-sdk';
+import { AvailableFeatureFlag } from '../helpers/feature-flags';
+
+export const useFlag = (name: AvailableFeatureFlag) => {
+  return useBooleanFlagValue(name, false, {
+    updateOnConfigurationChanged: false,
+  });
+};

packages/commonwealth/client/scripts/hooks/useWallets.tsx

@@ -30,7 +30,6 @@ import {
 } from '../../../shared/analytics/types';
 import NewProfilesController from '../controllers/server/newProfiles';
 import { setDarkMode } from '../helpers/darkMode';
-import { featureFlags } from '../helpers/feature-flags';
 import {
   getAddressFromWallet,
   loginToAxie,
@@ -50,6 +49,7 @@ import type {
 } from '../views/pages/login/types';
 import { useBrowserAnalyticsTrack } from './useBrowserAnalyticsTrack';
 import useBrowserWindow from './useBrowserWindow';
+import { useFlag } from './useFlag';
 
 type IuseWalletProps = {
   initialBody?: LoginActiveStep;
@@ -62,13 +62,14 @@ type IuseWalletProps = {
 };
 
 const useWallets = (walletProps: IuseWalletProps) => {
+  const newSignInModalEnabled = useFlag('newSignInModal');
   const [avatarUrl, setAvatarUrl] = useState<string>();
   const [address, setAddress] = useState<string>();
   const [activeStep, setActiveStep] = useState<LoginActiveStep>();
   const [profiles, setProfiles] = useState<Array<ProfileRowProps>>();
   const [sidebarType, setSidebarType] = useState<LoginSidebarType>();
   const [username, setUsername] = useState<string>(
-    featureFlags.newSignInModal ? 'Anonymous' : '',
+    newSignInModalEnabled ? 'Anonymous' : '',
   );
   const [email, setEmail] = useState<string>();
   const [wallets, setWallets] = useState<Array<IWebWallet<any>>>();
@@ -382,7 +383,7 @@ const useWallets = (walletProps: IuseWalletProps) => {
           setSidebarType('newOrReturning');
           setActiveStep('selectAccountType');
 
-          if (featureFlags.newSignInModal) {
+          if (newSignInModalEnabled) {
             // Create the account with default values
             await onCreateNewAccount(
               walletToUse,

packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx

@@ -1,8 +1,8 @@
-import { featureFlags } from 'helpers/feature-flags';
 import { Navigate } from 'navigation/helpers';
 import React, { lazy } from 'react';
 import { Route } from 'react-router-dom';
 import { withLayout } from 'views/Layout';
+import { RouteFeatureFlags } from './Router';
 
 const LandingPage = lazy(() => import('views/pages/landing'));
 const WhyCommonwealthPage = lazy(() => import('views/pages/why_commonwealth'));
@@ -102,7 +102,11 @@ const NewProfilePage = lazy(() => import('views/pages/new_profile'));
 const EditNewProfilePage = lazy(() => import('views/pages/edit_new_profile'));
 const ProfilePageRedirect = lazy(() => import('views/pages/profile_redirect'));
 
-const CommonDomainRoutes = () => [
+const CommonDomainRoutes = ({
+  proposalTemplatesEnabled,
+  newAdminOnboardingEnabled,
+  communityHomepageEnabled,
+}: RouteFeatureFlags) => [
   <Route
     key="/"
     path="/"
@@ -342,7 +346,7 @@ const CommonDomainRoutes = () => [
       scoped: true,
     })}
   />,
-  ...(featureFlags.communityHomepage
+  ...(communityHomepageEnabled
     ? [
         <Route
           key="/:scope/feed"
@@ -363,7 +367,7 @@ const CommonDomainRoutes = () => [
   // DISCUSSIONS END
 
   // CONTRACTS
-  ...(featureFlags.proposalTemplates
+  ...(proposalTemplatesEnabled
     ? [
         <Route
           key="/:scope/contracts"
@@ -412,7 +416,7 @@ const CommonDomainRoutes = () => [
   />,
 
   // ADMIN
-  ...(featureFlags.newAdminOnboardingEnabled
+  ...(newAdminOnboardingEnabled
     ? [
         <Route
           key="/:scope/manage/profile"

packages/commonwealth/client/scripts/navigation/CustomDomainRoutes.tsx

@@ -1,8 +1,8 @@
-import { featureFlags } from 'helpers/feature-flags';
 import { Navigate } from 'navigation/helpers';
 import React, { lazy } from 'react';
 import { Route } from 'react-router-dom';
 import { withLayout } from 'views/Layout';
+import { RouteFeatureFlags } from './Router';
 
 const SearchPage = lazy(() => import('views/pages/search'));
 
@@ -94,7 +94,10 @@ const NewProfilePage = lazy(() => import('views/pages/new_profile'));
 const EditNewProfilePage = lazy(() => import('views/pages/edit_new_profile'));
 const ProfilePageRedirect = lazy(() => import('views/pages/profile_redirect'));
 
-const CustomDomainRoutes = () => {
+const CustomDomainRoutes = ({
+  proposalTemplatesEnabled,
+  newAdminOnboardingEnabled,
+}: RouteFeatureFlags) => {
   return [
     <Route
       key="/"
@@ -279,7 +282,7 @@ const CustomDomainRoutes = () => {
     // DISCUSSIONS END
 
     // CONTRACTS
-    ...(featureFlags.proposalTemplates
+    ...(proposalTemplatesEnabled
       ? [
           <Route
             key="/contracts"
@@ -321,7 +324,7 @@ const CustomDomainRoutes = () => {
     // CONTRACTS END
 
     // ADMIN
-    ...(featureFlags.newAdminOnboardingEnabled
+    ...(newAdminOnboardingEnabled
       ? [
           <Route
             key="/manage/profile"

packages/commonwealth/client/scripts/navigation/Router.tsx

@@ -1,3 +1,4 @@
+import { OpenFeature } from '@openfeature/web-sdk';
 import CustomDomainRoutes from 'navigation/CustomDomainRoutes';
 import React from 'react';
 import {
@@ -10,12 +11,38 @@ import { PageNotFound } from 'views/pages/404';
 import CommonDomainRoutes from './CommonDomainRoutes';
 import GeneralRoutes from './GeneralRoutes';
 
-const Router = (customDomain: string) =>
-  createBrowserRouter(
+export type RouteFeatureFlags = {
+  proposalTemplatesEnabled: boolean;
+  newAdminOnboardingEnabled: boolean;
+  communityHomepageEnabled: boolean;
+};
+
+const Router = (customDomain: string) => {
+  const client = OpenFeature.getClient();
+  const proposalTemplatesEnabled = client.getBooleanValue(
+    'proposalTemplates',
+    false,
+  );
+  const newAdminOnboardingEnabled = client.getBooleanValue(
+    'newAdminOnboarding',
+    false,
+  );
+  const communityHomepageEnabled = client.getBooleanValue(
+    'communityHomepageEnabled',
+    false,
+  );
+  const flags = {
+    proposalTemplatesEnabled,
+    newAdminOnboardingEnabled,
+    communityHomepageEnabled,
+  };
+
+  return createBrowserRouter(
     createRoutesFromElements([
       ...GeneralRoutes(),
-      ...(customDomain ? CustomDomainRoutes() : CommonDomainRoutes()),
+      ...(customDomain ? CustomDomainRoutes(flags) : CommonDomainRoutes(flags)),
       <Route path="*" element={withLayout(PageNotFound, {})} />,
-    ])
+    ]),
   );
+};
 export default Router;

packages/commonwealth/client/scripts/views/SublayoutHeader.tsx

@@ -11,7 +11,7 @@ import { HelpMenuPopover } from 'views/menus/help_menu';
 import { AuthModal } from 'views/modals/AuthModal';
 import { FeedbackModal } from 'views/modals/feedback_modal';
 import { LoginModal } from 'views/modals/login_modal';
-import { featureFlags } from '../helpers/feature-flags';
+import { useFlag } from '../hooks/useFlag';
 import app from '../state';
 import { CWDivider } from './components/component_kit/cw_divider';
 import { CWIconButton } from './components/component_kit/cw_icon_button';
@@ -30,6 +30,7 @@ type SublayoutHeaderProps = {
 };
 
 export const SublayoutHeader = ({ onMobile }: SublayoutHeaderProps) => {
+  const newSignInModalEnabled = useFlag('newSignInModal');
   const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false);
   const navigate = useCommonNavigate();
   const {
@@ -149,7 +150,7 @@ export const SublayoutHeader = ({ onMobile }: SublayoutHeaderProps) => {
         onClose={() => setIsFeedbackModalOpen(false)}
         open={isFeedbackModalOpen}
       />
-      {!featureFlags.newSignInModal ? (
+      {!newSignInModalEnabled ? (
         <CWModal
           content={
             <LoginModal onModalClose={() => setIsAuthModalOpen(false)} />

packages/commonwealth/client/scripts/views/components/AdminOnboardingSlider/AdminOnboardingSlider.tsx

@@ -1,4 +1,3 @@
-import { featureFlags } from 'helpers/feature-flags';
 import useUserActiveAccount from 'hooks/useUserActiveAccount';
 import { useCommonNavigate } from 'navigation/helpers';
 import React, { useState } from 'react';
@@ -8,6 +7,7 @@ import { useFetchThreadsQuery } from 'state/api/threads';
 import { useFetchTopicsQuery } from 'state/api/topics';
 import useAdminOnboardingSliderMutationStore from 'state/ui/adminOnboardingCards';
 import Permissions from 'utils/Permissions';
+import { useFlag } from '../../../hooks/useFlag';
 import { CWText } from '../component_kit/cw_text';
 import { CWModal } from '../component_kit/new_designs/CWModal';
 import { CWButton } from '../component_kit/new_designs/cw_button';
@@ -16,6 +16,7 @@ import './AdminOnboardingSlider.scss';
 import { DismissModal } from './DismissModal';
 
 export const AdminOnboardingSlider = () => {
+  const newAdminOnboardingEnabled = useFlag('newAdminOnboarding');
   useUserActiveAccount();
 
   const community = app.config.chains.getById(app.activeChainId());
@@ -78,7 +79,7 @@ export const AdminOnboardingSlider = () => {
       threads.length > 0 &&
       hasAnyIntegration) ||
     !(Permissions.isSiteAdmin() || Permissions.isCommunityAdmin()) ||
-    !featureFlags.newAdminOnboardingEnabled ||
+    !newAdminOnboardingEnabled ||
     [
       ...shouldHideAdminCardsTemporary,
       ...shouldHideAdminCardsPermanently,