feat(starfish): Database module layout improvements (#54680)

Preparation for integration with performance.

- Lift filter controls out of `SpansView`. This way the parent component
can decide which filters are present. Very useful for Starfish, since in
a Performance context the project selection will look different.
- Improve spacing. Some UI tweaks to make things look more good-er

This creates some minor duplication in the interim, but nothing too
scary. Will be resolved soon anyway when I delete the unused Starfish
views.

static/app/views/starfish/modules/DBModule.tsx

@@ -1,11 +1,17 @@
+import styled from '@emotion/styled';
+
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {space} from 'sentry/styles/space';
 import {
   PageErrorAlert,
   PageErrorProvider,
 } from 'sentry/utils/performance/contexts/pageError';
 import useOrganization from 'sentry/utils/useOrganization';
+import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
 import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/starfishPageFiltersContainer';
+import {StarfishProjectSelector} from 'sentry/views/starfish/components/starfishProjectSelector';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 import SpansView from 'sentry/views/starfish/views/spans/spansView';
@@ -27,6 +33,11 @@ export default function DBModule() {
             <Layout.Main fullWidth>
               <PageErrorAlert />
               <StarfishPageFiltersContainer>
+                <StyledPageFilterBar condensed>
+                  <StarfishProjectSelector />
+                  <StarfishDatePicker />
+                </StyledPageFilterBar>
+
                 <SpansView moduleName={ModuleName.DB} />
               </StarfishPageFiltersContainer>
             </Layout.Main>
@@ -36,3 +47,7 @@ export default function DBModule() {
     </SentryDocumentTitle>
   );
 }
+
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(2)};
+`;

static/app/views/starfish/views/spans/index.tsx

@@ -1,11 +1,17 @@
+import styled from '@emotion/styled';
+
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import {
   PageErrorAlert,
   PageErrorProvider,
 } from 'sentry/utils/performance/contexts/pageError';
 import {useLocation} from 'sentry/utils/useLocation';
+import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
 import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/starfishPageFiltersContainer';
+import {StarfishProjectSelector} from 'sentry/views/starfish/components/starfishProjectSelector';
 import {ModuleName, SpanMetricsFields} from 'sentry/views/starfish/types';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 
@@ -42,6 +48,11 @@ export default function Spans() {
           <Layout.Main fullWidth>
             <PageErrorAlert />
             <StarfishPageFiltersContainer>
+              <StyledPageFilterBar condensed>
+                <StarfishProjectSelector />
+                <StarfishDatePicker />
+              </StyledPageFilterBar>
+
               <SpansView moduleName={moduleName} spanCategory={spanCategory} />
             </StarfishPageFiltersContainer>
           </Layout.Main>
@@ -75,3 +86,7 @@ const getTitle = (moduleName: ModuleName, spanCategory?: string) => {
   }
   return t('Spans');
 };
+
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(2)};
+`;

static/app/views/starfish/views/spans/spansView.tsx

@@ -2,13 +2,10 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 import pick from 'lodash/pick';
 
-import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {space} from 'sentry/styles/space';
 import {fromSorts} from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
-import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
-import {StarfishProjectSelector} from 'sentry/views/starfish/components/starfishProjectSelector';
 import {ModuleName, SpanMetricsFields} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {ActionSelector} from 'sentry/views/starfish/views/spans/selectors/actionSelector';
@@ -56,18 +53,12 @@ export default function SpansView(props: Props) {
 
   return (
     <Fragment>
-      <StyledPageFilterBar condensed>
-        <StarfishProjectSelector />
-        <StarfishDatePicker />
-      </StyledPageFilterBar>
+      <SpanTimeCharts
+        moduleName={moduleName}
+        appliedFilters={appliedFilters}
+        spanCategory={props.spanCategory}
+      />
 
-      <PaddedContainer>
-        <SpanTimeCharts
-          moduleName={moduleName}
-          appliedFilters={appliedFilters}
-          spanCategory={props.spanCategory}
-        />
-      </PaddedContainer>
       <FilterOptionsContainer>
         {/* Specific modules like Database and API only show _one_ kind of span
         op based on how we group them. So, the operation selector is pointless
@@ -93,31 +84,20 @@ export default function SpansView(props: Props) {
         />
       </FilterOptionsContainer>
 
-      <PaddedContainer>
-        <SpansTable
-          moduleName={moduleName}
-          spanCategory={props.spanCategory}
-          sort={sort}
-          limit={LIMIT}
-        />
-      </PaddedContainer>
+      <SpansTable
+        moduleName={moduleName}
+        spanCategory={props.spanCategory}
+        sort={sort}
+        limit={LIMIT}
+      />
     </Fragment>
   );
 }
 
-const PaddedContainer = styled('div')`
-  margin: 0 ${space(2)};
-`;
-
-const FilterOptionsContainer = styled(PaddedContainer)`
+const FilterOptionsContainer = styled('div')`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: ${space(1)};
+  gap: ${space(2)};
   margin-bottom: ${space(2)};
   max-width: 800px;
 `;
-
-const StyledPageFilterBar = styled(PageFilterBar)`
-  margin: 0 ${space(2)};
-  margin-bottom: ${space(2)};
-`;