feat(dashboards): Add stored data alert to the full page widget builder (#33860)

static/app/views/dashboardsV2/widgetBuilder/buildSteps/visualizationStep.tsx

@@ -15,7 +15,7 @@ import {Organization, PageFilters, SelectValue} from 'sentry/types';
 import usePrevious from 'sentry/utils/usePrevious';
 import {DisplayType, Widget} from 'sentry/views/dashboardsV2/types';
 
-import WidgetCard from '../../widgetCard';
+import WidgetCard, {WidgetCardPanel} from '../../widgetCard';
 import {displayTypes} from '../utils';
 
 import {BuildStep} from './buildStep';
@@ -98,6 +98,7 @@ export function VisualizationStep({
           isSorting={false}
           currentWidgetDragging={false}
           noLazyLoad
+          showStoredAlert
         />
       </VisualizationWrapper>
     </BuildStep>
@@ -106,15 +107,20 @@ export function VisualizationStep({
 
 const VisualizationWrapper = styled('div')<{displayType: DisplayType}>`
   padding-right: ${space(2)};
+  ${WidgetCardPanel} {
+    height: initial;
+  }
   ${p =>
     p.displayType === DisplayType.TABLE &&
     css`
+      overflow: hidden;
       ${TableCell} {
         /* 24px ActorContainer height + 16px top and bottom padding + 1px border = 41px */
         height: 41px;
       }
-      /* total size of a table, if it would display 5 rows of content */
-      height: 300px;
-      overflow: hidden;
+      ${WidgetCardPanel} {
+        /* total size of a table, if it would display 5 rows of content */
+        height: 301px;
+      }
     `};
 `;

static/app/views/dashboardsV2/widgetCard/index.tsx

@@ -217,7 +217,7 @@ class WidgetCard extends React.Component<Props, State> {
         customComponent={<ErrorCard>{t('Error loading widget data')}</ErrorCard>}
       >
         <DashboardsMEPProvider>
-          <StyledPanel isDragging={false}>
+          <WidgetCardPanel isDragging={false}>
             <WidgetHeader>
               <Tooltip
                 title={widget.title}
@@ -256,7 +256,7 @@ class WidgetCard extends React.Component<Props, State> {
               </LazyLoad>
             )}
             {this.renderToolbar()}
-          </StyledPanel>
+          </WidgetCardPanel>
           <Feature organization={organization} features={['dashboards-mep']}>
             <DashboardsMEPConsumer>
               {({isMetricsData}) =>
@@ -294,7 +294,7 @@ const ErrorCard = styled(Placeholder)`
   margin-bottom: ${space(2)};
 `;
 
-const StyledPanel = styled(Panel, {
+export const WidgetCardPanel = styled(Panel, {
   shouldForwardProp: prop => prop !== 'isDragging',
 })<{
   isDragging: boolean;

tests/js/spec/views/dashboardsV2/detail.spec.jsx

@@ -357,7 +357,7 @@ describe('Dashboards > Detail', function () {
       wrapper.find('Controls Button[data-test-id="dashboard-edit"]').simulate('click');
 
       const card = wrapper.find('WidgetCard').first();
-      card.find('StyledPanel').simulate('mouseOver');
+      card.find('WidgetCardPanel').simulate('mouseOver');
 
       // Remove the second and third widgets
       wrapper
@@ -411,7 +411,7 @@ describe('Dashboards > Detail', function () {
       wrapper.update();
 
       const card = wrapper.find('WidgetCard').first();
-      card.find('StyledPanel').simulate('mouseOver');
+      card.find('WidgetCardPanel').simulate('mouseOver');
 
       // Edit the first widget
       wrapper

tests/js/spec/views/dashboardsV2/gridLayout/detail.spec.jsx

@@ -361,7 +361,7 @@ describe('Dashboards > Detail', function () {
       wrapper.update();
 
       const card = wrapper.find('WidgetCard').first();
-      card.find('StyledPanel').simulate('mouseOver');
+      card.find('WidgetCardPanel').simulate('mouseOver');
 
       // Edit the first widget
       wrapper

tests/js/spec/views/dashboardsV2/widgetBuilder/buildSteps/visualizationStep.spec.tsx

@@ -66,6 +66,7 @@ describe('VisualizationStep', function () {
         'dashboards-edit',
         'global-views',
         'new-widget-builder-experience-design',
+        'dashboards-mep',
       ],
     },
     router: {
@@ -117,4 +118,44 @@ describe('VisualizationStep', function () {
 
     await waitFor(() => expect(eventsv2Mock).toHaveBeenCalledTimes(2));
   });
+
+  it('displays stored data alert', async function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/eventsv2/`,
+      method: 'GET',
+      statusCode: 200,
+      body: {
+        meta: {isMetricsData: false},
+        data: [],
+      },
+    });
+
+    render(
+      <WidgetBuilder
+        route={{}}
+        router={router}
+        routes={router.routes}
+        routeParams={router.params}
+        location={router.location}
+        dashboard={{
+          id: 'new',
+          title: 'Dashboard',
+          createdBy: undefined,
+          dateCreated: '2020-01-01T00:00:00.000Z',
+          widgets: [],
+        }}
+        onSave={jest.fn()}
+        params={{
+          orgId: organization.slug,
+          dashboardId: 'new',
+        }}
+      />,
+      {
+        context: routerContext,
+        organization,
+      }
+    );
+
+    await screen.findByText(/we've automatically adjusted your results/i);
+  });
 });