fix(query-builder): Make filter key non-editable (#72044)

Filter keys aren't editable (at least, yet). So this coverts it from a
button to a div. It is no longer focusable by clicking or with the arrow
keys.

Author: malwilley

static/app/components/searchQueryBuilder/filter.tsx

@@ -99,25 +99,13 @@ function FilterOperator({token, state, item}: SearchQueryTokenProps) {
   );
 }
 
-function FilterKey({token, state, item}: SearchQueryTokenProps) {
+function FilterKey({token}: {token: TokenResult<Token.FILTER>}) {
   const {keys} = useSearchQueryBuilder();
   const key = token.key.text;
   const tag = keys[key];
   const label = tag ? getKeyLabel(tag) : key;
 
-  const filterButtonProps = useFilterButtonProps({state, item});
-  // TODO(malwilley): Add edit functionality
-
-  return (
-    <KeyButton
-      aria-label={t('Edit filter key: %s', label)}
-      onClick={() => {}}
-      {...filterButtonProps}
-    >
-      <InteractionStateLayer />
-      {label}
-    </KeyButton>
-  );
+  return <KeyLabel>{label}</KeyLabel>;
 }
 
 function FilterValueText({token}: {token: TokenResult<Token.FILTER>}) {
@@ -242,8 +230,8 @@ export function SearchQueryBuilderFilter({item, state, token}: SearchQueryTokenP
       ref={ref}
       {...modifiedRowProps}
     >
-      <BaseTokenPart {...gridCellProps}>
-        <FilterKey token={token} state={state} item={item} />
+      <BaseTokenPart>
+        <FilterKey token={token} />
       </BaseTokenPart>
       <BaseTokenPart {...gridCellProps}>
         <FilterOperator token={token} state={state} item={item} />
@@ -291,7 +279,9 @@ const UnstyledButton = styled('button')`
   }
 `;
 
-const KeyButton = styled(UnstyledButton)`
+const KeyLabel = styled('div')`
+  display: flex;
+  align-items: center;
   padding: 0 ${space(0.5)} 0 ${space(0.75)};
   border-radius: 3px 0 0 3px;
   border-right: 1px solid transparent;

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

@@ -111,9 +111,7 @@ describe('SearchQueryBuilder', function () {
     it('displays the key alias instead of the actual value', async function () {
       render(<SearchQueryBuilder {...defaultProps} initialQuery="is:resolved" />);
 
-      expect(
-        await screen.findByRole('button', {name: 'Edit filter key: status'})
-      ).toBeInTheDocument();
+      expect(await screen.findByText('status')).toBeInTheDocument();
     });
 
     it('when adding a filter by typing, replaces aliases tokens', async function () {
@@ -126,9 +124,7 @@ describe('SearchQueryBuilder', function () {
       await userEvent.keyboard('status:');
 
       // Component should display alias `status`
-      expect(
-        await screen.findByRole('button', {name: 'Edit filter key: status'})
-      ).toBeInTheDocument();
+      expect(await screen.findByText('status')).toBeInTheDocument();
       // Query should use the actual key `is`
       expect(mockOnChange).toHaveBeenCalledWith('is:');
     });
@@ -561,12 +557,6 @@ describe('SearchQueryBuilder', function () {
         screen.getByRole('button', {name: 'Edit operator for filter: assigned'})
       ).toHaveFocus();
 
-      // Left again focuses the assigned key
-      await userEvent.keyboard('{arrowleft}');
-      expect(
-        screen.getByRole('button', {name: 'Edit filter key: assigned'})
-      ).toHaveFocus();
-
       // Left again goes to the next text input between tokens
       await userEvent.keyboard('{arrowleft}');
       expect(