Upgrade Antd to version 5

CHANGELOG.unreleased.md

@@ -20,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Datasets stored in WKW format are no longer loaded with memory mapping, reducing memory demands. [#7528](https://github.com/scalableminds/webknossos/pull/7528)
 - WEBKNOSSOS now uses Java 21. [#7599](https://github.com/scalableminds/webknossos/pull/7599)
 
+
 ### Fixed
 - 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)
 - 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
 ### Removed
 
 ### Breaking Changes
+- 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

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

Dockerfile

@@ -1,5 +1,5 @@
 FROM eclipse-temurin:21
-ARG VERSION_NODE="16.x"
+ARG VERSION_NODE="18.x"
 
 RUN curl -sL "https://deb.nodesource.com/setup_${VERSION_NODE}" | bash - \
   && apt-get -y install libblosc1 libbrotli1 postgresql-client git nodejs \

Dockerfile.dev

@@ -1,5 +1,5 @@
 FROM scalableminds/sbt:master__7785473656
-ARG VERSION_NODE="16.x"
+ARG VERSION_NODE="18.x"
 
 ENV DEBIAN_FRONTEND noninteractive
 ENV SBT_OPTS "${SBT_OPTS} -XX:MaxMetaspaceSize=512m -Xms1024m -Xmx1024m"

MIGRATIONS.unreleased.md

@@ -13,6 +13,7 @@ archived if they do not contain relevant data. The following SQL query can be us
 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)
 ```
 - WEBKNOSSOS now uses Java 21 (up from Java 11). [#7599](https://github.com/scalableminds/webknossos/pull/7599)
+- NodeJS version 18+ is required for snapshot tests with ShadowDOM elements from Antd v5. [#7522](https://github.com/scalableminds/webknossos/pull/7522)
 
 ### Postgres Evolutions:
 

app/views/main.scala.html

@@ -35,7 +35,12 @@
       media="screen"
       href="/assets/bundle/vendors~main.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
-    <script src="/assets/bundle/theme.js?nocache=@(webknossos.BuildInfo.commitHash)"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="screen"
+      href="/assets/bundle/main.css?nocache=@(webknossos.BuildInfo.commitHash)"
+    />
     <script
       data-airbrake-project-id="@(conf.Airbrake.projectID)"
       data-airbrake-project-key="@(conf.Airbrake.projectKey)"

frontend/javascripts/admin/auth/auth_token_view.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { CopyOutlined, SwapOutlined } from "@ant-design/icons";
-import { Input, Button, Col, Row, Spin, Form } from "antd";
+import { Input, Button, Col, Row, Spin, Form, Space } from "antd";
 import { getAuthToken, revokeAuthToken } from "admin/admin_rest_api";
 import type { OxalisState } from "oxalis/store";
 import Toast from "libs/toast";
@@ -59,19 +59,16 @@ function AuthTokenView() {
             <h3>Auth Token</h3>
             <Form form={form}>
               <FormItem>
-                <Input.Group compact>
+                <Space.Compact>
                   <Input
                     value={currentToken}
                     style={{
                       width: "90%",
                     }}
                     readOnly
                   />
-                  <Button
-                    onClick={copyTokenToClipboard}
-                    icon={<CopyOutlined className="without-icon-margin" />}
-                  />
-                </Input.Group>
+                  <Button onClick={copyTokenToClipboard} icon={<CopyOutlined />} />
+                </Space.Compact>
               </FormItem>
               <FormItem>
                 <Button icon={<SwapOutlined />} onClick={handleRevokeToken}>
@@ -84,19 +81,16 @@ function AuthTokenView() {
                 <h4>Organization ID</h4>
                 <Form>
                   <FormItem>
-                    <Input.Group compact>
+                    <Space.Compact>
                       <Input
                         value={activeUser.organization}
                         style={{
                           width: "90%",
                         }}
                         readOnly
                       />
-                      <Button
-                        onClick={copyOrganizationNameToClipboard}
-                        icon={<CopyOutlined className="without-icon-margin" />}
-                      />
-                    </Input.Group>
+                      <Button onClick={copyOrganizationNameToClipboard} icon={<CopyOutlined />} />
+                    </Space.Compact>
                   </FormItem>
                 </Form>
               </>

frontend/javascripts/admin/auth/finish_reset_password_view.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { Form, Input, Button, Col, Row } from "antd";
+import { Form, Input, Button, Col, Row, Card } from "antd";
 import { LockOutlined } from "@ant-design/icons";
 import Request from "libs/request";
 import messages from "messages";
@@ -49,79 +49,81 @@ function FinishResetPasswordView(props: Props) {
 
   return (
     <Row className="login-view" justify="center" align="middle">
-      <Col className="login-content">
-        <h3>Reset Password</h3>
-        <Form onFinish={onFinish} form={form}>
-          <FormItem
-            hasFeedback
-            name={["password", "password1"]}
-            rules={[
-              {
-                required: true,
-                message: messages["auth.reset_new_password"],
-              },
-              {
-                min: 8,
-                message: messages["auth.registration_password_length"],
-              },
-              {
-                validator: (_, value: string) =>
-                  checkPasswordsAreMatching(value, ["password", "password2"]),
-              },
-            ]}
-          >
-            <Password
-              prefix={
-                <LockOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="New Password"
-            />
-          </FormItem>
-          <FormItem
-            hasFeedback
-            name={["password", "password2"]}
-            rules={[
-              {
-                required: true,
-                message: messages["auth.reset_new_password2"],
-              },
-              {
-                min: 8,
-                message: messages["auth.registration_password_length"],
-              },
-              {
-                validator: (_, value: string) =>
-                  checkPasswordsAreMatching(value, ["password", "password1"]),
-              },
-            ]}
-          >
-            <Password
-              prefix={
-                <LockOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="Confirm New Password"
-            />
-          </FormItem>
-          <FormItem>
-            <Button
-              type="primary"
-              htmlType="submit"
-              style={{
-                width: "100%",
-              }}
+      <Col>
+        <Card className="login-content">
+          <h3>Reset Password</h3>
+          <Form onFinish={onFinish} form={form}>
+            <FormItem
+              hasFeedback
+              name={["password", "password1"]}
+              rules={[
+                {
+                  required: true,
+                  message: messages["auth.reset_new_password"],
+                },
+                {
+                  min: 8,
+                  message: messages["auth.registration_password_length"],
+                },
+                {
+                  validator: (_, value: string) =>
+                    checkPasswordsAreMatching(value, ["password", "password2"]),
+                },
+              ]}
             >
-              Reset Password
-            </Button>
-          </FormItem>
-        </Form>
+              <Password
+                prefix={
+                  <LockOutlined
+                    style={{
+                      fontSize: 13,
+                    }}
+                  />
+                }
+                placeholder="New Password"
+              />
+            </FormItem>
+            <FormItem
+              hasFeedback
+              name={["password", "password2"]}
+              rules={[
+                {
+                  required: true,
+                  message: messages["auth.reset_new_password2"],
+                },
+                {
+                  min: 8,
+                  message: messages["auth.registration_password_length"],
+                },
+                {
+                  validator: (_, value: string) =>
+                    checkPasswordsAreMatching(value, ["password", "password1"]),
+                },
+              ]}
+            >
+              <Password
+                prefix={
+                  <LockOutlined
+                    style={{
+                      fontSize: 13,
+                    }}
+                  />
+                }
+                placeholder="Confirm New Password"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{
+                  width: "100%",
+                }}
+              >
+                Reset Password
+              </Button>
+            </FormItem>
+          </Form>
+        </Card>
       </Col>
     </Row>
   );

frontend/javascripts/admin/auth/login_view.tsx

@@ -1,4 +1,4 @@
-import { Col, Row } from "antd";
+import { Card, Col, Row } from "antd";
 import type { RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import React from "react";
@@ -29,9 +29,11 @@ function LoginView({ history, redirect }: Props) {
 
   return (
     <Row justify="center" align="middle" className="login-view">
-      <Col className="login-content">
-        <h3>Login</h3>
-        <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
+      <Col>
+        <Card className="login-content">
+          <h3>Login</h3>
+          <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
+        </Card>
       </Col>
     </Row>
   );

frontend/javascripts/admin/auth/registration_view.tsx

@@ -82,10 +82,12 @@ function RegistrationViewGeneric() {
   return (
     <Spin spinning={isLoading}>
       <Row justify="center" align="middle" className="login-view">
-        <Col className="login-content drawing-signup" style={{ width: 1000 }}>
-          <h3>Sign Up</h3>
-          {content}
-          <Link to="/auth/login">Already have an account? Login instead.</Link>
+        <Col>
+          <Card className="login-content drawing-signup" style={{ width: 1000 }}>
+            <h3>Sign Up</h3>
+            {content}
+            <Link to="/auth/login">Already have an account? Login instead.</Link>
+          </Card>
         </Col>
       </Row>
     </Spin>

frontend/javascripts/admin/auth/start_reset_password_view.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { Form, Input, Button, Col, Row } from "antd";
+import { Form, Input, Button, Col, Row, Card } from "antd";
 import { MailOutlined } from "@ant-design/icons";
 import Request from "libs/request";
 import messages from "messages";
@@ -24,42 +24,44 @@ function StartResetPasswordView({ history }: Props) {
 
   return (
     <Row className="login-view" justify="center" align="middle">
-      <Col className="login-content">
-        <h3>Reset Password</h3>
-        <Form onFinish={onFinish} form={form}>
-          <FormItem
-            name="email"
-            rules={[
-              {
-                required: true,
-                type: "email",
-                message: messages["auth.registration_email_input"],
-              },
-            ]}
-          >
-            <Input
-              prefix={
-                <MailOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="Email"
-            />
-          </FormItem>
-          <FormItem>
-            <Button
-              type="primary"
-              htmlType="submit"
-              style={{
-                width: "100%",
-              }}
+      <Col>
+        <Card className="login-content">
+          <h3>Reset Password</h3>
+          <Form onFinish={onFinish} form={form}>
+            <FormItem
+              name="email"
+              rules={[
+                {
+                  required: true,
+                  type: "email",
+                  message: messages["auth.registration_email_input"],
+                },
+              ]}
             >
-              Send Reset Email
-            </Button>
-          </FormItem>
-        </Form>
+              <Input
+                prefix={
+                  <MailOutlined
+                    style={{
+                      fontSize: 13,
+                    }}
+                  />
+                }
+                placeholder="Email"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{
+                  width: "100%",
+                }}
+              >
+                Send Reset Email
+              </Button>
+            </FormItem>
+          </Form>
+        </Card>
       </Col>
     </Row>
   );