fix(perf): Tags page Add to filter button in table (#86839)

Fixes #78725

The Add to filter button was not working due to it using an older link
component which does not work as well using the react-router version we
are on now. This PR updates it use a simple clickable div with the
`useNavigate` hook to achieve the intended functionality. The page had
to be converted from a Class component to a FC as well, in order to make
use of hooks.


![image](https://github.com/user-attachments/assets/c0f76e45-1b96-4f97-8a54-509fb83099c1)

Author: 0Calories

static/app/views/performance/transactionSummary/transactionTags/tagValueTable.tsx

@@ -1,6 +1,6 @@
-import {Component} from 'react';
+import {useState} from 'react';
 import styled from '@emotion/styled';
-import type {Location, LocationDescriptorObject} from 'history';
+import type {LocationDescriptorObject} from 'history';
 
 import type {GridColumn} from 'sentry/components/gridEditable';
 import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
@@ -26,6 +26,8 @@ import type {
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import CellAction, {Actions, updateQuery} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
 
@@ -42,7 +44,6 @@ type Props = {
   aggregateColumn: string;
   eventView: EventView;
   isLoading: boolean;
-  location: Location;
   organization: Organization;
   pageLinks: string | null;
   projects: Project[];
@@ -52,21 +53,26 @@ type Props = {
   tagKey?: string;
 };
 
-type State = {
-  widths: number[];
-};
-
-export class TagValueTable extends Component<Props, State> {
-  state: State = {
-    widths: [],
-  };
-  renderHeadCell(
+export function TagValueTable({
+  aggregateColumn,
+  eventView,
+  isLoading,
+  organization,
+  pageLinks,
+  tableData,
+  onCursor,
+  tagKey,
+}: Props) {
+  const [widths, setWidths] = useState<number[]>([]);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const renderHeadCell = (
     sortedEventView: EventView,
     tableMeta: TableData['meta'],
     column: TableColumn<TagsTableColumnKeys>,
     columnInfo: TagsTableColumn
-  ): React.ReactNode {
-    const {location} = this.props;
+  ): React.ReactNode => {
     const align = fieldAlignment(column.key, column.type, tableMeta);
     const field = {field: column.key, width: column.width};
 
@@ -96,40 +102,41 @@ export class TagValueTable extends Component<Props, State> {
         generateSortLink={generateSortLink}
       />
     );
-  }
+  };
 
-  renderHeadCellWithMeta = (
+  const renderHeadCellWithMeta = (
     sortedEventView: EventView,
     tableMeta: TableData['meta'],
     columns: TagsTableColumn[]
   ) => {
     return (column: TableColumn<TagsTableColumnKeys>, index: number): React.ReactNode =>
-      this.renderHeadCell(sortedEventView, tableMeta, column, columns[index]!);
+      renderHeadCell(sortedEventView, tableMeta, column, columns[index]!);
   };
 
-  handleTagValueClick = (location: Location, tagKey: string, tagValue: string) => {
+  const handleTagValueClick = (tagValue: string) => {
     const queryString = decodeScalar(location.query.query);
     const conditions = new MutableSearch(queryString ?? '');
 
-    conditions.addFilterValues(tagKey, [tagValue]);
+    conditions.addFilterValues(tagKey ?? '', [tagValue]);
 
-    const query = conditions.formatString();
-    browserHistory.push({
-      pathname: location.pathname,
-      query: {
-        ...location.query,
-        query: String(query).trim(),
+    navigate(
+      {
+        ...location,
+        query: {
+          ...location.query,
+          query: conditions.formatString(),
+        },
       },
-    });
+      {replace: false}
+    );
   };
 
-  handleCellAction = (
+  const handleCellAction = (
     column: TableColumn<TagsTableColumnKeys>,
     tagValue: string | number,
     actionRow: any
   ) => {
     return (action: Actions) => {
-      const {eventView, location, organization} = this.props;
       trackTagPageInteraction(organization);
 
       const searchConditions = normalizeSearchConditions(eventView.query);
@@ -147,8 +154,7 @@ export class TagValueTable extends Component<Props, State> {
     };
   };
 
-  generateReleaseLocation = (release: string) => {
-    const {organization, location} = this.props;
+  const generateReleaseLocation = (release: string) => {
     const {project} = location.query;
 
     return {
@@ -159,21 +165,18 @@ export class TagValueTable extends Component<Props, State> {
     };
   };
 
-  handleReleaseLinkClicked = () => {
-    const {organization} = this.props;
+  const handleReleaseLinkClicked = () => {
     trackAnalytics('performance_views.tags.jump_to_release', {
       organization,
     });
   };
 
-  renderBodyCell = (
-    parentProps: Props,
+  const renderBodyCell = (
     column: TableColumn<TagsTableColumnKeys>,
     dataRow: TableDataRow
   ): React.ReactNode => {
     // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
     const value = dataRow[column.key];
-    const {location, eventView, organization} = parentProps;
 
     if (column.key === 'key') {
       return dataRow.tags_key;
@@ -188,13 +191,13 @@ export class TagValueTable extends Component<Props, State> {
         <CellAction
           column={column}
           dataRow={actionRow}
-          handleCellAction={this.handleCellAction(column, dataRow.tags_value, actionRow)}
+          handleCellAction={handleCellAction(column, dataRow.tags_value, actionRow)}
           allowActions={allowActions}
         >
           {column.name === 'release' ? (
             <Link
-              to={this.generateReleaseLocation(dataRow.tags_value)}
-              onClick={this.handleReleaseLinkClicked}
+              to={generateReleaseLocation(dataRow.tags_value)}
+              onClick={handleReleaseLinkClicked}
             >
               <TagValue row={dataRow} />
             </Link>
@@ -214,19 +217,20 @@ export class TagValueTable extends Component<Props, State> {
       const disabled = searchConditions.hasFilter(dataRow.tags_key);
       return (
         <AlignRight>
-          <Link
+          <LinkContainer
             disabled={disabled}
-            to=""
             onClick={() => {
+              if (disabled) {
+                return;
+              }
+
               trackTagPageInteraction(organization);
-              this.handleTagValueClick(location, dataRow.tags_key, dataRow.tags_value);
+              handleTagValueClick(dataRow.tags_value);
             }}
           >
-            <LinkContainer>
-              <IconAdd isCircled />
-              {t('Add to filter')}
-            </LinkContainer>
-          </Link>
+            <IconAdd isCircled />
+            {t('Add to filter')}
+          </LinkContainer>
         </AlignRight>
       );
     }
@@ -260,73 +264,59 @@ export class TagValueTable extends Component<Props, State> {
     return value;
   };
 
-  renderBodyCellWithData = (parentProps: Props) => {
-    return (
-      column: TableColumn<TagsTableColumnKeys>,
-      dataRow: TableDataRow
-    ): React.ReactNode => this.renderBodyCell(parentProps, column, dataRow);
-  };
+  const renderBodyCellWithData = (
+    column: TableColumn<TagsTableColumnKeys>,
+    dataRow: TableDataRow
+  ): React.ReactNode => renderBodyCell(column, dataRow);
 
-  handleResizeColumn = (columnIndex: number, nextColumn: GridColumn) => {
-    const widths: number[] = [...this.state.widths];
-    widths[columnIndex] = nextColumn.width
+  const handleResizeColumn = (columnIndex: number, nextColumn: GridColumn) => {
+    const newWidths: number[] = [...widths];
+    newWidths[columnIndex] = nextColumn.width
       ? Number(nextColumn.width)
       : COL_WIDTH_UNDEFINED;
-    this.setState({widths});
+    setWidths(newWidths);
   };
 
-  render() {
-    const {
-      eventView,
-      tagKey,
-      isLoading,
-      tableData,
-      aggregateColumn,
-      pageLinks,
-      onCursor,
-    } = this.props;
-
-    const newColumns = [...TAGS_TABLE_COLUMN_ORDER].map(c => {
-      const newColumn = {...c};
-      if (c.key === 'tagValue' && tagKey) {
-        newColumn.name = tagKey;
-      }
-      if (c.key === 'aggregate') {
-        if (aggregateColumn === 'measurements.lcp') {
-          newColumn.name = 'Avg LCP';
-        }
+  const newColumns = [...TAGS_TABLE_COLUMN_ORDER].map(c => {
+    const newColumn = {...c};
+    if (c.key === 'tagValue' && tagKey) {
+      newColumn.name = tagKey;
+    }
+    if (c.key === 'aggregate') {
+      if (aggregateColumn === 'measurements.lcp') {
+        newColumn.name = 'Avg LCP';
       }
-      return newColumn;
-    });
-
-    return (
-      <StyledPanelTable>
-        <VisuallyCompleteWithData
-          id="TransactionTags-TagValueTable"
-          hasData={!!tableData?.data?.length}
+    }
+    return newColumn;
+  });
+
+  return (
+    <StyledPanelTable>
+      <VisuallyCompleteWithData
+        id="TransactionTags-TagValueTable"
+        hasData={!!tableData?.data?.length}
+        isLoading={isLoading}
+      >
+        <GridEditable
           isLoading={isLoading}
-        >
-          <GridEditable
-            isLoading={isLoading}
-            data={tableData?.data ? tableData.data : []}
-            columnOrder={newColumns}
-            columnSortBy={[]}
-            grid={{
-              renderHeadCell: this.renderHeadCellWithMeta(
-                eventView,
-                tableData ? tableData.meta : {},
-                newColumns
-              ) as any,
-              renderBodyCell: this.renderBodyCellWithData(this.props) as any,
-              onResizeColumn: this.handleResizeColumn,
-            }}
-          />
-        </VisuallyCompleteWithData>
-
-        <Pagination pageLinks={pageLinks} onCursor={onCursor} size="sm" />
-      </StyledPanelTable>
-    );
-  }
+          data={tableData?.data ? tableData.data : []}
+          columnOrder={newColumns}
+          columnSortBy={[]}
+          grid={{
+            renderHeadCell: renderHeadCellWithMeta(
+              eventView,
+              tableData ? tableData.meta : {},
+              newColumns
+            ) as any,
+            renderBodyCell: renderBodyCellWithData as any,
+            onResizeColumn: handleResizeColumn,
+          }}
+        />
+      </VisuallyCompleteWithData>
+
+      <Pagination pageLinks={pageLinks} onCursor={onCursor} size="sm" />
+    </StyledPanelTable>
+  );
 }
 
 const StyledPanelTable = styled('div')`
@@ -341,12 +331,21 @@ const AlignRight = styled('div')`
   flex: 1;
 `;
 
-const LinkContainer = styled('div')`
+const LinkContainer = styled('div')<{disabled?: boolean}>`
+  cursor: pointer;
+  color: ${p => p.theme.linkColor};
   display: grid;
   grid-auto-flow: column;
   gap: ${space(0.5)};
   justify-content: flex-end;
   align-items: center;
+  ${p =>
+    p.disabled &&
+    `
+    opacity: 0.5;
+    color: ${p.theme.gray300};
+    cursor: default;
+  `}
 `;
 
 export default TagValueTable;