✨ [FFL-2857] add team filtering and token revocation to the flags tab

Filter the flag catalog by owning team (teams_read scope + flag identity),
and revoke the OAuth grant at Datadog on disconnect rather than only clearing
local tokens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kellyw1806

developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx

@@ -1,18 +1,23 @@
-import { Anchor, Badge, Button, Center, Group, Select, Stack, Text } from '@mantine/core'
-import React, { useState } from 'react'
+import { Badge, Box, Button, Center, Group, Select, Stack, Text } from '@mantine/core'
+import React 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 (
     <Center h="100%" className="dd-privacy-allow">
       <Stack align="center" gap="md" maw={460} px="md">
         <Text size="xl" fw={600} ta="center">
           Authenticate with Datadog to access your feature flags
         </Text>
+        {/* Pick the site before signing in: it selects which Datadog OAuth server + FFE API the flow
+            talks to (see FLAG_SITES), so it must be set before the Sign in button runs that flow. */}
+        <Box w="100%">
+          {/* Locked while signing in: the chosen site is baked into the OAuth flow already running, so
+              switching mid-flow would point the resulting token at a different environment. */}
+          <SiteField disabled={auth.connecting} />
+        </Box>
         <Button color="violet" onClick={auth.connect} loading={auth.connecting}>
           Sign in to Datadog
         </Button>
@@ -21,14 +26,12 @@ export function ConnectScreen({ auth }: { auth: FlagAuthState }) {
             {auth.error}
           </Text>
         )}
-
-        <Anchor component="button" type="button" size="xs" c="dimmed" onClick={() => setAdvancedOpen((open) => !open)}>
-          {advancedOpen ? '− Hide advanced' : 'Advanced: site'}
-        </Anchor>
-        {advancedOpen && (
-          <Stack gap="sm" style={{ width: '100%' }}>
-            <SiteField />
-          </Stack>
+        {/* A revocation that failed leaves the grant live at Datadog while this panel is signed out,
+            so the notice belongs on this screen — it's the one the user lands on after disconnecting. */}
+        {auth.warning && (
+          <Text c="orange" size="xs" ta="center">
+            {auth.warning} You can revoke it from Datadog under Organization Settings → Authorized Applications.
+          </Text>
         )}
       </Stack>
     </Center>
@@ -47,11 +50,22 @@ export function ConnectionHeader({ auth }: { auth: FlagAuthState }) {
             {auth.site}
           </Text>
         </Group>
-        <Button size="compact-xs" variant="subtle" color="gray" onClick={auth.disconnect}>
+        <Button
+          size="compact-xs"
+          variant="subtle"
+          color="red"
+          onClick={auth.disconnect}
+          loading={auth.disconnecting}
+          // Disconnect revokes the grant at Datadog before clearing the local session, so guard
+          // against a second click re-running it against tokens the first click already revoked.
+          disabled={auth.disconnecting}
+        >
           Disconnect
         </Button>
       </Group>
-      {/* Surface disconnect failures here too — otherwise a failed Disconnect looks like a no-op. */}
+      {/* Surface disconnect failures here too — otherwise a failed Disconnect looks like a no-op.
+          (A revoke-succeeded-but-grant-live warning can't appear here: it always accompanies a
+          successful local sign-out, which flips to the ConnectScreen where the notice lives.) */}
       {auth.error && (
         <Text c="red" size="xs" ta="right">
           {auth.error}
@@ -61,7 +75,7 @@ export function ConnectionHeader({ auth }: { auth: FlagAuthState }) {
   )
 }
 
-function SiteField() {
+function SiteField({ disabled }: { disabled?: boolean }) {
   const [{ flagsSite }, setSetting] = useSettings()
 
   return (
@@ -72,6 +86,7 @@ function SiteField() {
       value={flagsSite}
       onChange={(value) => value && setSetting('flagsSite', value)}
       allowDeselect={false}
+      disabled={disabled}
       size="xs"
     />
   )

developer-extension/src/panel/components/tabs/flagsTab/ffeApi.ts

@@ -0,0 +1,28 @@
+// Shared helper for the FFE API calls the Flags tab makes (catalog, current user, teams). Centralizes
+// the bearer-auth header + response handling that flagCatalog.ts and flagIdentity.ts would otherwise
+// each repeat.
+
+// Thrown on a 403 so callers can tell "the token lacks the scope" apart from a real failure (used by
+// flagIdentity to degrade the team filter rather than fail the whole tab).
+export class ForbiddenError extends Error {}
+
+/**
+ * GETs a JSON resource from the FFE API with the OAuth bearer token. Throws ForbiddenError on 403 and
+ * a generic Error on any other non-2xx, prefixing the message with `errorLabel`. Keep customer data
+ * (e.g. a flag key) out of `errorLabel` — these errors are logged and the panel forwards logs to its
+ * own telemetry.
+ */
+export async function fetchFfeJson<T>(url: string, token: string, errorLabel: string): Promise<T> {
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  })
+  if (response.status === 403) {
+    throw new ForbiddenError(`${errorLabel}: 403 ${response.statusText}`)
+  }
+  if (!response.ok) {
+    throw new Error(`${errorLabel}: ${response.status} ${response.statusText}`)
+  }
+  return (await response.json()) as T
+}

developer-extension/src/panel/components/tabs/flagsTab/flagCatalogList.tsx

@@ -1,6 +1,19 @@
-import { ActionIcon, Box, Button, Code, CopyButton, Group, Loader, Space, Text, Tooltip } from '@mantine/core'
+import {
+  ActionIcon,
+  Anchor,
+  Box,
+  Button,
+  Code,
+  CopyButton,
+  Group,
+  Loader,
+  Space,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core'
 import { IconArrowBackUp, IconCopy } from '@tabler/icons-react'
-import React, { type ReactNode } from 'react'
+import React, { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import type { CatalogFlag } from './flagsRequests'
 import { useFlagsContext } from './flagsContext'
 import { validateOverrideValue } from './flagTypes'
@@ -113,20 +126,23 @@ function FlagRow({
     <Group
       justify="space-between"
       wrap="nowrap"
-      align="center"
+      // Top-align so the variant buttons stay up beside the name/key instead of drifting to the
+      // vertical middle of a long description.
+      align="flex-start"
       px="sm"
-      py="xs"
+      py="sm"
       style={{
         borderBottom: '1px solid var(--mantine-color-gray-1)',
         backgroundColor: overridden ? 'var(--mantine-color-violet-0)' : undefined,
       }}
     >
-      <Box style={{ minWidth: 0, flex: 1 }}>
+      <Stack gap={6} style={{ minWidth: 0, flex: 1 }}>
         <Text size="sm" fw={600} truncate>
           {flag.name}
         </Text>
         <FlagKey value={flag.key} />
-      </Box>
+        {flag.description && <FlagDescription description={flag.description} />}
+      </Stack>
       <Group gap="xs" wrap="wrap" justify="flex-end" style={{ flexShrink: 0, maxWidth: '55%' }}>
         {overridden && (
           <Tooltip label="Revert override">
@@ -169,6 +185,49 @@ function FlagRow({
   )
 }
 
+// Free-text descriptions can run long. Show a single line by default with a "Show more" toggle that
+// expands the rest inline. The toggle only appears when the one-line clamp actually hides something —
+// measured rather than guessed from length, since a short description can still wrap and a long one
+// might fit.
+function FlagDescription({ description }: { description: string }) {
+  const [expanded, setExpanded] = useState(false)
+  const [overflowing, setOverflowing] = useState(false)
+  const textRef = useRef<HTMLParagraphElement>(null)
+
+  // Measured while collapsed (expanded isn't a dependency): once we know the text overflows one line,
+  // the toggle stays available so "Show less" is still offered after expanding.
+  useLayoutEffect(() => {
+    const el = textRef.current
+    if (el) {
+      setOverflowing(el.scrollHeight > el.clientHeight)
+    }
+  }, [description])
+
+  return (
+    // Extra top margin gives the description a touch more separation from the key above it than the
+    // name↔key gap, so the row reads as "title/key" then "description".
+    <Box mt={4}>
+      <Text ref={textRef} size="xs" c="dimmed" lineClamp={expanded ? undefined : 1}>
+        {description}
+      </Text>
+      {(overflowing || expanded) && (
+        // Accent color in both states so it reads as the row's action. A hair smaller than the
+        // description text and sitting right beneath it, so the two read as clearly distinct.
+        <Anchor
+          component="button"
+          type="button"
+          fz={10}
+          c="violet"
+          onClick={() => setExpanded((value) => !value)}
+          style={{ display: 'inline-block', marginTop: 0 }}
+        >
+          {expanded ? 'Show less' : 'Show more'}
+        </Anchor>
+      )}
+    </Box>
+  )
+}
+
 function FlagKey({ value }: { value: string }) {
   return (
     <Group gap={4} wrap="nowrap" style={{ minWidth: 0 }}>
@@ -179,6 +238,10 @@ function FlagKey({ value }: { value: string }) {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
+          paddingInline: 6,
+          // Pull the chip left by its own padding so the key TEXT lines up with the flag name above,
+          // while the grey box keeps its inner breathing room.
+          marginLeft: -6,
         }}
       >
         {value}