fix(replays): add prompt if user needs SDK upgrade (#53672)

fixes getsentry/team-replay#126 by informing users they need to upgrade
their SDK to see rage/dead click data if this applies.

no results but SDK version is good:
<img width="1191" alt="SCR-20230726-ohpi"
src="https://github.com/getsentry/sentry/assets/56095982/25de2c86-7598-4890-b20e-159aee87388f">

no results and SDK version too low:
<img width="1106" alt="SCR-20230727-mlgz"
src="https://github.com/getsentry/sentry/assets/56095982/ab1bae55-01f8-4095-b56b-cb7f4f3ebe0a">


error alert also updated:
<img width="1106" alt="SCR-20230727-mlxl"
src="https://github.com/getsentry/sentry/assets/56095982/23b91f87-715b-47bc-8410-552a5912fbae">
<img width="1103" alt="SCR-20230727-mmci"
src="https://github.com/getsentry/sentry/assets/56095982/cbb47272-d8af-44ee-8ef7-552e467574bd">

Author: michellewzhang

api-docs/dump.rdb

@@ -51,6 +51,11 @@ function init({organizationProps = {features: ['session-replay']}}: InitializeOr
 describe('GroupReplays', () => {
   beforeEach(() => {
     MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/organizations/org-slug/sdk-updates/`,
+      body: [],
+    });
   });
 
   describe('Replay Feature Disabled', () => {

static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx

@@ -89,6 +89,11 @@ describe('TransactionReplays', () => {
   let eventsMockApi: jest.Mock<any, any>;
   let replaysMockApi: jest.Mock<any, any>;
   beforeEach(() => {
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/organizations/org-slug/sdk-updates/`,
+      body: [],
+    });
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/events-has-measurements/',
       body: {measurements: false},

static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx

@@ -83,7 +83,7 @@ function ReplaysListTable({
   const {needsUpdate: allSelectedProjectsNeedUpdates} = useProjectSdkNeedsUpdate({
     minVersion: MIN_REPLAY_CLICK_SDK,
     organization,
-    projectId: projects.map(p => String(p)),
+    projectId: projects.map(String),
   });
 
   const conditions = useMemo(() => {

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

@@ -3,14 +3,17 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import {Alert} from 'sentry/components/alert';
+import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import PanelTable from 'sentry/components/panels/panelTable';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import EventView from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import type {ReplayListRecordWithTx} from 'sentry/views/performance/transactionSummary/transactionReplays/useReplaysWithTxData';
 import HeaderCell from 'sentry/views/replays/replayTable/headerCell';
@@ -28,6 +31,8 @@ import {
 import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
 
+const MIN_DEAD_RAGE_CLICK_SDK = '7.60.1';
+
 type Props = {
   fetchError: undefined | Error;
   isFetching: boolean;
@@ -53,6 +58,18 @@ function ReplayTable({
   const newLocation = useLocation();
   const organization = useOrganization();
 
+  const {
+    selection: {projects},
+  } = usePageFilters();
+
+  const needSDKUpgrade = useProjectSdkNeedsUpdate({
+    minVersion: MIN_DEAD_RAGE_CLICK_SDK,
+    organization,
+    projectId: projects.map(String),
+  });
+
+  const showBottomBorder = visibleColumns.includes(ReplayColumn.MOST_RAGE_CLICKS);
+
   const location: Location = saveLocation
     ? {
         pathname: '',
@@ -78,7 +95,7 @@ function ReplayTable({
         data-test-id="replay-table"
         gridRows={undefined}
       >
-        <StyledAlert type="error" showIcon>
+        <StyledAlert type="error" showIcon showBottomBorder={showBottomBorder}>
           {typeof fetchError === 'string'
             ? fetchError
             : t(
@@ -89,6 +106,32 @@ function ReplayTable({
     );
   }
 
+  if (
+    needSDKUpgrade.needsUpdate &&
+    visibleColumns.includes(ReplayColumn.COUNT_DEAD_CLICKS)
+  ) {
+    return (
+      <StyledPanelTable
+        headers={tableHeaders}
+        visibleColumns={visibleColumns}
+        data-test-id="replay-table"
+        gridRows={undefined}
+        loader={<LoadingIndicator style={{margin: '54px auto'}} />}
+        disablePadding
+      >
+        <StyledAlert type="info" showIcon showBottomBorder={showBottomBorder}>
+          {tct('[data] requires [sdkPrompt]. [link:Upgrade now.]', {
+            data: <strong>Rage and dead clicks</strong>,
+            sdkPrompt: <strong>{t('SDK version >= 7.60.1')}</strong>,
+            link: (
+              <ExternalLink href="https://docs.sentry.io/platforms/javascript/install/npm/" />
+            ),
+          })}
+        </StyledAlert>
+      </StyledPanelTable>
+    );
+  }
+
   const referrer = getRouteStringFromRoutes(routes);
   const eventView = EventView.fromLocation(location);
 
@@ -207,14 +250,18 @@ const StyledPanelTable = styled(PanelTable)<{
       )
       .join(' ')};
 
-  ${props => (props.gridRows ? `grid-template-rows: ${props.gridRows};` : '')}
+  ${props =>
+    props.gridRows
+      ? `grid-template-rows: ${props.gridRows};`
+      : `grid-template-rows: 44px max-content;`}
 `;
 
-const StyledAlert = styled(Alert)`
+const StyledAlert = styled(Alert)<{showBottomBorder?: boolean}>`
   border-radius: 0;
-  border-width: 1px 0 0 0;
   grid-column: 1/-1;
   margin-bottom: 0;
+  ${props =>
+    props.showBottomBorder ? `border-width: 1px 0 1px 0;` : `border-width: 1px 0 0 0;`}
 `;
 
 export default ReplayTable;