fix(ourlogs): Make the issues section use a "tiny" version of the logs table (#92162)

Fixes LOGS-137

Author: colin-sentry

static/app/components/events/ourlogs/ourlogsSection.tsx

@@ -1,24 +1,24 @@
-import {useCallback} from 'react';
+import {useCallback, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
 import {OurlogsDrawer} from 'sentry/components/events/ourlogs/ourlogsDrawer';
 import useDrawer from 'sentry/components/globalDrawer';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
 import useOrganization from 'sentry/utils/useOrganization';
+import {TableBody} from 'sentry/views/explore/components/table';
 import {
   LogsPageParamsProvider,
   useLogsSearch,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
-import {LogsTable} from 'sentry/views/explore/logs/logsTable';
+import {LogRowContent} from 'sentry/views/explore/logs/logsTableRow';
 import {useExploreLogsTable} from 'sentry/views/explore/logs/useLogsQuery';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
@@ -58,8 +58,10 @@ function OurlogsSectionContent({
   const feature = organization.features.includes('ourlogs-enabled');
   const tableData = useExploreLogsTable({enabled: feature, limit: 10});
   const logsSearch = useLogsSearch();
-  const abbreviatedTableData = {...tableData, data: (tableData.data ?? []).slice(0, 5)};
+  const abbreviatedTableData = (tableData.data ?? []).slice(0, 5);
   const {openDrawer} = useDrawer();
+  const logsTableRef = useRef<HTMLButtonElement>(null);
+  const sharedHoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const limitToTraceId = event.contexts?.trace?.trace_id;
   const onOpenLogsDrawer = useCallback(() => {
@@ -81,6 +83,14 @@ function OurlogsSectionContent({
       {
         ariaLabel: 'logs drawer',
         drawerKey: 'logs-issue-drawer',
+
+        shouldCloseOnInteractOutside: element => {
+          const viewAllButton = logsTableRef.current;
+          if (viewAllButton?.contains(element)) {
+            return false;
+          }
+          return true;
+        },
       }
     );
   }, [group, event, project, openDrawer, organization, limitToTraceId]);
@@ -103,39 +113,44 @@ function OurlogsSectionContent({
       title={t('Logs')}
       data-test-id="logs-data-section"
     >
-      <LogContentWrapper onClick={() => onOpenLogsDrawer()}>
-        <LogsTable
-          showHeader={false}
-          allowPagination={false}
-          tableData={abbreviatedTableData}
-        />
+      <SmallTableContentWrapper ref={logsTableRef} onClick={() => onOpenLogsDrawer()}>
+        <SmallTable>
+          <TableBody>
+            {abbreviatedTableData?.map((row, index) => (
+              <LogRowContent
+                dataRow={row}
+                meta={tableData.meta}
+                highlightTerms={[]}
+                sharedHoverTimeoutRef={sharedHoverTimeoutRef}
+                key={index}
+              />
+            ))}
+          </TableBody>
+        </SmallTable>
         {tableData.data?.length > 5 ? (
           <div>
             <Button
               icon={<IconChevron direction="right" />}
               aria-label={t('View more')}
-              size="md"
+              size="sm"
               onClick={() => onOpenLogsDrawer()}
             >
               {t('View more')}
             </Button>
           </div>
         ) : null}
-      </LogContentWrapper>
+      </SmallTableContentWrapper>
     </InterimSection>
   );
 }
 
-const LogContentWrapper = styled('button')`
+const SmallTable = styled('table')`
+  display: grid;
+  grid-template-columns: 15px auto 1fr;
+`;
+
+const SmallTableContentWrapper = styled('button')`
   all: unset;
   display: flex;
   flex-direction: column;
-  gap: ${space(1)};
-  pointer-events: auto;
-  cursor: pointer;
-
-  * {
-    pointer-events: none !important;
-    cursor: inherit !important;
-  }
 `;