Skip to content

Commit 457cbbf

Browse files
hotzenklotzphilippottonormanrz
authored
Upgrade Antd to version 5 (#7522)
* bump antd to version 4.24.15 * add version resolution for lib rc-tree for antd 4.24.15 update * prevent React event handler error * updated changelog * codemod autoconvert * fix deprecation warnings * add theme provider and enable css variables * convert less variables to CSS variables * fix Input.Group deprecations * restore navbar layout * styling fixes * fix type errors * additional small fixes * use antd 5 theme switching * move theme provider into separate file * wrap login, PW resets, sign up etc in <Card> to adapt to theming * adjust base color for dark mode * more CSS fixes * use a type import to prevent cyclic dependencies * use mocked window in theme.tsx when tests are executed * mock matchMedia in jsdom which we use for e2e tests * upgrade JSDOM to v 23.2.0 * update nodeJS to v18 in CI * Update Dockerfile.dev * use custom WK blue as primary color * restore WK blue/pruple as primary color * fix some margin errors * fix more CSS variables errors * restore Nunito font * more CSS fixes * replaced .antd-legacy CSS class with <Space.Compact> * set dark mode to regular black * fix several CSS variable names * fix theming for <Layout.Sider> * replace Less layout color with CSS variables * fix theme propagation on load * small style fixes * add margin to many icons * moar icon fixes * moar icon margins * remove ".without-icon-margin" class * fix viewport margin background colors * fix InputNumber bordered deprecation warnings * another dark mode fix * upgrade to antd v5.13.x * fix more stuff * fix yarn.lock and hundreds of TS errors * replace static Modal calls with useApp * updated changelog * fix tests * fix styling issues * Update frontend/stylesheets/_variables.less Co-authored-by: Philipp Otto <[email protected]> * color navbar darkish gray * fix icon spacing * renamed several wrong CSS variables names * move color picker icons to parent menu component * fix CSS sizing issues * set default antd blue color to WK blue/purple * rephrase paid upgrades * fix tree background color and dropdown menu icon * fix status bar toogle hints * PR feedback * rephrase paid upgrades * fix save button corner radius * fix colorpicker hiding instantly * remove unused CSS styles --------- Co-authored-by: Philipp Otto <[email protected]> Co-authored-by: Norman Rzepka <[email protected]> Co-authored-by: Philipp Otto <[email protected]>
1 parent d9cd527 commit 457cbbf

File tree

112 files changed

+1485
-1489
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1485
-1489
lines changed

‎CHANGELOG.unreleased.md

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
2020
- Datasets stored in WKW format are no longer loaded with memory mapping, reducing memory demands. [#7528](https://github.com/scalableminds/webknossos/pull/7528)
2121
- WEBKNOSSOS now uses Java 21. [#7599](https://github.com/scalableminds/webknossos/pull/7599)
2222

23+
2324
### Fixed
2425
- Fixed rare SIGBUS crashes of the datastore module that were caused by memory mapping on unstable file systems. [#7528](https://github.com/scalableminds/webknossos/pull/7528)
2526
- Fixed loading local datasets for organizations that have spaces in their names. [#7593](https://github.com/scalableminds/webknossos/pull/7593)
@@ -31,3 +32,4 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
3132
### Removed
3233

3334
### Breaking Changes
35+
- Updated antd UI library from version 4.24.15 to 5.13.2. Drop support for nodeJs version <18. [#7522](https://github.com/scalableminds/webknossos/pull/7522)

‎DEV_INSTALL.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ For non-localhost deployments, check out the [installation guide in the document
2626
* [Redis 5+](https://redis.io/)
2727
* [Blosc](https://github.com/Blosc/c-blosc)
2828
* [Brotli](https://github.com/google/brotli)
29-
* [node.js 16 or 18](http://nodejs.org/download/)
29+
* [node.js 18](http://nodejs.org/download/)
3030
* [yarn package manager](https://yarnpkg.com/)
3131
* [git](http://git-scm.com/downloads)
3232

‎Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
FROM eclipse-temurin:21
2-
ARG VERSION_NODE="16.x"
2+
ARG VERSION_NODE="18.x"
33

44
RUN curl -sL "https://deb.nodesource.com/setup_${VERSION_NODE}" | bash - \
55
&& apt-get -y install libblosc1 libbrotli1 postgresql-client git nodejs \

‎Dockerfile.dev

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
FROM scalableminds/sbt:master__7785473656
2-
ARG VERSION_NODE="16.x"
2+
ARG VERSION_NODE="18.x"
33

44
ENV DEBIAN_FRONTEND noninteractive
55
ENV SBT_OPTS "${SBT_OPTS} -XX:MaxMetaspaceSize=512m -Xms1024m -Xmx1024m"

‎MIGRATIONS.unreleased.md

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ archived if they do not contain relevant data. The following SQL query can be us
1313
UPDATE webknossos.annotations_ SET state = 'Finished' WHERE _id IN (SELECT DISTINCT a._id AS nd_annotations_id FROM webknossos.annotations_ AS a INNER JOIN webknossos.datasets AS d ON a._dataset = d._id INNER JOIN webknossos.dataset_layer_additionalaxes AS dla ON d._id = dla._dataset)
1414
```
1515
- WEBKNOSSOS now uses Java 21 (up from Java 11). [#7599](https://github.com/scalableminds/webknossos/pull/7599)
16+
- NodeJS version 18+ is required for snapshot tests with ShadowDOM elements from Antd v5. [#7522](https://github.com/scalableminds/webknossos/pull/7522)
1617

1718
### Postgres Evolutions:
1819

‎app/views/main.scala.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,12 @@
3535
media="screen"
3636
href="/assets/bundle/vendors~main.css?nocache=@(webknossos.BuildInfo.commitHash)"
3737
/>
38-
<script src="/assets/bundle/theme.js?nocache=@(webknossos.BuildInfo.commitHash)"></script>
38+
<link
39+
rel="stylesheet"
40+
type="text/css"
41+
media="screen"
42+
href="/assets/bundle/main.css?nocache=@(webknossos.BuildInfo.commitHash)"
43+
/>
3944
<script
4045
data-airbrake-project-id="@(conf.Airbrake.projectID)"
4146
data-airbrake-project-key="@(conf.Airbrake.projectKey)"

‎frontend/javascripts/admin/auth/auth_token_view.tsx

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { CopyOutlined, SwapOutlined } from "@ant-design/icons";
3-
import { Input, Button, Col, Row, Spin, Form } from "antd";
3+
import { Input, Button, Col, Row, Spin, Form, Space } from "antd";
44
import { getAuthToken, revokeAuthToken } from "admin/admin_rest_api";
55
import type { OxalisState } from "oxalis/store";
66
import Toast from "libs/toast";
@@ -59,19 +59,16 @@ function AuthTokenView() {
5959
<h3>Auth Token</h3>
6060
<Form form={form}>
6161
<FormItem>
62-
<Input.Group compact>
62+
<Space.Compact>
6363
<Input
6464
value={currentToken}
6565
style={{
6666
width: "90%",
6767
}}
6868
readOnly
6969
/>
70-
<Button
71-
onClick={copyTokenToClipboard}
72-
icon={<CopyOutlined className="without-icon-margin" />}
73-
/>
74-
</Input.Group>
70+
<Button onClick={copyTokenToClipboard} icon={<CopyOutlined />} />
71+
</Space.Compact>
7572
</FormItem>
7673
<FormItem>
7774
<Button icon={<SwapOutlined />} onClick={handleRevokeToken}>
@@ -84,19 +81,16 @@ function AuthTokenView() {
8481
<h4>Organization ID</h4>
8582
<Form>
8683
<FormItem>
87-
<Input.Group compact>
84+
<Space.Compact>
8885
<Input
8986
value={activeUser.organization}
9087
style={{
9188
width: "90%",
9289
}}
9390
readOnly
9491
/>
95-
<Button
96-
onClick={copyOrganizationNameToClipboard}
97-
icon={<CopyOutlined className="without-icon-margin" />}
98-
/>
99-
</Input.Group>
92+
<Button onClick={copyOrganizationNameToClipboard} icon={<CopyOutlined />} />
93+
</Space.Compact>
10094
</FormItem>
10195
</Form>
10296
</>

‎frontend/javascripts/admin/auth/finish_reset_password_view.tsx

+75-73
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { RouteComponentProps, withRouter } from "react-router-dom";
3-
import { Form, Input, Button, Col, Row } from "antd";
3+
import { Form, Input, Button, Col, Row, Card } from "antd";
44
import { LockOutlined } from "@ant-design/icons";
55
import Request from "libs/request";
66
import messages from "messages";
@@ -49,79 +49,81 @@ function FinishResetPasswordView(props: Props) {
4949

5050
return (
5151
<Row className="login-view" justify="center" align="middle">
52-
<Col className="login-content">
53-
<h3>Reset Password</h3>
54-
<Form onFinish={onFinish} form={form}>
55-
<FormItem
56-
hasFeedback
57-
name={["password", "password1"]}
58-
rules={[
59-
{
60-
required: true,
61-
message: messages["auth.reset_new_password"],
62-
},
63-
{
64-
min: 8,
65-
message: messages["auth.registration_password_length"],
66-
},
67-
{
68-
validator: (_, value: string) =>
69-
checkPasswordsAreMatching(value, ["password", "password2"]),
70-
},
71-
]}
72-
>
73-
<Password
74-
prefix={
75-
<LockOutlined
76-
style={{
77-
fontSize: 13,
78-
}}
79-
/>
80-
}
81-
placeholder="New Password"
82-
/>
83-
</FormItem>
84-
<FormItem
85-
hasFeedback
86-
name={["password", "password2"]}
87-
rules={[
88-
{
89-
required: true,
90-
message: messages["auth.reset_new_password2"],
91-
},
92-
{
93-
min: 8,
94-
message: messages["auth.registration_password_length"],
95-
},
96-
{
97-
validator: (_, value: string) =>
98-
checkPasswordsAreMatching(value, ["password", "password1"]),
99-
},
100-
]}
101-
>
102-
<Password
103-
prefix={
104-
<LockOutlined
105-
style={{
106-
fontSize: 13,
107-
}}
108-
/>
109-
}
110-
placeholder="Confirm New Password"
111-
/>
112-
</FormItem>
113-
<FormItem>
114-
<Button
115-
type="primary"
116-
htmlType="submit"
117-
style={{
118-
width: "100%",
119-
}}
52+
<Col>
53+
<Card className="login-content">
54+
<h3>Reset Password</h3>
55+
<Form onFinish={onFinish} form={form}>
56+
<FormItem
57+
hasFeedback
58+
name={["password", "password1"]}
59+
rules={[
60+
{
61+
required: true,
62+
message: messages["auth.reset_new_password"],
63+
},
64+
{
65+
min: 8,
66+
message: messages["auth.registration_password_length"],
67+
},
68+
{
69+
validator: (_, value: string) =>
70+
checkPasswordsAreMatching(value, ["password", "password2"]),
71+
},
72+
]}
12073
>
121-
Reset Password
122-
</Button>
123-
</FormItem>
124-
</Form>
74+
<Password
75+
prefix={
76+
<LockOutlined
77+
style={{
78+
fontSize: 13,
79+
}}
80+
/>
81+
}
82+
placeholder="New Password"
83+
/>
84+
</FormItem>
85+
<FormItem
86+
hasFeedback
87+
name={["password", "password2"]}
88+
rules={[
89+
{
90+
required: true,
91+
message: messages["auth.reset_new_password2"],
92+
},
93+
{
94+
min: 8,
95+
message: messages["auth.registration_password_length"],
96+
},
97+
{
98+
validator: (_, value: string) =>
99+
checkPasswordsAreMatching(value, ["password", "password1"]),
100+
},
101+
]}
102+
>
103+
<Password
104+
prefix={
105+
<LockOutlined
106+
style={{
107+
fontSize: 13,
108+
}}
109+
/>
110+
}
111+
placeholder="Confirm New Password"
112+
/>
113+
</FormItem>
114+
<FormItem>
115+
<Button
116+
type="primary"
117+
htmlType="submit"
118+
style={{
119+
width: "100%",
120+
}}
121+
>
122+
Reset Password
123+
</Button>
124+
</FormItem>
125+
</Form>
126+
</Card>
125127
</Col>
126128
</Row>
127129
);

‎frontend/javascripts/admin/auth/login_view.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Col, Row } from "antd";
1+
import { Card, Col, Row } from "antd";
22
import type { RouteComponentProps } from "react-router-dom";
33
import { withRouter } from "react-router-dom";
44
import React from "react";
@@ -29,9 +29,11 @@ function LoginView({ history, redirect }: Props) {
2929

3030
return (
3131
<Row justify="center" align="middle" className="login-view">
32-
<Col className="login-content">
33-
<h3>Login</h3>
34-
<LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
32+
<Col>
33+
<Card className="login-content">
34+
<h3>Login</h3>
35+
<LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
36+
</Card>
3537
</Col>
3638
</Row>
3739
);

‎frontend/javascripts/admin/auth/registration_view.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,12 @@ function RegistrationViewGeneric() {
8282
return (
8383
<Spin spinning={isLoading}>
8484
<Row justify="center" align="middle" className="login-view">
85-
<Col className="login-content drawing-signup" style={{ width: 1000 }}>
86-
<h3>Sign Up</h3>
87-
{content}
88-
<Link to="/auth/login">Already have an account? Login instead.</Link>
85+
<Col>
86+
<Card className="login-content drawing-signup" style={{ width: 1000 }}>
87+
<h3>Sign Up</h3>
88+
{content}
89+
<Link to="/auth/login">Already have an account? Login instead.</Link>
90+
</Card>
8991
</Col>
9092
</Row>
9193
</Spin>

‎frontend/javascripts/admin/auth/start_reset_password_view.tsx

+38-36
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { RouteComponentProps, withRouter } from "react-router-dom";
3-
import { Form, Input, Button, Col, Row } from "antd";
3+
import { Form, Input, Button, Col, Row, Card } from "antd";
44
import { MailOutlined } from "@ant-design/icons";
55
import Request from "libs/request";
66
import messages from "messages";
@@ -24,42 +24,44 @@ function StartResetPasswordView({ history }: Props) {
2424

2525
return (
2626
<Row className="login-view" justify="center" align="middle">
27-
<Col className="login-content">
28-
<h3>Reset Password</h3>
29-
<Form onFinish={onFinish} form={form}>
30-
<FormItem
31-
name="email"
32-
rules={[
33-
{
34-
required: true,
35-
type: "email",
36-
message: messages["auth.registration_email_input"],
37-
},
38-
]}
39-
>
40-
<Input
41-
prefix={
42-
<MailOutlined
43-
style={{
44-
fontSize: 13,
45-
}}
46-
/>
47-
}
48-
placeholder="Email"
49-
/>
50-
</FormItem>
51-
<FormItem>
52-
<Button
53-
type="primary"
54-
htmlType="submit"
55-
style={{
56-
width: "100%",
57-
}}
27+
<Col>
28+
<Card className="login-content">
29+
<h3>Reset Password</h3>
30+
<Form onFinish={onFinish} form={form}>
31+
<FormItem
32+
name="email"
33+
rules={[
34+
{
35+
required: true,
36+
type: "email",
37+
message: messages["auth.registration_email_input"],
38+
},
39+
]}
5840
>
59-
Send Reset Email
60-
</Button>
61-
</FormItem>
62-
</Form>
41+
<Input
42+
prefix={
43+
<MailOutlined
44+
style={{
45+
fontSize: 13,
46+
}}
47+
/>
48+
}
49+
placeholder="Email"
50+
/>
51+
</FormItem>
52+
<FormItem>
53+
<Button
54+
type="primary"
55+
htmlType="submit"
56+
style={{
57+
width: "100%",
58+
}}
59+
>
60+
Send Reset Email
61+
</Button>
62+
</FormItem>
63+
</Form>
64+
</Card>
6365
</Col>
6466
</Row>
6567
);

0 commit comments

Comments
 (0)