diff --git a/packages/dev-tools/DevToolbar.tsx b/packages/dev-tools/DevToolbar.tsx index 413d9649e33..4ab86866ed0 100644 --- a/packages/dev-tools/DevToolbar.tsx +++ b/packages/dev-tools/DevToolbar.tsx @@ -212,6 +212,7 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) { const [activeTab, setActiveTab] = useState('events') const [flagsSubTab, setFlagsSubTab] = useState<'posthog' | 'configcat'>('posthog') const [eventFilter, setEventFilter] = useState('') + const [flagFilter, setFlagFilter] = useState('') const { posthog: posthogFlags, configcat: configcatFlags } = useFeatureFlags() const [phFlagOverrides, setPhFlagOverrides] = useState>({}) const [ccFlagOverrides, setCcFlagOverrides] = useState>({}) @@ -353,6 +354,20 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) { const ccOverrideCount = Object.keys(ccFlagOverrides).length const totalOverrideCount = phOverrideCount + ccOverrideCount + const normalizedFlagFilter = flagFilter.trim().toLowerCase() + + const filteredPosthogEntries = normalizedFlagFilter + ? Object.entries(posthogFlags).filter(([flagName]) => + flagName.toLowerCase().includes(normalizedFlagFilter) + ) + : Object.entries(posthogFlags) + + const filteredConfigcatEntries = normalizedFlagFilter + ? Object.entries(configcatFlags).filter(([flagName]) => + flagName.toLowerCase().includes(normalizedFlagFilter) + ) + : Object.entries(configcatFlags) + if (!IS_TOOLBAR_ENABLED || !isEnabled) return null return ( @@ -493,7 +508,10 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) {