feat(searchbar): Add tooltip descriptions to filter keys (#92449)

Author: scttcper

static/app/components/searchQueryBuilder/formattedQuery.spec.tsx

@@ -17,6 +17,7 @@ const FILTER_KEYS: TagCollection = {
 jest.mock('sentry/components/searchQueryBuilder/context', () => ({
   useSearchQueryBuilder: () => ({
     size: 'normal',
+    getFieldDefinition: () => null,
   }),
 }));
 

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -1638,6 +1638,16 @@ describe('SearchQueryBuilder', function () {
           await screen.findByRole('row', {name: 'is:unresolved'})
         ).toBeInTheDocument();
       });
+
+      it('shows tooltip with field description when hovering over operator label', async function () {
+        render(<SearchQueryBuilder {...defaultProps} initialQuery="assigned:me" />);
+
+        await userEvent.hover(screen.getByText('assigned'));
+
+        expect(
+          await screen.findByText('Assignee of the issue as a user ID')
+        ).toBeInTheDocument();
+      });
     });
 
     describe('has', function () {

static/app/components/searchQueryBuilder/tokens/filter/filterKey.tsx

@@ -5,6 +5,7 @@ import {mergeProps} from '@react-aria/utils';
 import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
+import {Tooltip} from 'sentry/components/core/tooltip';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
 import {FilterKeyCombobox} from 'sentry/components/searchQueryBuilder/tokens/filter/filterKeyCombobox';
@@ -29,7 +30,8 @@ type FilterKeyProps = {
 
 export function FilterKey({item, state, token, onActiveChange}: FilterKeyProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const {disabled} = useSearchQueryBuilder();
+  const {disabled, getFieldDefinition} = useSearchQueryBuilder();
+  const fieldDefinition = getFieldDefinition(token.key.text);
 
   const [isEditing, setIsEditing] = useState(false);
 
@@ -59,19 +61,22 @@ export function FilterKey({item, state, token, onActiveChange}: FilterKeyProps)
   }
 
   return (
-    <KeyButton
-      aria-label={t('Edit key for filter: %s', getKeyName(token.key))}
-      onClick={() => {
-        setIsEditing(true);
-        onActiveChange(true);
-      }}
-      disabled={disabled}
-      {...filterButtonProps}
-    >
-      <InteractionStateLayer />
-      {/* Filter keys have no expected format, so we attempt to split by whitespace, dash, colon, and underscores. */}
-      {middleEllipsis(getKeyLabel(token.key), 40, /[\s-_:]/)}
-    </KeyButton>
+    <Tooltip title={fieldDefinition?.desc} skipWrapper>
+      <KeyButton
+        aria-label={t('Edit key for filter: %s', getKeyName(token.key))}
+        onClick={() => {
+          setIsEditing(true);
+          onActiveChange(true);
+        }}
+        disabled={disabled}
+        title="hello"
+        {...filterButtonProps}
+      >
+        <InteractionStateLayer />
+        {/* Filter keys have no expected format, so we attempt to split by whitespace, dash, colon, and underscores. */}
+        {middleEllipsis(getKeyLabel(token.key), 40, /[\s-_:]/)}
+      </KeyButton>
+    </Tooltip>
   );
 }
 

static/app/components/searchQueryBuilder/tokens/filter/filterOperator.tsx

@@ -5,6 +5,7 @@ import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
 import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
 import {UnstyledButton} from 'sentry/components/searchQueryBuilder/tokens/filter/unstyledButton';
@@ -85,22 +86,29 @@ function getTermOperatorFromToken(token: TokenResult<Token.FILTER>) {
 }
 
 function FilterKeyOperatorLabel({
+  keyValue,
   keyLabel,
   opLabel,
   includeKeyLabel,
 }: {
+  keyLabel: string;
+  keyValue: string;
   includeKeyLabel?: boolean;
-  keyLabel?: string;
   opLabel?: string;
 }) {
+  const {getFieldDefinition} = useSearchQueryBuilder();
+  const fieldDefinition = getFieldDefinition(keyValue);
+
   if (!includeKeyLabel) {
     return <OpLabel>{opLabel}</OpLabel>;
   }
 
   return (
     <KeyOpLabelWrapper>
-      <span>{keyLabel}</span>
-      {opLabel ? <OpLabel> {opLabel}</OpLabel> : null}
+      <Tooltip title={fieldDefinition?.desc}>
+        <span>{keyLabel}</span>
+        {opLabel ? <OpLabel> {opLabel}</OpLabel> : null}
+      </Tooltip>
     </KeyOpLabelWrapper>
   );
 }
@@ -138,6 +146,7 @@ export function getOperatorInfo(token: TokenResult<Token.FILTER>): {
       operator,
       label: (
         <FilterKeyOperatorLabel
+          keyValue={token.key.value}
           keyLabel={token.key.text}
           opLabel={operator === TermOperator.NOT_EQUAL ? 'not' : undefined}
           includeKeyLabel
@@ -146,14 +155,21 @@ export function getOperatorInfo(token: TokenResult<Token.FILTER>): {
       options: [
         {
           value: TermOperator.DEFAULT,
-          label: <FilterKeyOperatorLabel keyLabel={token.key.text} includeKeyLabel />,
+          label: (
+            <FilterKeyOperatorLabel
+              keyLabel={token.key.text}
+              keyValue={token.key.value}
+              includeKeyLabel
+            />
+          ),
           textValue: 'is',
         },
         {
           value: TermOperator.NOT_EQUAL,
           label: (
             <FilterKeyOperatorLabel
               keyLabel={token.key.text}
+              keyValue={token.key.value}
               opLabel="not"
               includeKeyLabel
             />
@@ -170,18 +186,31 @@ export function getOperatorInfo(token: TokenResult<Token.FILTER>): {
       label: (
         <FilterKeyOperatorLabel
           keyLabel={operator === TermOperator.NOT_EQUAL ? 'does not have' : 'has'}
+          keyValue={token.key.value}
           includeKeyLabel
         />
       ),
       options: [
         {
           value: TermOperator.DEFAULT,
-          label: <FilterKeyOperatorLabel keyLabel="has" includeKeyLabel />,
+          label: (
+            <FilterKeyOperatorLabel
+              keyLabel="has"
+              keyValue={token.key.value}
+              includeKeyLabel
+            />
+          ),
           textValue: 'has',
         },
         {
           value: TermOperator.NOT_EQUAL,
-          label: <FilterKeyOperatorLabel keyLabel="does not have" includeKeyLabel />,
+          label: (
+            <FilterKeyOperatorLabel
+              keyLabel="does not have"
+              keyValue={token.key.value}
+              includeKeyLabel
+            />
+          ),
           textValue: 'does not have',
         },
       ],

static/app/utils/fields/index.ts

@@ -2582,33 +2582,28 @@ export const getFieldDefinition = (
   switch (type) {
     case 'replay':
       if (REPLAY_FIELD_DEFINITIONS.hasOwnProperty(key)) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return REPLAY_FIELD_DEFINITIONS[key];
+        return REPLAY_FIELD_DEFINITIONS[key as keyof typeof REPLAY_FIELD_DEFINITIONS];
       }
       if (REPLAY_CLICK_FIELD_DEFINITIONS.hasOwnProperty(key)) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return REPLAY_CLICK_FIELD_DEFINITIONS[key];
+        return REPLAY_CLICK_FIELD_DEFINITIONS[
+          key as keyof typeof REPLAY_CLICK_FIELD_DEFINITIONS
+        ];
       }
       if (REPLAY_FIELDS.includes(key as FieldKey)) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return EVENT_FIELD_DEFINITIONS[key];
+        return EVENT_FIELD_DEFINITIONS[key as FieldKey];
       }
       return null;
     case 'feedback':
       if (FEEDBACK_FIELD_DEFINITIONS.hasOwnProperty(key)) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return FEEDBACK_FIELD_DEFINITIONS[key];
+        return FEEDBACK_FIELD_DEFINITIONS[key as keyof typeof FEEDBACK_FIELD_DEFINITIONS];
       }
       if (FEEDBACK_FIELDS.includes(key as FieldKey)) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return EVENT_FIELD_DEFINITIONS[key];
+        return EVENT_FIELD_DEFINITIONS[key as FieldKey];
       }
       return null;
     case 'span':
-      // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      if (SPAN_FIELD_DEFINITIONS[key]) {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        return SPAN_FIELD_DEFINITIONS[key];
+      if (SPAN_FIELD_DEFINITIONS[key as keyof typeof SPAN_FIELD_DEFINITIONS]) {
+        return SPAN_FIELD_DEFINITIONS[key as keyof typeof SPAN_FIELD_DEFINITIONS];
       }
 
       // In EAP we have numeric tags that can be passed as parameters to