feat(replays): Remove the layout chooser from the ui (#41784)

I'm removing the Layout chooser, which means I can close #37617 now. 

<img width="451" alt="SCR-20221128-eqk"
src="https://user-images.githubusercontent.com/187460/204354657-e5bb37c2-a8e0-4377-b746-0aff1f95e179.png">



We're removing the dropdown from the ui, but keeping some other code:
- Leaving some layout options, it's about 20-30 lines of code extra, but
i want to leverage these to make a pop-out player at some point.
- Leaving the stuff that chooses between `sidebar` and `topbar` layouts
when the page is loading. We're collecting metrics on this and can look
at those to pick a winner later on.

Fixes #37617

static/app/utils/replays/hooks/useReplayLayout.tsx

@@ -8,19 +8,6 @@ import useUrlParams from 'sentry/utils/useUrlParams';
 import {getDefaultLayout} from 'sentry/views/replays/detail/layout/utils';
 
 export enum LayoutKey {
-  /**
-   * ### Top
-   *┌────────────────────┐
-   *│ Timeline           │
-   *├───────────┬────────┤
-   *│ Video     > Crumbs │
-   *│           >        │
-   *├^^^^^^^^^^^>        |
-   *│ Details   >        │
-   *│           >        │
-   *└───────────┴────────┘
-   */
-  top = 'top',
   /**
    * ### Top
    *┌────────────────────┐
@@ -73,19 +60,6 @@ export enum LayoutKey {
    * └────────┴──────────┘
    */
   sidebar_left = 'sidebar_left',
-  /**
-   * ### Sidebar Right
-   * ┌───────────────────┐
-   * │ Timeline          │
-   * ├──────────┬────────┤
-   * │ Details  > Video  │
-   * │          >        │
-   * │          >^^^^^^^^┤
-   * │          > Crumbs │
-   * │          > Tabs   │
-   * └──────────┴────────┘
-   */
-  sidebar_right = 'sidebar_right',
 }
 
 function isLayout(val: string): val is LayoutKey {

static/app/views/replays/detail/layout/chooseLayout.tsx

@@ -1,48 +0,0 @@
-import {Fragment} from 'react';
-import styled from '@emotion/styled';
-
-import CompactSelect from 'sentry/components/compactSelect';
-import {t} from 'sentry/locale';
-import space from 'sentry/styles/space';
-import useReplayLayout, {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
-
-const layoutToLabel: Record<LayoutKey, string> = {
-  topbar: t('Player Top'),
-  sidebar_left: t('Player Left'),
-  sidebar_right: t('Player Right'),
-  top: t('Top'),
-  no_video: t('Data Only'),
-  video_only: t('Video Only'),
-};
-
-type Props = {};
-
-function ChooseLayout({}: Props) {
-  const {getLayout, setLayout} = useReplayLayout();
-
-  const currentLabel = layoutToLabel[getLayout()];
-  return (
-    <CompactSelect
-      triggerProps={{size: 'xs'}}
-      triggerLabel={
-        <Fragment>
-          Page Layout: <Current>{currentLabel}</Current>
-        </Fragment>
-      }
-      value={getLayout()}
-      position="bottom-end"
-      onChange={opt => setLayout(opt?.value)}
-      options={Object.entries(layoutToLabel).map(([value, label]) => ({
-        value,
-        label,
-      }))}
-    />
-  );
-}
-
-const Current = styled('span')`
-  font-weight: normal;
-  padding-left: ${space(0.5)};
-`;
-
-export default ChooseLayout;

static/app/views/replays/detail/layout/index.tsx

@@ -44,7 +44,7 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
     </VideoSection>
   );
 
-  if (layout === 'video_only') {
+  if (layout === LayoutKey.video_only) {
     return (
       <BodyContent>
         {timeline}
@@ -61,7 +61,7 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
     </ErrorBoundary>
   );
 
-  if (layout === 'no_video') {
+  if (layout === LayoutKey.no_video) {
     return (
       <BodyContent>
         {timeline}
@@ -81,41 +81,6 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
     );
   }
 
-  if (layout === 'top') {
-    const mainSplit = (
-      <SplitPanel
-        key={layout + '_main'}
-        top={{
-          content: video,
-          default: '65%',
-          min: MIN_VIDEO_HEIGHT,
-        }}
-        bottom={{
-          content: focusArea,
-          min: MIN_CONTENT_HEIGHT,
-        }}
-      />
-    );
-
-    return (
-      <BodyContent>
-        {timeline}
-        <SplitPanel
-          key={layout}
-          left={{
-            content: mainSplit,
-            default: '1fr',
-            min: MIN_CONTENT_WIDTH,
-          }}
-          right={{
-            content: <SideCrumbsTags />,
-            min: MIN_SIDEBAR_WIDTH,
-          }}
-        />
-      </BodyContent>
-    );
-  }
-
   const sideVideoCrumbs = (
     <SplitPanel
       key={layout}
@@ -131,27 +96,7 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
     />
   );
 
-  if (layout === 'sidebar_right') {
-    return (
-      <BodyContent>
-        {timeline}
-        <SplitPanel
-          key={layout}
-          left={{
-            content: focusArea,
-            default: '1fr',
-            min: MIN_CONTENT_WIDTH,
-          }}
-          right={{
-            content: sideVideoCrumbs,
-            min: MIN_SIDEBAR_WIDTH,
-          }}
-        />
-      </BodyContent>
-    );
-  }
-
-  if (layout === 'sidebar_left') {
+  if (layout === LayoutKey.sidebar_left) {
     return (
       <BodyContent>
         {timeline}
@@ -196,11 +141,11 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
               }}
             />
           ),
-          default: '65%',
           min: MIN_VIDEO_HEIGHT,
         }}
         bottom={{
           content: focusArea,
+          default: '1fr',
           min: MIN_CONTENT_HEIGHT,
         }}
       />

static/app/views/replays/detail/page.tsx

@@ -9,7 +9,6 @@ import {CrumbWalker} from 'sentry/components/replays/walker/urlWalker';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import space from 'sentry/styles/space';
 import type {Crumb} from 'sentry/types/breadcrumbs';
-import ChooseLayout from 'sentry/views/replays/detail/layout/chooseLayout';
 import ReplayMetaData, {
   HeaderPlaceholder,
 } from 'sentry/views/replays/detail/replayMetaData';
@@ -34,7 +33,6 @@ function Page({children, crumbs, orgSlug, replayRecord}: Props) {
       </HeaderContent>
       <ButtonActionsWrapper>
         <DeleteButton />
-        <ChooseLayout />
         <FeatureFeedback featureName="replay" buttonProps={{size: 'xs'}} />
       </ButtonActionsWrapper>