feat(issues): Display issue replays as view again (#79794)

getsentry · Oct 25, 2024 · f1c825f · f1c825f
1 parent adf3a62
commit f1c825f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 97 deletions.
diff --git a/static/app/components/events/eventReplay/replayDrawer.tsx b/static/app/components/events/eventReplay/replayDrawer.tsx
diff --git a/static/app/views/issueDetails/groupReplays/groupReplays.tsx b/static/app/views/issueDetails/groupReplays/groupReplays.tsx
@@ -1,4 +1,5 @@
 import {Fragment, useCallback, useEffect} from 'react';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
@@ -20,6 +21,7 @@ import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useUrlParams from 'sentry/utils/useUrlParams';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import ReplayTable from 'sentry/views/replays/replayTable';
 import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
@@ -55,6 +57,7 @@ const visibleColumns = (allMobileProj: boolean) =>
 function GroupReplays({group}: Props) {
   const organization = useOrganization();
   const location = useLocation<ReplayListLocationQuery>();
+  const hasStreamlinedUI = useHasStreamlinedUI();
 
   const {eventView, fetchError, isFetching, pageLinks} = useReplaysFromIssue({
     group,
@@ -76,7 +79,7 @@ function GroupReplays({group}: Props) {
   if (!eventView) {
     // Shown on load and no replay data available
     return (
-      <StyledLayoutPage withPadding>
+      <StyledLayoutPage withPadding hasStreamlinedUI={hasStreamlinedUI}>
         <ReplayCountHeader>
           <IconUser size="sm" />
           {isFetching ? (
@@ -177,6 +180,7 @@ function GroupReplaysTable({
   const {getReplayCountForIssue} = useReplayCountForIssues({
     statsPeriod: '90d',
   });
+  const hasStreamlinedUI = useHasStreamlinedUI();
 
   const replayListData = useReplayList({
     eventView,
@@ -264,7 +268,7 @@ function GroupReplaysTable({
   );
 
   return (
-    <StyledLayoutPage withPadding>
+    <StyledLayoutPage withPadding hasStreamlinedUI={hasStreamlinedUI}>
       <ReplayCountHeader>
         <IconUser size="sm" />
         {t(
@@ -278,10 +282,17 @@ function GroupReplaysTable({
   );
 }
 
-export const StyledLayoutPage = styled(Layout.Page)`
-  box-shadow: 0px 0px 1px ${p => p.theme.gray200};
+const StyledLayoutPage = styled(Layout.Page)<{hasStreamlinedUI?: boolean}>`
   background-color: ${p => p.theme.background};
   gap: ${space(2)};
+
+  ${p =>
+    p.hasStreamlinedUI &&
+    css`
+      border: 1px solid ${p.theme.border};
+      border-radius: ${p.theme.borderRadius};
+      padding: ${space(3)} ${space(2)};
+    `}
 `;
 
 const ReplayCountHeader = styled('div')`

diff --git a/static/app/views/issueDetails/streamline/useReplaysDrawer.tsx b/static/app/views/issueDetails/streamline/useReplaysDrawer.tsx