cockroach
cockroach copied to clipboard
ui: upgrade antd to v5 in db-console
- update
antdversion to match the version as in CC Console. rc-draweris added as a peer dependency to make Typescript properly infer types.- remove all
antdstyle imports from the code.Antd@5uses css in js and doesn't require style imports.
Release note: None
Depends on: #123973 Note: only last commit belongs to this PR
Related issue: https://cockroachlabs.atlassian.net/browse/CC-28016
Loom video with latest changes: https://www.loom.com/share/d0e116876d184678becae30e32430cf1?sid=d750fc2e-b268-4932-9b10-457ca8990f1b
This is sooo exciting! @koorosh have you tried to adjust the dropdown styles by changing the theme? I don't see where you added the antd theme in this PR.
I'm ok with:
- card height same as the other column card height (like table overview page)
- Focus state of dropdown field like in nodes list page
@koorosh What's the difference in font size?
What's the difference in font size?
For some components font size is changed to 16px instead of 14px as it was before change. Agree, that it should be fixed as well.
Your pull request contains more than 1000 changes. It is strongly encouraged to split big PRs into smaller chunks.
Thank you for updating your pull request.
Before a member of our team reviews your PR, I have some potential action items for you:
- We notice you have more than one commit in your PR. We try break logical changes into separate commits, but commits such as "fix typo" or "address review commits" should be squashed into one commit and pushed with
--force - Please ensure your git commit message contains a release note.
- When CI has completed, please ensure no errors have appeared.
:owl: Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.
Your pull request contains more than 1000 changes. It is strongly encouraged to split big PRs into smaller chunks.
Thank you for updating your pull request.
Before a member of our team reviews your PR, I have some potential action items for you:
- We notice you have more than one commit in your PR. We try break logical changes into separate commits, but commits such as "fix typo" or "address review commits" should be squashed into one commit and pushed with
--force - Please ensure your git commit message contains a release note.
- When CI has completed, please ensure no errors have appeared.
:owl: Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.
Thank you! Let's go over the pages I called out during our 1-1 tomorrow.
Based on last discussion, following fixes included in PR:
- DatePicker component restyled to look as before (wider and higher input boxes)
- Increased spacing under Search input field on Databases page
- Fixed AlertMessage component styles
- Regarding wrapping all Antd components in Cluster UI, I assumed it might be better to wrap top level <App> component in Db Console (since it also relies on updated version of
Antdpackage) cc @laurenbarker
Alert Message:
DatePicker
Search component on Databases page
Statement Diagnostics modal:
Updated the way Antd theme is applied. It turns out that instance of ConfigProvide from antd package that installed within Db Console doesn't apply to components exported from Cluster UI so we need export and apply theme with ContextProvider from Cluster UI as well. See commit: 5e63b622c3f692eb755c750cfbb4c0d798ed4d10
Example of DatePicker component proper border-radius size that defined with crlTheme:
bors r+