feat(replay): Add checkboxes to the replay list page to enable bulk operations (#95191)

This adds checkboxes to the replay list page which allow bulk selecting
of some or all replays. You can select all _visible_ replays (so like, 1
page of data) or _all_ replays that match your search terms (query,
daterange, project, env)

Right now there are no bulk actions implemented, I added the placeholder
"TODO: Add a delete action here." for now.

This is guarded behind the flag
`feature.organizations:replay-list-select`.

| State | Img |
| --- | --- |
| Nothing Selected | <img width="1039" alt="unselected"
src="https://github.com/user-attachments/assets/e78c1ceb-1b5c-443e-8b45-f697b9f045bb"
/>
| Some selected | <img width="1024" height="286" alt="SCR-20250710-slsj"
src="https://github.com/user-attachments/assets/13c91a34-2ce3-4376-851e-917ffc60868b"
/>
| Small result set, all selected | <img width="1030" alt="small results
- all selected"
src="https://github.com/user-attachments/assets/8f6462e3-e760-41da-82ab-f5503f2b41da"
/>
| Large result set, visible page selected | <img width="1030" alt="large
results - one page selected"
src="https://github.com/user-attachments/assets/45d4620e-d93b-446a-887e-9190b981e6d8"
/>
| Large result set, all pages selected | <img width="1031" alt="large
results - all selected"
src="https://github.com/user-attachments/assets/db62afe5-8304-49a7-875a-997e14b3d567"
/>

Depends on #95188
Fixes REPLAY-509

Author: ryan953

static/app/components/replays/table/replayTable.tsx

@@ -1,12 +1,10 @@
-import type {HTMLAttributes, ReactNode} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
-import {Tooltip} from 'sentry/components/core/tooltip';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import type {ReplayTableColumn} from 'sentry/components/replays/table/replayTableColumns';
-import {ReplaySessionColumn} from 'sentry/components/replays/table/replayTableColumns';
+import ReplayTableHeader from 'sentry/components/replays/table/replayTableHeader';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -40,46 +38,42 @@ export default function ReplayTable({
   showDropdownFilters,
   sort,
 }: Props) {
+  const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
+
   if (isPending) {
     return (
-      <ReplayTableWithColumns
+      <StyledSimpleTable
         data-test-id="replay-table-loading"
-        columns={columns}
-        sort={sort}
-        onSortClick={onSortClick}
+        style={{gridTemplateColumns}}
       >
+        <ReplayTableHeader columns={columns} onSortClick={onSortClick} sort={sort} />
         <SimpleTable.Empty>
           <LoadingIndicator />
         </SimpleTable.Empty>
-      </ReplayTableWithColumns>
+      </StyledSimpleTable>
     );
   }
 
   if (error) {
     return (
-      <ReplayTableWithColumns
+      <StyledSimpleTable
         data-test-id="replay-table-errored"
-        columns={columns}
-        sort={sort}
-        onSortClick={onSortClick}
+        style={{gridTemplateColumns}}
       >
+        <ReplayTableHeader columns={columns} onSortClick={onSortClick} sort={sort} />
         <SimpleTable.Empty>
           <Alert type="error" showIcon>
             {t('Sorry, the list of replays could not be loaded. ')}
             {getErrorMessage(error)}
           </Alert>
         </SimpleTable.Empty>
-      </ReplayTableWithColumns>
+      </StyledSimpleTable>
     );
   }
 
   return (
-    <ReplayTableWithColumns
-      data-test-id="replay-table"
-      columns={columns}
-      sort={sort}
-      onSortClick={onSortClick}
-    >
+    <StyledSimpleTable data-test-id="replay-table" style={{gridTemplateColumns}}>
+      <ReplayTableHeader columns={columns} onSortClick={onSortClick} sort={sort} />
       {replays.length === 0 && (
         <SimpleTable.Empty>{t('No replays found')}</SimpleTable.Empty>
       )}
@@ -110,57 +104,18 @@ export default function ReplayTable({
           </SimpleTable.Row>
         );
       })}
-    </ReplayTableWithColumns>
+    </StyledSimpleTable>
   );
 }
 
-type TableProps = {
-  children: ReactNode;
-  columns: readonly ReplayTableColumn[];
-  onSortClick?: (key: string) => void;
-  sort?: Sort;
-} & HTMLAttributes<HTMLTableElement>;
-
-const ReplayTableWithColumns = styled(
-  ({children, columns, onSortClick, sort, ...props}: TableProps) => (
-    <SimpleTable {...props}>
-      <SimpleTable.Header>
-        {columns.map((column, columnIndex) => (
-          <SimpleTable.HeaderCell
-            key={`${column.name}-${columnIndex}`}
-            handleSortClick={() => column.sortKey && onSortClick?.(column.sortKey)}
-            sort={
-              column.sortKey && sort?.field === column.sortKey ? sort.kind : undefined
-            }
-          >
-            <Tooltip title={column.tooltip} disabled={!column.tooltip}>
-              {column.name}
-            </Tooltip>
-          </SimpleTable.HeaderCell>
-        ))}
-      </SimpleTable.Header>
-
-      {children}
-    </SimpleTable>
-  )
-)`
-  ${p => getGridTemplateColumns(p.columns)}
-  margin-bottom: 0;
+const StyledSimpleTable = styled(SimpleTable)`
   overflow: auto;
 
   [data-clickable='true'] {
     cursor: pointer;
   }
 `;
 
-function getGridTemplateColumns(columns: readonly ReplayTableColumn[]) {
-  return `grid-template-columns: ${columns
-    .map(column =>
-      column === ReplaySessionColumn ? 'minmax(150px, 1fr)' : 'max-content'
-    )
-    .join(' ')};`;
-}
-
 function getErrorMessage(fetchError: RequestError) {
   if (typeof fetchError === 'string') {
     return fetchError;
@@ -193,7 +148,13 @@ const RowCell = styled(SimpleTable.RowCell)`
   position: relative;
   overflow: auto;
 
+  /* Used for cell menu items that are hidden by default */
   &:hover [data-visible-on-hover='true'] {
     opacity: 1;
   }
+
+  /* Used for the main replay display name in ReplaySessionColumn  */
+  &:hover [data-underline-on-hover='true'] {
+    text-decoration: underline;
+  }
 `;