ref(toolbar): add feature flag search (#74697)

add search bar for the feature flag list


https://github.com/user-attachments/assets/f9cc9bdb-b8e6-47e1-94d8-6eaa23f863c4

post css update:


https://github.com/user-attachments/assets/68897a60-4c1d-477a-af99-436b88fc9b03

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

@@ -1,8 +1,11 @@
+import {useRef, useState} from 'react';
+
 import useEnabledFeatureFlags from 'sentry/components/devtoolbar/components/featureFlags/useEnabledFeatureFlags';
 import {
   infiniteListScrollableWindowCss,
   panelScrollableCss,
 } from 'sentry/components/devtoolbar/styles/infiniteList';
+import Input from 'sentry/components/input';
 import {PanelTable} from 'sentry/components/panels/panelTable';
 import {Cell} from 'sentry/components/replays/virtualizedGrid/bodyCell';
 
@@ -15,26 +18,34 @@ import PanelLayout from '../panelLayout';
 export default function FeatureFlagsPanel() {
   const featureFlags = useEnabledFeatureFlags();
   const {organizationSlug} = useConfiguration();
+  const [searchTerm, setSearchTerm] = useState('');
+  const searchInput = useRef<HTMLInputElement>(null);
 
   return (
     <PanelLayout title="Feature Flags">
       <div css={[smallCss, panelSectionCss, panelInsetContentCss]}>
-        <span>
-          Feature flags enabled for <code>{organizationSlug}</code>
-        </span>
+        <Input
+          ref={searchInput}
+          size="sm"
+          placeholder="Search flags"
+          onChange={e => setSearchTerm(e.target.value.toLowerCase())}
+        />
       </div>
 
       <PanelTable
-        headers={['Flags']}
+        headers={[<span key="Flags">Flags enabled for {organizationSlug}</span>]}
         css={[resetFlexColumnCss, infiniteListScrollableWindowCss, panelScrollableCss]}
       >
-        {featureFlags?.sort().map(flag => {
-          return (
-            <Cell key={flag} style={{alignItems: 'flex-start'}}>
-              {flag}
-            </Cell>
-          );
-        })}
+        {featureFlags
+          ?.filter(s => s.toLowerCase().includes(searchTerm))
+          .sort()
+          .map(flag => {
+            return (
+              <Cell key={flag} style={{alignItems: 'flex-start'}}>
+                {flag}
+              </Cell>
+            );
+          })}
       </PanelTable>
     </PanelLayout>
   );

static/app/components/devtoolbar/styles/infiniteList.ts

@@ -24,6 +24,7 @@ export const infiniteListScrollableWindowCss = css`
 `;
 
 export const panelScrollableCss = css`
+  position: relative;
   height: 100%;
   overflow: scroll;
   border-radius: 0;