refactor: Convert TableElement.jsx component from class to functional with hooks #14830

corbinrobb · 2021-05-26T00:03:42Z

SUMMARY

Update the TableElement class component to be a functional component using hooks.

Modified the tests slightly where needed to check the changes to DOM from updating the state instead of checking the component state itself. Was necessary because functional components using hooks don't have an accessible state like class components.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

The component should look and function the same

TESTING INSTRUCTIONS

To run the tests for TableElement navigate to superset-frontend and run npm run test -- spec/javascripts/sqllab/TableElement_spec.jsx

ADDITIONAL INFORMATION

Has associated issue:
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

…ng elements they change

superset-frontend/src/SqlLab/components/TableElement.jsx

corbinrobb · 2021-05-27T17:31:54Z

Figured it would make sense to grab a ticket that is also making changes in this component.

Please let me know if this should be in another PR or if there's a better way to handle it. Thanks!

[sql lab]'copy' and 'collapse/expand' icons do not have tooltip in the table review panel

SUMMARY

Fixed an issue where the tooltip for the copy/paste was not showing up and added a tooltip to the collapse/expand icon on the table element.

Updated tests where necessary.

BEFORE

AFTER

TESTING INSTRUCTIONS

To test TableElement navigate to the route superset/sqllab
On the left towards the bottom there should be a drop-down saying Select table or type table name
Use the drop-down and select some table and below the drop-down some TableElement components should appear
Hover your mouse towards the top right corner of the component to use the toolbox and collapse/expand icons

ADDITIONAL INFORMATION

Has associated issue:
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

superset-frontend/src/SqlLab/components/TableElement.jsx

AAfghahi · 2021-05-27T18:31:41Z

Heya, for the testing instructions, I think that adding how to visually test for it might be best. So something short and along the lines of ---> navigate to "x" then whatever would be good. So that someone who pulls your file, or if they create an ephemeral env could go and visually inspect it.

eschutho · 2021-05-27T23:37:32Z

@yousoph how do these tooltips look?

yousoph · 2021-05-28T19:19:27Z

Nice! Looking good to me, thanks @corbinrobb!

…ng from antdesign directly

corbinrobb · 2021-05-28T20:45:43Z

It was my pleasure! @yousoph I'm looking forward to helping more!

hughhhh · 2021-06-01T19:03:41Z

@corbinrobb can you fix these issues to allow CI to pass

/home/runner/work/superset/superset/superset-frontend/src/SqlLab/components/TableElement.jsx
   35:1   error  `src/components/Icons` import should occur before import of `../../components/CopyToClipboard`         import/order
   70:9   error  'popSelectStar' is assigned a value but never used                                                     no-unused-vars
  192:30  error  Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`  arrow-body-style
  264:36  error  Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`  arrow-body-style
  280:20  error  Curly braces are unnecessary here                                                                      react/jsx-curly-brace-presence
  292:7   error  Value must be omitted for boolean attributes                                                           react/jsx-boolean-value

AAfghahi · 2021-06-01T20:01:25Z

@corbinrobb can you fix these issues to allow CI to pass

/home/runner/work/superset/superset/superset-frontend/src/SqlLab/components/TableElement.jsx
   35:1   error  `src/components/Icons` import should occur before import of `../../components/CopyToClipboard`         import/order
   70:9   error  'popSelectStar' is assigned a value but never used                                                     no-unused-vars
  192:30  error  Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`  arrow-body-style
  264:36  error  Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`  arrow-body-style
  280:20  error  Curly braces are unnecessary here                                                                      react/jsx-curly-brace-presence
  292:7   error  Value must be omitted for boolean attributes                                                           react/jsx-boolean-value

So I actually think popSelectStar is depreciated. Might be worth setting up a test env to check to make sure.

corbinrobb · 2021-06-01T20:21:51Z

@hughhhh I got the linter errors figured out and I pushed up the latest commit. I agree with @AAfghahi about popSelectStar. I removed it from the component since it was throwing the unused variable linter error. It appears it wasn't being used before I started the PR either but not throwing the linter because it was a method on a class. Thanks lemme know if I should/need to do anything else with this!

codecov · 2021-06-01T23:05:50Z

Codecov Report

Merging #14830 (967fe57) into master (6d33432) will decrease coverage by 0.01%.
The diff coverage is 88.23%.

@@            Coverage Diff             @@
##           master   #14830      +/-   ##
==========================================
- Coverage   77.62%   77.61%   -0.02%     
==========================================
  Files         962      965       +3     
  Lines       49078    49471     +393     
  Branches     6155     6259     +104     
==========================================
+ Hits        38099    38399     +300     
- Misses      10775    10872      +97     
+ Partials      204      200       -4

Flag	Coverage Δ
javascript	`72.48% <88.23%> (+0.06%)`	⬆️

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

Impacted Files	Coverage Δ
...et-frontend/src/SqlLab/components/TableElement.jsx	`92.00% <88.23%> (+2.97%)`	⬆️
...tersConfigModal/FiltersConfigForm/DefaultValue.tsx	`26.31% <0.00%> (-62.58%)`	⬇️
...tend/src/filters/components/Time/transformProps.ts	`66.66% <0.00%> (-22.23%)`	⬇️
...ilters/FilterBar/FilterControls/FilterControls.tsx	`77.58% <0.00%> (-17.16%)`	⬇️
...rset-frontend/src/components/IconTooltip/index.tsx	`88.88% <0.00%> (-11.12%)`	⬇️
...nts/controls/DateFilterControl/DateFilterLabel.tsx	`73.72% <0.00%> (-9.33%)`	⬇️
superset-frontend/src/utils/urlUtils.ts	`53.33% <0.00%> (-8.21%)`	⬇️
superset-frontend/src/dataMask/actions.ts	`71.42% <0.00%> (-7.15%)`	⬇️
...tend/src/filters/components/Select/controlPanel.ts	`58.33% <0.00%> (-5.31%)`	⬇️
...nd/src/explore/components/DataTablesPane/index.tsx	`83.90% <0.00%> (-4.99%)`	⬇️
... and 73 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 6d33432...967fe57. Read the comment docs.

hughhhh · 2021-06-03T20:41:33Z

/testenv up

superset-frontend/src/SqlLab/components/TableElement.jsx

github-actions · 2021-06-03T20:43:36Z

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

superset-frontend/src/SqlLab/components/TableElement.jsx

eschutho · 2021-06-03T20:55:05Z

This is great @corbinrobb, thanks so much! I just left a few nits, and some of them are from earlier code that I thought I'd see if we could sneak in. :)

corbinrobb · 2021-06-03T21:48:57Z

No problem at all! @eschutho I like all the changes! Much more concise and readable. I will be pushing them up in just a moment.

betodealmeida

github-actions · 2021-06-03T23:05:16Z

Ephemeral environment shutdown and build artifacts deleted.

* upstream/master: (68 commits) fix typos (apache#14950) docs: fix custom oauth config (apache#14997) fix: apply template_params on external_metadata (apache#14996) fix: toggle fullscreen on the dashboard (apache#14979) feat(native-filters): add markers and number formatter + simple tests (apache#14981) fix(native-filters): Fix "undefined" error after editing a filter (apache#14984) fix(native-filters): remove implied fetch predicate (apache#14982) fix(native-filters): update cascaded filter state on change (apache#14980) fix(filter box): replace freeform where clause with ilike (apache#14900) refactor: Convert TableElement.jsx component from class to functional with hooks (apache#14830) fix: renamed sqllab filters to _filters (apache#14971) feat(native-filters): apply cascading without instant filtering (apache#14966) chore: bump superset-ui to 0.17.53 (apache#14968) fix(native-filters): cascading filters not rendering in tab (apache#14964) feat: add type_generic and is_dttm to table metadata (apache#14863) additional safeguard (apache#14953) feat: Adding FORCE_SSL as feature flag in config.py (apache#14934) feat(dashboard/native-filters): Hide filters out of scope of current tab (apache#14933) fix: time parser truncate to first day of year/month (apache#14945) fix: is_temporal should overwrite is_dttm (apache#14894) ...

… with hooks (apache#14830) * Change TableElement from a class component to a functional component * Replace class state checks in TableElement_spec.jsx with checks testing elements they change * Refactor small bit of logic to use optional chaining * Add optional chaining to some logic * Fix IconTooltip and add IconTooltip to the collapse button * Fix custom icon using IconToolTip so it better matches the original * Update collapse/expand icon to use Icons component instead of importing from antdesign directly * Fix eslint errors * Clean up some code for readability Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>

Corbin Robb added 2 commits May 25, 2021 14:55

Change TableElement from a class component to a functional component

2c020ff

Replace class state checks in TableElement_spec.jsx with checks testi…

6b529ad

…ng elements they change

pull-request-size bot added the size/L label May 26, 2021

corbinrobb marked this pull request as ready for review May 26, 2021 00:42

lyndsiWilliams requested changes May 26, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

Refactor small bit of logic to use optional chaining

a521903

lyndsiWilliams requested changes May 26, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

corbinrobb changed the title ~~[WIP] refactor: Convert TableElement.jsx component from class to functional with hooks~~ refactor: Convert TableElement.jsx component from class to functional with hooks May 26, 2021

Corbin Robb added 3 commits May 26, 2021 05:52

Add optional chaining to some logic

5a258ef

Fix IconTooltip and add IconTooltip to the collapse button

bc84f66

Fix custom icon using IconToolTip so it better matches the original

3b54694

AAfghahi reviewed May 27, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

Update collapse/expand icon to use Icons component instead of importi…

143bde5

…ng from antdesign directly

AAfghahi approved these changes May 28, 2021

View reviewed changes

lyndsiWilliams mentioned this pull request Jun 1, 2021

[WIP] refactor: Converting TableElement.jsx to functional component #12949

Closed

6 tasks

hughhhh self-requested a review June 1, 2021 15:53

Fix eslint errors

c8efead

eschutho reviewed Jun 3, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

eschutho reviewed Jun 3, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

eschutho reviewed Jun 3, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/TableElement.jsx Outdated Show resolved Hide resolved

Clean up some code for readability

967fe57

betodealmeida approved these changes Jun 3, 2021

View reviewed changes

betodealmeida merged commit 004a6d9 into apache:master Jun 3, 2021

corbinrobb deleted the corbinrobb/tableelement-to-functional branch December 8, 2021 04:05

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

refactor: Convert TableElement.jsx component from class to functional with hooks #14830

refactor: Convert TableElement.jsx component from class to functional with hooks #14830

corbinrobb commented May 26, 2021

corbinrobb commented May 27, 2021 •

edited

Loading

AAfghahi commented May 27, 2021

eschutho commented May 27, 2021

yousoph commented May 28, 2021

corbinrobb commented May 28, 2021

hughhhh commented Jun 1, 2021

AAfghahi commented Jun 1, 2021

corbinrobb commented Jun 1, 2021

codecov bot commented Jun 1, 2021 •

edited

Loading

hughhhh commented Jun 3, 2021

github-actions bot commented Jun 3, 2021

eschutho commented Jun 3, 2021

corbinrobb commented Jun 3, 2021

betodealmeida left a comment •

edited

Loading

github-actions bot commented Jun 3, 2021

refactor: Convert TableElement.jsx component from class to functional with hooks #14830

refactor: Convert TableElement.jsx component from class to functional with hooks #14830

Conversation

corbinrobb commented May 26, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

corbinrobb commented May 27, 2021 • edited Loading

[sql lab]'copy' and 'collapse/expand' icons do not have tooltip in the table review panel

SUMMARY

BEFORE

AFTER

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

AAfghahi commented May 27, 2021

eschutho commented May 27, 2021

yousoph commented May 28, 2021

corbinrobb commented May 28, 2021

hughhhh commented Jun 1, 2021

AAfghahi commented Jun 1, 2021

corbinrobb commented Jun 1, 2021

codecov bot commented Jun 1, 2021 • edited Loading

Codecov Report

hughhhh commented Jun 3, 2021

github-actions bot commented Jun 3, 2021

eschutho commented Jun 3, 2021

corbinrobb commented Jun 3, 2021

betodealmeida left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jun 3, 2021

corbinrobb commented May 27, 2021 •

edited

Loading

codecov bot commented Jun 1, 2021 •

edited

Loading

betodealmeida left a comment •

edited

Loading