From 1820d1ef0ff1be28089825ac86373fb4aa0726c7 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Wed, 26 Jul 2023 16:14:31 -0700 Subject: [PATCH 1/3] fix(replays): add prompt if user needs SDK upgrade --- .../list/replaysErroneousDeadRageCards.tsx | 34 ++++++++++++++++++- static/app/views/replays/list/replaysList.tsx | 2 +- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx index 349311a14ab585..aac6cdaf8cd708 100644 --- a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx +++ b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx @@ -1,7 +1,8 @@ -import {useMemo} from 'react'; +import {Fragment, ReactNode, useMemo} from 'react'; import styled from '@emotion/styled'; import {Location} from 'history'; +import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types'; import EventView from 'sentry/utils/discover/eventView'; @@ -9,6 +10,9 @@ import useReplayList from 'sentry/utils/replays/hooks/useReplayList'; import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding'; 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 {EmptyStateSubheading} from 'sentry/views/replays/list/replaysList'; import ReplayTable from 'sentry/views/replays/replayTable'; import {ReplayColumn} from 'sentry/views/replays/replayTable/types'; import {ReplayListLocationQuery} from 'sentry/views/replays/types'; @@ -111,6 +115,18 @@ function ReplaysErroneousDeadRageCards() { ReplayColumn.ACTIVITY, ]; + const { + selection: {projects}, + } = usePageFilters(); + + const MIN_DEAD_RAGE_CLICK_SDK = '7.60.1'; + + const needSDKUpgrade = useProjectSdkNeedsUpdate({ + minVersion: MIN_DEAD_RAGE_CLICK_SDK, + organization, + projectId: projects.map(p => String(p)), + }); + return hasSessionReplay && !fetching && hasSentOneReplay ? ( hasDeadRageCards ? ( @@ -125,6 +141,19 @@ function ReplaysErroneousDeadRageCards() { location={newLocation} organization={organization} visibleColumns={deadRageCols} + emptyMessage={ + needSDKUpgrade.needsUpdate ? ( + + {t('There are no items to display')} + + {tct('[data] require an [sdkPrompt]', { + data: Rage and dead clicks, + sdkPrompt: {t('SDK version >= 7.60.1')}, + })} + + + ) : undefined + } /> ) : null @@ -136,11 +165,13 @@ function CardTable({ location, organization, visibleColumns, + emptyMessage, }: { eventView: EventView; location: Location; organization: Organization; visibleColumns: ReplayColumn[]; + emptyMessage?: ReactNode; }) { const {replays, isFetching, fetchError} = useReplayList({ eventView, @@ -163,6 +194,7 @@ function CardTable({ visibleColumns={visibleColumns} saveLocation gridRows={'auto ' + gridRows} + emptyMessage={emptyMessage} /> ); } diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx index 9bebea4cb2b1cc..5c06a50cecb3d1 100644 --- a/static/app/views/replays/list/replaysList.tsx +++ b/static/app/views/replays/list/replaysList.tsx @@ -154,7 +154,7 @@ function ReplaysListTable({ ); } -const EmptyStateSubheading = styled('div')` +export const EmptyStateSubheading = styled('div')` color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeMedium}; `; From 9f7bc54944aa76c5fd52d1b16563976bacb6918c Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 27 Jul 2023 11:45:01 -0700 Subject: [PATCH 2/3] update error and sdk alert --- api-docs/dump.rdb | Bin 21777 -> 0 bytes .../list/replaysErroneousDeadRageCards.tsx | 31 +---------- static/app/views/replays/list/replaysList.tsx | 2 +- .../app/views/replays/replayTable/index.tsx | 48 ++++++++++++++++-- 4 files changed, 46 insertions(+), 35 deletions(-) delete mode 100644 api-docs/dump.rdb diff --git a/api-docs/dump.rdb b/api-docs/dump.rdb deleted file mode 100644 index ffe6bb5953f18863bb5746d76b6c2df3c04696bc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 21777 zcmeHv3ve6fedjI!0(?l6Y}%3>N9JNF>Om6Xz8{i&20%PWkXV=?2w>qf((bprcmp&a zA^`T%% zw%hprONx}#h_;nFNqaqy$CfzK;=}H@|Nrmx|B~U**c3(4)EgbMrcs>p9XDs);z8;l z&AidM_7lB0KX=amMjM(hR?RP`taHX2?F)0J;j5a}FQ4<@g1ynM)h(Z{&6(%0A7XF% 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 VUKGCT>#lFT{tuq1;N<7#{x6qEAT|I1 diff --git a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx index aac6cdaf8cd708..7ee34fcc16d723 100644 --- a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx +++ b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx @@ -1,8 +1,7 @@ -import {Fragment, ReactNode, useMemo} from 'react'; +import {ReactNode, useMemo} from 'react'; import styled from '@emotion/styled'; import {Location} from 'history'; -import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types'; import EventView from 'sentry/utils/discover/eventView'; @@ -10,9 +9,6 @@ import useReplayList from 'sentry/utils/replays/hooks/useReplayList'; import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding'; 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 {EmptyStateSubheading} from 'sentry/views/replays/list/replaysList'; import ReplayTable from 'sentry/views/replays/replayTable'; import {ReplayColumn} from 'sentry/views/replays/replayTable/types'; import {ReplayListLocationQuery} from 'sentry/views/replays/types'; @@ -115,18 +111,6 @@ function ReplaysErroneousDeadRageCards() { ReplayColumn.ACTIVITY, ]; - const { - selection: {projects}, - } = usePageFilters(); - - const MIN_DEAD_RAGE_CLICK_SDK = '7.60.1'; - - const needSDKUpgrade = useProjectSdkNeedsUpdate({ - minVersion: MIN_DEAD_RAGE_CLICK_SDK, - organization, - projectId: projects.map(p => String(p)), - }); - return hasSessionReplay && !fetching && hasSentOneReplay ? ( hasDeadRageCards ? ( @@ -141,19 +125,6 @@ function ReplaysErroneousDeadRageCards() { location={newLocation} organization={organization} visibleColumns={deadRageCols} - emptyMessage={ - needSDKUpgrade.needsUpdate ? ( - - {t('There are no items to display')} - - {tct('[data] require an [sdkPrompt]', { - data: Rage and dead clicks, - sdkPrompt: {t('SDK version >= 7.60.1')}, - })} - - - ) : undefined - } /> ) : null diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx index 5c06a50cecb3d1..5b3e381766391d 100644 --- a/static/app/views/replays/list/replaysList.tsx +++ b/static/app/views/replays/list/replaysList.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(() => { diff --git a/static/app/views/replays/replayTable/index.tsx b/static/app/views/replays/replayTable/index.tsx index 4e55719f4ea3dd..c1b78f26c82da6 100644 --- a/static/app/views/replays/replayTable/index.tsx +++ b/static/app/views/replays/replayTable/index.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'; @@ -69,6 +72,40 @@ function ReplayTable({ .filter(Boolean) .map(column => ); + const { + selection: {projects}, + } = usePageFilters(); + + const MIN_DEAD_RAGE_CLICK_SDK = '7.60.1'; + + const needSDKUpgrade = useProjectSdkNeedsUpdate({ + minVersion: MIN_DEAD_RAGE_CLICK_SDK, + organization, + projectId: projects.map(String), + }); + + if (needSDKUpgrade.needsUpdate) { + return ( + + + {tct('[data] require an [sdkPrompt]. [link:Learn how to upgrade.]', { + data: Rage and dead clicks, + sdkPrompt: {t('SDK version >= 7.60.1')}, + link: ( + + ), + })} + + + ); + } + if (fetchError && !isFetching) { return ( (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)` - border-radius: 0; - border-width: 1px 0 0 0; + border-radius: 0px; + border-width: 1px 0 1px 0; grid-column: 1/-1; margin-bottom: 0; `; From 0486d56eaeb33b00fabd2a63a0e324855914f714 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 27 Jul 2023 14:00:06 -0700 Subject: [PATCH 3/3] more updates to sdk alert and update tests --- .../groupReplays/groupReplays.spec.tsx | 5 ++ .../transactionReplays/index.spec.tsx | 5 ++ .../list/replaysErroneousDeadRageCards.tsx | 5 +- static/app/views/replays/list/replaysList.tsx | 2 +- .../app/views/replays/replayTable/index.tsx | 73 ++++++++++--------- 5 files changed, 52 insertions(+), 38 deletions(-) diff --git a/static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx b/static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx index 9fa0e54ff103d7..ca9318fd63d12e 100644 --- a/static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx +++ b/static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx @@ -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', () => { diff --git a/static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx b/static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx index b3b5b592a418c9..9bc188ab43aba8 100644 --- a/static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx +++ b/static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx @@ -89,6 +89,11 @@ describe('TransactionReplays', () => { let eventsMockApi: jest.Mock; let replaysMockApi: jest.Mock; beforeEach(() => { + MockApiClient.addMockResponse({ + method: 'GET', + url: `/organizations/org-slug/sdk-updates/`, + body: [], + }); MockApiClient.addMockResponse({ url: '/organizations/org-slug/events-has-measurements/', body: {measurements: false}, diff --git a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx index 7ee34fcc16d723..349311a14ab585 100644 --- a/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx +++ b/static/app/views/replays/list/replaysErroneousDeadRageCards.tsx @@ -1,4 +1,4 @@ -import {ReactNode, useMemo} from 'react'; +import {useMemo} from 'react'; import styled from '@emotion/styled'; import {Location} from 'history'; @@ -136,13 +136,11 @@ function CardTable({ location, organization, visibleColumns, - emptyMessage, }: { eventView: EventView; location: Location; organization: Organization; visibleColumns: ReplayColumn[]; - emptyMessage?: ReactNode; }) { const {replays, isFetching, fetchError} = useReplayList({ eventView, @@ -165,7 +163,6 @@ function CardTable({ visibleColumns={visibleColumns} saveLocation gridRows={'auto ' + gridRows} - emptyMessage={emptyMessage} /> ); } diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx index 5b3e381766391d..c01a86a361ff41 100644 --- a/static/app/views/replays/list/replaysList.tsx +++ b/static/app/views/replays/list/replaysList.tsx @@ -154,7 +154,7 @@ function ReplaysListTable({ ); } -export const EmptyStateSubheading = styled('div')` +const EmptyStateSubheading = styled('div')` color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeMedium}; `; diff --git a/static/app/views/replays/replayTable/index.tsx b/static/app/views/replays/replayTable/index.tsx index c1b78f26c82da6..a38b43bd12f233 100644 --- a/static/app/views/replays/replayTable/index.tsx +++ b/static/app/views/replays/replayTable/index.tsx @@ -31,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; @@ -56,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: '', @@ -72,19 +86,7 @@ function ReplayTable({ .filter(Boolean) .map(column => ); - const { - selection: {projects}, - } = usePageFilters(); - - const MIN_DEAD_RAGE_CLICK_SDK = '7.60.1'; - - const needSDKUpgrade = useProjectSdkNeedsUpdate({ - minVersion: MIN_DEAD_RAGE_CLICK_SDK, - organization, - projectId: projects.map(String), - }); - - if (needSDKUpgrade.needsUpdate) { + if (fetchError && !isFetching) { return ( - - {tct('[data] require an [sdkPrompt]. [link:Learn how to upgrade.]', { - data: Rage and dead clicks, - sdkPrompt: {t('SDK version >= 7.60.1')}, - link: ( - - ), - })} + + {typeof fetchError === 'string' + ? fetchError + : t( + 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.' + )} ); } - if (fetchError && !isFetching) { + if ( + needSDKUpgrade.needsUpdate && + visibleColumns.includes(ReplayColumn.COUNT_DEAD_CLICKS) + ) { return ( } + disablePadding > - - {typeof fetchError === 'string' - ? fetchError - : t( - 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.' - )} + + {tct('[data] requires [sdkPrompt]. [link:Upgrade now.]', { + data: Rage and dead clicks, + sdkPrompt: {t('SDK version >= 7.60.1')}, + link: ( + + ), + })} ); @@ -247,14 +253,15 @@ const StyledPanelTable = styled(PanelTable)<{ ${props => props.gridRows ? `grid-template-rows: ${props.gridRows};` - : 'grid-template-rows: 44px max-content'} + : `grid-template-rows: 44px max-content;`} `; -const StyledAlert = styled(Alert)` - border-radius: 0px; - border-width: 1px 0 1px 0; +const StyledAlert = styled(Alert)<{showBottomBorder?: boolean}>` + border-radius: 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;