ref(bug reports): Refactor some extra feedback related components (#57336)

Removes some extra abstractions that arn't doing anything, we can shove
it all inside of the main feedback page component right now.

static/app/components/feedback/details/feedbackDetails.tsx

@@ -1,40 +0,0 @@
-import {CSSProperties} from 'react';
-import styled from '@emotion/styled';
-
-import EmptyFeedback from 'sentry/components/feedback/details/feedbackEmptyDetails';
-import FeedbackItemLoader from 'sentry/components/feedback/feedbackItem/feedbackItemLoader';
-import type {FeedbackItemLoaderQueryParams} from 'sentry/utils/feedback/item/types';
-import {decodeScalar} from 'sentry/utils/queryString';
-import {useLocation} from 'sentry/utils/useLocation';
-import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
-
-interface Props {
-  className?: string;
-  style?: CSSProperties;
-}
-
-export default function FeedbackDetails(props: Props) {
-  const location = useLocation<FeedbackItemLoaderQueryParams>();
-
-  const feedbackSlug = decodeScalar(location.query.feedbackSlug);
-
-  if (!feedbackSlug) {
-    return (
-      <Container {...props}>
-        <EmptyFeedback />
-      </Container>
-    );
-  }
-
-  const [projectSlug, feedbackId] = feedbackSlug.split(':');
-  return (
-    <Container {...props}>
-      <FeedbackItemLoader projectSlug={projectSlug} feedbackId={feedbackId} />
-    </Container>
-  );
-}
-
-const Container = styled(FluidHeight)`
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-`;

static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx

@@ -7,11 +7,12 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 
 interface Props {
-  feedbackId: string;
-  projectSlug: string;
+  feedbackSlug: string;
 }
 
-export default function FeedbackItemLoader({feedbackId, projectSlug}: Props) {
+export default function FeedbackItemLoader({feedbackSlug}: Props) {
+  const [projectSlug, feedbackId] = feedbackSlug.split(':');
+
   const organization = useOrganization();
   const project = useProjectFromSlug({organization, projectSlug});
 

static/app/components/feedback/index/feedbackIndex.tsx

@@ -1,31 +0,0 @@
-import {CSSProperties} from 'react';
-import styled from '@emotion/styled';
-
-import FeedbackIndexLoader from 'sentry/components/feedback/index/feedbackIndexLoader';
-import useFeedbackListQueryParams from 'sentry/components/feedback/useFeedbackListQueryParams';
-import {useLocation} from 'sentry/utils/useLocation';
-import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
-
-interface Props {
-  className?: string;
-  style?: CSSProperties;
-}
-
-export default function FeedbackIndex(props: Props) {
-  const location = useLocation();
-  const query = useFeedbackListQueryParams({
-    location,
-    queryReferrer: 'feedback_list_page',
-  });
-
-  return (
-    <Container {...props}>
-      <FeedbackIndexLoader query={query} />
-    </Container>
-  );
-}
-
-const Container = styled(FluidHeight)`
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-`;

static/app/views/feedback/feedbackListPage.tsx

@@ -1,10 +1,12 @@
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
-import FeedbackDetails from 'sentry/components/feedback/details/feedbackDetails';
+import FeedbackEmptyDetails from 'sentry/components/feedback/details/feedbackEmptyDetails';
 import FeedbackFilters from 'sentry/components/feedback/feedbackFilters';
+import FeedbackItemLoader from 'sentry/components/feedback/feedbackItem/feedbackItemLoader';
 import FeedbackSearch from 'sentry/components/feedback/feedbackSearch';
-import FeedbackIndex from 'sentry/components/feedback/index/feedbackIndex';
+import FeedbackIndexLoader from 'sentry/components/feedback/index/feedbackIndexLoader';
+import useFeedbackListQueryParams from 'sentry/components/feedback/useFeedbackListQueryParams';
 import FullViewport from 'sentry/components/layouts/fullViewport';
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
@@ -12,13 +14,24 @@ import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionT
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {decodeScalar} from 'sentry/utils/queryString';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
 interface Props extends RouteComponentProps<{}, {}, {}> {}
 
 export default function FeedbackListPage({}: Props) {
+  const location = useLocation();
+  const query = useFeedbackListQueryParams({
+    location,
+    queryReferrer: 'feedback_list_page',
+  });
+
   const organization = useOrganization();
 
+  const feedbackSlug = decodeScalar(location.query.feedbackSlug);
+
   return (
     <SentryDocumentTitle title={t(`Bug Reports`)} orgSlug={organization.slug}>
       <FullViewport>
@@ -39,8 +52,16 @@ export default function FeedbackListPage({}: Props) {
           <LayoutGrid>
             <FeedbackFilters style={{gridArea: 'filters'}} />
             <FeedbackSearch style={{gridArea: 'search'}} />
-            <FeedbackIndex style={{gridArea: 'list'}} />
-            <FeedbackDetails style={{gridArea: 'details'}} />
+            <Container style={{gridArea: 'list'}}>
+              <FeedbackIndexLoader query={query} />
+            </Container>
+            <Container style={{gridArea: 'details'}}>
+              {feedbackSlug ? (
+                <FeedbackItemLoader feedbackSlug={feedbackSlug} />
+              ) : (
+                <FeedbackEmptyDetails />
+              )}
+            </Container>
           </LayoutGrid>
         </PageFiltersContainer>
       </FullViewport>
@@ -65,3 +86,8 @@ const LayoutGrid = styled('div')`
   gap: ${space(2)};
   place-items: stretch;
 `;
+
+const Container = styled(FluidHeight)`
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+`;