From 0a7e45b1018f1018d76c4225e005d2f2cf97f3ca Mon Sep 17 00:00:00 2001
From: k-fish <kevan.fisher@sentry.io>
Date: Wed, 3 Nov 2021 10:34:45 -0400
Subject: [PATCH 1/3] 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.
---
 .../widgets/components/widgetNoResults.tsx    |  0
 .../widgets/widgets/lineChartListWidget.tsx   |  9 ++++
 .../landing/widgets/widgetContainer.spec.jsx  | 42 +++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 static/app/views/performance/landing/widgets/components/widgetNoResults.tsx

diff --git a/static/app/views/performance/landing/widgets/components/widgetNoResults.tsx b/static/app/views/performance/landing/widgets/components/widgetNoResults.tsx
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
index b1b6b0ff7b0566..515e9e0bcd1633 100644
--- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
+++ b/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';
@@ -187,6 +188,9 @@ export function LineChartListWidget(props: Props) {
       HeaderActions={provided => (
         <ContainerActions isLoading={provided.widgetData.list?.isLoading} />
       )}
+      EmptyComponent={() => (
+        <StyledEmptyStateWarning small>{t('No results')}</StyledEmptyStateWarning>
+      )}
       Queries={Queries}
       Visualizations={[
         {
@@ -325,3 +329,8 @@ const StyledIconClose = styled(IconClose)`
     color: ${p => p.theme.gray300};
   }
 `;
+
+const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+  min-height: 300px;
+  justify-content: center;
+`;
diff --git a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
index 1d0bbb0e993fdd..af1aa94c463d9d 100644
--- a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
+++ b/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',
+          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();
 

From 4f3df220909eff815cb170bbf0fd14adbc2c307b Mon Sep 17 00:00:00 2001
From: k-fish <kevan.fisher@sentry.io>
Date: Wed, 3 Nov 2021 11:53:22 -0400
Subject: [PATCH 2/3] Remove extra empty file

---
 .../performance/landing/widgets/components/widgetNoResults.tsx    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 static/app/views/performance/landing/widgets/components/widgetNoResults.tsx

diff --git a/static/app/views/performance/landing/widgets/components/widgetNoResults.tsx b/static/app/views/performance/landing/widgets/components/widgetNoResults.tsx
deleted file mode 100644
index e69de29bb2d1d6..00000000000000

From 0ec743642ff01cf2fa03083186c768f16d4668e3 Mon Sep 17 00:00:00 2001
From: k-fish <kevan.fisher@sentry.io>
Date: Wed, 3 Nov 2021 13:18:59 -0400
Subject: [PATCH 3/3] Update for change with fields

---
 .../views/performance/landing/widgets/widgetContainer.spec.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
index f2fca31f19a14c..6ee0a25436c549 100644
--- a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
+++ b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
@@ -412,7 +412,7 @@ describe('Performance > Widgets > WidgetContainer', function () {
           ],
           per_page: 3,
           project: [],
-          query: 'epm():>0.01',
+          query: 'epm():>0.01 p75(measurements.frames_slow_rate):>0',
           sort: '-p75(measurements.frames_slow_rate)',
           statsPeriod: '14d',
         }),