feat: make tabs sticky in homepage #14695

pkdotson · 2021-05-18T18:41:05Z

SUMMARY

Before when user would click on tabs in homepage and navigate away it would default back to original tab setting. This pr makes the tabs sticky using local storage to get users last tab click.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-05-18.at.11.37.22.AM.mov

TEST PLAN

click tabs in welcome submenus and reload page to ensure they "stick"

ADDITIONAL INFORMATION

[x ] Has associated issue: [homescreen] Make all Home Page tabs "sticky" #14670
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

junlincc

LGTM locally. Thanks for the enhancement

codecov · 2021-05-19T01:09:27Z

Codecov Report

Merging #14695 (c3b12ed) into master (eb9dafc) will decrease coverage by 0.01%.
The diff coverage is 67.44%.

@@            Coverage Diff             @@
##           master   #14695      +/-   ##
==========================================
- Coverage   77.55%   77.53%   -0.02%     
==========================================
  Files         958      959       +1     
  Lines       48549    48695     +146     
  Branches     5702     5747      +45     
==========================================
+ Hits        37651    37758     +107     
- Misses      10697    10736      +39     
  Partials      201      201

Flag	Coverage Δ
javascript	`72.52% <67.44%> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...-frontend/src/views/CRUD/welcome/ActivityTable.tsx	`79.59% <41.66%> (-5.47%)`	⬇️
...perset-frontend/src/views/CRUD/welcome/Welcome.tsx	`83.87% <75.00%> (-0.58%)`	⬇️
...frontend/src/views/CRUD/welcome/DashboardTable.tsx	`65.78% <76.92%> (+2.15%)`	⬆️
...set-frontend/src/views/CRUD/welcome/ChartTable.tsx	`77.96% <78.57%> (+0.88%)`	⬆️
...t-frontend/src/dashboard/components/SliceAdder.jsx	`77.33% <0.00%> (-4.76%)`	⬇️
...rontend/src/components/ListView/Filters/Search.tsx	`82.35% <0.00%> (-4.32%)`	⬇️
...erset-frontend/src/SqlLab/components/ResultSet.tsx	`67.44% <0.00%> (-2.56%)`	⬇️
...nd/src/explore/components/ExploreActionButtons.tsx	`71.73% <0.00%> (-0.61%)`	⬇️
.../src/explore/components/ControlPanelsContainer.tsx	`80.85% <0.00%> (-0.58%)`	⬇️
...ntend/src/explore/components/ExploreChartPanel.jsx	`16.66% <0.00%> (-0.48%)`	⬇️
... and 34 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb9dafc...c3b12ed. Read the comment docs.

github-actions · 2021-05-19T02:17:07Z

@junlincc Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2021-05-19T02:17:08Z

@junlincc Ephemeral environment creation failed. Please check the Actions logs for details.

rusackas · 2021-05-19T07:18:57Z

/testenv up

github-actions · 2021-05-19T07:43:40Z

@rusackas Ephemeral environment spinning up at http://35.167.45.117:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

rusackas · 2021-05-21T21:25:03Z

/testenv up

github-actions · 2021-05-21T21:29:21Z

@rusackas Ephemeral environment spinning up at http://34.220.243.232:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

rusackas

LGTM!

github-actions · 2021-05-21T21:38:19Z

Ephemeral environment shutdown and build artifacts deleted.

rusackas · 2021-05-21T21:38:46Z

Might be a good idea to follow this up with an E2E test, just to make sure it stays working.

suddjian · 2021-05-21T21:42:06Z

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

@@ -86,6 +91,13 @@ function ChartTable({

  const [chartFilter, setChartFilter] = useState('Mine');

+  useEffect(() => {
+    const filter = getFromLocalStorage('chart', null);


I think we should use more specific names for the local storage keys than activity and chart since these names need to be shared globally across the entire application. Perhaps use homepage_chart_filter here.

suddjian · 2021-05-21T21:43:08Z

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

@@ -201,6 +216,7 @@ export default function ActivityTable({
      label: t('Examples'),
      onClick: () => {
        setActiveChild('Examples');
+        setInLocalStorage('activity', { activity: 'Examples' });


perhaps homepage_active_tab as the key here

suddjian · 2021-05-21T21:43:51Z

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

@@ -69,6 +73,13 @@ function DashboardTable({
  const [editModal, setEditModal] = useState<Dashboard>();
  const [dashboardFilter, setDashboardFilter] = useState('Mine');

+  useEffect(() => {
+    const filter = getFromLocalStorage('dashboard', null);


homepage_dashboard_filter?

Also, these keys could be extracted into constants

👍 on keeping these in a constants file or using an enum. It’ll make it much easier to add a new key without risk of collision with an existing one

kgabryje · 2021-05-22T04:44:41Z

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

@@ -71,6 +75,7 @@ function ChartTable({
    false,
  );

+  useEffect(() => {});


Empty useEffect?

kgabryje · 2021-05-28T13:15:28Z

I found a weird bug on Dashboards panel - I don't have any favourite dashboards, but when I reload, dashboards from "Mine" tab show up in "Favourite" tab

Screen.Recording.2021-05-28.at.15.13.44.mov

* inital commit * lint * fix loading state for edit activity * add dep * lint fix * add condition * lint being lint

inital commit

9022f35

superset-github-bot bot added the preset-io label May 18, 2021

pull-request-size bot added the size/M label May 18, 2021

pkdotson requested review from nytai, rusackas and junlincc May 18, 2021 18:41

junlincc added demo release:note labels May 18, 2021

lint

f54325e

junlincc reviewed May 18, 2021

View reviewed changes

rusackas requested a review from suddjian May 19, 2021 07:18

pkdotson added 5 commits May 19, 2021 11:23

fix loading state for edit activity

62eef2a

add dep

b22d607

lint fix

84096c2

add condition

f2ab26f

lint being lint

c3b12ed

junlincc requested a review from zhaoyongjie May 20, 2021 06:46

rusackas approved these changes May 21, 2021

View reviewed changes

rusackas merged commit f96fea1 into apache:master May 21, 2021

suddjian reviewed May 21, 2021

View reviewed changes

kgabryje reviewed May 22, 2021

View reviewed changes

pkdotson mentioned this pull request May 25, 2021

chore: Homepage cleanup #14823

Merged

8 tasks

rusackas deleted the sticky-tabs-hp branch May 25, 2021 21:38

junlincc removed the demo label May 28, 2021

cccs-RyanS pushed a commit to CybercentreCanada/superset that referenced this pull request Dec 17, 2021

feat: make tabs sticky in homepage (apache#14695)

10df569

* inital commit * lint * fix loading state for edit activity * add dep * lint fix * add condition * lint being lint

QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 29, 2021

feat: make tabs sticky in homepage (apache#14695)

2de0122

* inital commit * lint * fix loading state for edit activity * add dep * lint fix * add condition * lint being lint

cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024

feat: make tabs sticky in homepage (apache#14695)

13289a3

* inital commit * lint * fix loading state for edit activity * add dep * lint fix * add condition * lint being lint

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.3.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: make tabs sticky in homepage #14695

feat: make tabs sticky in homepage #14695

pkdotson commented May 18, 2021

junlincc left a comment

codecov bot commented May 19, 2021 •

edited

Loading

github-actions bot commented May 19, 2021

github-actions bot commented May 19, 2021

rusackas commented May 19, 2021

github-actions bot commented May 19, 2021

rusackas commented May 21, 2021

github-actions bot commented May 21, 2021

rusackas left a comment

github-actions bot commented May 21, 2021

rusackas commented May 21, 2021

suddjian May 21, 2021

suddjian May 21, 2021

suddjian May 21, 2021

suddjian May 21, 2021

nytai May 22, 2021

kgabryje May 22, 2021

kgabryje commented May 28, 2021

feat: make tabs sticky in homepage #14695

feat: make tabs sticky in homepage #14695

Conversation

pkdotson commented May 18, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

junlincc left a comment

Choose a reason for hiding this comment

codecov bot commented May 19, 2021 • edited Loading

Codecov Report

github-actions bot commented May 19, 2021

github-actions bot commented May 19, 2021

rusackas commented May 19, 2021

github-actions bot commented May 19, 2021

rusackas commented May 21, 2021

github-actions bot commented May 21, 2021

rusackas left a comment

Choose a reason for hiding this comment

github-actions bot commented May 21, 2021

rusackas commented May 21, 2021

suddjian May 21, 2021

Choose a reason for hiding this comment

suddjian May 21, 2021

Choose a reason for hiding this comment

suddjian May 21, 2021

Choose a reason for hiding this comment

suddjian May 21, 2021

Choose a reason for hiding this comment

nytai May 22, 2021

Choose a reason for hiding this comment

kgabryje May 22, 2021

Choose a reason for hiding this comment

kgabryje commented May 28, 2021

codecov bot commented May 19, 2021 •

edited

Loading