feat(schema-hints): Add search functionality to drawer (#87201)

I've added a simple search function on the drawer which allows users to
search for tags. The search input is invisible until clicked on and the
logic resembles the breadcrumbs search logic found
[here](https://github.com/getsentry/sentry/blob/934c5a1769cd23eaefaa31b17173c885532d6fee/static/app/components/events/interfaces/breadcrumbs/index.tsx#L56-L89).
Here's what it looks like:



https://github.com/user-attachments/assets/15372d66-f786-45e8-af5c-2d098d861847

Closes #87029

Author: nikkikapadia

static/app/views/explore/components/schemaHintsDrawer.tsx

@@ -1,7 +1,8 @@
-import {Fragment, useCallback, useMemo} from 'react';
+import {Fragment, memo, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Tag as Badge} from 'sentry/components/core/badge/tag';
+import {InputGroup} from 'sentry/components/core/input/inputGroup';
 import MultipleCheckbox from 'sentry/components/forms/controls/multipleCheckbox';
 import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import {IconSearch} from 'sentry/icons';
@@ -24,6 +25,8 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
   const exploreQuery = useExploreQuery();
   const setExploreQuery = useSetExploreQuery();
 
+  const [searchQuery, setSearchQuery] = useState('');
+
   const selectedFilterKeys = useMemo(() => {
     const filterQuery = new MutableSearch(exploreQuery);
     return filterQuery.getFilterKeys();
@@ -52,6 +55,18 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
     ];
   }, [hints, sortedSelectedHints]);
 
+  const sortedAndFilteredHints = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return sortedHints;
+    }
+
+    const searchFor = searchQuery.toLocaleLowerCase().trim();
+
+    return sortedHints.filter(hint =>
+      prettifyTagKey(hint.key).toLocaleLowerCase().trim().includes(searchFor)
+    );
+  }, [sortedHints, searchQuery]);
+
   const handleCheckboxChange = useCallback(
     (hint: Tag) => {
       const filterQuery = new MutableSearch(exploreQuery);
@@ -73,36 +88,68 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
     [exploreQuery, setExploreQuery]
   );
 
+  const noAttributesMessage = (
+    <NoAttributesMessage>
+      <p>{t('No attributes found.')}</p>
+    </NoAttributesMessage>
+  );
+
+  const HintItem = memo(
+    ({hint}: {hint: Tag}) => {
+      const hintFieldDefinition = useMemo(
+        () => getFieldDefinition(hint.key, 'span', hint.kind),
+        [hint.key, hint.kind]
+      );
+
+      const hintType = useMemo(
+        () =>
+          hintFieldDefinition?.valueType === FieldValueType.BOOLEAN
+            ? t('boolean')
+            : hint.kind === FieldKind.MEASUREMENT
+              ? t('number')
+              : t('string'),
+        [hintFieldDefinition?.valueType, hint.kind]
+      );
+      return (
+        <StyledMultipleCheckboxItem
+          key={hint.key}
+          value={hint.key}
+          onChange={() => handleCheckboxChange(hint)}
+        >
+          <CheckboxLabelContainer>
+            <CheckboxLabel>{prettifyTagKey(hint.key)}</CheckboxLabel>
+            <Badge>{hintType}</Badge>
+          </CheckboxLabelContainer>
+        </StyledMultipleCheckboxItem>
+      );
+    },
+    (prevProps, nextProps) => {
+      return prevProps.hint.key === nextProps.hint.key;
+    }
+  );
+
   return (
     <Fragment>
       <DrawerHeader hideBar />
       <DrawerBody>
         <HeaderContainer>
           <SchemaHintsHeader>{t('Filter Attributes')}</SchemaHintsHeader>
-          <IconSearch size="md" />
+          <StyledInputGroup>
+            <SearchInput
+              size="sm"
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              aria-label={t('Search attributes')}
+            />
+            <InputGroup.TrailingItems disablePointerEvents>
+              <IconSearch size="md" />
+            </InputGroup.TrailingItems>
+          </StyledInputGroup>
         </HeaderContainer>
         <StyledMultipleCheckbox name={t('Filter keys')} value={selectedFilterKeys}>
-          {sortedHints.map(hint => {
-            const hintFieldDefinition = getFieldDefinition(hint.key, 'span', hint.kind);
-            const hintType =
-              hintFieldDefinition?.valueType === FieldValueType.BOOLEAN
-                ? t('boolean')
-                : hint.kind === FieldKind.MEASUREMENT
-                  ? t('number')
-                  : t('string');
-            return (
-              <StyledMultipleCheckboxItem
-                key={hint.key}
-                value={hint.key}
-                onChange={() => handleCheckboxChange(hint)}
-              >
-                <CheckboxLabelContainer>
-                  <CheckboxLabel>{prettifyTagKey(hint.key)}</CheckboxLabel>
-                  <Badge>{hintType}</Badge>
-                </CheckboxLabelContainer>
-              </StyledMultipleCheckboxItem>
-            );
-          })}
+          {sortedAndFilteredHints.length === 0
+            ? noAttributesMessage
+            : sortedAndFilteredHints.map(hint => <HintItem key={hint.key} hint={hint} />)}
         </StyledMultipleCheckbox>
       </DrawerBody>
     </Fragment>
@@ -174,3 +221,23 @@ const StyledMultipleCheckboxItem = styled(MultipleCheckbox.Item)`
     ${p => p.theme.overflowEllipsis};
   }
 `;
+
+const SearchInput = styled(InputGroup.Input)`
+  border: 0;
+  box-shadow: unset;
+  color: inherit;
+`;
+
+const NoAttributesMessage = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${space(4)};
+  color: ${p => p.theme.subText};
+`;
+
+const StyledInputGroup = styled(InputGroup)`
+  @media (max-width: ${p => p.theme.breakpoints.medium}) {
+    max-width: 175px;
+  }
+`;

static/app/views/explore/components/schemaHintsList.spec.tsx

@@ -229,4 +229,28 @@ describe('SchemaHintsList', () => {
 
     expect(screen.getByLabelText('Schema Hints Drawer')).toBeInTheDocument();
   });
+
+  it('should show correct search results when query is updated', async () => {
+    render(
+      <PageParamsProvider>
+        <SchemaHintsList
+          stringTags={mockStringTags}
+          numberTags={mockNumberTags}
+          supportedAggregates={[]}
+        />
+      </PageParamsProvider>,
+      {organization, router}
+    );
+
+    const seeFullList = screen.getByText('See full list');
+    await userEvent.click(seeFullList);
+
+    const searchInput = screen.getByLabelText('Search attributes');
+    await userEvent.type(searchInput, 'stringTag');
+
+    expect(screen.getByText('stringTag1')).toBeInTheDocument();
+    expect(screen.getByText('stringTag2')).toBeInTheDocument();
+    expect(screen.queryByText('numberTag1')).not.toBeInTheDocument();
+    expect(screen.queryByText('numberTag2')).not.toBeInTheDocument();
+  });
 });

static/app/views/explore/components/schemaHintsList.tsx

@@ -97,7 +97,6 @@ function SchemaHintsList({
       }
 
       const container = schemaHintsContainerRef.current;
-      const containerRect = container.getBoundingClientRect();
 
       // Create a temporary div to measure items without rendering them
       const measureDiv = document.createElement('div');
@@ -124,11 +123,12 @@ function SchemaHintsList({
         Array.from(measureDiv.children).length - 1
       ]?.getBoundingClientRect();
 
+      const measureDivRect = measureDiv.getBoundingClientRect();
       // Find the last item that fits within the container
       let lastVisibleIndex =
         items.findIndex(item => {
           const itemRect = item.getBoundingClientRect();
-          return itemRect.right > containerRect.right - (seeFullListTagRect?.width ?? 0);
+          return itemRect.right > measureDivRect.right - (seeFullListTagRect?.width ?? 0);
         }) - 1;
 
       // If all items fit, show them all