fix(ourlogs): Search and display fixes for embedded views (#90940)

- Do not show cell actions in embedded tables
- Add a test to such effect
- Rename things to be consistent everywhere (just isFrozen)
- Refactor the issues section
- Do not entirely hide the section if your search returns empty results
(unreported bug)
- Use useState for search on embedded pages (issues, trace view)

Fixes LOGS-82

Author: colin-sentry

static/app/components/events/breadcrumbs/combinedBreadcrumbsAndLogsSection.tsx

@@ -9,16 +9,21 @@ import {
   NavigationCrumbs,
   ShortId,
 } from 'sentry/components/events/eventDrawer';
+import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
 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 {getShortEventId} from 'sentry/utils/events';
-import {TraceItemSearchQueryBuilder} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {
+  TraceItemSearchQueryBuilder,
+  useSearchQueryBuilderProps,
+} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
 import {
   useLogsSearch,
-  useSetLogsQuery,
+  useSetLogsSearch,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {useTraceItemAttributes} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {LogsTable} from 'sentry/views/explore/logs/logsTable';
@@ -31,12 +36,24 @@ interface LogIssueDrawerProps {
   project: Project;
 }
 
-export function LogsIssueDrawer({event, project, group}: LogIssueDrawerProps) {
-  const setLogsQuery = useSetLogsQuery();
+export function OurlogsDrawer({event, project, group}: LogIssueDrawerProps) {
+  const setLogsSearch = useSetLogsSearch();
   const logsSearch = useLogsSearch();
   const tableData = useExploreLogsTable({});
-  const {attributes: stringTags} = useTraceItemAttributes('string');
-  const {attributes: numberTags} = useTraceItemAttributes('number');
+  const {attributes: stringAttributes} = useTraceItemAttributes('string');
+  const {attributes: numberAttributes} = useTraceItemAttributes('number');
+
+  const tracesItemSearchQueryBuilderProps = {
+    initialQuery: logsSearch.formatString(),
+    searchSource: 'ourlogs',
+    onSearch: (query: string) => setLogsSearch(new MutableSearch(query)),
+    numberAttributes,
+    stringAttributes,
+    itemType: TraceItemDataset.LOGS,
+  };
+  const searchQueryBuilderProps = useSearchQueryBuilderProps(
+    tracesItemSearchQueryBuilderProps
+  );
 
   return (
     <EventDrawerContainer>
@@ -57,17 +74,12 @@ export function LogsIssueDrawer({event, project, group}: LogIssueDrawerProps) {
         />
       </EventDrawerHeader>
       <EventDrawerBody>
-        <LogsTableContainer>
-          <TraceItemSearchQueryBuilder
-            initialQuery={logsSearch.formatString()}
-            searchSource="ourlogs"
-            onSearch={setLogsQuery}
-            numberAttributes={numberTags}
-            stringAttributes={stringTags}
-            itemType={TraceItemDataset.LOGS}
-          />
-          <LogsTable showHeader={false} allowPagination tableData={tableData} />
-        </LogsTableContainer>
+        <SearchQueryBuilderProvider {...searchQueryBuilderProps}>
+          <LogsTableContainer>
+            <TraceItemSearchQueryBuilder {...tracesItemSearchQueryBuilderProps} />
+            <LogsTable showHeader={false} allowPagination tableData={tableData} />
+          </LogsTableContainer>
+        </SearchQueryBuilderProvider>
       </EventDrawerBody>
     </EventDrawerContainer>
   );

static/app/views/explore/logs/logsIssueDrawer.tsx renamed to static/app/components/events/ourlogs/ourlogsDrawer.tsx

@@ -2,6 +2,7 @@ import {useCallback} 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';
@@ -14,37 +15,53 @@ import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent
 import useOrganization from 'sentry/utils/useOrganization';
 import {
   LogsPageParamsProvider,
-  type LogsPageParamsProviderProps,
+  useLogsSearch,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
-import {LogsIssueDrawer} from 'sentry/views/explore/logs/logsIssueDrawer';
 import {LogsTable} from 'sentry/views/explore/logs/logsTable';
-import {
-  useExploreLogsTable,
-  type UseExploreLogsTableResult,
-} from 'sentry/views/explore/logs/useLogsQuery';
+import {useExploreLogsTable} from 'sentry/views/explore/logs/useLogsQuery';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
-export function LogsIssuesSection({
-  initialCollapse,
-  isOnEmbeddedView,
-  limitToTraceId,
+export function OurlogsSection({
   event,
   project,
   group,
 }: {
   event: Event;
   group: Group;
-  initialCollapse: boolean;
   project: Project;
-} & Omit<LogsPageParamsProviderProps, 'children' | 'analyticsPageSource'>) {
+}) {
+  return (
+    <LogsPageParamsProvider
+      analyticsPageSource={LogsAnalyticsPageSource.ISSUE_DETAILS}
+      isTableFrozen
+      blockRowExpanding
+      limitToTraceId={event.contexts?.trace?.trace_id}
+    >
+      <OurlogsSectionContent event={event} group={group} project={project} />
+    </LogsPageParamsProvider>
+  );
+}
+
+function OurlogsSectionContent({
+  event,
+  project,
+  group,
+}: {
+  event: Event;
+  group: Group;
+  project: Project;
+}) {
   const organization = useOrganization();
   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 {openDrawer} = useDrawer();
 
+  const limitToTraceId = event.contexts?.trace?.trace_id;
   const onOpenLogsDrawer = useCallback(() => {
     trackAnalytics('logs.issue_details.drawer_opened', {
       organization,
@@ -53,11 +70,11 @@ export function LogsIssuesSection({
       () => (
         <LogsPageParamsProvider
           analyticsPageSource={LogsAnalyticsPageSource.ISSUE_DETAILS}
-          isOnEmbeddedView
+          isTableFrozen
           limitToTraceId={limitToTraceId}
         >
           <TraceItemAttributeProvider traceItemType={TraceItemDataset.LOGS} enabled>
-            <LogsIssueDrawer group={group} event={event} project={project} />
+            <OurlogsDrawer group={group} event={event} project={project} />
           </TraceItemAttributeProvider>
         </LogsPageParamsProvider>
       ),
@@ -75,7 +92,7 @@ export function LogsIssuesSection({
     // We may change this in the future if we have a trace-group or we generate trace sids for these issue types.
     return null;
   }
-  if (tableData?.data?.length === 0) {
+  if (!tableData || (tableData.data?.length === 0 && logsSearch.isEmpty())) {
     // Like breadcrumbs, we don't show the logs section if there are no logs.
     return null;
   }
@@ -85,52 +102,40 @@ export function LogsIssuesSection({
       type={SectionKey.LOGS}
       title={t('Logs')}
       data-test-id="logs-data-section"
-      initialCollapse={initialCollapse}
     >
-      <LogsPageParamsProvider
-        analyticsPageSource={LogsAnalyticsPageSource.ISSUE_DETAILS}
-        isOnEmbeddedView={isOnEmbeddedView}
-        limitToTraceId={limitToTraceId}
-      >
-        <LogsSectionContent tableData={tableData} openDrawer={onOpenLogsDrawer} />
-      </LogsPageParamsProvider>
+      <LogContentWrapper onClick={() => onOpenLogsDrawer()}>
+        <LogsTable
+          showHeader={false}
+          allowPagination={false}
+          tableData={abbreviatedTableData}
+        />
+        {tableData.data?.length > 5 ? (
+          <div>
+            <Button
+              icon={<IconChevron direction="right" />}
+              aria-label={t('View more')}
+              size="md"
+              onClick={() => onOpenLogsDrawer()}
+            >
+              {t('View more')}
+            </Button>
+          </div>
+        ) : null}
+      </LogContentWrapper>
     </InterimSection>
   );
 }
 
-function LogsSectionContent({
-  tableData,
-  openDrawer,
-}: {
-  openDrawer: () => void;
-  tableData: UseExploreLogsTableResult;
-}) {
-  const abbreviatedTableData = {...tableData, data: (tableData.data ?? []).slice(0, 5)};
-  return (
-    <LogContentWrapper>
-      <LogsTable
-        showHeader={false}
-        allowPagination={false}
-        tableData={abbreviatedTableData}
-      />
-      {tableData.data?.length > 5 ? (
-        <div>
-          <Button
-            icon={<IconChevron direction="right" />}
-            aria-label={t('View more')}
-            size="md"
-            onClick={() => openDrawer()}
-          >
-            {t('View more')}
-          </Button>
-        </div>
-      ) : null}
-    </LogContentWrapper>
-  );
-}
-
-const LogContentWrapper = styled('div')`
+const LogContentWrapper = styled('button')`
+  all: unset;
   display: flex;
   flex-direction: column;
   gap: ${space(1)};
+  pointer-events: auto;
+  cursor: pointer;
+
+  * {
+    pointer-events: none !important;
+    cursor: inherit !important;
+  }
 `;