switch to button in the tabs above the table

Author: JoshuaKGoldberg

static/app/views/explore/logs/logsTab.tsx

@@ -94,6 +94,8 @@ import {useRawCounts} from 'sentry/views/explore/useRawCounts';
 // eslint-disable-next-line boundaries/element-types
 import QuotaExceededAlert from 'getsentry/components/performance/quotaExceededAlert';
 
+import {useExpandoButton} from './tables/useExpandoButton';
+
 type LogsTabProps = {
   datePageFilterProps: DatePageFilterProps;
 };
@@ -329,6 +331,8 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
 
   const {infiniteLogsQueryResult} = useLogsPageData();
 
+  const {expansion, expando} = useExpandoButton();
+
   return (
     <SearchQueryBuilderProvider
       enableAISearch={areAiFeaturesAllowed}
@@ -467,12 +471,14 @@ export function LogsTabContent({datePageFilterProps}: LogsTabProps) {
                     </Button>
                   }
                 />
+                {tableTab === 'logs' && expando}
               </TableActionsContainer>
             )}
           </LogsTableActionsContainer>
           <LogsItemContainer>
             {tableTab === 'logs' ? (
               <LogsInfiniteTable
+                expansion={expansion}
                 stringAttributes={stringAttributes}
                 numberAttributes={numberAttributes}
               />

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -1,5 +1,14 @@
-import type {CSSProperties, RefObject} from 'react';
-import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type RefObject,
+} from 'react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import type {Virtualizer} from '@tanstack/react-virtual';
@@ -49,7 +58,7 @@ import {
   LogTableRow,
 } from 'sentry/views/explore/logs/styles';
 import {LogRowContent} from 'sentry/views/explore/logs/tables/logsTableRow';
-import {useExpandoButton} from 'sentry/views/explore/logs/tables/useExpandoButton';
+import type {ExpansionState} from 'sentry/views/explore/logs/tables/useExpandoButton';
 import {
   OurLogKnownFieldKey,
   type OurLogsResponseItem,
@@ -91,6 +100,7 @@ type LogsTableProps = {
     showVerticalScrollbar?: boolean;
   };
   emptyRenderer?: () => React.ReactNode;
+  expansion?: ExpansionState;
   localOnlyItemFilters?: {
     filterText: string;
     filteredItems: OurLogsResponseItem[];
@@ -107,6 +117,7 @@ export function LogsInfiniteTable({
   embedded = false,
   localOnlyItemFilters,
   emptyRenderer,
+  expansion,
   numberAttributes,
   stringAttributes,
   booleanAttributes,
@@ -252,18 +263,18 @@ export function LogsInfiniteTable({
     return terms;
   }, [search, localOnlyItemFilters?.filterText]);
 
-  const {expanded, expando} = useExpandoButton(() => {
-    virtualizer.measure();
-  });
-
   const virtualizer = useVirtualizer<HTMLElement, Element>({
     count: data?.length ?? 0,
     estimateSize,
-    overscan: expanded ? 25 : 10,
+    overscan: expansion?.expanded === false ? 10 : 25,
     getScrollElement: () => tableBodyRef?.current,
     getItemKey: (index: number) => data?.[index]?.[OurLogKnownFieldKey.ID] ?? index,
   });
 
+  useLayoutEffect(() => {
+    virtualizer.measure();
+  }, [expansion?.expanded, virtualizer]);
+
   const virtualItems = virtualizer.getVirtualItems();
 
   const firstItem = virtualItems[0]?.start;
@@ -386,13 +397,19 @@ export function LogsInfiniteTable({
     }
   }, [hasReplay, firstItemIndex, lastItemIndex, onRowsRendered]);
 
-  const handleExpand = useCallback((logItemId: string) => {
-    setExpandedLogRows(prev => {
-      const newSet = new Set(prev);
-      newSet.add(logItemId);
-      return newSet;
-    });
-  }, []);
+  const handleExpand = useCallback(
+    (logItemId: string) => {
+      setExpandedLogRows(prev => {
+        const newSet = new Set(prev);
+        newSet.add(logItemId);
+        return newSet;
+      });
+      if (expansion?.expanded === false) {
+        expansion.toggle();
+      }
+    },
+    [expansion]
+  );
   const handleExpandHeight = useCallback((logItemId: string, estimatedHeight: number) => {
     setExpandedLogRowsHeights(prev => ({...prev, [logItemId]: estimatedHeight}));
   }, []);
@@ -441,7 +458,6 @@ export function LogsInfiniteTable({
 
   return (
     <Fragment>
-      {expando}
       <Table
         ref={tableRef}
         style={initialTableStyles}
@@ -463,7 +479,7 @@ export function LogsInfiniteTable({
           showHeader={!embedded}
           ref={tableBodyRef}
           disableBodyPadding={embeddedStyling?.disableBodyPadding}
-          expanded={expanded}
+          expanded={expansion?.expanded !== false}
         >
           {paddingTop > 0 && (
             <TableRow>
@@ -530,7 +546,7 @@ export function LogsInfiniteTable({
           )}
         </LogTableBody>
       </Table>
-      {expanded && (
+      {expansion?.expanded !== false && (
         <FloatingBackToTopContainer
           inReplay={!!embeddedOptions?.replay}
           tableLeft={tableRef.current?.getBoundingClientRect().left ?? 0}

static/app/views/explore/logs/tables/useExpandoButton.tsx

@@ -1,24 +1,31 @@
-import {useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
 
-import {IconContract, IconExpand} from 'sentry/icons';
+import {IconFocus} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {TableActionButton} from 'sentry/views/explore/components/tableActionButton';
 
-export function useExpandoButton(onToggle: () => void) {
+export interface ExpansionState {
+  expanded: boolean;
+  toggle: () => void;
+}
+
+interface UsedExpandoButton {
+  expando: React.ReactNode;
+  expansion: ExpansionState;
+}
+
+export function useExpandoButton(): UsedExpandoButton {
   const [expanded, setExpanded] = useState(false);
   const ref = useRef<HTMLButtonElement>(null);
 
-  const [Icon, text] = expanded
-    ? [IconContract, t('Collapse')]
-    : [IconExpand, t('Expand')];
-
-  const toggleExpanded = () => {
+  const toggle = useCallback(() => {
     setExpanded(!expanded);
-    onToggle();
-  };
+  }, [expanded]);
+
+  const expansion = useMemo(() => ({expanded, toggle}), [expanded, toggle]);
 
   useLayoutEffect(() => {
     if (expanded) {
@@ -28,16 +35,17 @@ export function useExpandoButton(onToggle: () => void) {
     }
   }, [expanded]);
 
+  const text = expanded ? t('Collapse') : t('Expand');
+
   const buttonProps = {
     'aria-label': text,
-    icon: <Icon />,
-    onClick: toggleExpanded,
+    icon: <IconFocus isFocused={!expanded} />,
+    onClick: toggle,
     ref,
     size: 'sm',
   } as const;
 
   return {
-    expanded,
     expando: (
       <ExpandoContainer>
         <TableActionButton
@@ -46,16 +54,12 @@ export function useExpandoButton(onToggle: () => void) {
         />
       </ExpandoContainer>
     ),
+    expansion,
   };
 }
 
 const ExpandoButton = styled(Button)`
   scroll-margin-top: 0.75rem;
 `;
 
-const ExpandoContainer = styled('div')`
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 1;
-`;
+const ExpandoContainer = styled('div')``;