From 0c8111513f461da88aae8f6c5581b91f058396f4 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 24 Jul 2024 15:04:58 -0700
Subject: [PATCH] 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 https://github.com/getsentry/team-replay/issues/434
---
 .../featureFlags/featureFlagsPanel.tsx        | 57 ++++++++++++-------
 .../app/components/devtoolbar/styles/panel.ts |  2 +-
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx
index 35ea1e1d753d23..4d2884d28689b8 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<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>
   );
diff --git a/static/app/components/devtoolbar/styles/panel.ts b/static/app/components/devtoolbar/styles/panel.ts
index e0a1269e84b74e..8875b7ebc6db0d 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);
 `;