ui: update styles for session details page#55499
ui: update styles for session details page#55499craig[bot] merged 4 commits intocockroachdb:masterfrom
Conversation
|
This change is |
|
One language thing I notice here in the screenshots: We use @awoods187 @jordanlewis can you confirm that we want to go with |
nathanstilwell
left a comment
There was a problem hiding this comment.
Reviewed 5 of 5 files at r1, 9 of 9 files at r2, 9 of 9 files at r3, 4 of 4 files at r4.
Reviewable status:complete! 0 of 0 LGTMs obtained (waiting on @koorosh)
pkg/ui/src/views/sessions/sessionsPage.module.styl, line 11 at r3 (raw file):
// licenses/APL.txt. @require '~src/views/statements/statementsPage.module.styl'
hmmm. I feel like we could move these styles into a more central place if they are going to be used by both Statements and Sessions.
213a6c8 to
3fd8be8
Compare
Took a closer look and figured out that |
nathanstilwell
left a comment
There was a problem hiding this comment.
Reviewed 21 of 21 files at r5, 9 of 9 files at r6, 9 of 9 files at r7, 6 of 6 files at r8.
Reviewable status:
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
3fd8be8 to
ee97a25
Compare
|
bors r+ |
|
Build succeeded: |
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.