ref(replays): disable sorting in selector index (#56881)

Some refactoring as we prepare for adding tabs to the replay index:

We can't sort anymore by ascending dead clicks, since the filter for
`count_dead_clicks > 0` is done on the frontend. So when we fetch
`per_page: 50` replays from the API, but sort is `count_dead_clicks`,
they're all returned with click count of 0, and we don't render
anything. The ability to sort the column is therefore pointless for now,
until we can filter on the backend.

Also fixes some weird padding and removes the unnecessary `location`
prop in the selector indexes.

static/app/views/replays/deadRageClick/deadClickList.tsx

@@ -1,4 +1,4 @@
-import {browserHistory, RouteComponentProps} from 'react-router';
+import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
@@ -14,14 +14,13 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useDeadRageSelectors from 'sentry/utils/replays/hooks/useDeadRageSelectors';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import SelectorTable from 'sentry/views/replays/deadRageClick/selectorTable';
-import {DeadRageSelectorQueryParams} from 'sentry/views/replays/types';
 
-interface Props extends RouteComponentProps<{}, {}, DeadRageSelectorQueryParams> {}
-
-export default function DeadClickList({location}: Props) {
+export default function DeadClickList() {
   const organization = useOrganization();
+  const location = useLocation();
   const hasDeadClickFeature = organization.features.includes(
     'session-replay-rage-dead-selectors'
   );
@@ -60,19 +59,18 @@ export default function DeadClickList({location}: Props) {
       <PageFiltersContainer>
         <Layout.Body>
           <Layout.Main fullWidth>
+            <PageFilterBar condensed>
+              <ProjectPageFilter resetParamsOnChange={['cursor']} />
+              <EnvironmentPageFilter resetParamsOnChange={['cursor']} />
+              <DatePageFilter alignDropdown="left" resetParamsOnChange={['cursor']} />
+            </PageFilterBar>
             <LayoutGap>
-              <PageFilterBar condensed>
-                <ProjectPageFilter resetParamsOnChange={['cursor']} />
-                <EnvironmentPageFilter resetParamsOnChange={['cursor']} />
-                <DatePageFilter alignDropdown="left" resetParamsOnChange={['cursor']} />
-              </PageFilterBar>
               <SelectorTable
                 data={data}
                 isError={isError}
                 isLoading={isLoading}
                 location={location}
                 clickCountColumn={{key: 'count_dead_clicks', name: 'dead clicks'}}
-                clickCountSortable
               />
             </LayoutGap>
             <PaginationNoMargin
@@ -93,7 +91,7 @@ export default function DeadClickList({location}: Props) {
 
 const LayoutGap = styled('div')`
   display: grid;
-  gap: ${space(2)};
+  gap: ${space(1)};
 `;
 
 const PaginationNoMargin = styled(Pagination)`

static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx

@@ -47,7 +47,6 @@ function DeadClickTable({location}: {location: Location<any>}) {
       isLoading={isLoading}
       location={location}
       clickCountColumn={{key: 'count_dead_clicks', name: 'dead clicks'}}
-      clickCountSortable={false}
       title={
         <Fragment>
           <IconContainer>
@@ -83,7 +82,6 @@ function RageClickTable({location}: {location: Location<any>}) {
       isLoading={isLoading}
       location={location}
       clickCountColumn={{key: 'count_rage_clicks', name: 'rage clicks'}}
-      clickCountSortable={false}
       title={
         <Fragment>
           <IconContainer>

static/app/views/replays/deadRageClick/rageClickList.tsx

@@ -1,4 +1,4 @@
-import {browserHistory, RouteComponentProps} from 'react-router';
+import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
@@ -14,14 +14,13 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useDeadRageSelectors from 'sentry/utils/replays/hooks/useDeadRageSelectors';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import SelectorTable from 'sentry/views/replays/deadRageClick/selectorTable';
-import {DeadRageSelectorQueryParams} from 'sentry/views/replays/types';
 
-interface Props extends RouteComponentProps<{}, {}, DeadRageSelectorQueryParams> {}
-
-export default function RageClickList({location}: Props) {
+export default function RageClickList() {
   const organization = useOrganization();
+  const location = useLocation();
   const hasRageClickFeature = organization.features.includes(
     'session-replay-rage-dead-selectors'
   );
@@ -60,19 +59,18 @@ export default function RageClickList({location}: Props) {
       <PageFiltersContainer>
         <Layout.Body>
           <Layout.Main fullWidth>
+            <PageFilterBar condensed>
+              <ProjectPageFilter resetParamsOnChange={['cursor']} />
+              <EnvironmentPageFilter resetParamsOnChange={['cursor']} />
+              <DatePageFilter alignDropdown="left" resetParamsOnChange={['cursor']} />
+            </PageFilterBar>
             <LayoutGap>
-              <PageFilterBar condensed>
-                <ProjectPageFilter resetParamsOnChange={['cursor']} />
-                <EnvironmentPageFilter resetParamsOnChange={['cursor']} />
-                <DatePageFilter alignDropdown="left" resetParamsOnChange={['cursor']} />
-              </PageFilterBar>
               <SelectorTable
                 data={data}
                 isError={isError}
                 isLoading={isLoading}
                 location={location}
                 clickCountColumn={{key: 'count_rage_clicks', name: 'rage clicks'}}
-                clickCountSortable
               />
             </LayoutGap>
             <PaginationNoMargin
@@ -93,7 +91,7 @@ export default function RageClickList({location}: Props) {
 
 const LayoutGap = styled('div')`
   display: grid;
-  gap: ${space(2)};
+  gap: ${space(1)};
 `;
 
 const PaginationNoMargin = styled(Pagination)`

static/app/views/replays/deadRageClick/selectorTable.tsx

@@ -40,7 +40,6 @@ export function hydratedSelectorData(data, clickType): DeadRageSelectorItem[] {
 
 interface Props {
   clickCountColumn: {key: string; name: string};
-  clickCountSortable: boolean;
   data: DeadRageSelectorItem[];
   isError: boolean;
   isLoading: boolean;
@@ -58,7 +57,6 @@ const BASE_COLUMNS: GridColumnOrder<string>[] = [
 
 export default function SelectorTable({
   clickCountColumn,
-  clickCountSortable,
   data,
   isError,
   isLoading,
@@ -86,9 +84,9 @@ export default function SelectorTable({
         makeSortLinkGenerator,
         onClick: () => {},
         rightAlignedColumns: [],
-        sortableColumns: clickCountSortable ? [clickCountColumn] : [],
+        sortableColumns: [],
       }),
-    [clickCountColumn, currentSort, makeSortLinkGenerator, clickCountSortable]
+    [currentSort, makeSortLinkGenerator]
   );
 
   const renderBodyCell = useCallback(

static/app/views/replays/types.tsx

@@ -181,7 +181,7 @@ export type DeadRageSelectorListResponse = {
 };
 
 export interface DeadRageSelectorQueryParams {
-  cursor?: string | undefined;
+  cursor?: string | string[] | undefined | null;
   per_page?: number;
   prefix?: string;
   sort?: