feat: home screen mvp (#11206)

* step 1: broken stuff!

* first steps

* more adding and slicing

* step 1: broken stuff!

* can now filter dashboards/charts for "Edited" tabs (filter by changed_by o_m)

* more updates

* update recent card

* add icon

* Adding Expand Icon to Collapse component

* more updates

* clean up code

* remove lock file

* remove consoles

* fixing subnav button height shift

* lil' ascii arrows

* update branch

* update test part 1

* remove consoles

* fix typescript

* add images and update emptystate

* add changes

* update chart card

* fix css issues from rebase

* add suggestions

* more changes

* update tests and clear typescript errors

* Update superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* update from comments

* more updates..

* fix rebase

* fix pesky type errors

* test fixes

* lint fix

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

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/views/CRUD/welcome/EmptyState.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/components/Menu/SubMenu.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/components/ListViewCard/index.tsx

Co-authored-by: ʈᵃᵢ <tdupreetan@gmail.com>

* Update superset-frontend/src/components/ListViewCard/index.tsx

Co-authored-by: ʈᵃᵢ <tdupreetan@gmail.com>

* add suggestions

* fix lint

* remove unused code

* toast getrecentActivityobjs

* add some suggestions

* remove types for now

* cypress fix

* remove unused type

Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: ʈᵃᵢ <tdupreetan@gmail.com>

superset-frontend/spec/javascripts/views/CRUD/chart/ChartList_spec.jsx

@@ -54,6 +54,7 @@ const mockCharts = [...new Array(3)].map((_, i) => ({
 fetchMock.get(chartsInfoEndpoint, {
   permissions: ['can_list', 'can_edit', 'can_delete'],
 });
+
 fetchMock.get(chartssOwnersEndpoint, {
   result: [],
 });

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

@@ -0,0 +1,87 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+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';
+
+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('ActivityTable', () => {
+  const activityProps = {
+    user: {
+      userId: '1',
+    },
+    activityFilter: 'Edited',
+  };
+  const wrapper = mount(<ActivityTable {...activityProps} />, {
+    context: { store },
+  });
+
+  beforeAll(async () => {
+    await waitForComponentToPaint(wrapper);
+  });
+
+  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);
+  });
+});

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

@@ -0,0 +1,79 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+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 ChartTable from 'src/views/CRUD/welcome/ChartTable';
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
+const chartsEndpoint = 'glob:*/api/v1/chart/?*';
+const chartsInfoEndpoint = 'glob:*/api/v1/chart/_info*';
+
+const mockCharts = [...new Array(3)].map((_, i) => ({
+  changed_on_utc: new Date().toISOString(),
+  created_by: 'super user',
+  id: i,
+  slice_name: `cool chart ${i}`,
+  url: 'url',
+  viz_type: 'bar',
+  datasource_title: `ds${i}`,
+  thumbnail_url: '',
+}));
+
+fetchMock.get(chartsEndpoint, {
+  result: mockCharts,
+});
+
+fetchMock.get(chartsInfoEndpoint, {
+  permissions: ['can_add', 'can_edit', 'can_delete'],
+});
+
+describe('ChartTable', () => {
+  const mockedProps = {
+    user: {
+      userId: '2',
+    },
+  };
+  const wrapper = mount(<ChartTable {...mockedProps} />, {
+    context: { store },
+  });
+  it('it renders', () => {
+    expect(wrapper.find(ChartTable)).toExist();
+  });
+
+  it('fetches chart favorites and renders chart cards ', async () => {
+    expect(fetchMock.calls(chartsEndpoint)).toHaveLength(1);
+    await waitForComponentToPaint(wrapper);
+    expect(wrapper.find('ChartCard')).toExist();
+  });
+
+  it('display EmptyState if there is no data', () => {
+    fetchMock.resetHistory();
+    const wrapper = mount(<ChartTable {...mockedProps} />, {
+      context: { store },
+    });
+    expect(wrapper.find('EmptyState')).toExist();
+  });
+});

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

@@ -17,48 +17,78 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { act } from 'react-dom/test-utils';
 
-import ListView from 'src/components/ListView';
+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';
 
 // store needed for withToasts(DashboardTable)
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
-const dashboardsEndpoint = 'glob:*/api/v1/dashboard/*';
-const mockDashboards = [{ id: 1, url: 'url', dashboard_title: 'title' }];
+const dashboardsEndpoint = 'glob:*/api/v1/dashboard/?*';
+const dashboardInfoEndpoint = 'glob:*/api/v1/dashboard/_info*';
+const mockDashboards = [
+  {
+    id: 1,
+    url: 'url',
+    dashboard_title: 'title',
+    changed_on_utc: '24 Feb 2014 10:13:14',
+  },
+];
 
 fetchMock.get(dashboardsEndpoint, { result: mockDashboards });
-
-function setup() {
-  // use mount because data fetching is triggered on mount
-  return mount(<DashboardTable />, {
-    context: { store },
-    wrappingComponent: ThemeProvider,
-    wrappingComponentProps: { theme: supersetTheme },
-  });
-}
+fetchMock.get(dashboardInfoEndpoint, {
+  permissions: ['can_list', 'can_edit', 'can_delete'],
+});
 
 describe('DashboardTable', () => {
-  beforeEach(fetchMock.resetHistory);
+  const dashboardProps = {
+    dashboardFilter: 'Favorite',
+    user: {
+      userId: '2',
+    },
+  };
+  const wrapper = mount(<DashboardTable {...dashboardProps} />, {
+    context: { store },
+  });
 
-  it('fetches dashboards and renders a ListView', () => {
-    return new Promise(done => {
-      const wrapper = setup();
+  beforeAll(async () => {
+    await waitForComponentToPaint(wrapper);
+  });
 
-      setTimeout(() => {
-        expect(fetchMock.calls(dashboardsEndpoint)).toHaveLength(1);
-        // there's a delay between response and updating state, so manually set it
-        // rather than adding a timeout which could introduce flakiness
-        wrapper.setState({ dashboards: mockDashboards });
-        expect(wrapper.find(ListView)).toExist();
-        done();
-      });
+  it('renders', () => {
+    expect(wrapper.find(DashboardTable)).toExist();
+  });
+
+  it('render a submenu with clickable tabs and buttons', async () => {
+    expect(wrapper.find(SubMenu)).toExist();
+    expect(wrapper.find('MenuItem')).toHaveLength(2);
+    expect(wrapper.find('Button')).toHaveLength(4);
+    act(() => {
+      wrapper.find('MenuItem').at(1).simulate('click');
     });
+    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 });
+    expect(wrapper.find(DashboardCard)).toExist();
+  });
+
+  it('display EmptyState if there is no data', () => {
+    fetchMock.resetHistory();
+    const wrapper = mount(<DashboardTable {...dashboardProps} />, {
+      context: { store },
+    });
+    expect(wrapper.find('EmptyState')).toExist();
   });
 });

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

@@ -0,0 +1,92 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { styledMount as mount } from 'spec/helpers/theming';
+import EmptyState from 'src/views/CRUD/welcome/EmptyState';
+
+describe('EmptyState', () => {
+  const variants = [
+    {
+      tab: 'Favorite',
+      tableName: 'DASHBOARDS',
+    },
+    {
+      tab: 'Mine',
+      tableName: 'DASHBOARDS',
+    },
+    {
+      tab: 'Favorite',
+      tableName: 'CHARTS',
+    },
+    {
+      tab: 'Mine',
+      tableName: 'CHARTS',
+    },
+    {
+      tab: 'Favorite',
+      tableName: 'SAVED_QUERIES',
+    },
+    {
+      tab: 'Mine',
+      tableName: 'SAVED_QUEREIS',
+    },
+  ];
+  const recents = [
+    {
+      tab: 'Viewed',
+      tableName: 'RECENTS',
+    },
+    {
+      tab: 'Edited',
+      tableName: 'RECENTS',
+    },
+    {
+      tab: 'Created',
+      tableName: 'RECENTS',
+    },
+  ];
+  variants.forEach(variant => {
+    it(`it renders an ${variant.tab} ${variant.tableName} empty state`, () => {
+      const wrapper = mount(<EmptyState {...variant} />);
+      expect(wrapper).toExist();
+      const textContainer = wrapper.find('.ant-empty-description');
+      expect(textContainer.text()).toEqual(
+        variant.tab === 'Favorite'
+          ? "You don't have any favorites yet!"
+          : `No ${
+              variant.tableName === 'SAVED_QUERIES'
+                ? 'saved queries'
+                : variant.tableName.toLowerCase()
+            } yet`,
+      );
+      expect(wrapper.find('button')).toHaveLength(1);
+    });
+  });
+  recents.forEach(recent => {
+    it(`it renders an ${recent.tab} ${recent.tableName} empty state`, () => {
+      const wrapper = mount(<EmptyState {...recent} />);
+      expect(wrapper).toExist();
+      const textContainer = wrapper.find('.ant-empty-description');
+      expect(wrapper.find('.ant-empty-image').children()).toHaveLength(1);
+      expect(textContainer.text()).toContain(
+        `Recently ${recent.tab.toLowerCase()} charts, dashboards, and saved queries will appear here`,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,106 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import thunk from 'redux-thunk';
+import { styledMount as mount } from 'spec/helpers/theming';
+import fetchMock from 'fetch-mock';
+import configureStore from 'redux-mock-store';
+import { act } from 'react-dom/test-utils';
+
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import SubMenu from 'src/components/Menu/SubMenu';
+import SavedQueries from 'src/views/CRUD/welcome/SavedQueries';
+
+// store needed for withToasts(DashboardTable)
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
+const queriesEndpoint = 'glob:*/api/v1/saved_query/?*';
+const savedQueriesInfo = 'glob:*/api/v1/saved_query/_info';
+
+const mockqueries = [...new Array(3)].map((_, i) => ({
+  created_by: {
+    id: i,
+    first_name: `user`,
+    last_name: `${i}`,
+  },
+  created_on: `${i}-2020`,
+  database: {
+    database_name: `db ${i}`,
+    id: i,
+  },
+  changed_on_delta_humanized: '1 day ago',
+  db_id: i,
+  description: `SQL for ${i}`,
+  id: i,
+  label: `query ${i}`,
+  schema: 'public',
+  sql: `SELECT ${i} FROM table`,
+  sql_tables: [
+    {
+      catalog: null,
+      schema: null,
+      table: `${i}`,
+    },
+  ],
+}));
+
+fetchMock.get(queriesEndpoint, {
+  result: mockqueries,
+});
+
+fetchMock.get(savedQueriesInfo, {
+  permissions: ['can_list', 'can_edit', 'can_delete'],
+});
+
+describe('SavedQueries', () => {
+  const savedQueryProps = {
+    user: {
+      userId: '1',
+    },
+  };
+
+  const wrapper = mount(<SavedQueries {...savedQueryProps} />, {
+    context: { store },
+  });
+  beforeAll(async () => {
+    await waitForComponentToPaint(wrapper);
+  });
+
+  it('is valid', () => {
+    expect(wrapper.find(SavedQueries)).toExist();
+  });
+
+  it('it renders a submenu with clickable tables and buttons', async () => {
+    expect(wrapper.find(SubMenu)).toExist();
+    expect(wrapper.find('MenuItem')).toHaveLength(2);
+    expect(wrapper.find('button')).toHaveLength(2);
+    act(() => {
+      wrapper.find('MenuItem').at(1).simulate('click');
+    });
+
+    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();
+  });
+});

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

@@ -17,11 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { Panel, Row, Tab } from 'react-bootstrap';
 import { shallow } from 'enzyme';
-
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
 import Welcome from 'src/views/CRUD/welcome/Welcome';
 
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
 describe('Welcome', () => {
   const mockedProps = {
     user: {
@@ -34,13 +37,15 @@ describe('Welcome', () => {
       isActive: true,
     },
   };
-  it('is valid', () => {
-    expect(React.isValidElement(<Welcome {...mockedProps} />)).toBe(true);
+  const wrapper = shallow(<Welcome {...mockedProps} />, {
+    context: { store },
   });
-  it('renders 3 Tab, Panel, and Row components', () => {
-    const wrapper = shallow(<Welcome {...mockedProps} />);
-    expect(wrapper.find(Tab)).toHaveLength(3);
-    expect(wrapper.find(Panel)).toHaveLength(3);
-    expect(wrapper.find(Row)).toHaveLength(3);
+
+  it('renders', () => {
+    expect(wrapper).toExist();
+  });
+
+  it('renders all panels on the page on page load', () => {
+    expect(wrapper.find('CollapsePanel')).toHaveLength(4);
   });
 });