ref(flags): search button leads to focus in drawer (#77839)

Add a search icon button to the feature flag section, which opens the
fly-out drawer with the search focused. This is the same behavior as the
breadcrumbs section.




https://github.com/user-attachments/assets/553cfd39-f4b3-480b-aa0d-ce961e2d6361

static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useState} from 'react';
+import {useMemo, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -24,13 +24,14 @@ import {
  NavigationCrumbs,
  SearchInput,
  ShortId,
-} from 'sentry/components/events/eventReplay/eventDrawer';
+} from 'sentry/components/events/eventDrawer';
 import {
  applyBreadcrumbSearch,
  BREADCRUMB_SORT_LOCALSTORAGE_KEY,
  BREADCRUMB_SORT_OPTIONS,
  BreadcrumbSort,
 } from 'sentry/components/events/interfaces/breadcrumbs';
+import useFocusControl from 'sentry/components/events/useFocusControl';
 import {InputGroup} from 'sentry/components/inputGroup';
 import {IconClock, IconFilter, IconSearch, IconSort, IconTimer} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -49,21 +50,6 @@ export const enum BreadcrumbControlOptions {
  SORT = 'sort',
 }
 
-function useFocusControl(initialFocusControl?: BreadcrumbControlOptions) {
- const [focusControl, setFocusControl] = useState(initialFocusControl);
- // If the focused control element is blurred, unset the state to remove styles
- // This will allow us to simulate :focus-visible on the button elements.
- const getFocusProps = useCallback(
- (option: BreadcrumbControlOptions) => {
- return option === focusControl
- ? {autoFocus: true, onBlur: () => setFocusControl(undefined)}
- : {};
- },
- [focusControl]
- );
- return {getFocusProps};
-}
-
 interface BreadcrumbsDrawerProps {
  breadcrumbs: EnhancedCrumb[];
  event: Event;

static/app/components/events/featureFlags/eventFeatureFlagList.tsx

@@ -9,14 +9,15 @@ import {
  CardContainer,
  FeatureFlagDrawer,
  FLAG_SORT_OPTIONS,
+ FlagControlOptions,
  FlagSort,
  getLabel,
 } from 'sentry/components/events/featureFlags/featureFlagDrawer';
 import useDrawer from 'sentry/components/globalDrawer';
 import KeyValueData, {
  type KeyValueDataContentProps,
 } from 'sentry/components/keyValueData';
-import {IconMegaphone, IconSort} from 'sentry/icons';
+import {IconMegaphone, IconSearch, IconSort} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event, FeatureFlag} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
@@ -91,35 +92,39 @@ export function EventFeatureFlagList({
  ? [...hydratedFlags].reverse()
  : hydratedFlags;
 
- const onViewAllFlags = useCallback(() => {
- trackAnalytics('flags.view-all-clicked', {
- organization,
- });
- openDrawer(
- () => (
- <FeatureFlagDrawer
- group={group}
- event={event}
- project={project}
- hydratedFlags={hydratedFlags}
- initialSort={sortMethod}
- />
- ),
- {
- ariaLabel: t('Feature flags drawer'),
- // We prevent a click on the 'View All' button from closing the drawer so that
- // we don't reopen it immediately, and instead let the button handle this itself.
- shouldCloseOnInteractOutside: element => {
- const viewAllButton = viewAllButtonRef.current;
- if (viewAllButton?.contains(element)) {
- return false;
- }
- return true;
- },
- transitionProps: {stiffness: 1000},
- }
- );
- }, [openDrawer, event, group, project, sortMethod, hydratedFlags, organization]);
+ const onViewAllFlags = useCallback(
+ (focusControl?: FlagControlOptions) => {
+ trackAnalytics('flags.view-all-clicked', {
+ organization,
+ });
+ openDrawer(
+ () => (
+ <FeatureFlagDrawer
+ group={group}
+ event={event}
+ project={project}
+ hydratedFlags={hydratedFlags}
+ initialSort={sortMethod}
+ focusControl={focusControl}
+ />
+ ),
+ {
+ ariaLabel: t('Feature flags drawer'),
+ // We prevent a click on the 'View All' button from closing the drawer so that
+ // we don't reopen it immediately, and instead let the button handle this itself.
+ shouldCloseOnInteractOutside: element => {
+ const viewAllButton = viewAllButtonRef.current;
+ if (viewAllButton?.contains(element)) {
+ return false;
+ }
+ return true;
+ },
+ transitionProps: {stiffness: 1000},
+ }
+ );
+ },
+ [openDrawer, event, group, project, sortMethod, hydratedFlags, organization]
+ );
 
  if (!hydratedFlags.length) {
  return null;
@@ -128,10 +133,18 @@ export function EventFeatureFlagList({
  const actions = (
  <ButtonBar gap={1}>
  {feedbackButton}
+ <Button
+ aria-label={t('Open Feature Flag Search')}
+ icon={<IconSearch size="xs" />}
+ size="xs"
+ title={t('Open Search')}
+ onClick={() => onViewAllFlags(FlagControlOptions.SEARCH)}
+ />
  <Button
  size="xs"
  aria-label={t('View All')}
  ref={viewAllButtonRef}
+ title={t('View All Flags')}
  onClick={() => {
  isDrawerOpen ? closeDrawer() : onViewAllFlags();
  }}

static/app/components/events/featureFlags/featureFlagDrawer.tsx

@@ -15,7 +15,8 @@ import {
  NavigationCrumbs,
  SearchInput,
  ShortId,
-} from 'sentry/components/events/eventReplay/eventDrawer';
+} from 'sentry/components/events/eventDrawer';
+import useFocusControl from 'sentry/components/events/useFocusControl';
 import {InputGroup} from 'sentry/components/inputGroup';
 import KeyValueData, {
  type KeyValueDataContentProps,
@@ -74,6 +75,7 @@ interface FlagDrawerProps {
  hydratedFlags: KeyValueDataContentProps[];
  initialSort: FlagSort;
  project: Project;
+ focusControl?: FlagControlOptions;
 }
 
 export function FeatureFlagDrawer({
@@ -82,10 +84,12 @@ export function FeatureFlagDrawer({
  project,
  initialSort,
  hydratedFlags,
+ focusControl: initialFocusControl,
 }: FlagDrawerProps) {
  const [sortMethod, setSortMethod] = useState<FlagSort>(initialSort);
  const [search, setSearch] = useState('');
  const organization = useOrganization();
+ const {getFocusProps} = useFocusControl(initialFocusControl);
 
  const handleSortAlphabetical = (flags: KeyValueDataContentProps[]) => {
  return [...flags].sort((a, b) => {
@@ -111,6 +115,7 @@ export function FeatureFlagDrawer({
  setSearch(e.target.value.toLowerCase());
  }}
  aria-label={t('Search Flags')}
+ {...getFocusProps(FlagControlOptions.SEARCH)}
  />
  <InputGroup.TrailingItems disablePointerEvents>
  <IconSearch size="xs" />

static/app/components/events/useFocusControl.tsx

@@ -0,0 +1,21 @@
+import {useCallback, useState} from 'react';
+
+import type {BreadcrumbControlOptions} from 'sentry/components/events/breadcrumbs/breadcrumbsDrawer';
+import type {FlagControlOptions} from 'sentry/components/events/featureFlags/featureFlagDrawer';
+
+type FocusControlOption = BreadcrumbControlOptions | FlagControlOptions;
+
+export default function useFocusControl(initialFocusControl?: FocusControlOption) {
+ const [focusControl, setFocusControl] = useState(initialFocusControl);
+ // If the focused control element is blurred, unset the state to remove styles
+ // This will allow us to simulate :focus-visible on the button elements.
+ const getFocusProps = useCallback(
+ (option: FocusControlOption) => {
+ return option === focusControl
+ ? {autoFocus: true, onBlur: () => setFocusControl(undefined)}
+ : {};
+ },
+ [focusControl]
+ );
+ return {getFocusProps};
+}

static/app/views/issueDetails/groupEventAttachments/groupEventAttachmentsDrawer.tsx

@@ -10,7 +10,7 @@ import {
  Header,
  NavigationCrumbs,
  ShortId,
-} from 'sentry/components/events/eventReplay/eventDrawer';
+} from 'sentry/components/events/eventDrawer';
 import LoadingError from 'sentry/components/loadingError';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';