From b1efeb53026ac82f7e493dd71548631b791ce775 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Mon, 2 Oct 2023 14:53:11 -0500
Subject: [PATCH] add ExpFlag component for conditional rendering

---
 web/src/app/util/useExpFlag.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/web/src/app/util/useExpFlag.ts b/web/src/app/util/useExpFlag.ts
index 1aed79b80a..e71994d18a 100644
--- a/web/src/app/util/useExpFlag.ts
+++ b/web/src/app/util/useExpFlag.ts
@@ -1,3 +1,4 @@
+import React from 'react'
 import { gql, useQuery } from 'urql'
 
 const query = gql`
@@ -15,3 +16,22 @@ export function useExpFlag(expFlag: ExpFlag): boolean {
 
   return flags.includes(expFlag)
 }
+
+// ExpFlag is used to conditionally render experimental features.
+//
+// Example:
+//
+//   <ExpFlag flag="my-flag">
+//     <MyFeature />
+//   </ExpFlag>
+//
+export function ExpFlag(props: {
+  flag: ExpFlag // The flag that must be enabled for the children to be rendered.
+  children: React.ReactNode
+}): React.ReactNode | null {
+  const enabled = useExpFlag(props.flag)
+
+  if (!enabled) return null
+
+  return props.children
+}