style(profiling): Add headers to profiling page (#76689)

This adds headers to the tables on the profiling page to make it more
obvious what each table shows.

static/app/views/explore/components/table.tsx

@@ -10,6 +10,9 @@ import {
   GridHead,
   GridHeadCell,
   GridRow,
+  Header,
+  HeaderButtonContainer,
+  HeaderTitle,
 } from 'sentry/components/gridEditable/styles';
 
 interface TableProps extends React.ComponentProps<typeof _TableWrapper> {}
@@ -70,4 +73,7 @@ export const TableBody = GridBody;
 export const TableBodyCell = GridBodyCell;
 export const TableHead = GridHead;
 export const TableHeadCell = GridHeadCell;
+export const TableHeader = Header;
+export const TableHeaderActions = HeaderButtonContainer;
+export const TableHeaderTitle = HeaderTitle;
 export const TableRow = GridRow;

static/app/views/profiling/content.tsx

@@ -39,6 +39,11 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
+import {
+  TableHeader,
+  TableHeaderActions,
+  TableHeaderTitle,
+} from 'sentry/views/explore/components/table';
 import {LandingAggregateFlamegraph} from 'sentry/views/profiling/landingAggregateFlamegraph';
 import {DEFAULT_PROFILING_DATETIME_SELECTION} from 'sentry/views/profiling/utils';
 
@@ -528,6 +533,18 @@ function ProfilingTransactionsContent(props: ProfilingTabContentProps) {
             </PanelsGrid>
           )}
           <Fragment>
+            <TableHeader>
+              <TableHeaderTitle>{t('Transactions')}</TableHeaderTitle>
+              <TableHeaderActions>
+                <StyledPagination
+                  pageLinks={
+                    transactions.status === 'success'
+                      ? transactions.getResponseHeader?.('Link') ?? null
+                      : null
+                  }
+                />
+              </TableHeaderActions>
+            </TableHeader>
             <ProfileEventsTable
               columns={fields.slice()}
               data={transactions.status === 'success' ? transactions.data : null}
@@ -538,13 +555,6 @@ function ProfilingTransactionsContent(props: ProfilingTabContentProps) {
               sort={sort}
               sortableColumns={new Set(fields)}
             />
-            <Pagination
-              pageLinks={
-                transactions.status === 'success'
-                  ? transactions.getResponseHeader?.('Link') ?? null
-                  : null
-              }
-            />
           </Fragment>
         </Fragment>
       )}
@@ -694,6 +704,10 @@ const WidgetsContainer = styled('div')`
   }
 `;
 
+const StyledPagination = styled(Pagination)`
+  margin: 0;
+`;
+
 function ProfilingContentWrapper(props: ProfilingContentProps) {
   const organization = useOrganization();
 

static/app/views/profiling/landing/slowestFunctionsTable.tsx

@@ -28,6 +28,9 @@ import {
   TableBodyCell,
   TableHead,
   TableHeadCell,
+  TableHeader,
+  TableHeaderActions,
+  TableHeaderTitle,
   TableRow,
   TableStatus,
   useTableStyles,
@@ -137,6 +140,27 @@ export function SlowestFunctionsTable({userQuery}: {userQuery?: string}) {
 
   return (
     <Fragment>
+      <TableHeader>
+        <TableHeaderTitle>{t('Slowest Functions')}</TableHeaderTitle>
+        <TableHeaderActions>
+          <SlowestFunctionsPaginationContainer>
+            <ButtonBar merged>
+              <Button
+                icon={<IconChevron direction="left" />}
+                aria-label={t('Previous')}
+                size={'sm'}
+                {...pagination.previousButtonProps}
+              />
+              <Button
+                icon={<IconChevron direction="right" />}
+                aria-label={t('Next')}
+                size={'sm'}
+                {...pagination.nextButtonProps}
+              />
+            </ButtonBar>
+          </SlowestFunctionsPaginationContainer>
+        </TableHeaderActions>
+      </TableHeader>
       <Table style={tableStyles}>
         <TableHead>
           <TableRow>
@@ -180,22 +204,6 @@ export function SlowestFunctionsTable({userQuery}: {userQuery?: string}) {
             })}
         </TableBody>
       </Table>
-      <SlowestFunctionsPaginationContainer>
-        <ButtonBar merged>
-          <Button
-            icon={<IconChevron direction="left" />}
-            aria-label={t('Previous')}
-            size={'sm'}
-            {...pagination.previousButtonProps}
-          />
-          <Button
-            icon={<IconChevron direction="right" />}
-            aria-label={t('Next')}
-            size={'sm'}
-            {...pagination.nextButtonProps}
-          />
-        </ButtonBar>
-      </SlowestFunctionsPaginationContainer>
     </Fragment>
   );
 }
@@ -514,5 +522,4 @@ const SlowestFunctionsExamplesContainerRow = styled('div')`
 const SlowestFunctionsPaginationContainer = styled('div')`
   display: flex;
   justify-content: flex-end;
-  margin-bottom: ${space(2)};
 `;