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: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long #19472

Conversation

diegomedina248
Copy link
Contributor

SUMMARY

The dashboard edit view get's cut off (hidden behind) when the dashboard header is bigger than usual.
This can happen if the dashboard title occupies more than one line, making the header bigger, or when editing the title.

The reason is because the edit view is sticky, and the top is hardcoded.
This PR calculates the top offset of the edit view based on the dashboard header view, so that it looks correctly regardless of size.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-03-31.at.15.10.51.mov

After:

new.mov

TESTING INSTRUCTIONS

  1. Create a dashboard
  2. In edit mode, edit the dashboard title to be more than one line long

Ensure the edit view tabs are still visible.

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

Comment on lines +265 to +282
useEffect(() => {
setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);

let observer: ResizeObserver;
if (typeof global.ResizeObserver !== 'undefined' && headerRef.current) {
observer = new ResizeObserver(entries => {
setBarTopOffset(
current => entries?.[0]?.contentRect?.height || current,
);
});

observer.observe(headerRef.current);
}

return () => {
observer?.disconnect();
};
}, []);
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice solution!

Copy link
Contributor

@Gwitchr Gwitchr left a comment

Choose a reason for hiding this comment

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

@codecov
Copy link

codecov bot commented Mar 31, 2022

Codecov Report

Merging #19472 (fc4ef83) into master (816a2c3) will decrease coverage by 0.06%.
The diff coverage is 63.63%.

@@            Coverage Diff             @@
##           master   #19472      +/-   ##
==========================================
- Coverage   66.48%   66.42%   -0.07%     
==========================================
  Files        1670     1673       +3     
  Lines       63968    64055      +87     
  Branches     6512     6519       +7     
==========================================
+ Hits        42531    42547      +16     
- Misses      19748    19817      +69     
- Partials     1689     1691       +2     
Flag Coverage Δ
javascript 51.23% <63.63%> (-0.09%) ⬇️

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

Impacted Files Coverage Δ
superset-frontend/src/dashboard/constants.ts 100.00% <ø> (ø)
...d/components/DashboardBuilder/DashboardBuilder.tsx 72.09% <63.63%> (-0.64%) ⬇️
.../components/Header/HeaderActionsDropdown/index.jsx 67.79% <0.00%> (-3.64%) ⬇️
...ontend/src/dashboard/components/dnd/DragHandle.tsx 83.33% <0.00%> (-2.39%) ⬇️
...atasourcePanel/DatasourcePanelDragOption/index.tsx 88.88% <0.00%> (-1.12%) ⬇️
...frontend/src/dashboard/components/Header/index.jsx 60.92% <0.00%> (-0.46%) ⬇️
...d/src/explore/components/DatasourcePanel/index.tsx 69.23% <0.00%> (-0.13%) ⬇️
superset-frontend/src/preamble.ts 0.00% <0.00%> (ø)
superset-frontend/src/embedded/index.tsx 0.00% <0.00%> (ø)
...plugins/legacy-plugin-chart-heatmap/src/Heatmap.js 0.00% <0.00%> (ø)
... and 15 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 816a2c3...fc4ef83. Read the comment docs.

Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

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

LGTM

@rusackas rusackas merged commit 154f1ea into apache:master Apr 15, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.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-Patch size/M 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants