feat(issues): Remove quicktrace component, move tracelink (#66333)

static/app/views/issueDetails/quickTrace/index.spec.tsx

@@ -1,33 +0,0 @@
-import {EventFixture} from 'sentry-fixture/event';
-import {GroupFixture} from 'sentry-fixture/group';
-import {LocationFixture} from 'sentry-fixture/locationFixture';
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
-import {render} from 'sentry-test/reactTestingLibrary';
-
-import QuickTrace from 'sentry/views/issueDetails/quickTrace';
-
-describe('IssueQuickTrace', () => {
-  const defaultProps = {
-    organization: OrganizationFixture({features: ['performance-view']}),
-    event: EventFixture({contexts: {trace: {trace_id: 100}}}),
-    group: GroupFixture(),
-    location: LocationFixture(),
-  };
-
-  it('renders nothing without performance-view flag', () => {
-    const {container} = render(
-      <QuickTrace {...defaultProps} organization={OrganizationFixture()} />
-    );
-
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('renders nothing if event does not have a trace context', () => {
-    const {container} = render(
-      <QuickTrace {...defaultProps} event={EventFixture({contexts: {}})} />
-    );
-
-    expect(container).toBeEmptyDOMElement();
-  });
-});

static/app/views/issueDetails/quickTrace/index.tsx

@@ -1,53 +0,0 @@
-import {useContext} from 'react';
-import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
-import type {Location} from 'history';
-
-import Placeholder from 'sentry/components/placeholder';
-import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types';
-import type {Event} from 'sentry/types/event';
-import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
-import useMedia from 'sentry/utils/useMedia';
-
-import IssueQuickTrace from './issueQuickTrace';
-
-type Props = {
-  event: Event;
-  location: Location;
-  organization: Organization;
-};
-
-function QuickTrace({event, organization, location}: Props) {
-  const theme = useTheme();
-  const hasPerformanceView = organization.features.includes('performance-view');
-  const hasTraceContext = Boolean(event.contexts?.trace?.trace_id);
-  const quickTrace = useContext(QuickTraceContext);
-
-  const isSmallViewport = useMedia(`(max-width: ${theme.breakpoints.small})`);
-
-  if (isSmallViewport || !hasPerformanceView || !hasTraceContext) {
-    return null;
-  }
-
-  if (quickTrace?.isLoading) {
-    return <TracePlaceholder height="20px" />;
-  }
-
-  return (
-    <IssueQuickTrace
-      organization={organization}
-      event={event}
-      location={location}
-      quickTrace={quickTrace}
-    />
-  );
-}
-
-const TracePlaceholder = styled(Placeholder)`
-  width: auto;
-  max-width: 300px;
-  margin-top: ${space(0.75)};
-`;
-
-export default QuickTrace;

static/app/views/issueDetails/quickTrace/issueQuickTrace.tsx

@@ -1,98 +0,0 @@
-import {Fragment} from 'react';
-import styled from '@emotion/styled';
-import type {Location} from 'history';
-
-import ErrorBoundary from 'sentry/components/errorBoundary';
-import QuickTrace from 'sentry/components/quickTrace';
-import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types';
-import type {Event} from 'sentry/types/event';
-import {defined} from 'sentry/utils';
-import TraceMetaQuery from 'sentry/utils/performance/quickTrace/traceMetaQuery';
-import type {QuickTraceQueryChildrenProps} from 'sentry/utils/performance/quickTrace/types';
-import {getTraceTimeRangeFromEvent} from 'sentry/utils/performance/quickTrace/utils';
-import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
-import {TraceLink} from 'sentry/views/issueDetails/quickTrace/traceLink';
-
-type Props = {
-  event: Event;
-  location: Location;
-  organization: Organization;
-  quickTrace: undefined | QuickTraceQueryChildrenProps;
-};
-
-function IssueQuickTrace({event, location, organization, quickTrace}: Props) {
-  const isTraceMissing =
-    !quickTrace ||
-    quickTrace.error ||
-    ((!defined(quickTrace.trace) || quickTrace.trace.length === 0) &&
-      (!quickTrace.orphanErrors || quickTrace.orphanErrors?.length === 0));
-  const traceId = event.contexts?.trace?.trace_id ?? '';
-  const {start, end} = getTraceTimeRangeFromEvent(event);
-
-  useRouteAnalyticsParams({
-    trace_status: isTraceMissing
-      ? quickTrace?.type === 'missing'
-        ? 'transaction missing'
-        : 'trace missing'
-      : 'success',
-  });
-
-  if (isTraceMissing) {
-    return (
-      <QuickTraceWrapper>
-        <TraceLink
-          quickTrace={quickTrace}
-          event={event}
-          traceMeta={null}
-          source="issues"
-        />
-      </QuickTraceWrapper>
-    );
-  }
-
-  return (
-    <ErrorBoundary mini>
-      <QuickTraceWrapper>
-        <TraceMetaQuery
-          location={location}
-          orgSlug={organization.slug}
-          traceId={traceId}
-          start={start}
-          end={end}
-        >
-          {metaResults => (
-            <Fragment>
-              <QuickTrace
-                event={event}
-                quickTrace={quickTrace}
-                location={location}
-                organization={organization}
-                anchor="left"
-                errorDest="issue"
-                transactionDest="performance"
-              />
-              <TraceLink
-                quickTrace={quickTrace}
-                event={event}
-                traceMeta={metaResults?.meta ?? null}
-                source="issues"
-              />
-            </Fragment>
-          )}
-        </TraceMetaQuery>
-      </QuickTraceWrapper>
-    </ErrorBoundary>
-  );
-}
-
-const QuickTraceWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(0.75)};
-  flex-wrap: wrap;
-  margin-top: ${space(0.75)};
-  height: 20px;
-`;
-
-export default IssueQuickTrace;

static/app/views/issueDetails/quickTrace/usePromptCheck.tsx

@@ -1,46 +0,0 @@
-import {useCallback, useEffect, useState} from 'react';
-
-import {promptsCheck, promptsUpdate} from 'sentry/actionCreators/prompts';
-import type {Organization} from 'sentry/types';
-import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
-import useApi from 'sentry/utils/useApi';
-
-type Opts = {
-  feature: string;
-  organization: Organization;
-  projectId: string;
-};
-
-function usePromptCheck({feature, organization, projectId}: Opts) {
-  const api = useApi();
-
-  const [shouldShowPrompt, setShouldShow] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    promptsCheck(api, {
-      organization,
-      projectId,
-      feature,
-    }).then(data => {
-      setShouldShow(!promptIsDismissed(data ?? {}, 30));
-    });
-  }, [api, feature, organization, projectId]);
-
-  const snoozePrompt = useCallback(async () => {
-    const data = {
-      projectId,
-      organization,
-      feature,
-      status: 'snoozed' as const,
-    };
-    await promptsUpdate(api, data);
-    setShouldShow(false);
-  }, [api, feature, organization, projectId]);
-
-  return {
-    shouldShowPrompt,
-    snoozePrompt,
-  };
-}
-
-export default usePromptCheck;

static/app/views/performance/transactionDetails/quickTraceMeta.tsx

@@ -16,9 +16,9 @@ import type {
   TraceMeta,
 } from 'sentry/utils/performance/quickTrace/types';
 import useOrganization from 'sentry/utils/useOrganization';
-import {TraceLink} from 'sentry/views/issueDetails/quickTrace/traceLink';
 
 import {MetaData} from './styles';
+import {TraceLink} from './traceLink';
 
 interface Props
   extends Pick<React.ComponentProps<typeof QuickTrace>, 'errorDest' | 'transactionDest'> {