feat(explore): Way to go back to trace explorer (#77183)

Zylphrex · web-flow · commit fd20719bf3ae · 2024-09-09T20:46:49.000Z
For convenience, this button takes you back to the old trace explorer. The only way to undo is to remove the `view` query param or click `Traces` in the side bar again. # Screenshot ![image](https://github.com/user-attachments/assets/ce950d2c-12f4-48d4-ace3-9508414ec9e3)
diff --git a/static/app/views/explore/content.tsx b/static/app/views/explore/content.tsx
@@ -1,6 +1,10 @@
+import {useCallback} from 'react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
+import {Button} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
+import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
@@ -11,6 +15,8 @@ import {SpanSearchQueryBuilder} from 'sentry/components/performance/spanSearchQu
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
@@ -24,6 +30,8 @@ interface ExploreContentProps {
 }
 
 export function ExploreContent({}: ExploreContentProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
   const organization = useOrganization();
   const {selection} = usePageFilters();
 
@@ -33,29 +41,47 @@ export function ExploreContent({}: ExploreContentProps) {
     ? ['dataset toggle' as const]
     : [];
 
+  const switchToOldTraceExplorer = useCallback(() => {
+    navigate({
+      ...location,
+      query: {
+        ...location.query,
+        view: 'trace',
+      },
+    });
+  }, [location, navigate]);
+
   return (
     <SentryDocumentTitle title={t('Explore')} orgSlug={organization.slug}>
       <PageFiltersContainer>
         <Layout.Page>
           <Layout.Header>
-            <HeaderContent>
+            <Layout.HeaderContent>
               <Title>{t('Explore')}</Title>
-              <FilterActions>
-                <PageFilterBar condensed>
-                  <ProjectPageFilter />
-                  <EnvironmentPageFilter />
-                  <DatePageFilter />
-                </PageFilterBar>
-                <SpanSearchQueryBuilder
-                  projects={selection.projects}
-                  initialQuery={userQuery}
-                  onSearch={setUserQuery}
-                  searchSource="explore"
-                />
-              </FilterActions>
-            </HeaderContent>
+            </Layout.HeaderContent>
+            <Layout.HeaderActions>
+              <ButtonBar gap={1}>
+                <Button onClick={switchToOldTraceExplorer}>
+                  {t('Switch to old Trace Explore')}
+                </Button>
+                <FeedbackWidgetButton />
+              </ButtonBar>
+            </Layout.HeaderActions>
           </Layout.Header>
           <Body>
+            <FilterActions>
+              <PageFilterBar condensed>
+                <ProjectPageFilter />
+                <EnvironmentPageFilter />
+                <DatePageFilter />
+              </PageFilterBar>
+              <SpanSearchQueryBuilder
+                projects={selection.projects}
+                initialQuery={userQuery}
+                onSearch={setUserQuery}
+                searchSource="explore"
+              />
+            </FilterActions>
             <Side>
               <ExploreToolbar extras={toolbarExtras} />
             </Side>
@@ -70,15 +96,12 @@ export function ExploreContent({}: ExploreContentProps) {
   );
 }
 
-const HeaderContent = styled(Layout.HeaderContent)`
-  overflow: visible;
-`;
-
 const Title = styled(Layout.Title)`
   margin-bottom: ${space(2)};
 `;
 
 const FilterActions = styled('div')`
+  grid-column: 1 / -1;
   display: grid;
   gap: ${space(2)};
   grid-template-columns: auto;
diff --git a/static/app/views/traces/content.tsx b/static/app/views/traces/content.tsx
@@ -37,9 +37,13 @@ const DEFAULT_STATS_PERIOD = '24h';
 const DEFAULT_PER_PAGE = 50;
 
 export default function Wrapper(props) {
+  const location = useLocation();
   const organization = useOrganization();
 
-  if (organization.features.includes('visibility-explore-view')) {
+  if (
+    location.query.view !== 'trace' &&
+    organization.features.includes('visibility-explore-view')
+  ) {
     return <ExploreContent {...props} />;
   }
 
