ref(replays): adjust widget tooltips and headers (#54298)

Fixes https://github.com/getsentry/sentry/issues/54284

<img width="1099" alt="SCR-20230809-kvmy"
src="https://github.com/getsentry/sentry/assets/56095982/aefa16f6-4c54-427c-9f63-99346a299a95">

static/app/views/replays/list/replaysErroneousDeadRageCards.tsx

@@ -101,9 +101,15 @@ function ReplaysErroneousDeadRageCards() {
   const hasDeadRageCards = organization.features.includes('replay-error-click-cards');
   const {hasSentOneReplay, fetching} = useHaveSelectedProjectsSentAnyReplayEvents();
 
-  const deadCols = [ReplayColumn.MOST_DEAD_CLICKS, ReplayColumn.COUNT_DEAD_CLICKS];
-
-  const rageCols = [ReplayColumn.MOST_RAGE_CLICKS, ReplayColumn.COUNT_RAGE_CLICKS];
+  const deadCols = [
+    ReplayColumn.MOST_DEAD_CLICKS,
+    ReplayColumn.COUNT_DEAD_CLICKS_NO_HEADER,
+  ];
+
+  const rageCols = [
+    ReplayColumn.MOST_RAGE_CLICKS,
+    ReplayColumn.COUNT_RAGE_CLICKS_NO_HEADER,
+  ];
 
   return hasSessionReplay && hasDeadRageCards && hasSentOneReplay && !fetching ? (
     <SplitCardContainer>

static/app/views/replays/replayTable/headerCell.tsx

@@ -43,6 +43,9 @@ function HeaderCell({column, sort}: Props) {
         />
       );
 
+    case ReplayColumn.COUNT_DEAD_CLICKS_NO_HEADER:
+      return <SortableHeader label="" />;
+
     case ReplayColumn.COUNT_ERRORS:
       return <SortableHeader sort={sort} fieldName="count_errors" label={t('Errors')} />;
 
@@ -62,6 +65,9 @@ function HeaderCell({column, sort}: Props) {
         />
       );
 
+    case ReplayColumn.COUNT_RAGE_CLICKS_NO_HEADER:
+      return <SortableHeader label="" />;
+
     case ReplayColumn.DURATION:
       return <SortableHeader sort={sort} fieldName="duration" label={t('Duration')} />;
 
@@ -75,10 +81,32 @@ function HeaderCell({column, sort}: Props) {
       return <SortableHeader label={t('Most erroneous replays')} />;
 
     case ReplayColumn.MOST_RAGE_CLICKS:
-      return <SortableHeader label={t('Most rage clicks')} />;
+      return (
+        <SortableHeader
+          label={t('Most rage clicks')}
+          tooltip={tct(
+            'A rage click is 5 or more clicks on a dead element, which exhibits no page activity after 7 seconds. Requires SDK version >= [minSDK]. [link:Learn more.]',
+            {
+              minSDK: MIN_DEAD_RAGE_CLICK_SDK,
+              link: <ExternalLink href="https://docs.sentry.io/platforms/javascript/" />,
+            }
+          )}
+        />
+      );
 
     case ReplayColumn.MOST_DEAD_CLICKS:
-      return <SortableHeader label={t('Most dead clicks')} />;
+      return (
+        <SortableHeader
+          label={t('Most dead clicks')}
+          tooltip={tct(
+            'A dead click is a user click that does not result in any page activity after 7 seconds. Requires SDK version >= [minSDK]. [link:Learn more.]',
+            {
+              minSDK: MIN_DEAD_RAGE_CLICK_SDK,
+              link: <ExternalLink href="https://docs.sentry.io/platforms/javascript/" />,
+            }
+          )}
+        />
+      );
 
     case ReplayColumn.SLOWEST_TRANSACTION:
       return (

static/app/views/replays/replayTable/index.tsx

@@ -158,12 +158,18 @@ function ReplayTable({
                 case ReplayColumn.COUNT_DEAD_CLICKS:
                   return <DeadClickCountCell key="countDeadClicks" replay={replay} />;
 
+                case ReplayColumn.COUNT_DEAD_CLICKS_NO_HEADER:
+                  return <DeadClickCountCell key="countDeadClicks" replay={replay} />;
+
                 case ReplayColumn.COUNT_ERRORS:
                   return <ErrorCountCell key="countErrors" replay={replay} />;
 
                 case ReplayColumn.COUNT_RAGE_CLICKS:
                   return <RageClickCountCell key="countRageClicks" replay={replay} />;
 
+                case ReplayColumn.COUNT_RAGE_CLICKS_NO_HEADER:
+                  return <RageClickCountCell key="countRageClicks" replay={replay} />;
+
                 case ReplayColumn.DURATION:
                   return <DurationCell key="duration" replay={replay} />;
 

static/app/views/replays/replayTable/tableCell.tsx

@@ -277,7 +277,7 @@ export function RageClickCountCell({replay}: Props) {
   return (
     <Item data-test-id="replay-table-count-rage-clicks">
       {replay.count_rage_clicks ? (
-        <Count>{replay.count_rage_clicks}</Count>
+        <DeadRageCount>{replay.count_rage_clicks}</DeadRageCount>
       ) : (
         <Count>0</Count>
       )}
@@ -292,7 +292,7 @@ export function DeadClickCountCell({replay}: Props) {
   return (
     <Item data-test-id="replay-table-count-dead-clicks">
       {replay.count_dead_clicks ? (
-        <Count>{replay.count_dead_clicks}</Count>
+        <DeadRageCount>{replay.count_dead_clicks}</DeadRageCount>
       ) : (
         <Count>0</Count>
       )}
@@ -347,6 +347,11 @@ const Count = styled('span')`
   font-variant-numeric: tabular-nums;
 `;
 
+const DeadRageCount = styled(Count)`
+  display: flex;
+  width: 40px;
+`;
+
 const ErrorCount = styled(Count)`
   display: flex;
   align-items: center;

static/app/views/replays/replayTable/types.tsx

@@ -2,8 +2,10 @@ export enum ReplayColumn {
   ACTIVITY = 'activity',
   BROWSER = 'browser',
   COUNT_DEAD_CLICKS = 'countDeadClicks',
+  COUNT_DEAD_CLICKS_NO_HEADER = 'countDeadClicksNoHeader',
   COUNT_ERRORS = 'countErrors',
   COUNT_RAGE_CLICKS = 'countRageClicks',
+  COUNT_RAGE_CLICKS_NO_HEADER = 'countRageClicksNoHeader',
   DURATION = 'duration',
   MOST_ERRONEOUS_REPLAYS = 'mostErroneousReplays',
   MOST_RAGE_CLICKS = 'mostRageClicks',