diff --git a/developer-extension/src/common/extension.types.ts b/developer-extension/src/common/extension.types.ts
index aeb15404ae..5a86b64247 100644
--- a/developer-extension/src/common/extension.types.ts
+++ b/developer-extension/src/common/extension.types.ts
@@ -57,4 +57,6 @@ export interface Settings {
logsConfigurationOverride: object | null
debugMode: boolean
datadogMode: boolean
+ // Datadog site used for the feature-flag OAuth flow + catalog fetch.
+ flagsSite: string
}
diff --git a/developer-extension/src/common/panelTabConstants.ts b/developer-extension/src/common/panelTabConstants.ts
index f0fb92b2d7..2041ad3b3e 100644
--- a/developer-extension/src/common/panelTabConstants.ts
+++ b/developer-extension/src/common/panelTabConstants.ts
@@ -3,6 +3,7 @@ export const enum PanelTabs {
Infos = 'infos',
Settings = 'settings',
Replay = 'replay',
+ Flags = 'flags',
}
export const DEFAULT_PANEL_TAB = PanelTabs.Events
diff --git a/developer-extension/src/panel/components/panel.tsx b/developer-extension/src/panel/components/panel.tsx
index cca7d405d2..6656dd1f8e 100644
--- a/developer-extension/src/panel/components/panel.tsx
+++ b/developer-extension/src/panel/components/panel.tsx
@@ -13,6 +13,7 @@ import { SettingsTab } from './tabs/settingsTab'
import { InfosTab } from './tabs/infosTab'
import { EventsTab, DEFAULT_COLUMNS } from './tabs/eventsTab'
import { ReplayTab } from './tabs/replayTab'
+import { FlagsTab } from './tabs/flagsTab'
import * as classes from './panel.module.css'
@@ -53,6 +54,11 @@ export function Panel() {
Live replay
+ {settings.datadogMode && (
+
+ Feature Flags
+
+ )}
+ {settings.datadogMode && (
+
+
+
+ )}
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx b/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx
new file mode 100644
index 0000000000..83228de118
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx
@@ -0,0 +1,78 @@
+import { Anchor, Badge, Button, Center, Group, Select, Stack, Text } from '@mantine/core'
+import React, { useState } from 'react'
+import { useSettings } from '../../../hooks/useSettings'
+import type { FlagAuthState } from './useFlagAuth'
+import { FLAG_SITES } from './oauth'
+
+export function ConnectScreen({ auth }: { auth: FlagAuthState }) {
+ const [advancedOpen, setAdvancedOpen] = useState(false)
+
+ return (
+
+
+
+ Authenticate with Datadog to access your feature flags
+
+
+ {auth.error && (
+
+ {auth.error}
+
+ )}
+
+ setAdvancedOpen((open) => !open)}>
+ {advancedOpen ? '− Hide advanced' : 'Advanced: site'}
+
+ {advancedOpen && (
+
+
+
+ )}
+
+
+ )
+}
+
+export function ConnectionHeader({ auth }: { auth: FlagAuthState }) {
+ return (
+
+
+
+
+ Connected via OAuth
+
+
+ {auth.site}
+
+
+
+
+ {/* Surface disconnect failures here too — otherwise a failed Disconnect looks like a no-op. */}
+ {auth.error && (
+
+ {auth.error}
+
+ )}
+
+ )
+}
+
+function SiteField() {
+ const [{ flagsSite }, setSetting] = useSettings()
+
+ return (
+