cockroach icon indicating copy to clipboard operation
cockroach copied to clipboard

ui: upgrade antd to v5 in db-console

Open koorosh opened this issue 1 year ago • 6 comments
trafficstars

  • update antd version to match the version as in CC Console.
  • rc-drawer is added as a peer dependency to make Typescript properly infer types.
  • remove all antd style imports from the code. Antd@5 uses 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

koorosh avatar May 14 '24 08:05 koorosh

This change is Reviewable

cockroach-teamcity avatar May 14 '24 08:05 cockroach-teamcity

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.

laurenbarker avatar May 14 '24 16:05 laurenbarker

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?

innabs avatar May 14 '24 17:05 innabs

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.

koorosh avatar May 14 '24 17:05 koorosh

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.

blathers-crl[bot] avatar Jun 17 '24 08:06 blathers-crl[bot]

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.

blathers-crl[bot] avatar Jun 17 '24 13:06 blathers-crl[bot]

Thank you! Let's go over the pages I called out during our 1-1 tomorrow.

laurenbarker avatar Jun 17 '24 19:06 laurenbarker

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 Antd package) cc @laurenbarker

Alert Message: Screenshot 2024-06-20 at 11 37 28

DatePicker Screenshot 2024-06-20 at 16 47 04

Search component on Databases page Screenshot 2024-06-20 at 16 56 54

Statement Diagnostics modal: Screenshot 2024-06-20 at 19 19 20

koorosh avatar Jun 20 '24 16:06 koorosh

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: Screenshot 2024-06-21 at 13 29 51

koorosh avatar Jun 21 '24 12:06 koorosh

bors r+

koorosh avatar Jun 24 '24 08:06 koorosh