IS-322 Setup GrowthBook for FE

.env-example

@@ -20,3 +20,6 @@ export USERNAME=''
 export GITGUARDIAN_API_KEY=""
 
 export REACT_APP_IS_SITE_PRIVATISATION_ACTIVE=false
+
+# GrowthBook
+export REACT_APP_GROWTHBOOK_CLIENT_KEY=xyz

package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@fontsource/ibm-plex-mono": "^5.0.5",
+    "@growthbook/growthbook-react": "^0.17.0",
     "@hello-pangea/dnd": "^16.3.0",
     "@hookform/resolvers": "^2.8.2",
     "@opengovsg/design-system-react": "^1.3.0",

src/App.jsx

@@ -2,6 +2,7 @@ import "@fontsource/ibm-plex-mono"
 import "inter-ui/inter.css"
 
 import { datadogRum } from "@datadog/browser-rum"
+import { GrowthBookProvider } from "@growthbook/growthbook-react"
 import { ThemeProvider } from "@opengovsg/design-system-react"
 import axios from "axios"
 import { useEffect } from "react"
@@ -15,6 +16,8 @@ import { ServicesProvider } from "contexts/ServicesContext"
 // Import route selector
 import { RouteSelector } from "routing/RouteSelector"
 
+import { getGrowthBookInstance } from "utils/growthbook"
+
 import theme from "theme"
 
 import { DATADOG_RUM_SETTINGS } from "./constants/datadog"
@@ -64,22 +67,32 @@ if (REACT_APP_ENV === "staging" || REACT_APP_ENV === "production") {
   datadogRum.startSessionReplayRecording()
 }
 
+// GrowthBook instance
+const growthbook = getGrowthBookInstance(
+  process.env.REACT_APP_GROWTHBOOK_CLIENT_KEY
+)
+
 const App = () => {
   useEffect(() => {
     localStorage.removeItem(LOCAL_STORAGE_SITE_COLORS)
+
+    // Load features from the GrowthBook API and keep them up-to-date
+    growthbook.loadFeatures({ autoRefresh: true })
   }, [])
 
   return (
     <Router basename={process.env.PUBLIC_URL}>
-      <ServicesProvider client={apiClient}>
-        <QueryClientProvider client={queryClient}>
-          <LoginProvider>
-            <ThemeProvider theme={theme}>
-              <RouteSelector />
-            </ThemeProvider>
-          </LoginProvider>
-        </QueryClientProvider>
-      </ServicesProvider>
+      <GrowthBookProvider growthbook={growthbook}>
+        <ServicesProvider client={apiClient}>
+          <QueryClientProvider client={queryClient}>
+            <LoginProvider>
+              <ThemeProvider theme={theme}>
+                <RouteSelector />
+              </ThemeProvider>
+            </LoginProvider>
+          </QueryClientProvider>
+        </ServicesProvider>
+      </GrowthBookProvider>
     </Router>
   )
 }

src/constants/featureFlags.ts

@@ -0,0 +1,10 @@
+import { FeatureFlag, FeatureFlagSupportedTypes } from "types/featureFlags"
+
+// List of all FE feature flags corresponding to GrowthBook
+// TODO: Add after setting up on GrowthBook
+export const featureFlags: Record<string, FeatureFlag> = {
+  sampleFeature: {
+    key: "sampleFeature",
+    type: FeatureFlagSupportedTypes.string,
+  },
+}

src/routing/ProtectedRoute.tsx

@@ -1,11 +1,16 @@
 import { Box, Center, Spinner } from "@chakra-ui/react"
+import { useGrowthBook } from "@growthbook/growthbook-react"
 import axios from "axios"
 import _ from "lodash"
-import { Redirect, Route, RouteProps } from "react-router-dom"
+import { useEffect } from "react"
+import { Redirect, Route, RouteProps, useLocation } from "react-router-dom"
 
 import { useLoginContext } from "contexts/LoginContext"
 
 import { getDecodedParams } from "utils/decoding"
+import { getSiteNameAttributeFromPath } from "utils/growthbook"
+
+import { GBAttributes } from "types/featureFlags"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -21,7 +26,34 @@ export const ProtectedRoute = ({
   component: WrappedComponent,
   ...rest
 }: RouteProps): JSX.Element => {
-  const { displayedName, isLoading } = useLoginContext()
+  const {
+    displayedName,
+    isLoading,
+    userId,
+    userType,
+    email,
+    contactNumber,
+  } = useLoginContext()
+  const growthbook = useGrowthBook()
+  const currPath = useLocation().pathname
+  const siteNameFromPath = getSiteNameAttributeFromPath(currPath)
+
+  useEffect(() => {
+    if (growthbook) {
+      const gbAttributes: GBAttributes = {
+        userId,
+        userType,
+        email,
+        displayedName,
+        contactNumber,
+      }
+      // add siteName if it exists
+      if (siteNameFromPath && siteNameFromPath !== "") {
+        gbAttributes.siteName = siteNameFromPath
+      }
+      growthbook.setAttributes(gbAttributes)
+    }
+  }, [userId, userType, email, displayedName, contactNumber, currPath])
 
   if (isLoading) {
     return (

src/types/featureFlags.ts

@@ -0,0 +1,22 @@
+export const FeatureFlagSupportedTypes = {
+  boolean: "boolean",
+  number: "number",
+  string: "string",
+  json: "json",
+} as const
+
+export type FeatureFlagTypes = typeof FeatureFlagSupportedTypes[keyof typeof FeatureFlagSupportedTypes]
+
+export type FeatureFlag = {
+  key: string
+  type: FeatureFlagTypes
+}
+
+export type GBAttributes = {
+  userId: string
+  userType: string
+  email: string
+  displayedName: string
+  contactNumber: string
+  siteName?: string
+}

src/utils/growthbook.ts

@@ -0,0 +1,20 @@
+import { GrowthBook } from "@growthbook/growthbook-react"
+
+const GROWTHBOOK_API_HOST = "https://cdn.growthbook.io"
+
+export const getGrowthBookInstance = (clientKey: string, isDev = false) => {
+  return new GrowthBook({
+    apiHost: GROWTHBOOK_API_HOST,
+    clientKey,
+    enableDevMode: isDev, // enable only for local dev
+  })
+}
+
+export const getSiteNameAttributeFromPath = (path: string) => {
+  const pathnames = path.split("/")
+
+  if (pathnames.length > 2 && pathnames[1] === "sites") {
+    return pathnames[2]
+  }
+  return ""
+}