chore(home-screen): fixes for loading states, flicker issue, and reduction of api calls (#11557)

* fixes for loading states, flicker issue, api calls

* fix filter bug

* add high res images

* bug fixes for cards and face pile, change imgs to svgs, and address comments

* update from comments

* add stopprop

* fix tests

* add liscenses

* remove unused type

* fix types

* add license

* fix lint

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

@@ -19,8 +19,6 @@
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import thunk from 'redux-thunk';
-import fetchMock from 'fetch-mock';
-
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import configureStore from 'redux-mock-store';
 import ActivityTable from 'src/views/CRUD/welcome/ActivityTable';
@@ -28,12 +26,8 @@ import ActivityTable from 'src/views/CRUD/welcome/ActivityTable';
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
-const chartsEndpoint = 'glob:*/api/v1/chart/?*';
-const dashboardEndpoint = 'glob:*/api/v1/dashboard/?*';
-const savedQueryEndpoint = 'glob:*/api/v1/saved_query/?*';
-
-fetchMock.get(chartsEndpoint, {
-  result: [
+const mockData = {
+  Viewed: [
     {
       slice_name: 'ChartyChart',
       changed_on_utc: '24 Feb 2014 10:13:14',
@@ -42,10 +36,7 @@ fetchMock.get(chartsEndpoint, {
       table: {},
     },
   ],
-});
-
-fetchMock.get(dashboardEndpoint, {
-  result: [
+  Edited: [
     {
       dashboard_title: 'Dashboard_Test',
       changed_on_utc: '24 Feb 2014 10:13:14',
@@ -53,18 +44,23 @@ fetchMock.get(dashboardEndpoint, {
       id: '3',
     },
   ],
-});
-
-fetchMock.get(savedQueryEndpoint, {
-  result: [],
-});
+  Created: [
+    {
+      dashboard_title: 'Dashboard_Test',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/dashboard',
+      id: '3',
+    },
+  ],
+};
 
 describe('ActivityTable', () => {
   const activityProps = {
-    user: {
-      userId: '1',
-    },
-    activityFilter: 'Edited',
+    activeChild: 'Edited',
+    activityData: mockData,
+    setActiveChild: jest.fn(),
+    user: { userId: '1' },
+    loading: false,
   };
   const wrapper = mount(<ActivityTable {...activityProps} />, {
     context: { store },
@@ -77,11 +73,10 @@ describe('ActivityTable', () => {
   it('the component renders ', () => {
     expect(wrapper.find(ActivityTable)).toExist();
   });
-
-  it('calls batch method and renders ListViewCArd', async () => {
-    const chartCall = fetchMock.calls(/chart\/\?q/);
-    const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
-    expect(chartCall).toHaveLength(2);
-    expect(dashboardCall).toHaveLength(2);
+  it('renders tabs with three buttons', () => {
+    expect(wrapper.find('li')).toHaveLength(3);
+  });
+  it('it renders ActivityCards', async () => {
+    expect(wrapper.find('ListViewCard')).toExist();
   });
 });

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

@@ -22,6 +22,7 @@ import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
 
+import { act } from 'react-dom/test-utils';
 import ChartTable from 'src/views/CRUD/welcome/ChartTable';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 
@@ -64,8 +65,14 @@ describe('ChartTable', () => {
   });
 
   it('fetches chart favorites and renders chart cards ', async () => {
-    expect(fetchMock.calls(chartsEndpoint)).toHaveLength(1);
+    act(() => {
+      const handler = wrapper.find('li.no-router a').at(0).prop('onClick');
+      if (handler) {
+        handler({} as any);
+      }
+    });
     await waitForComponentToPaint(wrapper);
+    expect(fetchMock.calls(chartsEndpoint)).toHaveLength(1);
     expect(wrapper.find('ChartCard')).toExist();
   });
 

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

@@ -24,7 +24,6 @@ import fetchMock from 'fetch-mock';
 import { act } from 'react-dom/test-utils';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
-import SubMenu from 'src/components/Menu/SubMenu';
 import DashboardTable from 'src/views/CRUD/welcome/DashboardTable';
 import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard';
 
@@ -34,6 +33,7 @@ const store = mockStore({});
 
 const dashboardsEndpoint = 'glob:*/api/v1/dashboard/?*';
 const dashboardInfoEndpoint = 'glob:*/api/v1/dashboard/_info*';
+const dashboardFavEndpoint = 'glob:*/api/v1/dashboard/favorite_status?*';
 const mockDashboards = [
   {
     id: 1,
@@ -47,6 +47,9 @@ fetchMock.get(dashboardsEndpoint, { result: mockDashboards });
 fetchMock.get(dashboardInfoEndpoint, {
   permissions: ['can_list', 'can_edit', 'can_delete'],
 });
+fetchMock.get(dashboardFavEndpoint, {
+  result: [],
+});
 
 describe('DashboardTable', () => {
   const dashboardProps = {
@@ -54,6 +57,7 @@ describe('DashboardTable', () => {
     user: {
       userId: '2',
     },
+    mine: mockDashboards,
   };
   const wrapper = mount(<DashboardTable {...dashboardProps} />, {
     context: { store },
@@ -68,27 +72,34 @@ describe('DashboardTable', () => {
   });
 
   it('render a submenu with clickable tabs and buttons', async () => {
-    expect(wrapper.find(SubMenu)).toExist();
+    expect(wrapper.find('SubMenu')).toExist();
     expect(wrapper.find('li')).toHaveLength(2);
     expect(wrapper.find('Button')).toHaveLength(4);
     act(() => {
-      wrapper.find('li').at(1).simulate('click');
+      const handler = wrapper.find('li.no-router a').at(1).prop('onClick');
+      if (handler) {
+        handler({} as any);
+      }
     });
     await waitForComponentToPaint(wrapper);
     expect(fetchMock.calls(/dashboard\/\?q/)).toHaveLength(1);
   });
 
-  it('fetches dashboards and renders a card', () => {
-    expect(fetchMock.calls(/dashboard\/\?q/)).toHaveLength(1);
-    wrapper.setState({ dashboards: mockDashboards });
+  it('render DashboardCard', () => {
     expect(wrapper.find(DashboardCard)).toExist();
   });
 
   it('display EmptyState if there is no data', () => {
-    fetchMock.resetHistory();
-    const wrapper = mount(<DashboardTable {...dashboardProps} />, {
-      context: { store },
-    });
+    const wrapper = mount(
+      <DashboardTable
+        dashboardFilter="Mine"
+        user={{ userId: '2' }}
+        mine={[]}
+      />,
+      {
+        context: { store },
+      },
+    );
     expect(wrapper.find('EmptyState')).toExist();
   });
 });

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

@@ -74,11 +74,22 @@ describe('SavedQueries', () => {
     user: {
       userId: '1',
     },
+    mine: mockqueries,
   };
 
   const wrapper = mount(<SavedQueries {...savedQueryProps} />, {
     context: { store },
   });
+
+  const clickTab = (idx: number) => {
+    act(() => {
+      const handler = wrapper.find('li.no-router a').at(idx).prop('onClick');
+      if (handler) {
+        handler({} as any);
+      }
+    });
+  };
+
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
   });
@@ -87,20 +98,19 @@ describe('SavedQueries', () => {
     expect(wrapper.find(SavedQueries)).toExist();
   });
 
+  it('fetches queries favorites and renders listviewcard cards', async () => {
+    clickTab(0);
+    await waitForComponentToPaint(wrapper);
+    expect(fetchMock.calls(/saved_query\/\?q/)).toHaveLength(1);
+    expect(wrapper.find('ListViewCard')).toExist();
+  });
+
   it('it renders a submenu with clickable tables and buttons', async () => {
     expect(wrapper.find(SubMenu)).toExist();
     expect(wrapper.find('li')).toHaveLength(2);
     expect(wrapper.find('button')).toHaveLength(2);
-    act(() => {
-      wrapper.find('li').at(1).simulate('click');
-    });
-
+    clickTab(1);
     await waitForComponentToPaint(wrapper);
-    expect(fetchMock.calls(/saved_query\/\?q/)).toHaveLength(1);
-  });
-
-  it('fetches queries favorites and renders listviewcard cards', () => {
-    expect(fetchMock.calls(/saved_query\/\?q/)).toHaveLength(1);
-    expect(wrapper.find('ListViewCard')).toExist();
+    expect(fetchMock.calls(/saved_query\/\?q/)).toHaveLength(2);
   });
 });

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

@@ -17,14 +17,46 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
 import Welcome from 'src/views/CRUD/welcome/Welcome';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const chartsEndpoint = 'glob:*/api/v1/chart/?*';
+const dashboardEndpoint = 'glob:*/api/v1/dashboard/?*';
+const savedQueryEndpoint = 'glob:*/api/v1/saved_query/?*';
+
+fetchMock.get(chartsEndpoint, {
+  result: [
+    {
+      slice_name: 'ChartyChart',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/explore',
+      id: '4',
+      table: {},
+    },
+  ],
+});
+
+fetchMock.get(dashboardEndpoint, {
+  result: [
+    {
+      dashboard_title: 'Dashboard_Test',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/dashboard',
+      id: '3',
+    },
+  ],
+});
+
+fetchMock.get(savedQueryEndpoint, {
+  result: [],
+});
+
 describe('Welcome', () => {
   const mockedProps = {
     user: {
@@ -37,7 +69,7 @@ describe('Welcome', () => {
       isActive: true,
     },
   };
-  const wrapper = shallow(<Welcome {...mockedProps} />, {
+  const wrapper = mount(<Welcome {...mockedProps} />, {
     context: { store },
   });
 
@@ -46,6 +78,13 @@ describe('Welcome', () => {
   });
 
   it('renders all panels on the page on page load', () => {
-    expect(wrapper.find('CollapsePanel')).toHaveLength(4);
+    expect(wrapper.find('CollapsePanel')).toHaveLength(8);
+  });
+
+  it('calls batch method on page load', () => {
+    const chartCall = fetchMock.calls(/chart\/\?q/);
+    const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
+    expect(chartCall).toHaveLength(2);
+    expect(dashboardCall).toHaveLength(2);
   });
 });