feat(dashboard): Make FilterBar width resizable #20778
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
/testenv up |
|
@ktmud Container image not yet published for this PR. Please try again when build is complete. |
|
@ktmud Ephemeral environment creation failed. Please check the Actions logs for details. |
ktmud
reviewed
Jul 19, 2022
| @@ -37,6 +37,7 @@ export const PLACEHOLDER_DATASOURCE: Datasource = { | |||
| export const MAIN_HEADER_HEIGHT = 53; | |||
| export const CLOSED_FILTER_BAR_WIDTH = 32; | |||
| export const OPEN_FILTER_BAR_WIDTH = 260; | |||
There was a problem hiding this comment.
Maybe rename this to OPEN_FILTER_BAR_DEFAULT_WIDTH?
There was a problem hiding this comment.
I kept this variable because some custom override might be impacted.
| @@ -85,6 +86,7 @@ const ActionButtonsContainer = styled.div` | |||
| `; | |||
|
|
|||
| export const ActionButtons = ({ | |||
| width, | |||
There was a problem hiding this comment.
Suggested change
| width, | |
| width = OPEN_FILTER_BAR_WIDTH |
Nit: let's assign a default value as soon as possible
| @@ -103,7 +105,7 @@ export const ActionButtons = ({ | |||
| ); | |||
|
|
|||
| return ( | |||
| <ActionButtonsContainer> | |||
| <ActionButtonsContainer data-test="filterbar-action-buttons" width={width || OPEN_FILTER_BAR_WIDTH}> | |||
There was a problem hiding this comment.
Suggested change
| <ActionButtonsContainer data-test="filterbar-action-buttons" width={width || OPEN_FILTER_BAR_WIDTH}> | |
| <ActionButtonsContainer data-test="filterbar-action-buttons" width={width}> |
No need for || if default value is assigned.
ktmud
approved these changes
Jul 19, 2022
Codecov Report
@@ Coverage Diff @@
## master #20778 +/- ##
=======================================
Coverage 66.28% 66.29%
=======================================
Files 1756 1757 +1
Lines 66756 66775 +19
Branches 7049 7052 +3
=======================================
+ Hits 44252 44266 +14
- Misses 20708 20710 +2
- Partials 1796 1799 +3
Flags with carried forward coverage won't be shown. Click here to find out more.
|
* Add Resizable panel in DashboardBuilder to adjust the width for FiltersPanel * store the adjusted width for individual dashboard in localStorage to memorize the state * migrate DashboardBuilder test code by testing-library and jest
justinpark
force-pushed
the
feat--resizable-side-filter-bar
branch
from
b402ec3 to
0c55015
Compare
9 tasks
mistercrunch
added
🏷️ bot
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
The current native filterbar section is fixed size.
Since the filter is not wide enough for moderately wide data to be seen, some filter value with the long overlapped prefix string such like the following case truncated with the repeated strings.
There is an HTML tooltip that appear on mouseover but it's slow and bad user experience.
The dropdown needs to be widened over the sidebar but the dropdown also truncated under the sidebar to fix the #19399
Therefore, this commit makes the sidebar resizable to be widened itself.
This commit adds the Resizable panel for native filterbar to adjust the width wider to help this inconvenient case.
It also stores the adjusted width for individual dashboard in localStorage to memorize the state.
Addition to the feature, this commit also migrates DashboardBuilder test code to testing-library, jest and typescript to enable emotion test helpers.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
resizaable-filterbar--before.mov
After:
resizable-filterbar--after.mov
TESTING IN
STRUCTIONS
ADDITIONAL INFORMATION