fix(demo-mode): performance tour not starting (#101069)

Author: obostjancic

static/app/views/insights/pages/frontend/frontendOverviewTable.tsx

@@ -8,6 +8,7 @@ import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/tables/gridEd
 import useQueryBasedColumnResize from 'sentry/components/tables/gridEditable/useQueryBasedColumnResize';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
+import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -174,33 +175,42 @@ export function FrontendOverviewTable({displayPerfScore, response, sort}: Props)
       hasData={data.length > 0}
       isLoading={isLoading}
     >
-      <GridEditable
-        aria-label={t('Domains')}
-        isLoading={isLoading}
-        error={response.error}
-        data={data}
-        columnOrder={filteredColumns}
-        columnSortBy={[
-          {
-            key: sort.field,
-            order: sort.kind,
-          },
-        ]}
-        grid={{
-          prependColumnWidths: ['max-content'],
-          renderPrependColumns,
-          renderHeadCell: column =>
-            renderHeadCell({
-              column,
-              sort,
-              location,
-            }),
-          renderBodyCell: (column, row) =>
-            renderBodyCell(column, row, meta, location, organization, theme),
-          onResizeColumn: handleResizeColumn,
-        }}
-      />
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      <DemoTourElement
+        id={DemoTourStep.PERFORMANCE_TABLE}
+        title={t('See slow transactions')}
+        description={t(
+          `Trace slow-loading pages back to their API calls, as well as, related errors and users impacted across projects.
+      Select a transaction to see more details.`
+        )}
+      >
+        <GridEditable
+          aria-label={t('Domains')}
+          isLoading={isLoading}
+          error={response.error}
+          data={data}
+          columnOrder={filteredColumns}
+          columnSortBy={[
+            {
+              key: sort.field,
+              order: sort.kind,
+            },
+          ]}
+          grid={{
+            prependColumnWidths: ['max-content'],
+            renderPrependColumns,
+            renderHeadCell: column =>
+              renderHeadCell({
+                column,
+                sort,
+                location,
+              }),
+            renderBodyCell: (column, row) =>
+              renderBodyCell(column, row, meta, location, organization, theme),
+            onResizeColumn: handleResizeColumn,
+          }}
+        />
+        <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      </DemoTourElement>
     </VisuallyCompleteWithData>
   );
 }

static/app/views/performance/table.tsx

@@ -19,7 +19,6 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
-import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import type EventView from 'sentry/utils/discover/eventView';
@@ -600,69 +599,59 @@ class _Table extends Component<Props, State> {
     const columnSortBy = sortedEventView.getSorts();
 
     const prependColumnWidths = ['max-content'];
-
     return (
       <div data-test-id="performance-table">
-        <DemoTourElement
-          id={DemoTourStep.PERFORMANCE_TABLE}
-          title={t('See slow transactions')}
-          description={t(
-            `Trace slow-loading pages back to their API calls, as well as, related errors and users impacted across projects.
-            Select a transaction to see more details.`
-          )}
-        >
-          <MEPConsumer>
-            {value => {
-              return (
-                <DiscoverQuery
-                  eventView={sortedEventView}
-                  orgSlug={organization.slug}
-                  location={location}
-                  setError={error => setError(error?.message)}
-                  referrer="api.insights.landing-table"
-                  transactionName={transaction}
-                  transactionThreshold={transactionThreshold}
-                  queryExtras={getMEPQueryParams(value)}
-                >
-                  {({pageLinks, isLoading, tableData}) => (
-                    <TrackHasDataAnalytics isLoading={isLoading} tableData={tableData}>
-                      <VisuallyCompleteWithData
-                        id="PerformanceTable"
-                        hasData={
-                          !isLoading && !!tableData?.data && tableData.data.length > 0
-                        }
+        <MEPConsumer>
+          {value => {
+            return (
+              <DiscoverQuery
+                eventView={sortedEventView}
+                orgSlug={organization.slug}
+                location={location}
+                setError={error => setError(error?.message)}
+                referrer="api.insights.landing-table"
+                transactionName={transaction}
+                transactionThreshold={transactionThreshold}
+                queryExtras={getMEPQueryParams(value)}
+              >
+                {({pageLinks, isLoading, tableData}) => (
+                  <TrackHasDataAnalytics isLoading={isLoading} tableData={tableData}>
+                    <VisuallyCompleteWithData
+                      id="PerformanceTable"
+                      hasData={
+                        !isLoading && !!tableData?.data && tableData.data.length > 0
+                      }
+                      isLoading={isLoading}
+                    >
+                      <GridEditable
                         isLoading={isLoading}
-                      >
-                        <GridEditable
-                          isLoading={isLoading}
-                          data={tableData ? tableData.data : []}
-                          columnOrder={columnOrder}
-                          columnSortBy={columnSortBy}
-                          bodyStyle={{overflow: 'visible'}}
-                          grid={{
-                            onResizeColumn: this.handleResizeColumn,
-                            renderHeadCell: this.renderHeadCellWithMeta(
-                              tableData?.meta
-                            ) as any,
-                            renderBodyCell: this.renderBodyCellWithData(tableData) as any,
-                            renderPrependColumns: this.renderPrependCellWithData(
-                              tableData
-                            ) as any,
-                            prependColumnWidths,
-                          }}
-                        />
-                      </VisuallyCompleteWithData>
-                      <Pagination
-                        pageLinks={pageLinks}
-                        paginationAnalyticsEvent={this.paginationAnalyticsEvent}
+                        data={tableData ? tableData.data : []}
+                        columnOrder={columnOrder}
+                        columnSortBy={columnSortBy}
+                        bodyStyle={{overflow: 'visible'}}
+                        grid={{
+                          onResizeColumn: this.handleResizeColumn,
+                          renderHeadCell: this.renderHeadCellWithMeta(
+                            tableData?.meta
+                          ) as any,
+                          renderBodyCell: this.renderBodyCellWithData(tableData) as any,
+                          renderPrependColumns: this.renderPrependCellWithData(
+                            tableData
+                          ) as any,
+                          prependColumnWidths,
+                        }}
                       />
-                    </TrackHasDataAnalytics>
-                  )}
-                </DiscoverQuery>
-              );
-            }}
-          </MEPConsumer>
-        </DemoTourElement>
+                    </VisuallyCompleteWithData>
+                    <Pagination
+                      pageLinks={pageLinks}
+                      paginationAnalyticsEvent={this.paginationAnalyticsEvent}
+                    />
+                  </TrackHasDataAnalytics>
+                )}
+              </DiscoverQuery>
+            );
+          }}
+        </MEPConsumer>
       </div>
     );
   }