Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(sql lab): NULL styling in grid cell #17385

Merged
merged 5 commits into from
Nov 15, 2021

Conversation

lyndsiWilliams
Copy link
Member

@lyndsiWilliams lyndsiWilliams commented Nov 9, 2021

SUMMARY

NULL grid cells in SQL Lab's result set were no longer returning their muted styling (italicized and muted gray). This was fixed by applying the NULL styles through the renderTableCell function instead of renderGridCell.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE

brokenNULL

AFTER

  • With less than 50 columns (table)

fixedNULL

  • With 50+ columns (grid)

fixedNULLgrid

TESTING INSTRUCTIONS

  • Go to the SQL Lab editor
  • Make a query that returns a NULL value
  • Observe the corrected styling

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • 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

@codecov
Copy link

codecov bot commented Nov 9, 2021

Codecov Report

Merging #17385 (4d5f1ec) into master (561d1ac) will decrease coverage by 0.12%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #17385      +/-   ##
==========================================
- Coverage   77.07%   76.94%   -0.13%     
==========================================
  Files        1036     1038       +2     
  Lines       55756    56009     +253     
  Branches     7630     7735     +105     
==========================================
+ Hits        42972    43098     +126     
- Misses      12529    12654     +125     
- Partials      255      257       +2     
Flag Coverage Δ
javascript 71.23% <100.00%> (-0.21%) ⬇️

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

Impacted Files Coverage Δ
...src/components/FilterableTable/FilterableTable.tsx 82.35% <100.00%> (+0.49%) ⬆️
...hboard/components/nativeFilters/FilterBar/state.ts 82.81% <0.00%> (-4.69%) ⬇️
superset-frontend/src/chart/Chart.jsx 40.29% <0.00%> (-3.04%) ⬇️
...tend/src/common/hooks/apiResources/apiResources.ts 92.50% <0.00%> (-2.24%) ⬇️
.../src/dashboard/components/gridComponents/Chart.jsx 78.37% <0.00%> (-2.00%) ⬇️
superset-frontend/src/explore/constants.ts 95.74% <0.00%> (-1.63%) ⬇️
...et-frontend/src/dashboard/actions/sliceEntities.js 11.76% <0.00%> (-1.14%) ⬇️
...t-frontend/src/dashboard/components/SliceAdder.jsx 76.62% <0.00%> (-0.41%) ⬇️
superset-frontend/src/dashboard/actions/hydrate.js 1.63% <0.00%> (-0.08%) ⬇️
superset-frontend/src/constants.ts 100.00% <0.00%> (ø)
... and 14 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 561d1ac...4d5f1ec. Read the comment docs.

</i>
) : (
this.getCellContent({ cellData, columnKey })
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we still need this if the table has more than 50 columns? (i.e., renders a grid?)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could just move the logic to getCellContent?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, good catch! Added it back in this commit.

My initial attempt was to add this logic to getCellContent, but that function needs to get just the text content of each cell, it doesn't like components. It uses the text to get the width of the columns. I tried working around the function to get it to accept elements too but I couldn't find a way, since it needs to output just a string of what's inside the cell for sizing purposes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you confirm that it also works with more than 50 columns?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the description with screenshots for table and grid

@eschutho
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

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

@eschutho eschutho merged commit eb029ab into apache:master Nov 15, 2021
@eschutho eschutho deleted the lyndsi/fix-null-styles branch November 15, 2021 18:49
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

AAfghahi pushed a commit that referenced this pull request Jan 10, 2022
* Fix NULL styling in gridCell

* removed unnecessary imports

* Added null styling back to renderGridCell

* Cleaned up a little code as per Elizabeth

* Found another little cleanup spot
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels preset-io size/S 🚢 1.5.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants