fix(replays): port replay actions to page frame

Author: priscilawebdev

static/app/views/replays/list.tsx

@@ -1,6 +1,6 @@
 import {Fragment} from 'react';
 
-import {Flex, Grid, Stack} from '@sentry/scraps/layout';
+import {Grid, Stack} from '@sentry/scraps/layout';
 
 import {AnalyticsArea} from 'sentry/components/analyticsArea';
 import {HookOrDefault} from 'sentry/components/hookOrDefault';
@@ -34,14 +34,13 @@ import {TraceItemDataset} from 'sentry/views/explore/types';
 import {TopBar} from 'sentry/views/navigation/topBar';
 import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 import {useAllMobileProj} from 'sentry/views/replays/detail/useAllMobileProj';
-import {ReplaysFilters} from 'sentry/views/replays/list/filters';
 import {ReplayIndexContainer} from 'sentry/views/replays/list/replayIndexContainer';
 import {ReplayIndexTimestampPrefPicker} from 'sentry/views/replays/list/replayIndexTimestampPrefPicker';
+import {ReplayListControls} from 'sentry/views/replays/list/replayListControls';
 import {ReplayOnboardingPanel} from 'sentry/views/replays/list/replayOnboardingPanel';
 import {ReplayQueryParamsProvider} from 'sentry/views/replays/list/replayQueryParamsProvider';
 import {ReplayWidgetsToggleButton} from 'sentry/views/replays/list/replayWidgetsToggleButton';
 import {SaveReplayQueryButton} from 'sentry/views/replays/list/saveReplayQueryButton';
-import {ReplaysSearch} from 'sentry/views/replays/list/search';
 
 const ReplayListPageHeaderHook = HookOrDefault({
   hookName: 'component:replay-list-page-header',
@@ -123,7 +122,6 @@ function ReplaysHeader({
 export default function ReplaysListContainer() {
   useReplayPageview('replay.list-time-spent');
   const organization = useOrganization();
-  const hasPageFrameFeature = useHasPageFrameFeature();
   const hasSentReplays = useHaveSelectedProjectsSentAnyReplayEvents();
   const {allMobileProj} = useAllMobileProj({});
 
@@ -181,11 +179,11 @@ export default function ReplaysListContainer() {
                         </ReplayAccess>
                       ) : (
                         <Fragment>
-                          <Flex gap="xl" wrap="wrap">
-                            <ReplaysFilters />
-                            <ReplaysSearch />
-                            {hasPageFrameFeature ? null : <SaveReplayQueryButton />}
-                          </Flex>
+                          <ReplayListControls
+                            onToggleWidgets={toggleWidgets}
+                            showDeadRageClickCards={showDeadRageClickCards}
+                            widgetIsOpen={widgetIsOpen}
+                          />
                           <ReplayOnboardingPanel />
                         </Fragment>
                       )}

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

@@ -1,8 +1,6 @@
 import {Fragment, useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
-
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {
   JetpackComposePiiNotice,
@@ -20,13 +18,9 @@ import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import {useProjectSdkNeedsUpdate} from 'sentry/utils/useProjectSdkNeedsUpdate';
-import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 import {useAllMobileProj} from 'sentry/views/replays/detail/useAllMobileProj';
 import {BulkDeleteAlert} from 'sentry/views/replays/list/bulkDeleteAlert';
-import {ReplaysFilters} from 'sentry/views/replays/list/filters';
-import {ReplayWidgetsToggleButton} from 'sentry/views/replays/list/replayWidgetsToggleButton';
-import {SaveReplayQueryButton} from 'sentry/views/replays/list/saveReplayQueryButton';
-import {ReplaysSearch} from 'sentry/views/replays/list/search';
+import {ReplayListControls} from 'sentry/views/replays/list/replayListControls';
 import {useReplayIndexTableColumns} from 'sentry/views/replays/list/useReplayIndexTableColumns';
 import {DeadRageSelectorCards} from 'sentry/views/replays/selectors/deadRageSelectorCards';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
@@ -53,7 +47,6 @@ export function ReplayIndexTable({
   widgetIsOpen,
 }: Props) {
   const queryClient = useQueryClient();
-  const hasPageFrameFeature = useHasPageFrameFeature();
 
   const {
     selection: {projects},
@@ -80,17 +73,11 @@ export function ReplayIndexTable({
 
   return (
     <Fragment>
-      <Flex gap="md" wrap="wrap">
-        <ReplaysFilters />
-        <ReplaysSearch />
-        {hasPageFrameFeature ? null : <SaveReplayQueryButton />}
-        {hasPageFrameFeature ? null : showDeadRageClickCards ? (
-          <ReplayWidgetsToggleButton
-            onClick={onToggleWidgets}
-            widgetIsOpen={widgetIsOpen}
-          />
-        ) : null}
-      </Flex>
+      <ReplayListControls
+        onToggleWidgets={onToggleWidgets}
+        showDeadRageClickCards={showDeadRageClickCards}
+        widgetIsOpen={widgetIsOpen}
+      />
       {projects.length === 1 ? (
         <BulkDeleteAlert
           projectId={String(projects[0] ?? '')}

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

@@ -0,0 +1,35 @@
+import {Flex} from '@sentry/scraps/layout';
+
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
+import {ReplaysFilters} from 'sentry/views/replays/list/filters';
+import {ReplayWidgetsToggleButton} from 'sentry/views/replays/list/replayWidgetsToggleButton';
+import {SaveReplayQueryButton} from 'sentry/views/replays/list/saveReplayQueryButton';
+import {ReplaysSearch} from 'sentry/views/replays/list/search';
+
+interface Props {
+  onToggleWidgets: () => void;
+  showDeadRageClickCards: boolean;
+  widgetIsOpen: boolean;
+}
+
+export function ReplayListControls({
+  onToggleWidgets,
+  showDeadRageClickCards,
+  widgetIsOpen,
+}: Props) {
+  const hasPageFrameFeature = useHasPageFrameFeature();
+
+  return (
+    <Flex gap="md" wrap="wrap">
+      <ReplaysFilters />
+      <ReplaysSearch />
+      {hasPageFrameFeature ? null : <SaveReplayQueryButton />}
+      {hasPageFrameFeature ? null : showDeadRageClickCards ? (
+        <ReplayWidgetsToggleButton
+          onClick={onToggleWidgets}
+          widgetIsOpen={widgetIsOpen}
+        />
+      ) : null}
+    </Flex>
+  );
+}