getsentry · scttcper · Mar 12, 2025
diff --git a/static/app/components/activity/note/input.tsx b/static/app/components/activity/note/input.tsx
@@ -120,13 +120,13 @@ function NoteInput({
   );
 
   const handleAddMember = useCallback(
-    (id: React.ReactText, display: string) =>
+    (id: string | number, display: string) =>
       setMemberMentions(existing => [...existing, [`${id}`, display]]),
     []
   );
 
   const handleAddTeam = useCallback(
-    (id: React.ReactText, display: string) =>
+    (id: string | number, display: string) =>
       setTeamMentions(existing => [...existing, [`${id}`, display]]),
     []
   );

diff --git a/static/app/components/discover/transactionsList.tsx b/static/app/components/discover/transactionsList.tsx
@@ -112,8 +112,8 @@ type Props = {
    * The callback to generate a cell action handler for a column
    */
   handleCellAction?: (
-    c: TableColumn<React.ReactText>
-  ) => (a: Actions, v: React.ReactText) => void;
+    c: TableColumn<string | number>
+  ) => (a: Actions, v: string | number) => void;
   /**
    * The callback for when View All Events is clicked.
    */

diff --git a/static/app/components/discover/transactionsTable.tsx b/static/app/components/discover/transactionsTable.tsx
@@ -29,7 +29,7 @@ import {GridCell, GridCellNumber} from 'sentry/views/performance/styles';
 import type {TrendsDataEvents} from 'sentry/views/performance/trends/types';
 
 type Props = {
-  columnOrder: Array<TableColumn<React.ReactText>>;
+  columnOrder: Array<TableColumn<string | number>>;
   eventView: EventView;
   isLoading: boolean;
   location: Location;
@@ -45,8 +45,8 @@ type Props = {
     ) => LocationDescriptor
   >;
   handleCellAction?: (
-    c: TableColumn<React.ReactText>
-  ) => (a: Actions, v: React.ReactText) => void;
+    c: TableColumn<string | number>
+  ) => (a: Actions, v: string | number) => void;
   referrer?: string;
   titles?: string[];
 };
@@ -127,7 +127,7 @@ function TransactionsTable(props: Props) {
   const renderRow = (
     row: TableDataRow,
     rowIndex: number,
-    colOrder: Array<TableColumn<React.ReactText>>,
+    colOrder: Array<TableColumn<string | number>>,
     tableMeta: MetaType
   ): React.ReactNode[] => {
     const fields = eventView.getFields();

diff --git a/static/app/components/gridEditable/index.tsx b/static/app/components/gridEditable/index.tsx
@@ -36,7 +36,7 @@ export const COL_WIDTH_MINIMUM = 90;
 // - K is a key of T/
 //   - columnKey should have the same set of values as K
 
-type ObjectKey = React.ReactText;
+type ObjectKey = string | number;
 
 export type GridColumn<K = ObjectKey> = {
   key: K;

@@ -8,7 +8,7 @@ import GenericDiscoverQuery, {useGenericDiscoverQuery} from './genericDiscoverQu
  * An individual row in a DiscoverQuery result
  */
 export type TableDataRow = {
-  [key: string]: React.ReactText;
+  [key: string]: string | number;
   id: string;
 };
 

@@ -779,7 +779,7 @@ class EventView {
     return this.fields.length;
   }
 
-  getColumns(): Array<TableColumn<React.ReactText>> {
+  getColumns(): Array<TableColumn<string | number>> {
     return decodeColumnOrder(this.fields);
   }
 
@@ -1076,7 +1076,7 @@ class EventView {
     return newEventView;
   }
 
-  getSorts(): Array<TableColumnSort<React.ReactText>> {
+  getSorts(): Array<TableColumnSort<string | number>> {
     return this.sorts.map(
       sort =>
         ({

@@ -10,7 +10,7 @@ import GenericDiscoverQuery from 'sentry/utils/discover/genericDiscoverQuery';
  * An individual row in a Segment explorer result
  */
 export type TableDataRow = {
-  [key: string]: React.ReactText;
+  [key: string]: string | number;
   count: number;
   tags_key: string;
   tags_value: string;

@@ -6,7 +6,7 @@ import type {
 import GenericDiscoverQuery from 'sentry/utils/discover/genericDiscoverQuery';
 
 export type TableDataRow = {
-  [key: string]: React.ReactText;
+  [key: string]: string | number;
   id: string;
 };
 

@@ -10,7 +10,7 @@ import type {WebVital} from 'sentry/utils/fields';
 import {PERFORMANCE_URL_PARAM} from 'sentry/utils/performance/constants';
 
 export type TableDataRow = {
-  [key: string]: React.ReactText;
+  [key: string]: string | number;
   id: string;
 };
 

@@ -6,7 +6,7 @@ import type {
 import GenericDiscoverQuery from 'sentry/utils/discover/genericDiscoverQuery';
 
 type BaseDataRow = {
-  [key: string]: React.ReactText;
+  [key: string]: string | number;
   count: number;
   count_unique_user: number;
   id: string;

@@ -116,7 +116,7 @@ function RelatedTransactions({
 
   const columnOrder = eventView
     .getColumns()
-    .map((col: TableColumn<React.ReactText>, i: number) => {
+    .map((col: TableColumn<string | number>, i: number) => {
       if (typeof widths[i] === 'number') {
         return {...col, width: widths[i]};
       }

@@ -39,7 +39,7 @@ function renderComponent({
   data?: TableDataRow;
   handleCellAction?: (
     action: Actions,
-    value: React.ReactText | null[] | string[] | null
+    value: string | number | null[] | string[] | null
   ) => void;
 }) {
   return render(

@@ -32,7 +32,7 @@ export function updateQuery(
   results: MutableSearch,
   action: Actions,
   column: TableColumn<keyof TableDataRow>,
-  value: React.ReactText | string[]
+  value: string | number | string[]
 ) {
   const key = column.name;
 
@@ -94,7 +94,7 @@ export function updateQuery(
 export function addToFilter(
   oldFilter: MutableSearch,
   key: string,
-  value: React.ReactText | string[]
+  value: string | number | string[]
 ) {
   // Remove exclusion if it exists.
   oldFilter.removeFilter(`!${key}`);
@@ -113,7 +113,7 @@ export function addToFilter(
 export function excludeFromFilter(
   oldFilter: MutableSearch,
   key: string,
-  value: React.ReactText | string[]
+  value: string | number | string[]
 ) {
   // Negations should stack up.
   const negation = `!${key}`;
@@ -137,7 +137,7 @@ export function excludeFromFilter(
 type CellActionsOpts = {
   column: TableColumn<keyof TableDataRow>;
   dataRow: TableDataRow;
-  handleCellAction: (action: Actions, value: React.ReactText) => void;
+  handleCellAction: (action: Actions, value: string | number) => void;
   /**
    * allow list of actions to display on the context menu
    */

@@ -39,7 +39,7 @@ const renderActionDropdown = (
   location: Location,
   eventView: EventView,
   queryKey: string,
-  value: React.ReactText | string[],
+  value: string | number | string[],
   contextValueType: ContextValueType
 ) => {
   const organization = OrganizationFixture();

@@ -37,7 +37,7 @@ type Props = {
   location: Location;
   organization: Organization;
   queryKey: string;
-  value: React.ReactText | string[];
+  value: string | number | string[];
 };
 
 function ActionDropDown(props: Props) {

@@ -564,7 +564,7 @@ function TableView(props: TableViewProps) {
     dataRow: TableDataRow,
     column: TableColumn<keyof TableDataRow>
   ) {
-    return (action: Actions, value: React.ReactText) => {
+    return (action: Actions, value: string | number) => {
       const {eventView, organization, location, tableData, isHomepage, queryDataset} =
         props;
 

@@ -200,10 +200,10 @@ export function EventSamplesTable({
           isLoading={isLoading}
           data={data?.data as TableDataRow[]}
           columnOrder={eventViewColumns
-            .filter((col: TableColumn<React.ReactText>) =>
+            .filter((col: TableColumn<string | number>) =>
               Object.keys(columnNameMap).includes(col.name)
             )
-            .map((col: TableColumn<React.ReactText>) => {
+            .map((col: TableColumn<string | number>) => {
               return {...col, name: columnNameMap[col.key]!};
             })}
           columnSortBy={columnSortBy}

@@ -216,11 +216,11 @@ export function ScreensTable({data, eventView, isLoading, pageLinks, onCursor}:
         data={data?.data as TableDataRow[]}
         columnOrder={eventViewColumns
           .filter(
-            (col: TableColumn<React.ReactText>) =>
+            (col: TableColumn<string | number>) =>
               col.name !== SpanMetricsField.PROJECT_ID &&
               !col.name.startsWith('avg_compare')
           )
-          .map((col: TableColumn<React.ReactText>) => {
+          .map((col: TableColumn<string | number>) => {
             return {...col, name: columnNameMap[col.key] ?? col.name};
           })}
         columnSortBy={[

@@ -108,13 +108,13 @@ function StreamlinedNoteInput({
   );
 
   const handleAddMember = useCallback(
-    (id: React.ReactText, display: string) =>
+    (id: string | number, display: string) =>
       setMemberMentions(existing => [...existing, [`${id}`, display]]),
     []
   );
 
   const handleAddTeam = useCallback(
-    (id: React.ReactText, display: string) =>
+    (id: string | number, display: string) =>
       setTeamMentions(existing => [...existing, [`${id}`, display]]),
     []
   );

@@ -58,7 +58,7 @@ export const LANDING_DISPLAYS = [
 ];
 
 export function excludeTransaction(
-  transaction: string | React.ReactText,
+  transaction: string | string | number,
   props: {eventView: EventView; location: Location}
 ) {
   const {eventView, location} = props;

@@ -181,7 +181,7 @@ class _Table extends Component<Props, State> {
   }
 
   handleCellAction = (column: TableColumn<keyof TableDataRow>, dataRow: TableDataRow) => {
-    return (action: Actions, value: React.ReactText) => {
+    return (action: Actions, value: string | number) => {
       const {eventView, location, organization, projects} = this.props;
 
       trackAnalytics('performance_views.overview.cellaction', {
@@ -513,7 +513,7 @@ class _Table extends Component<Props, State> {
 
     const teamKeyTransactionColumn = eventView
       .getColumns()
-      .find((col: TableColumn<React.ReactText>) => col.name === 'team_key_transaction');
+      .find((col: TableColumn<string | number>) => col.name === 'team_key_transaction');
     return (isHeader: boolean, dataRow?: any) => {
       if (teamKeyTransactionColumn) {
         if (isHeader) {
@@ -573,12 +573,12 @@ class _Table extends Component<Props, State> {
       // remove team_key_transactions from the column order as we'll be rendering it
       // via a prepended column
       .filter(
-        (col: TableColumn<React.ReactText>) =>
+        (col: TableColumn<string | number>) =>
           col.name !== 'team_key_transaction' &&
           !col.name.startsWith('count_miserable') &&
           col.name !== 'project_threshold_config'
       )
-      .map((col: TableColumn<React.ReactText>, i: number) => {
+      .map((col: TableColumn<string | number>, i: number) => {
         if (typeof widths[i] === 'number') {
           return {...col, width: widths[i]};
         }

@@ -131,7 +131,7 @@ class EventsTable extends Component<Props, State> {
   replayLinkGenerator = generateReplayLink(this.props.routes);
 
   handleCellAction = (column: TableColumn<keyof TableDataRow>) => {
-    return (action: Actions, value: React.ReactText) => {
+    return (action: Actions, value: string | number) => {
       const {eventView, location, organization, excludedTags, applyEnvironmentFilter} =
         this.props;
 
@@ -448,16 +448,16 @@ class EventsTable extends Component<Props, State> {
     const containsSpanOpsBreakdown = !!eventView
       .getColumns()
       .find(
-        (col: TableColumn<React.ReactText>) =>
+        (col: TableColumn<string | number>) =>
           col.name === SPAN_OP_RELATIVE_BREAKDOWN_FIELD
       );
 
     const columnOrder = eventView
       .getColumns()
-      .filter((col: TableColumn<React.ReactText>) =>
+      .filter((col: TableColumn<string | number>) =>
         shouldRenderColumn(containsSpanOpsBreakdown, col.name)
       )
-      .map((col: TableColumn<React.ReactText>, i: number) => {
+      .map((col: TableColumn<string | number>, i: number) => {
         if (typeof widths[i] === 'number') {
           return {...col, width: widths[i]};
         }

@@ -400,8 +400,8 @@ function SummaryContent({
     };
   }
 
-  function handleCellAction(column: TableColumn<React.ReactText>) {
-    return (action: Actions, value: React.ReactText) => {
+  function handleCellAction(column: TableColumn<string | number>) {
+    return (action: Actions, value: string | number) => {
       const searchConditions = normalizeSearchConditions(eventView.query);
 
       updateQuery(searchConditions, action, column, value);

@@ -51,7 +51,7 @@ import {ZOOM_END, ZOOM_START} from './latencyChart/utils';
 import SummaryContent, {OTelSummaryContent} from './content';
 
 // Used to cast the totals request to numbers
-// as React.ReactText
+// as string | number
 type TotalValues = Record<string, number>;
 
 type Props = {

@@ -288,7 +288,7 @@ export class TagExplorer extends Component<Props> {
 
   handleCellAction = (
     column: TableColumn<ColumnKeys>,
-    tagValue: React.ReactText,
+    tagValue: string | number,
     actionRow: any
   ) => {
     return (action: Actions) => {

@@ -125,7 +125,7 @@ export class TagValueTable extends Component<Props, State> {
 
   handleCellAction = (
     column: TableColumn<TagsTableColumnKeys>,
-    tagValue: React.ReactText,
+    tagValue: string | number,
     actionRow: any
   ) => {
     return (action: Actions) => {

@@ -69,7 +69,7 @@ export function getTagSortForTagsPage(location: Location) {
 }
 
 // TODO(k-fish): Improve meta of backend response to return these directly
-export function parseHistogramBucketInfo(row: {[key: string]: React.ReactText}) {
+export function parseHistogramBucketInfo(row: {[key: string]: string | number}) {
   const field = Object.keys(row).find(f => f.includes('histogram'));
   if (!field) {
     return undefined;

@@ -81,7 +81,7 @@ class Table extends Component<Props, State> {
   };
 
   handleCellAction = (column: TableColumn<keyof TableDataRow>) => {
-    return (action: Actions, value: React.ReactText) => {
+    return (action: Actions, value: string | number) => {
       const {eventView, location, organization} = this.props;
 
       trackAnalytics('performance_views.overview.cellaction', {
@@ -272,7 +272,7 @@ class Table extends Component<Props, State> {
     const {eventView} = this.props;
     const teamKeyTransactionColumn = eventView
       .getColumns()
-      .find((col: TableColumn<React.ReactText>) => col.name === 'team_key_transaction');
+      .find((col: TableColumn<string | number>) => col.name === 'team_key_transaction');
     return (isHeader: boolean, dataRow?: any) => {
       if (teamKeyTransactionColumn) {
         if (isHeader) {
@@ -357,9 +357,9 @@ class Table extends Component<Props, State> {
       .getColumns()
       // remove key_transactions from the column order as we'll be rendering it
       // via a prepended column
-      .filter((col: TableColumn<React.ReactText>) => col.name !== 'team_key_transaction')
+      .filter((col: TableColumn<string | number>) => col.name !== 'team_key_transaction')
       .slice(0, -1)
-      .map((col: TableColumn<React.ReactText>, i: number) => {
+      .map((col: TableColumn<string | number>, i: number) => {
         if (typeof widths[i] === 'number') {
           return {...col, width: widths[i]};
         }