fix(theme): adjust react-select theme access (#106127)

In the course of #106037, I hit
a fun exception in the `TeamSelector`.

Previously, the style functions accessed `state.theme` from the
`react-select` callback, casting it as Sentry's global theme because it
also uses Emotion. In the test environment, `react-select` provided a
theme object that didn't have Sentry's `tokens` property, causing
`theme.tokens.background` to fail.

In this PR, we've refactored the `TeamSelector` to have receive the
theme from `useTheme()` hook instead of expecting Emotion to
automatically merge `react-select`'s theme with ours.

Author: natemoo-re

static/app/components/teamSelector.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {Theme} from '@emotion/react';
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 
@@ -60,43 +61,34 @@ const filterOption = (canditate: any, input: any) =>
 const getOptionValue = (option: TeamOption) => option.value;
 
 // Ensures that the svg icon is white when selected
-const unassignedSelectStyles: StylesConfig = {
-  option: (provided, state) => {
-    // XXX: The `state.theme` is an emotion theme object, but it is not typed
-    // as the emotion theme object in react-select
-    const theme = state.theme as unknown as Theme;
-
-    return {...provided, svg: {color: state.isSelected ? theme.white : undefined}};
-  },
-};
+const getUnassignedSelectStyles = (theme: Theme): StylesConfig => ({
+  option: (provided, state) => ({
+    ...provided,
+    svg: {color: state.isSelected ? theme.white : undefined},
+  }),
+});
 
-const placeholderSelectStyles: StylesConfig = {
-  input: (provided, state) => {
-    // XXX: The `state.theme` is an emotion theme object, but it is not typed
-    // as the emotion theme object in react-select
-    const theme = state.theme as unknown as Theme;
-
-    return {
-      ...provided,
-      display: 'grid',
-      gridTemplateColumns: 'max-content 1fr',
-      alignItems: 'center',
-      gridGap: space(1),
-      ':before': {
-        backgroundColor: theme.backgroundSecondary,
-        height: 24,
-        width: 24,
-        borderRadius: 3,
-        content: '""',
-        display: 'block',
-      },
-    };
-  },
+const getPlaceholderSelectStyles = (theme: Theme): StylesConfig => ({
+  input: provided => ({
+    ...provided,
+    display: 'grid',
+    gridTemplateColumns: 'max-content 1fr',
+    alignItems: 'center',
+    gridGap: space(1),
+    ':before': {
+      backgroundColor: theme.tokens.background.secondary,
+      height: 24,
+      width: 24,
+      borderRadius: 3,
+      content: '""',
+      display: 'block',
+    },
+  }),
   placeholder: provided => ({
     ...provided,
     paddingLeft: 32,
   }),
-};
+});
 
 interface Props extends ControlProps {
   onChange: (value: any) => any;
@@ -139,6 +131,7 @@ export interface TeamOption extends GeneralSelectValue {
 }
 
 export function TeamSelector(props: Props) {
+  const theme = useTheme();
   const organization = useOrganization();
   const {
     allowCreate,
@@ -361,11 +354,11 @@ export function TeamSelector(props: Props) {
 
   const styles = useMemo(
     () => ({
-      ...(includeUnassigned ? unassignedSelectStyles : {}),
-      ...(multiple ? {} : placeholderSelectStyles),
+      ...(includeUnassigned ? getUnassignedSelectStyles(theme) : {}),
+      ...(multiple ? {} : getPlaceholderSelectStyles(theme)),
       ...stylesProp,
     }),
-    [includeUnassigned, multiple, stylesProp]
+    [includeUnassigned, multiple, stylesProp, theme]
   );
 
   useEffect(() => {