Upgrade antd to version 4

[MichaelBuessemeyer]

Upgrade UI library antd to version 4, creating a slightly more modern look and behavior of many UI elements and reducing technical debt.

URL of deployed dev instance (used for testing):

• https://upgradeantd.webknossos.xyz

Steps to test:

• see comment below, Upgrade antd to version 4 #5350 (comment)

Issues:

• fixes Update antd to v4.x #4678
• fixes Text gets selected when adjusting histogram sliders #5165 🎉

---

• Updated (unreleased) changelog
• Ready for review

[philippotto]

Yes, that was me :)
Which browser do you use? With Chrome and Firefox it looks like this on Linux:

Seems alright to me. How does it look for you?

Here it looks very good, but in the td view controls the Button to load isosurfaces is slightly lower than the others. Maybe that's not really bad, but I can't unsee it. (I'm on Linux with Firefox)
With Spaces:

With the group:

Probably the Tooltip around the last button messes the alignment slightly up.

Should be fixed now :)

[philippotto]

The icon that is used for expanding / collapsing is still broken for me (Firefox, Linux)

Hmm, did you test the newest version? The dev instance is probably not up to date. If there are still issues, let's have a call to talk about this.

What exactly do you mean by broken? The behavior is fine for me now. However, the icon itself looks weird. There is a fancy animation combining the bars of the plus sign to the minus sign, but this comes at a cost. On non-hidpi-screen the horizontal line of the plus is completely swallowed at 100% zoom.

When I zoom in a lot it reappears, but does not look very nice still

(Firefox Windows)
This looked much nicer in the old antd version In Chrome (Windows) it seems to work ok.

The actual button works for me, too. Regarding the rendering: it's not optimal, but shouldn't be blocking for this PR imo.

[MichaelBuessemeyer]

The icon that is used for expanding / collapsing is still broken for me (Firefox, Linux)

Hmm, did you test the newest version? The dev instance is probably not up to date. If there are still issues, let's have a call to talk about this.

What exactly do you mean by broken? The behavior is fine for me now. However, the icon itself looks weird. There is a fancy animation combining the bars of the plus sign to the minus sign, but this comes at a cost. On non-hidpi-screen the horizontal line of the plus is completely swallowed at 100% zoom.

When I zoom in a lot it reappears, but does not look very nice still

(Firefox Windows)
This looked much nicer in the old antd version thinking In Chrome (Windows) it seems to work ok.

Thx @fm3, that is exactly my problem. I can confirm that in firefox the issue is resolved by zooming and that chrome looks fine.
Maybe this is quite the firefox bug as the zoom causes it to render correctly :/

The actual button works for me, too. Regarding the rendering: it's not optimal, but shouldn't be blocking for this PR imo.

I agree to that 👍

[philippotto]

The icon that is used for expanding / collapsing is still broken for me (Firefox, Linux)

Hmm, did you test the newest version? The dev instance is probably not up to date. If there are still issues, let's have a call to talk about this.

What exactly do you mean by broken? The behavior is fine for me now. However, the icon itself looks weird. There is a fancy animation combining the bars of the plus sign to the minus sign, but this comes at a cost. On non-hidpi-screen the horizontal line of the plus is completely swallowed at 100% zoom.

When I zoom in a lot it reappears, but does not look very nice still

(Firefox Windows)
This looked much nicer in the old antd version thinking In Chrome (Windows) it seems to work ok.

Thx @fm3, that is exactly my problem. I can confirm that in firefox the issue is resolved by zooming and that chrome looks fine.
Maybe this is quite the firefox bug as the zoom causes it to render correctly :/

The actual button works for me, too. Regarding the rendering: it's not optimal, but shouldn't be blocking for this PR imo.

I agree to that

I just found the issue in the antd repo. The issue description contains a workaround: ant-design/ant-design#29303 (comment)
Could you give that a try (simply add the CSS code to the antd overwrite less module)?

[MichaelBuessemeyer]

I just found the issue in the antd repo. The issue description contains a workaround: ant-design/ant-design#29303 (comment)
Could you give that a try (simply add the CSS code to the antd overwrite less module)?

I am working on it, but it doesn't look like the correct solution :/

[fm3]

• changing user activation filter in user table leads to crash (»TypeError: this.state.activationFilter is null«)
  I changed the selection here (unchecked both, and clicked ok)
  

[MichaelBuessemeyer]

I just found the issue in the antd repo. The issue description contains a workaround: ant-design/ant-design#29303 (comment)
Could you give that a try (simply add the CSS code to the antd overwrite less module)?

I am working on it, but it doesn't look like the correct solution :/

I just pushed a fix that changes the CSS of the button so that it behaves exactly as in antd v3. Therefore the bug is not present anymore but the "fancy" spinning animation on toggle is gone. I think the animation is not necessary and the current solution perfectly centers the buttons content.

[MichaelBuessemeyer]

* [ ]  changing user activation filter in user table leads to crash (»TypeError: this.state.activationFilter is null«)
  I changed the selection here (unchecked both, and clicked ok)
  ![image](https://user-images.githubusercontent.com/1390035/113841318-dedcda80-9791-11eb-8bb4-458515ba8d49.png)

@fm3 Could you please check whether my newest commit fixes this bug?

The interface of the this kind of filters slightly changed. In antd version 3 an empty selection / reset meant an empty array and in the current version this is instead null. I simply catch this potential error with an ternary / if-else and set it manually to an empty array.

[fm3]

@MichaelBuessemeyer Works for me now :)

[philippotto]

🚀