feat(toolbar): Iterate on feature-flags panel styles (#74910)

**Before**
| Items | Empty |
| --- | --- |
|
![SCR-20240724-neht](https://github.com/user-attachments/assets/b22fb42c-7d89-4b2b-8190-9312233ee2ae)
|
![SCR-20240724-neip](https://github.com/user-attachments/assets/a01e9d6b-0cb1-4ff4-bbc6-b31958ce455f)

**After**
| Items | Empty |
| --- | --- |
|
![SCR-20240724-ncqw](https://github.com/user-attachments/assets/e671b0b6-e6cb-4020-bdfc-bc7f6f72f094)
|
![SCR-20240724-ncsa](https://github.com/user-attachments/assets/2b9cd7b1-0f52-4c81-8b96-a258c70c55a9)

related to getsentry/team-replay#434

static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx

@@ -1,18 +1,15 @@
 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';
 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<HTMLInputElement>(null);
 
+ const filteredItems = featureFlags
+ ?.filter(s => s.toLowerCase().includes(searchTerm))
+ .sort();
+
  return (
  <PanelLayout title="Feature Flags">
  <div css={[smallCss, panelSectionCss, panelInsetContentCss]}>
- <Input
- ref={searchInput}
- size="sm"
- placeholder="Search flags"
- onChange={e => setSearchTerm(e.target.value.toLowerCase())}
- />
+ <span>Flags enabled for {organizationSlug}</span>
  </div>
-
  <PanelTable
- headers={[<span key="Flags">Flags enabled for {organizationSlug}</span>]}
- css={[resetFlexColumnCss, infiniteListScrollableWindowCss, panelScrollableCss]}
+ headers={[
+ <div key="column">
+ <Input
+ ref={searchInput}
+ size="sm"
+ placeholder="Search flags"
+ onChange={e => setSearchTerm(e.target.value.toLowerCase())}
+ />
+ </div>,
+ ]}
+ 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 (
- <Cell key={flag} style={{alignItems: 'flex-start'}}>
+ <Cell key={flag} css={[panelInsetContentCss, {alignItems: 'flex-start'}]}>
  {featureFlagTemplateUrl?.(flag) ? (
  <ExternalLink
- style={{textDecoration: 'inherit', color: 'inherit'}}
+ css={[smallCss, inlineLinkCss]}
  href={featureFlagTemplateUrl(flag)}
  onClick={() => {
  trackAnalytics?.({
@@ -61,7 +73,10 @@ export default function FeatureFlagsPanel() {
  )}
  </Cell>
  );
- })}
+ })
+ ) : (
+ <EmptyStateWarning small>No items to show</EmptyStateWarning>
+ )}
  </PanelTable>
  </PanelLayout>
  );

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);
 `;