Merge pull request #7087 from StoDevX/drew/feature-flags

🧪  internal developer feature flagging

Author: drewvolz

modules/app-config/__tests__/useCourseSearchRecentsScreen.test.tsx

@@ -0,0 +1,70 @@
+import React, {ReactElement} from 'react'
+import {describe, expect, test} from '@jest/globals'
+import {renderHook, waitFor} from '@testing-library/react-native'
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+
+import {useFeature} from '../index'
+import {AppConfigEntry} from '../types'
+
+jest.mock('../../../modules/constants', () => ({
+	isDevMode: jest.fn(),
+}))
+
+jest.mock('../../../source/lib/storage', () => ({
+	getFeatureFlag: jest.fn(),
+}))
+
+describe('useCourseSearchRecentsScreen', () => {
+	let queryClient: QueryClient
+
+	beforeAll(() => {
+		queryClient = new QueryClient()
+	})
+
+	afterAll(() => {
+		queryClient.clear()
+		queryClient.removeQueries()
+	})
+
+	const queryWrapper = ({children}: {children: ReactElement}) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	)
+
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const isDevModeMock = require('../../../modules/constants').isDevMode
+	const getFeatureFlagMock =
+		// eslint-disable-next-line @typescript-eslint/no-var-requires
+		require('../../../source/lib/storage').getFeatureFlag
+
+	test('it should return true in dev when feature is enabled', async () => {
+		isDevModeMock.mockReturnValue(true)
+		getFeatureFlagMock.mockReturnValue(true)
+
+		const {result} = renderHook(
+			() => useFeature(AppConfigEntry.Courses_ShowRecentSearchScreen),
+			{
+				wrapper: queryWrapper,
+			},
+		)
+
+		await waitFor(() => {
+			expect(result.current).toBe(true)
+		})
+	})
+
+	test('it should return false in dev when feature is disabled', async () => {
+		isDevModeMock.mockReturnValue(true)
+		getFeatureFlagMock.mockReturnValue(false)
+
+		const {result} = renderHook(
+			() => useFeature(AppConfigEntry.Courses_ShowRecentSearchScreen),
+			{
+				wrapper: queryWrapper,
+			},
+		)
+
+		await waitFor(() => {
+			expect(result.current).toBe(false)
+		})
+	})
+})

modules/app-config/index.ts

@@ -0,0 +1,40 @@
+import {getFeatureFlag} from '../../source/lib/storage'
+import {AppConfigEntry, FeatureFlag} from './types'
+import {useQuery} from '@tanstack/react-query'
+import {isDevMode} from '@frogpond/constants'
+
+export type {AppConfigEntry, FeatureFlag} from './types'
+
+// helper method to query exported __DEV__ feature flags
+export const useFeature = (featureKey: AppConfigEntry): boolean => {
+	let {data: featureValue = false} = useQuery({
+		queryKey: ['app', 'app:feature-flag', featureKey],
+		queryFn: () => getFeatureFlag(featureKey),
+		onSuccess: (newValue) => {
+			return isDevMode() ? newValue : false
+		},
+	})
+
+	return isDevMode() ? featureValue : false
+}
+
+// datastore for the __DEV__ feature flags
+export const AppConfig = async (): Promise<FeatureFlag[]> => {
+	if (!isDevMode()) {
+		return []
+	}
+
+	return [
+		{
+			title: 'Show the course search recents screen',
+			configKey: AppConfigEntry.Courses_ShowRecentSearchScreen,
+			active: await getFeatureFlag(
+				AppConfigEntry.Courses_ShowRecentSearchScreen,
+			),
+		},
+	]
+}
+
+// exported feature flags
+export const useCourseSearchRecentsScreen = (): boolean =>
+	useFeature(AppConfigEntry.Courses_ShowRecentSearchScreen)

modules/app-config/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@frogpond/app-config",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.71.7"
+  },
+  "dependencies": {}
+}

modules/app-config/types.ts

@@ -0,0 +1,19 @@
+export interface FeatureFlag {
+	configKey: AppConfigEntry
+	title: string
+	active: boolean
+}
+
+/**
+ * __DEV__ app config keys
+ *
+ * Reserved for dev-only flags for internal experimentation, these
+ * will never be A/B flags nor will they return true in production.
+ *
+ * The format is SECTION_KEY where the first underscore will be
+ * split at render time for our view to group by, but the entirety
+ * of the value (section + key) will be stored.
+ */
+export enum AppConfigEntry {
+	Courses_ShowRecentSearchScreen = 'Courses_ShowRecentSearchScreen',
+}

package-lock.json

@@ -113,6 +113,7 @@
     "@jest/globals": "29.6.4",
     "@sentry/cli": "2.20.6",
     "@tanstack/eslint-plugin-query": "4.34.1",
+    "@testing-library/react-native": "12.3.0",
     "@types/base-64": "1.0.0",
     "@types/http-cache-semantics": "4.0.1",
     "@types/jest": "29.5.4",

package.json

@@ -6,13 +6,29 @@ import {
 	setItem,
 	setStoragePrefix,
 } from '@frogpond/storage'
+import {AppConfigEntry} from '@frogpond/app-config'
 import type {FilterComboType} from '../views/sis/course-search/lib/format-filter-combo'
 import type {CourseType, TermType} from './course-search/types'
 
 export {clearAsyncStorage}
 
 setStoragePrefix('aao:')
 
+/// MARK: Feature flags
+
+const featureFlagsKey = 'app:feature-flag'
+export function setFeatureFlag(
+	name: AppConfigEntry,
+	value: boolean,
+): Promise<void> {
+	const key = `${featureFlagsKey}:${name}`
+	return setItem(key, value)
+}
+export function getFeatureFlag(name: AppConfigEntry): Promise<boolean> {
+	const key = `${featureFlagsKey}:${name}`
+	return getItemAsBoolean(key)
+}
+
 /// MARK: Settings
 
 const homescreenOrderKey = 'homescreen:view-order'