feat: make tabs sticky in homepage (#14695)

* inital commit

* lint

* fix loading state for edit activity

* add dep

* lint fix

* add condition

* lint being lint

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

@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { styled, t } from '@superset-ui/core';
+import { setInLocalStorage } from 'src/utils/localStorageHelpers';
 
 import Loading from 'src/components/Loading';
 import ListViewCard from 'src/components/ListViewCard';
@@ -163,6 +164,17 @@ export default function ActivityTable({
 }: ActivityProps) {
   const [editedObjs, setEditedObjs] = useState<Array<ActivityData>>();
   const [loadingState, setLoadingState] = useState(false);
+
+  useEffect(() => {
+    if (activeChild === 'Edited') {
+      setLoadingState(true);
+      getEditedObjects(user.userId).then(r => {
+        setEditedObjs([...r.editedChart, ...r.editedDash]);
+        setLoadingState(false);
+      });
+    }
+  }, []);
+
   const getEditedCards = () => {
     setLoadingState(true);
     getEditedObjects(user.userId).then(r => {
@@ -176,6 +188,7 @@ export default function ActivityTable({
       label: t('Edited'),
       onClick: () => {
         setActiveChild('Edited');
+        setInLocalStorage('activity', { activity: 'Edited' });
         getEditedCards();
       },
     },
@@ -184,6 +197,7 @@ export default function ActivityTable({
       label: t('Created'),
       onClick: () => {
         setActiveChild('Created');
+        setInLocalStorage('activity', { activity: 'Created' });
       },
     },
   ];
@@ -194,6 +208,7 @@ export default function ActivityTable({
       label: t('Viewed'),
       onClick: () => {
         setActiveChild('Viewed');
+        setInLocalStorage('activity', { activity: 'Viewed' });
       },
     });
   } else {
@@ -202,6 +217,7 @@ export default function ActivityTable({
       label: t('Examples'),
       onClick: () => {
         setActiveChild('Examples');
+        setInLocalStorage('activity', { activity: 'Examples' });
       },
     });
   }

superset-frontend/src/views/CRUD/welcome/ChartTable.tsx

@@ -16,13 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { t } from '@superset-ui/core';
 import {
   useListViewResource,
   useChartEditModal,
   useFavoriteStatus,
 } from 'src/views/CRUD/hooks';
+import {
+  setInLocalStorage,
+  getFromLocalStorage,
+} from 'src/utils/localStorageHelpers';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { useHistory } from 'react-router-dom';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
@@ -71,6 +75,7 @@ function ChartTable({
     false,
   );
 
+  useEffect(() => {});
   const chartIds = useMemo(() => charts.map(c => c.id), [charts]);
   const [saveFavoriteStatus, favoriteStatus] = useFavoriteStatus(
     'chart',
@@ -86,6 +91,13 @@ function ChartTable({
 
   const [chartFilter, setChartFilter] = useState('Mine');
 
+  useEffect(() => {
+    const filter = getFromLocalStorage('chart', null);
+    if (!filter) {
+      setChartFilter('Mine');
+    } else setChartFilter(filter.tab);
+  }, []);
+
   const getFilters = (filterName: string) => {
     const filters = [];
 
@@ -138,12 +150,19 @@ function ChartTable({
             name: 'Favorite',
             label: t('Favorite'),
             onClick: () =>
-              getData('Favorite').then(() => setChartFilter('Favorite')),
+              getData('Favorite').then(() => {
+                setChartFilter('Favorite');
+                setInLocalStorage('chart', { tab: 'Favorite' });
+              }),
           },
           {
             name: 'Mine',
             label: t('Mine'),
-            onClick: () => getData('Mine').then(() => setChartFilter('Mine')),
+            onClick: () =>
+              getData('Mine').then(() => {
+                setChartFilter('Mine');
+                setInLocalStorage('chart', { tab: 'Mine' });
+              }),
           },
         ]}
         buttons={[

superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx

@@ -16,11 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { SupersetClient, t } from '@superset-ui/core';
 import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
 import { Dashboard, DashboardTableProps } from 'src/views/CRUD/types';
 import { useHistory } from 'react-router-dom';
+import {
+  setInLocalStorage,
+  getFromLocalStorage,
+} from 'src/utils/localStorageHelpers';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import Loading from 'src/components/Loading';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
@@ -69,6 +73,13 @@ function DashboardTable({
   const [editModal, setEditModal] = useState<Dashboard>();
   const [dashboardFilter, setDashboardFilter] = useState('Mine');
 
+  useEffect(() => {
+    const filter = getFromLocalStorage('dashboard', null);
+    if (!filter) {
+      setDashboardFilter('Mine');
+    } else setDashboardFilter(filter.tab);
+  }, []);
+
   const handleDashboardEdit = (edits: Dashboard) =>
     SupersetClient.get({
       endpoint: `/api/v1/dashboard/${edits.id}`,
@@ -139,14 +150,20 @@ function DashboardTable({
             name: 'Favorite',
             label: t('Favorite'),
             onClick: () => {
-              getData('Favorite').then(() => setDashboardFilter('Favorite'));
+              getData('Favorite').then(() => {
+                setDashboardFilter('Favorite');
+                setInLocalStorage('dashboard', { tab: 'Favorite' });
+              });
             },
           },
           {
             name: 'Mine',
             label: t('Mine'),
             onClick: () => {
-              getData('Mine').then(() => setDashboardFilter('Mine'));
+              getData('Mine').then(() => {
+                setDashboardFilter('Mine');
+                setInLocalStorage('dashboard', { tab: 'Mine' });
+              });
             },
           },
         ]}

superset-frontend/src/views/CRUD/welcome/Welcome.tsx

@@ -125,7 +125,10 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
         if (res.viewed) {
           const filtered = reject(res.viewed, ['item_url', null]).map(r => r);
           data.Viewed = filtered;
-          setActiveChild('Viewed');
+          const savedActivity = getFromLocalStorage('activity', null);
+          if (!savedActivity) {
+            setActiveChild('Viewed');
+          } else setActiveChild(savedActivity.activity);
         } else {
           data.Examples = res.examples;
           setActiveChild('Examples');