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 ( +