fix: Floating Menu in SQL Left Bar #13858

AAfghahi · 2021-03-29T21:30:40Z

SUMMARY

The table and database selector were floating in SQL Left Bar. This solution fixes that by creating a new prop in TableSelector that determines whether to use a created ref or the document body.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

This was visually tested.

ADDITIONAL INFORMATION

Has associated issue:[SQL Lab] Database and Table dropdowns disconnected #13842
Changes UI
Requires DB Migration.
Confirm DB Migration upgrade and downgrade tested.
Introduces new feature or API
Removes existing feature or API

AAfghahi · 2021-03-29T21:35:25Z

@junlincc and oh weird I can't tag yousoph. :/

junlincc · 2021-03-29T23:18:53Z

/testenv up

codecov · 2021-03-30T00:10:29Z

Codecov Report

Merging #13858 (91b12dd) into master (7621010) will increase coverage by 0.10%.
The diff coverage is 86.66%.

❗ Current head 91b12dd differs from pull request most recent head ee5ea3a. Consider uploading reports for the commit ee5ea3a to get more accurate results

@@            Coverage Diff             @@
##           master   #13858      +/-   ##
==========================================
+ Coverage   78.25%   78.35%   +0.10%     
==========================================
  Files         934      935       +1     
  Lines       47320    47405      +85     
  Branches     5937     5982      +45     
==========================================
+ Hits        37028    37146     +118     
+ Misses      10148    10116      -32     
+ Partials      144      143       -1

Flag	Coverage Δ
cypress	`56.05% <74.15%> (+0.02%)`	⬆️
hive	`?`

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

Impacted Files	Coverage Δ
...tend/src/SqlLab/components/ScheduleQueryButton.tsx	`28.12% <ø> (ø)`
...et-frontend/src/SqlLab/components/TableElement.jsx	`88.60% <ø> (+0.23%)`	⬆️
...end/src/common/components/DropdownButton/index.tsx	`24.00% <0.00%> (ø)`
...rset-frontend/src/components/ProgressBar/index.tsx	`100.00% <ø> (ø)`
.../components/CrossFilterScopingModal/utils/index.ts	`100.00% <ø> (ø)`
...src/dashboard/components/PublishedStatus/index.jsx	`100.00% <ø> (ø)`
...dashboard/components/SliceHeaderControls/index.jsx	`77.89% <ø> (ø)`
...perset-frontend/src/datasource/DatasourceModal.tsx	`49.46% <ø> (-23.12%)`	⬇️
...components/controls/FilterBoxItemControl/index.jsx	`73.58% <ø> (ø)`
...onents/controls/FilterControl/AdhocFilter/index.js	`96.92% <ø> (ø)`
... and 63 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 7621010...ee5ea3a. Read the comment docs.

eschutho

I think we can accomplish this with overflow: visible in a few places.

ktmud · 2021-03-30T00:47:01Z

I also noticed that the menu overlaps with SQL Editor control buttons when table names are very long. Can you make sure this is also fixed?

github-actions · 2021-03-30T03:58:55Z

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

AAfghahi · 2021-03-30T15:12:41Z

@ktmud

Oh wow that looks weird. Thanks for bringing it up. I will need to find some databases that match that length and test.

etr2460 · 2021-04-01T00:03:15Z

We ran into the bug this is fixing in our weekly release today. Since this PR is still in progress and the PR that introduced the bug reverts cleanly (and easily) how do we feel about reverting #13694?

cc @AAfghahi @yousoph @junlincc

AAfghahi · 2021-04-01T00:34:23Z

@etr2460 that sounds good to me, this should be merged soon.

AAfghahi · 2021-04-01T22:22:47Z

I also noticed that the menu overlaps with SQL Editor control buttons when table names are very long. Can you make sure this is also fixed?

Hello @ktmud how does this look:

You could still use the tooltip to see the full name.

eschutho · 2021-04-02T02:49:06Z

This looks good @AAfghahi. Were you able to get the ellipses to show up? I didn't see them.

AAfghahi · 2021-04-02T02:52:36Z

@eschutho no, I think I need to set a definable width.

eschutho · 2021-04-02T02:55:26Z

I don't have a huge preference whether we have the ellipsis or not.. @Steejay wdyt?

Steejay · 2021-04-02T14:44:30Z

@AAfghahi @eschutho hello! Ideally we'd add an ellipsis so that the user knows that the copy is cut off. This will then help indicate that a tooltip would reveal the complete copy.

AAfghahi · 2021-04-02T18:09:24Z

Screen.Recording.2021-04-02.at.2.07.07.PM.mov

I think this is everything that we wanted.

eschutho

LGTM. Thanks @AAfghahi!
Needs visual testing still.

ktmud · 2021-04-05T16:25:48Z

@Steejay I think it's OK for the dropdown menu to be wider than the select box (it shouldn't be shorter than it though).

Even AntD has a dropdownMatchSelectWidth option which you can set to false to allow this auto-expand:
https://codesandbox.io/s/search-with-sort-antd4150-forked-nkude?file=/index.js

I just removed the fixed width of the menu container when there is no need to use virtual list.

@AAfghahi This looks good. Could you also add screenshots of how the select look like in Explore page chart controls and Dashboard FilterBox just for confirmation?

betodealmeida · 2021-04-05T16:48:32Z

/testenv up

AAfghahi · 2021-04-05T17:13:53Z

@ktmud I don't have any filter boxes with really long names.

Is there a public database that does so I can check it?

AAfghahi · 2021-04-05T17:53:56Z

ok found one

but also, the change to fix this was specific to SQL Editor. I think that the z-indexes of the other portions it is used are not so varied.

betodealmeida · 2021-04-05T18:01:49Z

@ktmud I don't have any filter boxes with really long names.
Is there a public database that does so I can check it?

You can just add a row. Go to SQL Lab and run something like this:

UPDATE table SET country = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' WHERE country = 'Angola';

github-actions · 2021-04-05T18:54:28Z

@betodealmeida Ephemeral environment creation is currently limited to committers.

AAfghahi · 2021-04-05T19:37:09Z

@ktmud

ktmud · 2021-04-05T20:15:54Z

@AAfghahi Thank you for the screenshots!

hughhhh · 2021-04-05T20:59:42Z

/testenv up

eschutho · 2021-04-05T22:18:03Z

@yousoph did visual testing
🏷 ready-to-merge

github-actions · 2021-04-05T22:22:34Z

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

betodealmeida

LGTM

github-actions · 2021-04-05T22:54:50Z

Ephemeral environment shutdown and build artifacts deleted.

maltoze · 2021-04-06T06:33:11Z

superset-frontend/src/SqlLab/main.less

@@ -300,6 +300,7 @@ div.Workspace {
  .schemaPane-enter-done,
  .schemaPane-exit {
    transform: translateX(0);
+    z-index: 1020;


* floating table git issue * made changes * floating table git issue * made changes * long table names * floating table git issue * made changes * floating table git issue * made changes * long table names * floating table git issue * made changes * floating table git issue * made changes * long table names * table values * aligned * active key * changed to customStyle * update dropdown styles Co-authored-by: Elizabeth Thompson <eschutho@gmail.com> (cherry picked from commit f19f2c3)

* floating table git issue * made changes * floating table git issue * made changes * long table names * floating table git issue * made changes * floating table git issue * made changes * long table names * floating table git issue * made changes * floating table git issue * made changes * long table names * table values * aligned * active key * changed to customStyle * update dropdown styles Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>

pull-request-size bot added the size/S label Mar 29, 2021

eschutho requested changes Mar 30, 2021

View reviewed changes

betodealmeida mentioned this pull request Mar 30, 2021

feat: create table with long name #13871

Merged

8 tasks

AAfghahi force-pushed the floatingTable branch from c07586f to 29e8248 Compare March 30, 2021 20:14

etr2460 mentioned this pull request Apr 1, 2021

fix: Revert "fix: select table overlay" #13901

Merged

AAfghahi added 5 commits April 1, 2021 18:23

floating table git issue

ba12aec

made changes

c11a62e

floating table git issue

ba9c017

made changes

6cdcddd

long table names

2800904

AAfghahi force-pushed the floatingTable branch from 26d6955 to 2800904 Compare April 1, 2021 22:25

Merge branch 'master' into floatingTable

6825d52

AAfghahi added 4 commits April 2, 2021 14:45

floating table git issue

8a965e0

made changes

3287cff

floating table git issue

544ecce

made changes

e21fc57

pull-request-size bot added size/S and removed size/M labels Apr 5, 2021

AAfghahi force-pushed the floatingTable branch from 1e161de to 9554d7b Compare April 5, 2021 15:36

eschutho approved these changes Apr 5, 2021

View reviewed changes

changes to z-index

ee5ea3a

AAfghahi force-pushed the floatingTable branch from 9554d7b to ee5ea3a Compare April 5, 2021 21:28

superset-github-bot bot added the need:merge The PR is ready to be merged label Apr 5, 2021

betodealmeida approved these changes Apr 5, 2021

View reviewed changes

betodealmeida merged commit f19f2c3 into apache:master Apr 5, 2021

maltoze reviewed Apr 6, 2021

View reviewed changes

AAfghahi mentioned this pull request Apr 6, 2021

fix: Data tab underneath schema and table. #13971

Closed

1 task

stephenLYZ mentioned this pull request Jun 2, 2022

fix(cosmetic): Fix Datasource Modal Out Of Box #20237

Merged

9 tasks

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Floating Menu in SQL Left Bar #13858

fix: Floating Menu in SQL Left Bar #13858

AAfghahi commented Mar 29, 2021 •

edited

AAfghahi commented Mar 29, 2021

junlincc commented Mar 29, 2021

codecov bot commented Mar 30, 2021 •

edited

eschutho left a comment

ktmud commented Mar 30, 2021

github-actions bot commented Mar 30, 2021

AAfghahi commented Mar 30, 2021

etr2460 commented Apr 1, 2021

AAfghahi commented Apr 1, 2021

AAfghahi commented Apr 1, 2021

eschutho commented Apr 2, 2021

AAfghahi commented Apr 2, 2021

eschutho commented Apr 2, 2021

Steejay commented Apr 2, 2021

AAfghahi commented Apr 2, 2021

eschutho left a comment

ktmud commented Apr 5, 2021 •

edited

betodealmeida commented Apr 5, 2021

AAfghahi commented Apr 5, 2021

AAfghahi commented Apr 5, 2021 •

edited

betodealmeida commented Apr 5, 2021 •

edited

github-actions bot commented Apr 5, 2021

AAfghahi commented Apr 5, 2021 •

edited

ktmud commented Apr 5, 2021

hughhhh commented Apr 5, 2021

eschutho commented Apr 5, 2021

github-actions bot commented Apr 5, 2021

betodealmeida left a comment

github-actions bot commented Apr 5, 2021

maltoze Apr 6, 2021

AAfghahi Apr 6, 2021

fix: Floating Menu in SQL Left Bar #13858

fix: Floating Menu in SQL Left Bar #13858

Conversation

AAfghahi commented Mar 29, 2021 • edited

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

AAfghahi commented Mar 29, 2021

junlincc commented Mar 29, 2021

codecov bot commented Mar 30, 2021 • edited

Codecov Report

eschutho left a comment

Choose a reason for hiding this comment

ktmud commented Mar 30, 2021

github-actions bot commented Mar 30, 2021

AAfghahi commented Mar 30, 2021

etr2460 commented Apr 1, 2021

AAfghahi commented Apr 1, 2021

AAfghahi commented Apr 1, 2021

eschutho commented Apr 2, 2021

AAfghahi commented Apr 2, 2021

eschutho commented Apr 2, 2021

Steejay commented Apr 2, 2021

AAfghahi commented Apr 2, 2021

eschutho left a comment

Choose a reason for hiding this comment

ktmud commented Apr 5, 2021 • edited

betodealmeida commented Apr 5, 2021

AAfghahi commented Apr 5, 2021

AAfghahi commented Apr 5, 2021 • edited

betodealmeida commented Apr 5, 2021 • edited

github-actions bot commented Apr 5, 2021

AAfghahi commented Apr 5, 2021 • edited

ktmud commented Apr 5, 2021

hughhhh commented Apr 5, 2021

eschutho commented Apr 5, 2021

github-actions bot commented Apr 5, 2021

betodealmeida left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 5, 2021

maltoze Apr 6, 2021

Choose a reason for hiding this comment

AAfghahi Apr 6, 2021

Choose a reason for hiding this comment

AAfghahi commented Mar 29, 2021 •

edited

codecov bot commented Mar 30, 2021 •

edited

ktmud commented Apr 5, 2021 •

edited

AAfghahi commented Apr 5, 2021 •

edited

betodealmeida commented Apr 5, 2021 •

edited

AAfghahi commented Apr 5, 2021 •

edited