release-20.2: ui: update styles for session details page #55889
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
|
This change is |
koorosh
force-pushed
the
backport20.2-55499
branch
from
d0afb81
to
9e79078
Compare
|
@koorosh this backport needs |
Before, Session page has filters menu which used default Antd component and it deviated common styles. Now, existing `Dropdown` component is extended to be used in Sessions page with extra properties to get more flexibility for customization. And this Dropdown is used instead. Release note: none
Previously, "back links" from details page to main pages had regression on styles and didn't satisfy current designs. Now, links by default black and have blue color on hover only. Also styles for links inside SortedTable component is fixed to inherit font size and font styles from parent elements Release note (admin-ui-change): Fix link colors for "Back" link on Details pages (Node Overview, Jobs, Sessions, and statements details pages.
Previously, `Pagination` component was used from Antd design system and every page component added it's own duplicate of custom styles on top of Antd Pagination. This introduced multiple places which have to changed in order to unify styles across entire app. Now, main `Pagination` component is added to `admin-ui-components` package which is basically wrapper on top of Antd component with custom styles. Also, all existing duplicates for styles are removed and it avoids confusion to know which Pagination is correct one. In addition, styles which were duplicated from StatementsPage into SessionsPage were re-imported in it's own styles to keep single places for changes. Release note: none
Session details page had inconsistent styles where headers for sections had wrong sizes, spacings between sections were larger than in designs, and positions for action buttons (Cancel query and session buttons) had to be placed in header section. Now, styles are adjusted according to designs and fixed in a way to avoid global changes. The only one global change is made to reset `line-height` property for H1 element which were inherited from <body> element and caused wrong text positioning. Release note (admin ui change): adjusted styles for Session details page
koorosh
force-pushed
the
backport20.2-55499
branch
from
9e79078
to
5cc9309
Compare
oh, nice catch! thanks! |
This was referenced May 24, 2021
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.
Backport 4/4 commits from #55499.
/cc @cockroachdb/release
resolves #54513
depends on cockroachdb/admin-ui-components#31
depends on cockroachdb/admin-ui-components#34
depends on cockroachdb/admin-ui-components#35
Current fix is quite complex and touches a lot of places because most of the issues with styles were common for all pages (Statements, Jobs, Node Overview).
Also many style duplicates required to get rid of duplicates and unify single version of proper components to use across entire app.
It's easier to review this PR per commit. Each commit describes in details what changes were made and their purpose.