Upgrade antd to version 4

.eslintrc.json

@@ -35,6 +35,7 @@
   "rules": {
     "array-callback-return": "warn",
     "class-methods-use-this": "off",
+    "no-constant-condition": "error",
     "eslint-comments/disable-enable-pair": ["error", { "allowWholeFile": true }],
     "eslint-comments/no-unused-disable": "error",
     "flowtype/no-types-missing-file-annotation": "off",

CHANGELOG.unreleased.md

@@ -11,7 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 [Commits](https://github.com/scalableminds/webknossos/compare/21.04.0...HEAD)
 
 ### Added
--
+- Upgraded UI library antd to version 4, creating a slightly more modern look and behavior of many UI elements. [#5350](https://github.com/scalableminds/webknossos/pull/5350)
 
 ### Changed
 - webKnossos is now part of the [image.sc support community](https://forum.image.sc/tag/webknossos). [#5332](https://github.com/scalableminds/webknossos/pull/5332)

flow-typed/npm/antd_vx.x.x.js

@@ -42,9 +42,7 @@ declare module "antd" {
   }
   declare class FormItem<P> extends React$Component<P> {}
   declare export class Form<P> extends React$Component<P> {
-    static create: (
-      options?: Object,
-    ) => (React$ComponentType<P>) => React$ComponentType<$Diff<P, { form: any }>>;
+    static useForm: () => [Object];
     static Item: typeof FormItem;
   }
   declare class LayoutContent<P> extends React$Component<P> {}
@@ -124,6 +122,7 @@ declare module "antd" {
     static TreeNode: typeof TreeTreeNode;
   }
   declare export class Tooltip<P> extends React$Component<P> {}
+  declare export class Space<P> extends React$Component<P> {}
   declare class StepsStep<P> extends React$Component<P> {}
   declare export class Steps<P> extends React$Component<P> {
     static Step: typeof StepsStep;

frontend/javascripts/admin/auth/accept_invite_view.js

@@ -1,6 +1,7 @@
 // @flow
 
-import { Button, Icon, Result, Layout, Spin } from "antd";
+import { Button, Result, Layout, Spin } from "antd";
+import { GiftTwoTone } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
 import { AsyncButton } from "components/async_clickables";
 import React, { useState } from "react";
@@ -103,7 +104,7 @@ export default function AcceptInviteView({
       />
       <Spin spinning={targetOrganization == null}>
         <Result
-          icon={<Icon type="gift" theme="twoTone" />}
+          icon={<GiftTwoTone />}
           title={
             <div>
               You have been invited to the organization &ldquo;{targetOrganizationName}&rdquo;!

frontend/javascripts/admin/auth/auth_token_view.js

@@ -1,88 +1,78 @@
 // @flow
-import React from "react";
-import { Form, Input, Button, Col, Row, Spin } from "antd";
+import React, { useState, useEffect } from "react";
+import { CopyOutlined, SwapOutlined } from "@ant-design/icons";
+import { Input, Button, Col, Row, Spin, Form } from "antd";
 import Clipboard from "clipboard-js";
 import { getAuthToken, revokeAuthToken } from "admin/admin_rest_api";
 import Toast from "libs/toast";
 
 const FormItem = Form.Item;
 
-type State = {
-  isLoading: boolean,
-  currentToken: string,
-};
+function AuthTokenView() {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [currentToken, setCurrentToken] = useState<string>("");
+  const [form] = Form.useForm();
 
-class AuthTokenView extends React.PureComponent<{}, State> {
-  state = {
-    isLoading: true,
-    currentToken: "",
-  };
-
-  componentDidMount() {
-    this.fetchData();
-  }
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-  async fetchData(): Promise<void> {
+  async function fetchData(): Promise<void> {
     const token = await getAuthToken();
-
-    this.setState({
-      isLoading: false,
-      currentToken: token,
-    });
+    setCurrentToken(token);
+    setIsLoading(false);
   }
 
-  handleRevokeToken = async (): Promise<void> => {
+  const handleRevokeToken = async (): Promise<void> => {
     try {
-      this.setState({ isLoading: true });
+      setIsLoading(true);
       await revokeAuthToken();
       const token = await getAuthToken();
-      this.setState({ currentToken: token });
+      setCurrentToken(token);
     } finally {
-      this.setState({ isLoading: false });
+      setIsLoading(false);
     }
   };
 
-  copyTokenToClipboard = async () => {
-    await Clipboard.copy(this.state.currentToken);
+  const copyTokenToClipboard = async () => {
+    await Clipboard.copy(currentToken);
     Toast.success("Token copied to clipboard");
   };
 
-  render() {
-    return (
-      <div>
-        <Row type="flex" justify="center" style={{ padding: 50 }} align="middle">
-          <Col span={8}>
-            <Spin size="large" spinning={this.state.isLoading}>
-              <h3>Auth Token</h3>
-              <Form>
-                <FormItem>
-                  <Input.Group compact>
-                    <Input value={this.state.currentToken} style={{ width: "90%" }} readOnly />
-                    <Button onClick={this.copyTokenToClipboard} icon="copy" />
-                  </Input.Group>
-                </FormItem>
-                <FormItem>
-                  <Button icon="swap" onClick={this.handleRevokeToken}>
-                    Revoke Token
-                  </Button>
-                </FormItem>
-              </Form>
-            </Spin>
-          </Col>
-        </Row>
-        <Row type="flex" justify="center" align="middle">
-          <Col span={8}>
-            An Auth Token is a series of symbols that serves to authenticate you. It is used in
-            communication with the backend API and sent with every request to verify your identity.
-            <br />
-            You should revoke it if somebody else has acquired your token or you have the suspicion
-            this has happened.{" "}
-            <a href="https://docs.webknossos.org/reference/rest_api#authentication">Read more</a>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Row type="flex" justify="center" style={{ padding: 50 }} align="middle">
+        <Col span={8}>
+          <Spin size="large" spinning={isLoading}>
+            <h3>Auth Token</h3>
+            <Form form={form}>
+              <FormItem>
+                <Input.Group compact>
+                  <Input value={currentToken} style={{ width: "90%" }} readOnly />
+                  <Button onClick={copyTokenToClipboard} icon={<CopyOutlined />} />
+                </Input.Group>
+              </FormItem>
+              <FormItem>
+                <Button icon={<SwapOutlined />} onClick={handleRevokeToken}>
+                  Revoke Token
+                </Button>
+              </FormItem>
+            </Form>
+          </Spin>
+        </Col>
+      </Row>
+      <Row type="flex" justify="center" align="middle">
+        <Col span={8}>
+          An Auth Token is a series of symbols that serves to authenticate you. It is used in
+          communication with the backend API and sent with every request to verify your identity.
+          <br />
+          You should revoke it if somebody else has acquired your token or you have the suspicion
+          this has happened.{" "}
+          <a href="https://docs.webknossos.org/reference/rest_api#authentication">Read more</a>
+        </Col>
+      </Row>
+    </div>
+  );
 }
 
 export default AuthTokenView;