feat(homepage): conditionally render viewed tab and move examples to …

…chart and dashboard table (apache#15792) * test examples * fix lint * more lint * last test * add suggestions * fix lint * fix wrong localstor * fix tests * add suggestions * Update superset-frontend/src/views/CRUD/types.ts Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * fix lint * fix default tab * fix test Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
QAlexBall · Jul 22, 2021 · 0c07714 · 0c07714
1 parent f391ea0
commit 0c07714
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 75 deletions.
diff --git a/superset-frontend/src/views/CRUD/types.ts b/superset-frontend/src/views/CRUD/types.ts
@@ -26,6 +26,7 @@ export type FavoriteStatus = {
 export enum TableTabTypes {
   FAVORITE = 'Favorite',
   MINE = 'Mine',
+  EXAMPLES = 'Examples',
 }
 
 export type Filters = {
@@ -42,6 +43,7 @@ export interface DashboardTableProps {
   mine: Array<Dashboard>;
   showThumbnails?: boolean;
   featureFlag?: boolean;
+  examples: Array<Dashboard>;
 }
 
 export interface Dashboard {

diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
@@ -219,17 +219,7 @@ export default function ActivityTable({
         setInLocalStorage(HOMEPAGE_ACTIVITY_FILTER, SetTabType.VIEWED);
       },
     });
-  } else {
-    tabs.unshift({
-      name: 'Examples',
-      label: t('Examples'),
-      onClick: () => {
-        setActiveChild('Examples');
-        setInLocalStorage(HOMEPAGE_ACTIVITY_FILTER, SetTabType.EXAMPLE);
-      },
-    });
   }
-
   const renderActivity = () =>
     (activeChild !== 'Edited' ? activityData[activeChild] : editedObjs).map(
       (entity: ActivityObject) => {

diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.test.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.test.tsx
@@ -85,7 +85,7 @@ describe('ChartTable', () => {
       }
     });
     await waitForComponentToPaint(wrapper);
-    expect(fetchMock.calls(chartsEndpoint)).toHaveLength(3);
+    expect(fetchMock.calls(chartsEndpoint)).toHaveLength(1);
     expect(wrapper.find('ChartCard')).toExist();
   });
 

diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
@@ -18,6 +18,7 @@
  */
 import React, { useState, useMemo, useEffect } from 'react';
 import { t } from '@superset-ui/core';
+import { filter } from 'lodash';
 import {
   useListViewResource,
   useChartEditModal,
@@ -52,6 +53,7 @@ interface ChartTableProps {
   user?: User;
   mine: Array<any>;
   showThumbnails: boolean;
+  examples?: Array<object>;
 }
 
 function ChartTable({
@@ -60,10 +62,17 @@ function ChartTable({
   addSuccessToast,
   mine,
   showThumbnails,
+  examples,
 }: ChartTableProps) {
   const history = useHistory();
   const filterStore = getFromLocalStorage(HOMEPAGE_CHART_FILTER, null);
-  const initialFilter = filterStore || TableTabTypes.MINE;
+  let initialFilter = filterStore || TableTabTypes.EXAMPLES;
+
+  if (!examples && filterStore === TableTabTypes.EXAMPLES) {
+    initialFilter = TableTabTypes.MINE;
+  }
+
+  const filteredExamples = filter(examples, obj => 'viz_type' in obj);
 
   const {
     state: { loading, resourceCollection: charts, bulkSelectEnabled },
@@ -76,7 +85,7 @@ function ChartTable({
     t('chart'),
     addDangerToast,
     true,
-    initialFilter === 'Favorite' ? [] : mine,
+    initialFilter === 'Mine' ? mine : filteredExamples,
     [],
     false,
   );
@@ -96,9 +105,13 @@ function ChartTable({
 
   const [chartFilter, setChartFilter] = useState(initialFilter);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
+  const [loaded, setLoaded] = useState<boolean>(false);
 
   useEffect(() => {
-    getData(chartFilter);
+    if (loaded || chartFilter === 'Favorite') {
+      getData(chartFilter);
+    }
+    setLoaded(true);
   }, [chartFilter]);
 
   const handleBulkChartExport = (chartsToExport: Chart[]) => {
@@ -118,7 +131,7 @@ function ChartTable({
         operator: 'rel_o_m',
         value: `${user?.userId}`,
       });
-    } else {
+    } else if (filterName === 'Favorite') {
       filters.push({
         id: 'id',
         operator: 'chart_is_favorite',
@@ -128,6 +141,36 @@ function ChartTable({
     return filters;
   };
 
+  const menuTabs = [
+    {
+      name: 'Favorite',
+      label: t('Favorite'),
+      onClick: () => {
+        setChartFilter(TableTabTypes.FAVORITE);
+        setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.FAVORITE);
+      },
+    },
+    {
+      name: 'Mine',
+      label: t('Mine'),
+      onClick: () => {
+        setChartFilter(TableTabTypes.MINE);
+        setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.MINE);
+      },
+    },
+  ];
+
+  if (examples) {
+    menuTabs.push({
+      name: 'Examples',
+      label: t('Examples'),
+      onClick: () => {
+        setChartFilter(TableTabTypes.EXAMPLES);
+        setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.EXAMPLES);
+      },
+    });
+  }
+
   const getData = (filter: string) =>
     fetchData({
       pageIndex: 0,
@@ -156,24 +199,7 @@ function ChartTable({
       <SubMenu
         activeChild={chartFilter}
         // eslint-disable-next-line react/no-children-prop
-        tabs={[
-          {
-            name: 'Favorite',
-            label: t('Favorite'),
-            onClick: () => {
-              setChartFilter('Favorite');
-              setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.FAVORITE);
-            },
-          },
-          {
-            name: 'Mine',
-            label: t('Mine'),
-            onClick: () => {
-              setChartFilter('Mine');
-              setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.MINE);
-            },
-          },
-        ]}
+        tabs={menuTabs}
         buttons={[
           {
             name: (

diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.test.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.test.tsx
@@ -72,9 +72,9 @@ describe('DashboardTable', () => {
   it('render a submenu with clickable tabs and buttons', async () => {
     expect(wrapper.find('SubMenu')).toExist();
     expect(wrapper.find('li.no-router')).toHaveLength(2);
-    expect(wrapper.find('Button')).toHaveLength(4);
+    expect(wrapper.find('Button')).toHaveLength(6);
     act(() => {
-      const handler = wrapper.find('li.no-router a').at(1).prop('onClick');
+      const handler = wrapper.find('li.no-router a').at(0).prop('onClick');
       if (handler) {
         handler({} as any);
       }

diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -18,6 +18,7 @@
  */
 import React, { useState, useMemo, useEffect } from 'react';
 import { SupersetClient, t } from '@superset-ui/core';
+import { filter } from 'lodash';
 import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
 import {
   Dashboard,
@@ -54,10 +55,17 @@ function DashboardTable({
   addSuccessToast,
   mine,
   showThumbnails,
+  examples,
 }: DashboardTableProps) {
   const history = useHistory();
   const filterStore = getFromLocalStorage(HOMEPAGE_DASHBOARD_FILTER, null);
-  const defaultFilter = filterStore || TableTabTypes.MINE;
+  let defaultFilter = filterStore || TableTabTypes.EXAMPLES;
+
+  if (!examples && filterStore === TableTabTypes.EXAMPLES) {
+    defaultFilter = TableTabTypes.MINE;
+  }
+
+  const filteredExamples = filter(examples, obj => !('viz_type' in obj));
 
   const {
     state: { loading, resourceCollection: dashboards },
@@ -70,7 +78,7 @@ function DashboardTable({
     t('dashboard'),
     addDangerToast,
     true,
-    defaultFilter === 'Favorite' ? [] : mine,
+    defaultFilter === 'Mine' ? mine : filteredExamples,
     [],
     false,
   );
@@ -84,9 +92,13 @@ function DashboardTable({
   const [editModal, setEditModal] = useState<Dashboard>();
   const [dashboardFilter, setDashboardFilter] = useState(defaultFilter);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
+  const [loaded, setLoaded] = useState<boolean>(false);
 
   useEffect(() => {
-    getData(dashboardFilter);
+    if (loaded || dashboardFilter === 'Favorite') {
+      getData(dashboardFilter);
+    }
+    setLoaded(true);
   }, [dashboardFilter]);
 
   const handleBulkDashboardExport = (dashboardsToExport: Dashboard[]) => {
@@ -126,7 +138,7 @@ function DashboardTable({
         operator: 'rel_m_m',
         value: `${user?.userId}`,
       });
-    } else {
+    } else if (filterName === 'Favorite') {
       filters.push({
         id: 'id',
         operator: 'dashboard_is_favorite',
@@ -136,6 +148,36 @@ function DashboardTable({
     return filters;
   };
 
+  const menuTabs = [
+    {
+      name: 'Favorite',
+      label: t('Favorite'),
+      onClick: () => {
+        setDashboardFilter(TableTabTypes.FAVORITE);
+        setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.FAVORITE);
+      },
+    },
+    {
+      name: 'Mine',
+      label: t('Mine'),
+      onClick: () => {
+        setDashboardFilter(TableTabTypes.MINE);
+        setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.MINE);
+      },
+    },
+  ];
+
+  if (examples) {
+    menuTabs.push({
+      name: 'Examples',
+      label: t('Examples'),
+      onClick: () => {
+        setDashboardFilter(TableTabTypes.EXAMPLES);
+        setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.EXAMPLES);
+      },
+    });
+  }
+
   const getData = (filter: string) =>
     fetchData({
       pageIndex: 0,
@@ -154,27 +196,7 @@ function DashboardTable({
     <>
       <SubMenu
         activeChild={dashboardFilter}
-        tabs={[
-          {
-            name: 'Favorite',
-            label: t('Favorite'),
-            onClick: () => {
-              setDashboardFilter(TableTabTypes.FAVORITE);
-              setInLocalStorage(
-                HOMEPAGE_DASHBOARD_FILTER,
-                TableTabTypes.FAVORITE,
-              );
-            },
-          },
-          {
-            name: 'Mine',
-            label: t('Mine'),
-            onClick: () => {
-              setDashboardFilter(TableTabTypes.MINE);
-              setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.MINE);
-            },
-          },
-        ]}
+        tabs={menuTabs}
         buttons={[
           {
             name: (

diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.test.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.test.tsx
@@ -132,10 +132,10 @@ describe('Welcome', () => {
     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(chartCall).toHaveLength(1);
     expect(recentCall).toHaveLength(1);
     expect(savedQueryCall).toHaveLength(1);
-    expect(dashboardCall).toHaveLength(2);
+    expect(dashboardCall).toHaveLength(1);
   });
 });