diff --git a/packages/ui/app/src/atoms/launchdarkly.ts b/packages/ui/app/src/atoms/launchdarkly.ts index 34233e4852..842308cb98 100644 --- a/packages/ui/app/src/atoms/launchdarkly.ts +++ b/packages/ui/app/src/atoms/launchdarkly.ts @@ -42,7 +42,7 @@ const SET_LAUNCH_DARKLY_INFO_ATOM = atom(undefined, async (get, set, info: Launc }); // TODO: support non-boolean flags -export const useLaunchDarklyFlag = (flag: string): boolean => { +export const useLaunchDarklyFlag = (flag: string, not = false): boolean => { useInitLaunchDarklyClient(); const client = useAtomValue(LD_CLIENT_ATOM); @@ -50,11 +50,12 @@ export const useLaunchDarklyFlag = (flag: string): boolean => { // TODO: bootstrap the flag value from the server, and/or local storage const getFlagEnabled = useCallback(() => { if (!client) { - return false; + return not; } // force the flag to be a boolean: - return !!client.variation(flag, false); - }, [client, flag]); + const isTrue = !!client.variation(flag, false); + return not ? !isTrue : isTrue; + }, [client, flag, not]); const [enabled, setEnabled] = useState(getFlagEnabled); diff --git a/packages/ui/app/src/mdx/components/launchdarkly/LaunchDarkly.tsx b/packages/ui/app/src/mdx/components/launchdarkly/LaunchDarkly.tsx index a23a02fd48..f19899c17c 100644 --- a/packages/ui/app/src/mdx/components/launchdarkly/LaunchDarkly.tsx +++ b/packages/ui/app/src/mdx/components/launchdarkly/LaunchDarkly.tsx @@ -4,19 +4,16 @@ import { LinkPreloadApiRoute } from "../../../components/LinkPreload"; export interface LaunchDarklyProps { flag: string; + not?: boolean; } -export function LaunchDarkly({ flag, children }: PropsWithChildren): ReactNode { - const ldClient = useLaunchDarklyFlag(flag); - - if (!ldClient) { - return null; - } +export function LaunchDarkly({ not = false, flag, children }: PropsWithChildren): ReactNode { + const show = useLaunchDarklyFlag(flag, not); return ( <> - {children} + {show && children} ); }