Revert "feat(explore): Add tour for explore spans" (#89463)

Reverts #89248 temporarily due to interference with the
left-nav tour

https://sentry.slack.com/archives/C07FYJX72E5/p1744475783725279

Author: mrduncan

static/app/components/tours/components.tsx

@@ -1,5 +1,4 @@
-import type {CSSProperties, HTMLAttributes} from 'react';
-import {Fragment, useContext, useEffect, useMemo} from 'react';
+import {Fragment, type HTMLAttributes, useContext, useEffect, useMemo} from 'react';
 import {createPortal} from 'react-dom';
 import {ClassNames, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -184,7 +183,6 @@ export interface TourElementProps<T extends TourEnumType>
    * The actions to display in the tour element.
    */
   actions?: React.ReactNode;
-  margin?: number;
   /**
    * The position of the tour element.
    */
@@ -221,7 +219,6 @@ export function TourElementContent<T extends TourEnumType>({
   position,
   className,
   actions,
-  margin,
 }: TourElementContentProps<T>) {
   const organization = useOrganization();
   const {
@@ -318,7 +315,6 @@ export function TourElementContent<T extends TourEnumType>({
       stepCount={stepCount}
       stepTotal={stepTotal}
       id={`${id}`}
-      margin={margin}
     >
       {children}
     </TourGuide>
@@ -337,13 +333,17 @@ interface TourGuideProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'id
   actions?: React.ReactNode;
   handleDismiss?: (e: React.MouseEvent) => void;
   id?: string;
-  margin?: CSSProperties['margin'];
   offset?: UseOverlayProps['offset'];
   position?: UseOverlayProps['position'];
   stepCount?: number;
   stepTotal?: number;
   title?: React.ReactNode;
-  wrapperComponent?: React.ElementType;
+  wrapperComponent?: React.ComponentType<{
+    'aria-expanded': React.AriaAttributes['aria-expanded'];
+    children: React.ReactNode;
+    ref: React.RefAttributes<HTMLElement>['ref'];
+    prefersDarkMode?: boolean;
+  }>;
 }
 
 export function TourGuide({
@@ -359,7 +359,6 @@ export function TourGuide({
   wrapperComponent,
   stepTotal,
   offset,
-  margin,
 }: TourGuideProps) {
   const config = useLegacyStore(ConfigStore);
   const prefersDarkMode = config.theme === 'dark';
@@ -391,7 +390,7 @@ export function TourGuide({
         className={className}
         ref={triggerProps.ref}
         aria-expanded={triggerProps['aria-expanded']}
-        margin={`${margin}px`}
+        prefersDarkMode={prefersDarkMode}
       >
         {children}
       </Wrapper>
@@ -547,7 +546,7 @@ const BlurWindow = styled('div')`
   backdrop-filter: blur(3px);
 `;
 
-export const TourTriggerWrapper = styled('div')<{margin?: CSSProperties['margin']}>`
+const TourTriggerWrapper = styled('div')<{prefersDarkMode: boolean}>`
   &[aria-expanded='true'] {
     position: relative;
     z-index: ${p => p.theme.zIndex.tour.element};
@@ -561,7 +560,6 @@ export const TourTriggerWrapper = styled('div')<{margin?: CSSProperties['margin'
       inset: 0;
       border-radius: ${p => p.theme.borderRadius};
       box-shadow: inset 0 0 0 3px ${p => p.theme.tour.background};
-      margin: ${p => p.margin};
     }
   }
 `;

static/app/views/explore/content.tsx

@@ -1,66 +1,49 @@
-import type {ReactNode} from 'react';
-import {useCallback, useMemo} from 'react';
-import styled from '@emotion/styled';
+import {useCallback} from 'react';
 
 import Feature from 'sentry/components/acl/feature';
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
-import {LinkButton} from 'sentry/components/core/button';
+import {Button, LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
-import DropdownButton from 'sentry/components/dropdownButton';
-import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {TourContextProvider} from 'sentry/components/tours/components';
-import {useAssistant} from 'sentry/components/tours/useAssistant';
-import {IconMegaphone} from 'sentry/icons/iconMegaphone';
 import {t} from 'sentry/locale';
-import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
-import {trackAnalytics} from 'sentry/utils/analytics';
-import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import ExploreBreadcrumb from 'sentry/views/explore/components/breadcrumb';
 import {getIdFromLocation} from 'sentry/views/explore/contexts/pageParamsContext/id';
 import {getTitleFromLocation} from 'sentry/views/explore/contexts/pageParamsContext/title';
 import {SpansTabContent} from 'sentry/views/explore/spans/spansTab';
-import {
-  EXPLORE_SPANS_TOUR_GUIDE_KEY,
-  type ExploreSpansTour,
-  ExploreSpansTourContext,
-  ORDERED_EXPLORE_SPANS_TOUR,
-  useExploreSpansTourModal,
-} from 'sentry/views/explore/spans/tour';
-import {useExploreSpansTour} from 'sentry/views/explore/spans/tour';
 import {limitMaxPickableDays} from 'sentry/views/explore/utils';
 import {usePrefersStackedNav} from 'sentry/views/nav/prefersStackedNav';
 
 export function ExploreContent() {
-  return (
-    <SpansTabTour>
-      <ExploreContentImpl />
-    </SpansTabTour>
-  );
-}
-
-function ExploreContentImpl() {
   const organization = useOrganization();
   const {defaultPeriod, maxPickableDays, relativeOptions} =
     limitMaxPickableDays(organization);
   const prefersStackedNav = usePrefersStackedNav();
 
   const location = useLocation();
+  const navigate = useNavigate();
+  const switchToOldTraceExplorer = useCallback(() => {
+    navigate({
+      ...location,
+      query: {
+        ...location.query,
+        view: 'trace',
+      },
+    });
+  }, [location, navigate]);
 
   const hasSavedQueries = organization.features.includes('performance-saved-queries');
 
   const title = getTitleFromLocation(location);
   const id = getIdFromLocation(location);
 
-  useExploreSpansTourModal();
-
   return (
     <SentryDocumentTitle title={t('Traces')} orgSlug={organization?.slug}>
       <PageFiltersContainer maxPickableDays={maxPickableDays}>
@@ -89,6 +72,11 @@ function ExploreContentImpl() {
             </Layout.HeaderContent>
             <Layout.HeaderActions>
               <ButtonBar gap={1}>
+                <Feature organization={organization} features="visibility-explore-admin">
+                  <Button onClick={switchToOldTraceExplorer} size="sm">
+                    {t('Switch to Old Trace Explore')}
+                  </Button>
+                </Feature>
                 {!prefersStackedNav && (
                   <Feature
                     organization={organization}
@@ -102,7 +90,7 @@ function ExploreContentImpl() {
                     </LinkButton>
                   </Feature>
                 )}
-                <ActionsButton organization={organization} />
+                <FeedbackWidgetButton />
               </ButtonBar>
             </Layout.HeaderActions>
           </Layout.Header>
@@ -116,106 +104,3 @@ function ExploreContentImpl() {
     </SentryDocumentTitle>
   );
 }
-
-interface SpansTabTourProps {
-  children: ReactNode;
-}
-
-function SpansTabTour({children}: SpansTabTourProps) {
-  const {data: assistantData} = useAssistant();
-  const isTourCompleted = useMemo(() => {
-    const tourData = assistantData?.find(
-      item => item.guide === EXPLORE_SPANS_TOUR_GUIDE_KEY
-    );
-
-    // Prevent tour from showing until assistant data is loaded
-    return tourData?.seen ?? true;
-  }, [assistantData]);
-
-  return (
-    <TourContextProvider<ExploreSpansTour>
-      tourKey={EXPLORE_SPANS_TOUR_GUIDE_KEY}
-      isCompleted={isTourCompleted}
-      orderedStepIds={ORDERED_EXPLORE_SPANS_TOUR}
-      TourContext={ExploreSpansTourContext}
-    >
-      {children}
-    </TourContextProvider>
-  );
-}
-
-interface ActionsButtonProps {
-  organization: Organization;
-}
-
-function ActionsButton({organization}: ActionsButtonProps) {
-  const {startTour, isRegistered} = useExploreSpansTour();
-  const openForm = useFeedbackForm();
-
-  const location = useLocation();
-  const navigate = useNavigate();
-  const switchToOldTraceExplorer = useCallback(() => {
-    navigate({
-      ...location,
-      query: {
-        ...location.query,
-        view: 'trace',
-      },
-    });
-  }, [location, navigate]);
-
-  const items = [
-    {
-      key: 'take-tour',
-      label: t('Take a tour'),
-      hidden: !isRegistered,
-      onAction: () => {
-        trackAnalytics('explore.spans.tour.started', {organization, method: 'dropdown'});
-        startTour();
-      },
-    },
-    {
-      key: 'give-feedback',
-      label: t('Give feedback on the UI'),
-      hidden: !openForm,
-      onAction: () => {
-        openForm?.({
-          messagePlaceholder: t('Tell us what you think about the new UI'),
-          tags: {
-            ['feedback.source']: 'explore.spans',
-            ['feedback.owner']: 'explore',
-          },
-        });
-      },
-    },
-    {
-      key: 'switch-to-old-ui',
-      label: t('Switch to old trace explore'),
-      hidden: !organization.features.includes('visibility-explore-admin'),
-      onAction: switchToOldTraceExplorer,
-    },
-  ];
-
-  return (
-    <DropdownMenu
-      trigger={triggerProps => (
-        <StyledDropdownButton
-          {...triggerProps}
-          size="sm"
-          aria-label={t('See Explore Spans Actions')}
-        >
-          <IconMegaphone />
-        </StyledDropdownButton>
-      )}
-      items={items}
-      position="bottom-end"
-    />
-  );
-}
-
-const StyledDropdownButton = styled(DropdownButton)`
-  color: ${p => p.theme.button.primary.background};
-  :hover {
-    color: ${p => p.theme.button.primary.background};
-  }
-`;