[WIP] Upgrade antd to 4.24.8 #1261

mszabo-wikia · 2023-03-12T22:49:01Z

Which problem is this PR solving?

Contributes towards Help needed with upgrading dependencies #1199

Short description of the changes

Initial upgrade work for the antd v4 migration.

Notable changes:

AntD v4 uses individual icon imports rather than a generic Icon component with a string type. This way, it doesn't have to include the full SVG sprite, only the used icons, reducing the gzipped bundle size by ~110 kB. The migration is done mostly automatically by @ant-design/codemod-v4 except for some dynamic icon usages that were updated by hand in 4b79a68.
AntD v4 requires a newer version of React typings, which also required an explicit Yarn resolution to avoid pulling in other versions of the typings.
React refs for AntD Input components need a typing update.
The NumberInput component now guarantees to return number | null, so some custom type-checking code related to that can be removed.
Typings changed around the Table component around row selection and sorting logic, requiring appropriate updates. In particular, sorting by multiple sortable columns now reports all columns that are active in sorting, so event handling code must also accept an array.
The trace search form needs a workaround to function with redux-form, as AntD Forms no longer expose an onSubmit event that this library could hook into. For now, this is done by attaching the submit callback directly to the submit button instead as a click handler (which, somehow, still catches Enter keypresses on the search form).

Known issues

There are some visual regressions that will need styling fixes.
Tests need updating.

mszabo-wikia · 2023-03-12T22:54:58Z

Looking at redux-form, this library does not actually seem very useful. Redux itself recommends not to put form state in the Redux store, which the author of this library also seems to have come to agree with. Out of all forms in the project using this library, only the trace search form sets destroyOnUnmount: false to actually persist the form data even after the form itself is unmounted, and even there the form state can be reconstructed from URL parameters, which the mapping logic already does. Nothing else seems to be operating on the raw form data other than the respective form components, either.

It could be potentially worth it (as a separate project) to just remove this.

yurishkuro · 2023-03-13T01:52:12Z

@mszabo-wikia does redux-form need to be tackled in this PR or incidentally related? I opened another issue #1260 for Redux upgrade, it probably makes sense to tackle all Redux-related changed there (assuming they can be decoupled)

yurishkuro

I would prefer to go through all visual changes to make sure they are still sensible for Jaeger UI. Although, just the icon changes seem fine to accept on code review, if that's the extent.

yurishkuro · 2023-03-13T01:54:46Z

.gitignore

@@ -13,11 +13,14 @@ coverage
 .nyc_output
 junit.xml

+# IDE-related files and directories


Some people insist that these should be handled via the user's local workspace settings, e.g. adding

[core] excludesfile = /Users/{your home}/.gitignore_global

to ~/.gitconfig and then defining global ignore rules.

But I personally do not mind these being in .gitignore since they prevent them from being checked in accidentally (although I'm likely biased because vscode and idea are very common, if this was more exotic IDE then ...).

Oh, I didn't know about the global option, that makes sense. I'll probably rebase away this commit since I only added it in the first place to be able to run the codemod, which wouldn't start with uncommitted files present.

yurishkuro · 2023-03-13T02:02:15Z

packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx

    return (
-      <Form layout="vertical" onSubmit={handleSubmit}>


When the handler was previously on the form itself, what did it mean? Could one submit the form by hitting Enter from any field?

Pretty much. Surprisingly though, that still works for me locally even with the handler moved to the submit button.

yurishkuro · 2023-03-13T02:06:43Z

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.tsx

@@ -174,7 +174,7 @@ export default class TraceSpanView extends Component<Props, State> {
    return (
      <div>
        <h3 className="title--TraceSpanView"> Trace Tabular View</h3>
-        <Row type="flex" style={{ marginTop: '8px' }}>


what did type="flex" do? Seems important.

The prop was removed and it seems it's no longer needed. In v3, it was used to control whether to set display: flex on the row but in v4 this seems to be unconditional.

mszabo-wikia · 2023-03-13T20:51:46Z

I think redux-form need not be changed in this PR—the submit button event handler seems like a reasonable workaround for now, and the other forms don't seem to be using handleSubmit in this problematic way.

For the visual regressions, the main issue I noticed so far is a header size bug due to some Menu component updates; this should be fixable with some CSS. The icons should be the same as their design shouldn't have changed as far as I see, only the way they are referenced.

Signed-off-by: Máté Szabó <mszabo@fandom.com>

mszabo-wikia · 2023-08-24T17:20:22Z

Closing this as there is great work ongoing in #1636 and followups.

mszabo-wikia force-pushed the antd-upgrade branch from 4251a12 to 92779ce Compare March 12, 2023 22:50

yurishkuro reviewed Mar 13, 2023

View reviewed changes

mszabo-wikia force-pushed the antd-upgrade branch from 9aeb82b to cb2f2b3 Compare March 14, 2023 19:02

mszabo-wikia mentioned this pull request Mar 15, 2023

Workaround antd v3 error in the production build #1276

Merged

mszabo-wikia added 11 commits March 29, 2023 20:00

Bump antd to 4.24.8

8817e96

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Add dependency on @ant-design/icons

5457b5c

Run @ant-design/codemod-v4 on the project

7c3d0ca

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Update React typings to a compatible version

8a0393f

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Migrate legacy icon usages to v4 explicit imports

9489823

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Manually migrate remaining components

1013f09

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Workaround for redux-form incompatibility

a9e3e3b

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Fix TopNav display

a904524

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Run Prettier

3af3302

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Make Monitor tab zero-state properly centered again

dc6210a

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Fix line-height for KeyboardShortcutsHelper icon

d322157

Signed-off-by: Máté Szabó <mszabo@fandom.com>

mszabo-wikia force-pushed the antd-upgrade branch from cb2f2b3 to 11059f0 Compare March 29, 2023 18:54

mszabo-wikia added 4 commits March 29, 2023 20:55

Update lockfile

6db2439

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Update old icon references in tests

320477c

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Regenerate snapshots

2e3a9e0

Signed-off-by: Máté Szabó <mszabo@fandom.com>

Provide a matchMedia() stub and regenerate snapshots

f2b8f25

Signed-off-by: Máté Szabó <mszabo@fandom.com>

mszabo-wikia force-pushed the antd-upgrade branch from 11059f0 to f2b8f25 Compare March 29, 2023 18:56

yurishkuro mentioned this pull request May 4, 2023

[Deps]: Upgrade redux-actions to 3.x #1260

Open

yurishkuro mentioned this pull request Jul 10, 2023

Upgrade React version - LFX Mentorship #998

Closed

mszabo-wikia mentioned this pull request Aug 18, 2023

Bump antd from 3.26.20 to 4.24.13 #1667

Closed

4 tasks

yurishkuro mentioned this pull request Aug 20, 2023

Upgrade Antd #1703

Closed

mszabo-wikia closed this Aug 24, 2023

anshgoyalevil mentioned this pull request Aug 25, 2023

Upgrade antd to 4.24.13 #1734

Closed

4 tasks

hari45678 mentioned this pull request Jan 5, 2025

Update dependency react-redux to v9 - autoclosed #2542

Closed

1 task

yurishkuro mentioned this pull request Jan 5, 2025

[Deps] Remove dependency on redux-form #2556

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Upgrade antd to 4.24.8 #1261

[WIP] Upgrade antd to 4.24.8 #1261

mszabo-wikia commented Mar 12, 2023

mszabo-wikia commented Mar 12, 2023 •

edited

Loading

yurishkuro commented Mar 13, 2023

yurishkuro left a comment

yurishkuro Mar 13, 2023

mszabo-wikia Mar 13, 2023

yurishkuro Mar 13, 2023

mszabo-wikia Mar 13, 2023

yurishkuro Mar 13, 2023

mszabo-wikia Mar 13, 2023

mszabo-wikia commented Mar 13, 2023

mszabo-wikia commented Aug 24, 2023

[WIP] Upgrade antd to 4.24.8 #1261

[WIP] Upgrade antd to 4.24.8 #1261

Conversation

mszabo-wikia commented Mar 12, 2023

Which problem is this PR solving?

Short description of the changes

Known issues

mszabo-wikia commented Mar 12, 2023 • edited Loading

yurishkuro commented Mar 13, 2023

yurishkuro left a comment

Choose a reason for hiding this comment

yurishkuro Mar 13, 2023

Choose a reason for hiding this comment

mszabo-wikia Mar 13, 2023

Choose a reason for hiding this comment

yurishkuro Mar 13, 2023

Choose a reason for hiding this comment

mszabo-wikia Mar 13, 2023

Choose a reason for hiding this comment

yurishkuro Mar 13, 2023

Choose a reason for hiding this comment

mszabo-wikia Mar 13, 2023

Choose a reason for hiding this comment

mszabo-wikia commented Mar 13, 2023

mszabo-wikia commented Aug 24, 2023

mszabo-wikia commented Mar 12, 2023 •

edited

Loading