chore(homepage): separate out api calls to make homepage load more dynamically (#13500)

* separate out api calls

* add new loading states

* remove consoles

* update tests

* fix types and lint

* make code more robust and add test

* address comments

* address comments

* fix lint

superset-frontend/spec/javascripts/views/CRUD/welcome/ActivityTable_spec.tsx

@@ -18,6 +18,10 @@
  */
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
+import { Provider } from 'react-redux';
+import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import configureStore from 'redux-mock-store';
@@ -26,6 +30,9 @@ import ActivityTable from 'src/views/CRUD/welcome/ActivityTable';
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const chartsEndpoint = 'glob:*/api/v1/chart/?*';
+const dashboardsEndpoint = 'glob:*/api/v1/dashboard/?*';
+
 const mockData = {
   Viewed: [
     {
@@ -36,14 +43,6 @@ const mockData = {
       table: {},
     },
   ],
-  Edited: [
-    {
-      dashboard_title: 'Dashboard_Test',
-      changed_on_utc: '24 Feb 2014 10:13:14',
-      url: '/fakeUrl/dashboard',
-      id: '3',
-    },
-  ],
   Created: [
     {
       dashboard_title: 'Dashboard_Test',
@@ -54,20 +53,48 @@ const mockData = {
   ],
 };
 
+fetchMock.get(chartsEndpoint, {
+  result: [
+    {
+      slice_name: 'ChartyChart',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/explore',
+      id: '4',
+      table: {},
+    },
+  ],
+});
+
+fetchMock.get(dashboardsEndpoint, {
+  result: [
+    {
+      dashboard_title: 'Dashboard_Test',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/dashboard',
+      id: '3',
+    },
+  ],
+});
+
 describe('ActivityTable', () => {
   const activityProps = {
-    activeChild: 'Edited',
+    activeChild: 'Created',
     activityData: mockData,
     setActiveChild: jest.fn(),
     user: { userId: '1' },
     loading: false,
   };
-  const wrapper = mount(<ActivityTable {...activityProps} />, {
-    context: { store },
-  });
+
+  let wrapper: ReactWrapper;
 
   beforeAll(async () => {
-    await waitForComponentToPaint(wrapper);
+    await act(async () => {
+      wrapper = mount(
+        <Provider store={store}>
+          <ActivityTable {...activityProps} />
+        </Provider>,
+      );
+    });
   });
 
   it('the component renders', () => {
@@ -79,4 +106,32 @@ describe('ActivityTable', () => {
   it('renders ActivityCards', async () => {
     expect(wrapper.find('ListViewCard')).toExist();
   });
+  it('calls the getEdited batch call when edited tab is clicked', async () => {
+    act(() => {
+      const handler = wrapper.find('li.no-router a').at(1).prop('onClick');
+      if (handler) {
+        handler({} as any);
+      }
+    });
+    await waitForComponentToPaint(wrapper);
+    const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
+    const chartCall = fetchMock.calls(/chart\/\?q/);
+    expect(chartCall).toHaveLength(1);
+    expect(dashboardCall).toHaveLength(1);
+  });
+  it('show empty state if there is data', () => {
+    const activityProps = {
+      activeChild: 'Created',
+      activityData: {},
+      setActiveChild: jest.fn(),
+      user: { userId: '1' },
+      loading: false,
+    };
+    const wrapper = mount(
+      <Provider store={store}>
+        <ActivityTable {...activityProps} />
+      </Provider>,
+    );
+    expect(wrapper.find('EmptyState')).toExist();
+  });
 });

superset-frontend/spec/javascripts/views/CRUD/welcome/Welcome_spec.tsx

@@ -67,7 +67,10 @@ fetchMock.get(savedQueryEndpoint, {
   result: [],
 });
 
-fetchMock.get(recentActivityEndpoint, {});
+fetchMock.get(recentActivityEndpoint, {
+  Created: [],
+  Viewed: [],
+});
 
 fetchMock.get(chartInfoEndpoint, {
   permissions: [],
@@ -122,10 +125,14 @@ describe('Welcome', () => {
     expect(wrapper.find('CollapsePanel')).toHaveLength(8);
   });
 
-  it('calls batch method on page load', () => {
+  it('calls api methods in parallel on page load', () => {
     const chartCall = fetchMock.calls(/chart\/\?q/);
+    const savedQueryCall = fetchMock.calls(/saved_query\/\?q/);
+    const recentCall = fetchMock.calls(/superset\/recent_activity\/*/);
     const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
-    expect(chartCall).toHaveLength(2);
-    expect(dashboardCall).toHaveLength(2);
+    expect(chartCall).toHaveLength(1);
+    expect(recentCall).toHaveLength(1);
+    expect(savedQueryCall).toHaveLength(1);
+    expect(dashboardCall).toHaveLength(1);
   });
 });