diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx index 35ea1e1d753d2..4d2884d28689b 100644 --- a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx +++ b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx @@ -1,10 +1,8 @@ import {useRef, useState} from 'react'; import useEnabledFeatureFlags from 'sentry/components/devtoolbar/components/featureFlags/useEnabledFeatureFlags'; -import { - infiniteListScrollableWindowCss, - panelScrollableCss, -} from 'sentry/components/devtoolbar/styles/infiniteList'; +import {inlineLinkCss} from 'sentry/components/devtoolbar/styles/link'; +import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import Input from 'sentry/components/input'; import ExternalLink from 'sentry/components/links/externalLink'; import {PanelTable} from 'sentry/components/panels/panelTable'; @@ -12,7 +10,6 @@ import {Cell} from 'sentry/components/replays/virtualizedGrid/bodyCell'; import useConfiguration from '../../hooks/useConfiguration'; import {panelInsetContentCss, panelSectionCss} from '../../styles/panel'; -import {resetFlexColumnCss} from '../../styles/reset'; import {smallCss} from '../../styles/typography'; import PanelLayout from '../panelLayout'; @@ -22,30 +19,45 @@ export default function FeatureFlagsPanel() { const [searchTerm, setSearchTerm] = useState(''); const searchInput = useRef(null); + const filteredItems = featureFlags + ?.filter(s => s.toLowerCase().includes(searchTerm)) + .sort(); + return (
- setSearchTerm(e.target.value.toLowerCase())} - /> + Flags enabled for {organizationSlug}
- Flags enabled for {organizationSlug}]} - css={[resetFlexColumnCss, infiniteListScrollableWindowCss, panelScrollableCss]} + headers={[ +
+ setSearchTerm(e.target.value.toLowerCase())} + /> +
, + ]} + stickyHeaders + css={[ + { + border: 'none', + padding: 0, + '&>:first-child': { + minHeight: 'unset', + padding: 'var(--space50) var(--space150)', + }, + }, + ]} > - {featureFlags - ?.filter(s => s.toLowerCase().includes(searchTerm)) - .sort() - .map(flag => { + {filteredItems?.length ? ( + filteredItems.map(flag => { return ( - + {featureFlagTemplateUrl?.(flag) ? ( { trackAnalytics?.({ @@ -61,7 +73,10 @@ export default function FeatureFlagsPanel() { )} ); - })} + }) + ) : ( + No items to show + )}
); diff --git a/static/app/components/devtoolbar/styles/panel.ts b/static/app/components/devtoolbar/styles/panel.ts index e0a1269e84b74..8875b7ebc6db0 100644 --- a/static/app/components/devtoolbar/styles/panel.ts +++ b/static/app/components/devtoolbar/styles/panel.ts @@ -35,5 +35,5 @@ export const panelSectionCss = css` `; export const panelInsetContentCss = css` - padding-inline: var(--space100); + padding-inline: var(--space150); `;