fix(perf): Add empty state for list widget (#29738)

* fix(perf): Add empty state for list widget

This adds some empty state with 'no results' instead of the placeholder. Also adds a test to ensure it appears.

static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx

@@ -5,6 +5,7 @@ import {Location} from 'history';
 
 import _EventsRequest from 'app/components/charts/eventsRequest';
 import {getInterval} from 'app/components/charts/utils';
+import EmptyStateWarning from 'app/components/emptyStateWarning';
 import Link from 'app/components/links/link';
 import Tooltip from 'app/components/tooltip';
 import Truncate from 'app/components/truncate';
@@ -181,6 +182,9 @@ export function LineChartListWidget(props: Props) {
       HeaderActions={provided => (
         <ContainerActions isLoading={provided.widgetData.list?.isLoading} />
       )}
+      EmptyComponent={() => (
+        <StyledEmptyStateWarning small>{t('No results')}</StyledEmptyStateWarning>
+      )}
       Queries={Queries}
       Visualizations={[
         {
@@ -319,3 +323,8 @@ const StyledIconClose = styled(IconClose)`
     color: ${p => p.theme.gray300};
   }
 `;
+
+const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+  min-height: 300px;
+  justify-content: center;
+`;

tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx

@@ -380,6 +380,48 @@ describe('Performance > Widgets > WidgetContainer', function () {
     );
   });
 
+  it('Most slow frames widget', async function () {
+    const data = initializeData();
+
+    const wrapper = mountWithTheme(
+      <WrappedComponent
+        data={data}
+        defaultChartSetting={PerformanceWidgetSetting.MOST_SLOW_FRAMES}
+      />,
+      data.routerContext
+    );
+    await tick();
+    wrapper.update();
+
+    expect(wrapper.find('div[data-test-id="performance-widget-title"]').text()).toEqual(
+      'Most Slow Frames'
+    );
+
+    expect(eventsV2Mock).toHaveBeenCalledTimes(1);
+    expect(eventsV2Mock).toHaveBeenNthCalledWith(
+      1,
+      expect.anything(),
+      expect.objectContaining({
+        query: expect.objectContaining({
+          environment: [],
+          field: [
+            'transaction',
+            'project.id',
+            'epm()',
+            'p75(measurements.frames_slow_rate)',
+          ],
+          per_page: 3,
+          project: [],
+          query: 'epm():>0.01 p75(measurements.frames_slow_rate):>0',
+          sort: '-p75(measurements.frames_slow_rate)',
+          statsPeriod: '14d',
+        }),
+      })
+    );
+
+    expect(wrapper.find('div[data-test-id="empty-message"]').exists()).toBe(true);
+  });
+
   it('Able to change widget type from menu', async function () {
     const data = initializeData();