Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: upgrade antd package to v5 in cluster-ui #123973

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

ui: upgrade antd package to v5 in cluster-ui #123973

wants to merge 7 commits into from

Conversation

koorosh
Copy link
Collaborator

@koorosh koorosh commented May 10, 2024 •
edited

This change upgrades antd package (in cluster-ui) up to 5.x version to match
the version in CC Console and make it easier to extract components.
It is preferable to review those changes per commit:

  • first commit introduces changes in build files (package.json, webpack, etc)
  • next commit contains changes produced by command:
    pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src
  • final commit resolves braking changes after antd version upgrade.

Note, those changes doesn't fix broken styles of components and it affects
how some components look in Db Console.

Resolves: https://cockroachlabs.atlassian.net/browse/CC-28016

  • mirror NPM dependencies with dev ui mirror-deps

Below, there's comparison of some visual changes (broken styles) that caused by this
change. On the right side is UI after these changes.

Screenshot 2024-05-13 at 13 23 04

Screenshot 2024-05-13 at 13 21 00

Screenshot 2024-05-13 at 13 14 05

Screenshot 2024-05-13 at 13 13 05

Screenshot 2024-05-13 at 13 11 42

Screenshot 2024-05-13 at 13 08 30

@koorosh koorosh requested a review from a team as a code owner May 10, 2024 20:48
@koorosh koorosh requested review from abarganier and removed request for a team May 10, 2024 20:48
@blathers-crl blathers[crl]
Copy link

blathers-crl bot commented May 10, 2024

Your pull request contains more than 1000 changes. It is strongly encouraged to split big PRs into smaller chunks.

Thank you for contributing to CockroachDB. Please ensure you have followed the guidelines for creating a PR.

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.

🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.

@blathers-crl blathers-crl bot added the O-community Originated from the community label May 10, 2024
@cockroach-teamcity
Copy link
Member

This change is Reviewable

@koorosh koorosh requested a review from laurenbarker May 10, 2024 20:48
@koorosh koorosh mentioned this pull request May 14, 2024
Open
@blathers-crl blathers[crl]
Copy link

blathers-crl bot commented May 14, 2024

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.

🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.

@innabs
Copy link

innabs commented May 14, 2024

UX concerns:

  • SQL activity page, time range selector and search placeholder text
  • Databases page, search input active state
  • Metrics page time selector dropdown alignment in the input + back/forward buttons

@koorosh
ui: upgrade antd to 5.x version in cluster-ui
2d66dd7 
- upgrade and version to 5.6.1 in package.json. It is the same
version of antd that's used in CC Console.
- remove babel configs related to antd (deprecated)
- remove overridden antd global styles
- all of these changes are done according to migration
instruction https://ant.design/docs/react/migration-v5

Release note: None
@koorosh
ui: automatic fixes for antd migration 4.x -> 5.x in cluster-ui
a97e1df 
Those changes produced by command:
`pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src`
which applies automatic fixes during Antd version upgrade to 5v.

Release note: None
@koorosh
ui: resolve conflicts in components that depend on Antd package in cl…
30eb18d 
…uster-ui

This change resolves issues that couldn't be fixed automatically during
`antd` version upgrade and require changes to resolve breaking changes.
Following components were mostly affected:
- `<Icon/>`
- `<DatePicker/>`
- `<Select/>`
In addition, proper types were provided due to resolve compilation errors.
@koorosh
ui: add antd theme to cluster-ui package
3f0e054 
This change adds a copy of antd theme from CC Console
to rely on the same styles. It will help to adjust
components to the same styles as in CC Console during
extraction components.

Release note: None
@koorosh
ui: fix styles of DateRangeMenu component
372869e 
- default button type with borders was overridden by global styles so
former were removed;
- time and date selectors size is set to 'large' to keep the same size of
component as before;

Release note: None
@blathers-crl blathers[crl]
Copy link

blathers-crl bot commented May 21, 2024

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.

🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.

@koorosh
ui: fix Search component styling after antd version upgrade
7cf2989 
This change adjusts styling of <Search /> component after
antd version upgrade that affected styles.
- cleaned up some style that override `antd` styles as they
don't make any sense;
- removed `<Form />` component as a wrapper that was responsible to
handle event when user presses Enter button. Now it is possible to
handle within `<Input />` component.

Release note: None
@koorosh
ui: re-work Modal and Diagnostics modal
6f964b0 
ActivateStatementDiagnosticsModal component is based on pure
Antd components and has been dramatically affected after
upgrade of Antd version to 5.x.
The main issue that new components are based on flexbox styles
and it caused many changes in layout and how components
structured.
So this change introduced following changes:
- avoid using `<div>` elements for structuring layout, instead
use <Space> and <Grid> components.
- Remove unused styles and rely on antdTheme instead as much as
possible. There is some styles defined which cannot be defined with
theme.

Release note: None
@blathers-crl blathers[crl]
Copy link

blathers-crl bot commented May 21, 2024

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.

🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abarganier abarganier Awaiting requested review from abarganier abarganier is a code owner automatically assigned from cockroachdb/obs-prs

@laurenbarker laurenbarker Awaiting requested review from laurenbarker

Assignees
No one assigned
Labels
O-community Originated from the community
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@koorosh @cockroach-teamcity @innabs