move everything around, fix many bugs

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,36 +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,
-  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,
@@ -56,7 +74,7 @@ export function LogsIssuesSection({
           limitToTraceId={limitToTraceId}
         >
           <TraceItemAttributeProvider traceItemType={TraceItemDataset.LOGS} enabled>
-            <LogsIssueDrawer group={group} event={event} project={project} />
+            <OurlogsDrawer group={group} event={event} project={project} />
           </TraceItemAttributeProvider>
         </LogsPageParamsProvider>
       ),
@@ -73,7 +91,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;
   }
@@ -83,53 +101,40 @@ export function LogsIssuesSection({
       type={SectionKey.LOGS}
       title={t('Logs')}
       data-test-id="logs-data-section"
-      initialCollapse={initialCollapse}
     >
-      <LogsPageParamsProvider
-        analyticsPageSource={LogsAnalyticsPageSource.ISSUE_DETAILS}
-        isTableFrozen
-        blockRowExpanding
-        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;
+  }
 `;

static/app/views/explore/logs/logsIssuesSection.tsx renamed to static/app/components/events/ourlogs/ourlogsSection.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useLayoutEffect} from 'react';
+import {useCallback, useLayoutEffect, useState} from 'react';
 import type {Location} from 'history';
 
 import type {CursorHandler} from 'sentry/components/pagination';
@@ -36,9 +36,14 @@ interface LogsPageParams {
   readonly fields: string[];
   readonly isTableFrozen: boolean | undefined;
   readonly search: MutableSearch;
+  /**
+   * On frozen pages (like the issues page), we don't want to store the search in the URL
+   * Instead, use a useState in the context, so that it's dropped if you navigate away or refresh.
+   */
+  readonly setSearchForFrozenPages: (val: MutableSearch) => void;
   readonly sortBys: Sort[];
   /**
-   * The base search, which doesn't appear in the URL or the search bar, used for adding traceid etc..
+   * The base search, which doesn't appear in the URL or the search bar, used for adding traceid etc.
    */
   readonly baseSearch?: MutableSearch;
   /**
@@ -76,7 +81,11 @@ export function LogsPageParamsProvider({
 }: LogsPageParamsProviderProps) {
   const location = useLocation();
   const logsQuery = decodeLogsQuery(location);
-  const search = new MutableSearch(logsQuery);
+
+  // on embedded pages with search bars, use a useState instead of a URL parameter
+  const [searchForFrozenPages, setSearchForFrozenPages] = useState(new MutableSearch(''));
+
+  const search = isTableFrozen ? searchForFrozenPages : new MutableSearch(logsQuery);
   let baseSearch: MutableSearch | undefined = undefined;
   if (limitToSpanId && limitToTraceId) {
     baseSearch = baseSearch ?? new MutableSearch('');
@@ -103,6 +112,7 @@ export function LogsPageParamsProvider({
       value={{
         fields,
         search,
+        setSearchForFrozenPages,
         sortBys,
         cursor,
         isTableFrozen,
@@ -184,24 +194,19 @@ export function useLogsBaseSearch(): MutableSearch | undefined {
   return baseSearch;
 }
 
-export function useSetLogsQuery() {
-  const setPageParams = useSetLogsPageParams();
-  return useCallback(
-    (query: string) => {
-      setPageParams({search: new MutableSearch(query)});
-    },
-    [setPageParams]
-  );
-}
-
 export function useSetLogsSearch() {
   const setPageParams = useSetLogsPageParams();
-  return useCallback(
+  const {setSearchForFrozenPages, isTableFrozen} = useLogsPageParams();
+  const setPageParamsCallback = useCallback(
     (search: MutableSearch) => {
       setPageParams({search});
     },
     [setPageParams]
   );
+  if (isTableFrozen) {
+    return setSearchForFrozenPages;
+  }
+  return setPageParamsCallback;
 }
 
 export function useLogsIsTableFrozen() {