Upgrade antd to version 4 (#5350)

* update react and less * use antd auto upgrade script * update antd * Button.Group to Space * autosize to autoSize * use icon instead of iconType * start icon replacing * replace icons * fix rest of icons * first from migration * fix autocomplete and start select * fix linting * further select * finish select * button group to 0 sized space * tabs and button danger rewrites * upgrade onboarding * fix icon margin * forms in admin dataset folder * fix dataset_add_boss_view * dirty half fix * fix it * fix dataset upload view * login * project, scripts, statistics, time, job * fix dataset upload view * task_create_bulk_view form migration * fix onboarding & migrate auth token view * task_create_form_view form migration * task_search_form migration * dashboard/dataset, merger modal, fix import view * fix dataset import * task_type_create_view form migration, first part * migrate change password view and finish reset passwordview * improve password validation for 2 password form items * migrate registration form and splotlight registration form * task_type_create_view form migration, second part * migrate team creation form and fix flow errors * migrate start reset password view * migrate validation.js * fully migrate validation.js * fix project_create_view and remove usage of HOCs * never pass null to Select component in merge_modal_view * fix #5358 and remove volume switch * migrate custom validators * migrate organization-form * fix missing-key-warning * fix editable_text_icon * fix style of navbar links * fix tests * fix a validation method test * fix button styles in navbar/toolbar * fix various issues in dataset import view * fix styling of view-mode-switcher * fix warning in AsyncIconButton * fix up some remaining style issues in navbar * remove unused import * fix flow * fix constant expression and make linting rule throw an error for that case * fix wrong bg color in save button * reformat create script view * fix registration form * fix icon in layout menu * fix background color for read-only * small fixes, formatting and remove unneccessary code * make back-link also clickable in publication details view * fix rare scrollbar in navbar and don't use 'my' when using admin-view to see dashboard of other users * add margin to save-button in dataset-settings * fix neuroglancer import view * fix promises inside validators that were not returned * immediately update the no-allowed-teams warning in sharing settings of dataset * throw error in case of null ref * fix missing updates when collapsing expandable tables (the workaround wasn't needed anymore as far as I can see) * use componentDidUpdate instead of shouldComponentUpdate * fix wording in share-dataset-modal * fix missing key warning in explorative view * somewhat improve padding of tabs in version-view * fix styling of trees and groups in trees tab * fix organization edit view initialization of form, fix flow * fix onboarding and icon margin for withoutIconMargin class * fix exp domain modal alignment * remove autofocus from task create form * some refactoring * make text in permissions and team modal reappear * stop overlap in tree view list * fix dataset settings layer icons * fix styling of buttons in 3d viewport * remove unneccessary forceUpdate * fix margin in merge-modal-view * fix entry of new experience domain in experience-domain-modal * slightly refactor task type create view * use row expand icon style of version 3 of antd * add comment to css rule of old row expansion icon * changelog * add link to github issue * avoid activation filter being null Co-authored-by: Gritta Weisheit <[email protected]> Co-authored-by: Daniel Werner <[email protected]> Co-authored-by: Philipp Otto <[email protected]> Co-authored-by: Florian M <[email protected]>
scalableminds · Apr 7, 2021 · 61d3bee · 61d3bee
1 parent 5777d83
commit 61d3bee
Show file tree

Hide file tree

Showing 108 changed files with 3,715 additions and 3,741 deletions.
diff --git a/.eslintrc.json b/.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",

diff --git a/CHANGELOG.unreleased.md b/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)

diff --git a/flow-typed/npm/antd_vx.x.x.js b/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;

diff --git a/frontend/javascripts/admin/auth/accept_invite_view.js b/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;!

diff --git a/frontend/javascripts/admin/auth/auth_token_view.js b/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;