Browse Source

feat(replays): frontend cleanup: launch dead click and rage click columns (#54337)

Relates to https://github.com/getsentry/sentry/issues/53455
Michelle Zhang 1 year ago
parent
commit
a6825e7609

+ 2 - 0
static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx

@@ -125,7 +125,9 @@ describe('GroupReplays', () => {
               field: [
                 'activity',
                 'browser',
+                'count_dead_clicks',
                 'count_errors',
+                'count_rage_clicks',
                 'duration',
                 'finished_at',
                 'id',

+ 3 - 3
static/app/views/issueDetails/groupReplays/useReplaysFromIssue.tsx

@@ -9,7 +9,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {DEFAULT_SORT} from 'sentry/utils/replays/fetchReplayList';
 import useApi from 'sentry/utils/useApi';
 import useCleanQueryParamsOnRouteLeave from 'sentry/utils/useCleanQueryParamsOnRouteLeave';
-import {getReplayListFields} from 'sentry/views/replays/types';
+import {REPLAY_LIST_FIELDS} from 'sentry/views/replays/types';
 
 function useReplayFromIssue({
   group,
@@ -54,13 +54,13 @@ function useReplayFromIssue({
       id: '',
       name: '',
       version: 2,
-      fields: getReplayListFields(organization),
+      fields: REPLAY_LIST_FIELDS,
       query: `id:[${String(replayIds)}]`,
       range: '14d',
       projects: [],
       orderby: decodeScalar(location.query.sort, DEFAULT_SORT),
     });
-  }, [location.query.sort, replayIds, organization]);
+  }, [location.query.sort, replayIds]);
 
   useCleanQueryParamsOnRouteLeave({fieldsToClean: ['cursor']});
   useEffect(() => {

+ 3 - 3
static/app/views/performance/transactionSummary/transactionReplays/useReplaysFromTransaction.tsx

@@ -9,7 +9,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {DEFAULT_SORT} from 'sentry/utils/replays/fetchReplayList';
 import useApi from 'sentry/utils/useApi';
 import type {ReplayListLocationQuery} from 'sentry/views/replays/types';
-import {getReplayListFields} from 'sentry/views/replays/types';
+import {REPLAY_LIST_FIELDS} from 'sentry/views/replays/types';
 
 type Options = {
   location: Location;
@@ -87,12 +87,12 @@ function useReplaysFromTransaction({
       id: '',
       name: '',
       version: 2,
-      fields: getReplayListFields(organization),
+      fields: REPLAY_LIST_FIELDS,
       projects: [],
       query: `id:[${String(response.replayIds)}]`,
       orderby: decodeScalar(location.query.sort, DEFAULT_SORT),
     });
-  }, [location.query.sort, response.replayIds, organization]);
+  }, [location.query.sort, response.replayIds]);
 
   useEffect(() => {
     fetchReplayIds();

+ 13 - 25
static/app/views/replays/list/replaysList.tsx

@@ -21,7 +21,7 @@ import ReplayOnboardingPanel from 'sentry/views/replays/list/replayOnboardingPan
 import ReplayTable from 'sentry/views/replays/replayTable';
 import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
 import type {ReplayListLocationQuery} from 'sentry/views/replays/types';
-import {getReplayListFields} from 'sentry/views/replays/types';
+import {REPLAY_LIST_FIELDS} from 'sentry/views/replays/types';
 
 function ReplaysList() {
   const location = useLocation<ReplayListLocationQuery>();
@@ -36,14 +36,14 @@ function ReplaysList() {
         id: '',
         name: '',
         version: 2,
-        fields: getReplayListFields(organization),
+        fields: REPLAY_LIST_FIELDS,
         projects: [],
         query: conditions.formatString(),
         orderby: decodeScalar(location.query.sort, DEFAULT_SORT),
       },
       location
     );
-  }, [location, organization]);
+  }, [location]);
 
   const hasSessionReplay = organization.features.includes('session-replay');
   const {hasSentOneReplay, fetching} = useHaveSelectedProjectsSentAnyReplayEvents();
@@ -92,28 +92,16 @@ function ReplaysListTable({
 
   const hasReplayClick = conditions.getFilterKeys().some(k => k.startsWith('click.'));
 
-  const hasDeadRageCols = organization.features.includes(
-    'replay-rage-click-dead-click-columns'
-  );
-  const visibleCols = hasDeadRageCols
-    ? [
-        ReplayColumn.REPLAY,
-        ReplayColumn.OS,
-        ReplayColumn.BROWSER,
-        ReplayColumn.DURATION,
-        ReplayColumn.COUNT_DEAD_CLICKS,
-        ReplayColumn.COUNT_RAGE_CLICKS,
-        ReplayColumn.COUNT_ERRORS,
-        ReplayColumn.ACTIVITY,
-      ]
-    : [
-        ReplayColumn.REPLAY,
-        ReplayColumn.OS,
-        ReplayColumn.BROWSER,
-        ReplayColumn.DURATION,
-        ReplayColumn.COUNT_ERRORS,
-        ReplayColumn.ACTIVITY,
-      ];
+  const visibleCols = [
+    ReplayColumn.REPLAY,
+    ReplayColumn.OS,
+    ReplayColumn.BROWSER,
+    ReplayColumn.DURATION,
+    ReplayColumn.COUNT_DEAD_CLICKS,
+    ReplayColumn.COUNT_RAGE_CLICKS,
+    ReplayColumn.COUNT_ERRORS,
+    ReplayColumn.ACTIVITY,
+  ];
 
   return (
     <Fragment>

+ 20 - 44
static/app/views/replays/types.tsx

@@ -1,7 +1,5 @@
 import type {Duration} from 'moment';
 
-import {Organization} from 'sentry/types';
-
 // Keep this in sync with the backend blueprint
 // "ReplayRecord" is distinct from the common: "replay = new ReplayReader()"
 export type ReplayRecord = {
@@ -110,49 +108,27 @@ export type ReplayListLocationQuery = {
   utc?: 'true' | 'false';
 };
 
-// Sync with ReplayListRecord above
-export function getReplayListFields(organization: Organization) {
-  const hasDeadRageCols = organization.features.includes(
-    'replay-rage-click-dead-click-columns'
-  );
-  return hasDeadRageCols
-    ? [
-        'activity',
-        'browser.name',
-        'browser.version',
-        'count_dead_clicks',
-        'count_errors',
-        'count_rage_clicks',
-        'duration',
-        'finished_at',
-        'id',
-        'is_archived',
-        'os.name',
-        'os.version',
-        'project_id',
-        'started_at',
-        'urls',
-        'user',
-      ]
-    : [
-        'activity',
-        'browser.name',
-        'browser.version',
-        'count_errors',
-        'duration',
-        'finished_at',
-        'id',
-        'is_archived',
-        'os.name',
-        'os.version',
-        'project_id',
-        'started_at',
-        'urls',
-        'user',
-      ];
-}
+// Sync with ReplayListRecord below
+export const REPLAY_LIST_FIELDS = [
+  'activity',
+  'browser.name',
+  'browser.version',
+  'count_dead_clicks',
+  'count_errors',
+  'count_rage_clicks',
+  'duration',
+  'finished_at',
+  'id',
+  'is_archived',
+  'os.name',
+  'os.version',
+  'project_id',
+  'started_at',
+  'urls',
+  'user',
+];
 
-// Sync with REPLAY_LIST_FIELDS below
+// Sync with REPLAY_LIST_FIELDS above
 export type ReplayListRecord = Pick<
   ReplayRecord,
   | 'activity'