ref(replays): move hide/show widget button (#56941)

https://github.com/getsentry/sentry/assets/56095982/9e26a653-16ed-4e83-99fe-da234f9d2c84

static/app/components/openClosePanel.tsx

@@ -1,40 +0,0 @@
-import {Fragment, ReactNode, useState} from 'react';
-import styled from '@emotion/styled';
-
-import {Button} from 'sentry/components/button';
-import {IconChevron} from 'sentry/icons';
-import {t} from 'sentry/locale';
-
-interface Props {
-  header: (boolean) => ReactNode;
-  openByDefault: boolean;
-  children?: ReactNode;
-}
-
-export default function OpenClosePanel(props: Props) {
-  const [isOpen, setIsOpen] = useState(props.openByDefault);
-
-  return (
-    <Fragment>
-      <ListItemContainer>
-        <Button
-          icon={<IconChevron size="xs" direction={isOpen ? 'up' : 'down'} />}
-          aria-label={t('Open')}
-          aria-expanded={isOpen}
-          size="sm"
-          borderless
-          onClick={() => {
-            setIsOpen(!isOpen);
-          }}
-        >
-          {props.header(isOpen)}
-        </Button>
-      </ListItemContainer>
-      {isOpen ? props.children : null}
-    </Fragment>
-  );
-}
-
-const ListItemContainer = styled('div')`
-  display: flex;
-`;

static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import {LinkButton} from 'sentry/components/button';
-import OpenClosePanel from 'sentry/components/openClosePanel';
 import {IconCursorArrow, IconShow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -16,19 +15,11 @@ import SelectorTable from 'sentry/views/replays/deadRageClick/selectorTable';
 function DeadRageSelectorCards() {
   const location = useLocation();
 
-  function header(isOpen: boolean) {
-    return isOpen
-      ? t('Hide Actionable Replay Insights')
-      : t('Show Actionable Replay Insights');
-  }
-
   return (
-    <OpenClosePanel header={header} openByDefault>
-      <SplitCardContainer>
-        <DeadClickTable location={location} />
-        <RageClickTable location={location} />
-      </SplitCardContainer>
-    </OpenClosePanel>
+    <SplitCardContainer>
+      <DeadClickTable location={location} />
+      <RageClickTable location={location} />
+    </SplitCardContainer>
   );
 }
 

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

@@ -1,7 +1,9 @@
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/button';
 import ReplayRageClickSdkVersionBanner from 'sentry/components/replays/replayRageClickSdkVersionBanner';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import {MIN_DEAD_RAGE_CLICK_SDK} from 'sentry/utils/replays/sdkVersions';
@@ -32,6 +34,7 @@ export default function ListContent() {
     organization,
     projectId: projects.map(String),
   });
+  const [widgetIsOpen, setWidgetIsOpen] = useState(true);
 
   useRouteAnalyticsParams({
     hasSessionReplay,
@@ -73,9 +76,16 @@ export default function ListContent() {
       <FiltersContainer>
         <ReplaysFilters />
         <ReplaysSearch />
+        {hasdeadRageClickFeature ? (
+          <Button onClick={() => setWidgetIsOpen(!widgetIsOpen)}>
+            {widgetIsOpen ? t('Hide Widgets') : t('Show Widgets')}
+          </Button>
+        ) : null}
       </FiltersContainer>
       {hasdeadRageClickFeature ? (
-        <DeadRageSelectorCards />
+        widgetIsOpen ? (
+          <DeadRageSelectorCards />
+        ) : null
       ) : (
         <ReplaysErroneousDeadRageCards />
       )}