ref(eslint): enable typescript-eslint/no-base-to-string (#91342)

This PR enables the
[no-base-to-string](https://typescript-eslint.io/rules/no-base-to-string/)
typed eslint rule.

This rule errors when we try to call `toString` or `toLocaleString` on
something that potentially doesn’t produce useful information when
stringified.

It also catches string concatenations with `+` and interpolations in
template literals `${expr}`.

In our code-base, this often happens when we call `String(label)`, where
label is typed as `React.ReactNode`. While a ReactNode _can_ be a
string, if it’s a ReactElement like `<span>foo</span>`, the
stringification would just yield `[object Object]`.

The fix is to either narrow the type to e.g. `string | number`
(depending on how its used) if we intend to only use it with values that
are stringifiable or to avoid making a string out of it. Sometimes, I
had to `eslint-disable` because we’d need a larger refactor.

Author: TkDodo

eslint.config.mjs

@@ -43,6 +43,7 @@ export const typeAwareLintRules = {
   rules: {
     '@typescript-eslint/await-thenable': 'error',
     '@typescript-eslint/no-array-delete': 'error',
+    '@typescript-eslint/no-base-to-string': 'error',
     '@typescript-eslint/no-for-in-array': 'error',
     '@typescript-eslint/no-unnecessary-type-assertion': 'error',
     '@typescript-eslint/prefer-optional-chain': 'error',

static/app/components/actions/archive.tsx

@@ -31,11 +31,11 @@ const IGNORE_DURATIONS = [
 
 const IGNORE_COUNTS = [1, 10, 100, 1000, 10000, 100000];
 
-const IGNORE_WINDOWS: Array<SelectValue<number>> = [
+const IGNORE_WINDOWS = [
   {value: ONE_HOUR, label: t('per hour')},
   {value: ONE_HOUR * 24, label: t('per day')},
   {value: ONE_HOUR * 24 * 7, label: t('per week')},
-];
+] satisfies Array<SelectValue<number>>;
 
 interface ArchiveActionProps {
   onUpdate: (params: GroupStatusResolution) => void;

static/app/components/breadcrumbs.tsx

@@ -110,7 +110,7 @@ export function Breadcrumbs({crumbs, linkLastItem = false, ...props}: Props) {
         const {label, to, preservePageFilters, key} = crumb;
         const labelKey = typeof label === 'string' ? label : '';
         const mapKey =
-          (key ?? typeof to === 'string') ? `${labelKey}${to}` : `${labelKey}${index}`;
+          key ?? (typeof to === 'string' ? `${labelKey}${to}` : `${labelKey}${index}`);
 
         return (
           <Fragment key={mapKey}>

static/app/components/charts/optionSelector.tsx

@@ -55,7 +55,9 @@ function OptionSelector({
   const mappedOptions = useMemo(() => {
     return options.map(opt => ({
       ...opt,
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       textValue: String(opt.label),
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       label: <Truncate value={String(opt.label)} maxLength={60} expandDirection="left" />,
     }));
   }, [options]);

static/app/components/core/badge/featureBadge.tsx

@@ -56,15 +56,10 @@ function InnerFeatureBadge({
   ...props
 }: FeatureBadgeProps) {
   const indicatorColors = useFeatureBadgeIndicatorColor();
-  const title = tooltipProps?.title?.toString() ?? defaultTitles[type] ?? '';
+  const title = tooltipProps?.title ?? defaultTitles[type] ?? '';
 
   return (
-    <Tooltip
-      title={title ?? defaultTitles[type]}
-      position="right"
-      {...tooltipProps}
-      skipWrapper
-    >
+    <Tooltip title={title} position="right" {...tooltipProps} skipWrapper>
       {variant === 'badge' || variant === 'short' ? (
         <StyledBadge type={type} {...props}>
           {variant === 'short' ? shortLabels[type] : labels[type]}

static/app/components/core/compactSelect/utils.tsx

@@ -105,26 +105,24 @@ export function getDisabledOptions<Value extends SelectKey>(
 export function getHiddenOptions<Value extends SelectKey>(
   items: Array<SelectOptionOrSectionWithKey<Value>>,
   search: string,
-  limit = Infinity,
-  filterOption?: (opt: SelectOption<Value>, search: string) => boolean
+  limit = Infinity
 ): Set<SelectKey> {
   //
   // First, filter options using `search` value
   //
-  const _filterOption =
-    filterOption ??
-    ((opt: SelectOption<Value>) =>
-      `${opt.label ?? ''}${opt.textValue ?? ''}`
-        .toLowerCase()
-        .includes(search.toLowerCase()));
+  const filterOption = (opt: SelectOption<Value>) =>
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    `${opt.label ?? ''}${opt.textValue ?? ''}`
+      .toLowerCase()
+      .includes(search.toLowerCase());
 
   const hiddenOptionsSet = new Set<SelectKey>();
   const remainingItems = items
     .flatMap<SelectOptionOrSectionWithKey<Value> | null>(item => {
       if ('options' in item) {
         const filteredOptions = item.options
           .map(opt => {
-            if (_filterOption(opt, search)) {
+            if (filterOption(opt)) {
               return opt;
             }
 
@@ -136,7 +134,7 @@ export function getHiddenOptions<Value extends SelectKey>(
         return filteredOptions.length > 0 ? {...item, options: filteredOptions} : null;
       }
 
-      if (_filterOption(item, search)) {
+      if (filterOption(item)) {
         return item;
       }
 

static/app/components/dropdownAutoComplete/menu.tsx

@@ -118,7 +118,7 @@ export interface MenuProps
   /**
    * Message to display when there are no items initially
    */
-  emptyMessage?: React.ReactNode;
+  emptyMessage?: string;
 
   /**
    * If this is undefined, autocomplete filter will use this value instead of the

static/app/components/events/interfaces/debugMeta/debugImageDetails/candidates.tsx

@@ -105,6 +105,7 @@ class Candidates extends Component<Props, State> {
           return false;
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         if (!defined(info) || !String(info).trim()) {
           return false;
         }

static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx

@@ -1851,9 +1851,8 @@ function ChecklistDoneNote() {
           'You completed all of the steps above. Capture a new event to verify your setup!'
         )}
         {isSelfHosted
-          ? ' ' +
-            tct(
-              'If the newly captured event is still not sourcemapped, please check the logs of the [symbolicator] service of your self-hosted instance.',
+          ? tct(
+              ' If the newly captured event is still not sourcemapped, please check the logs of the [symbolicator] service of your self-hosted instance.',
               {
                 symbolicator: <MonoBlock>symbolicator</MonoBlock>,
               }

static/app/components/externalIssues/ticketRuleModal.tsx

@@ -360,6 +360,7 @@ export default function TicketRuleModal({
 
         if (!found) {
           errors[field.name] = (
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             <FieldErrorLabel>{`Could not fetch saved option for ${field.label}. Please reselect.`}</FieldErrorLabel>
           );
         }

static/app/components/forms/controls/radioGroup.tsx

@@ -88,12 +88,10 @@ function RadioGroup<C extends string>({
             <RadioLineItem index={index} aria-checked={value === id} disabled={disabled}>
               <Radio
                 name={groupName}
-                aria-label={name?.toString()}
+                aria-label={name?.toString()} // eslint-disable-line @typescript-eslint/no-base-to-string
                 disabled={disabled}
                 checked={value === id}
-                onChange={(e: React.FormEvent<HTMLInputElement>) =>
-                  !disabled && onChange(id, e)
-                }
+                onChange={e => !disabled && onChange(id, e)}
               />
               <RadioLineText disabled={disabled}>{name}</RadioLineText>
               {description && (

static/app/components/forms/fields/segmentedRadioField.tsx

@@ -73,7 +73,7 @@ function RadioControlGroup<C extends string>({
               <InteractionStateLayer />
               <Radio
                 name={groupName}
-                aria-label={name?.toString()}
+                aria-label={name?.toString()} // eslint-disable-line @typescript-eslint/no-base-to-string
                 disabled={disabled}
                 checked={value === id}
                 onChange={(e: React.FormEvent<HTMLInputElement>) =>

static/app/components/group/groupSummary.tsx

@@ -189,6 +189,8 @@ export function GroupSummary({
           {
             id: 'resources',
             title: t('Resources'),
+
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             insight: `${isValidElement(config.resources?.description) ? '' : (config.resources?.description ?? '')}\n\n${config.resources?.links?.map(link => `[${link.text}](${link.link})`).join(' • ') ?? ''}`,
             insightElement: isValidElement(config.resources?.description)
               ? config.resources?.description

static/app/components/keyValueData/index.tsx

@@ -163,8 +163,8 @@ export function Card({
     ? truncatedItems.sort((a, b) => a.item.subject.localeCompare(b.item.subject))
     : truncatedItems;
 
-  const componentItems = orderedItems.map((itemProps, i) => (
-    <Content expandLeft={expandLeft} key={`content-card-${title}-${i}`} {...itemProps} />
+  const componentItems = orderedItems.map((itemProps, index) => (
+    <Content expandLeft={expandLeft} key={String(index)} {...itemProps} />
   ));
 
   return (

static/app/components/modals/projectCreationModal.tsx

@@ -17,6 +17,7 @@ import PlatformPicker, {
   type Category,
   type Platform,
 } from 'sentry/components/platformPicker';
+import type {TeamOption} from 'sentry/components/teamSelector';
 import TeamSelector from 'sentry/components/teamSelector';
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -48,7 +49,7 @@ export default function ProjectCreationModal({
     undefined
   );
   const [projectName, setProjectName] = useState('');
-  const [team, setTeam] = useState<Team | undefined>(undefined);
+  const [team, setTeam] = useState<string | undefined>(undefined);
   const [creating, setCreating] = useState(false);
   const api = useApi();
   const organization = useOrganization();
@@ -198,7 +199,7 @@ export default function ProjectCreationModal({
                 clearable={false}
                 value={team}
                 placeholder={t('Select a Team')}
-                onChange={(choice: any) => setTeam(choice.value)}
+                onChange={(choice: TeamOption) => setTeam(choice.value)}
                 teamFilter={(tm: Team) => tm.access.includes('team:admin')}
               />
             </div>

static/app/components/organizations/projectPageFilter/index.tsx

@@ -345,12 +345,11 @@ export function ProjectPageFilter({
     );
 
     // ProjectPageFilter will try to expand to accommodate the longest project slug
-    const longestSlugLength = flatOptions
-      .slice(0, 25)
-      .reduce(
-        (acc, cur) => (String(cur.label).length > acc ? String(cur.label).length : acc),
-        0
-      );
+    const longestSlugLength = flatOptions.slice(0, 25).reduce(
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      (acc, cur) => (String(cur.label).length > acc ? String(cur.label).length : acc),
+      0
+    );
 
     // Calculate an appropriate width for the menu. It should be between 22  and 28em.
     // Within that range, the width is a function of the length of the longest slug.

static/app/components/replays/replayTagsTableRow.tsx

@@ -18,8 +18,8 @@ import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
 
 interface Props {
   name: string;
-  values: ReactNode[];
-  generateUrl?: (name: string, value: ReactNode) => LocationDescriptor;
+  values: string[];
+  generateUrl?: (name: string, value: string) => LocationDescriptor;
 }
 
 const expandedViewKeys = [

static/app/components/scoreCard.tsx

@@ -28,10 +28,8 @@ function ScoreCard({
   className,
   renderOpenButton,
   isTooltipHoverable,
-  isEstimate,
 }: ScoreCardProps) {
-  const value = score ?? '\u2014';
-  const displayScore = isEstimate && value !== '0' ? `~${value}` : value;
+  const displayScore = score ?? '\u2014';
 
   return (
     <ScorePanel className={className}>
@@ -52,7 +50,6 @@ function ScoreCard({
 
       <ScoreWrapper>
         <Score>{displayScore}</Score>
-        {isEstimate && <Asterisk>*</Asterisk>}
         {defined(trend) && (
           <Trend trendStatus={trendStatus}>
             <TextOverflow>{trend}</TextOverflow>
@@ -128,15 +125,4 @@ export const Trend = styled('div')<TrendProps>`
   overflow: hidden;
 `;
 
-const Asterisk = styled('div')`
-  color: grey;
-  font-size: ${p => p.theme.fontSizeRelativeSmall};
-  display: inline-block;
-  width: 10pt;
-  height: 10pt;
-  position: relative;
-  top: -10pt;
-  margin-left: ${space(0.25)};
-`;
-
 export default ScoreCard;

static/app/components/slider/index.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useImperativeHandle, useMemo, useRef} from 'react';
+import {Fragment, useCallback, useImperativeHandle, useMemo, useRef} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import {useNumberFormatter} from '@react-aria/i18n';
@@ -211,11 +211,15 @@ export function Slider({
           <SliderLabelWrapper className="label-container">
             <SliderLabel {...labelProps}>{label}</SliderLabel>
             <SliderLabelOutput {...outputProps}>
-              {nThumbs > 1
-                ? `${getFormattedValue(selectedRange[0]!)}–${getFormattedValue(
-                    selectedRange[1]!
-                  )}`
-                : getFormattedValue(selectedRange[1]!)}
+              {nThumbs > 1 ? (
+                <Fragment>
+                  {getFormattedValue(selectedRange[0]!)}
+                  {'-'}
+                  {getFormattedValue(selectedRange[1]!)}
+                </Fragment>
+              ) : (
+                getFormattedValue(selectedRange[1]!)
+              )}
             </SliderLabelOutput>
           </SliderLabelWrapper>
         )}

static/app/components/stories/jsxProperty.tsx

@@ -39,7 +39,12 @@ export default function JSXProperty({name, value}: Props) {
     if (value.type === JSXNode) {
       return <code data-property="element">{[`${name}={`, value, '}']}</code>;
     }
-    return <code data-property="element">{`${name}=${value}`}</code>;
+    return (
+      <code data-property="element">
+        {`${name}=`}
+        {value}
+      </code>
+    );
   }
   return <code data-property="object">{`${name}={${JSON.stringify(value)}}`}</code>;
 }

static/app/components/teamSelector.tsx

@@ -141,7 +141,7 @@ type TeamActor = {
   type: 'team';
 };
 
-type TeamOption = GeneralSelectValue & {
+export type TeamOption = GeneralSelectValue & {
   actor: TeamActor | null;
   searchKey: string;
 };
@@ -413,6 +413,4 @@ const AddToProjectButton = styled(Button)`
 export {TeamSelector};
 
 // TODO(davidenwang): this is broken due to incorrect types on react-select
-export default withOrganization(TeamSelector) as unknown as (
-  p: Omit<Props, 'organization'>
-) => React.JSX.Element;
+export default withOrganization(TeamSelector);

static/app/locale.tsx

@@ -244,7 +244,7 @@ function parseComponentTemplate(template: string): ParsedTemplate {
 function renderTemplate(
   template: ParsedTemplate,
   components: ComponentMap
-): React.ReactNode {
+): React.JSX.Element {
   let idx = 0;
 
   function renderGroup(name: string, id: string) {
@@ -304,6 +304,7 @@ function mark<T extends React.ReactNode>(node: T): T {
     _store: {},
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   proxy.toString = () => '✅' + node + '✅';
   // TODO(TS): Should proxy be created using `React.createElement`?
   return proxy as any as T;
@@ -406,7 +407,7 @@ function gettextComponentTemplate(
   components: ComponentMap
 ): React.JSX.Element {
   const parsedTemplate = parseComponentTemplate(getClient().gettext(template));
-  return mark(renderTemplate(parsedTemplate, components) as React.JSX.Element);
+  return mark(renderTemplate(parsedTemplate, components));
 }
 
 /**

static/app/utils/profiling/gl/utils.ts

@@ -568,7 +568,7 @@ export function computeHighlightedBounds(
     return [bounds[0] - trim.length + 1, bounds[1] - trim.length + 1];
   }
 
-  throw new Error(`Unhandled case: ${JSON.stringify(bounds)} ${trim}`);
+  throw new Error(`Unhandled case: ${JSON.stringify(bounds)} ${JSON.stringify(trim)}`);
 }
 
 // Utility function to allow zooming into frames using a specific strategy. Supports

static/app/utils/useDismissAlert.tsx

@@ -39,6 +39,7 @@ function isValid(timestamp: number, expirationDays: number) {
 function useDismissAlert({expirationDays = Number.MAX_SAFE_INTEGER, key}: Opts) {
   const [dismissedTimestamp, setDismissedTimestamp] = useLocalStorageState<
     undefined | string
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
   >(key, val => (val ? String(val) : undefined));
 
   const isDismissed =

static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx

@@ -95,7 +95,7 @@ export function UptimeAlertForm({project, handleDelete, rule}: Props) {
   useEffect(
     () =>
       autorun(() => {
-        const projectSlug = formModel.getValue('projectSlug');
+        const projectSlug = formModel.getValue<string>('projectSlug');
         const selectedProject = projects.find(p => p.slug === projectSlug);
         const apiEndpoint = rule
           ? `/projects/${organization.slug}/${projectSlug}/uptime/${rule.id}/`

static/app/views/dashboards/widgetBuilder/buildSteps/yAxisStep/yAxisSelector/index.tsx

@@ -135,7 +135,7 @@ export function YAxisSelector({
   return (
     <FieldGroup inline={false} flexibleControlStateSize error={fieldError} stacked>
       {aggregates.map((fieldValue, i) => (
-        <QueryFieldWrapper key={`${fieldValue}:${i}`}>
+        <QueryFieldWrapper key={`${i}`}>
           {aggregates.length > 1 && displayType === DisplayType.BIG_NUMBER && (
             <RadioLineItem index={i} role="radio" aria-label="aggregate-selector">
               <Radio

static/app/views/dashboards/widgetBuilder/components/visualize/aggregateParameterField.tsx

@@ -85,5 +85,5 @@ export function AggregateParameterField({
       />
     );
   }
-  throw new Error(`Unknown parameter type encountered for ${fieldValue}`);
+  throw new Error(`Unknown parameter type encountered for ${JSON.stringify(fieldValue)}`);
 }