Refactor several modals to functional components (#8748)

In this PR I converted several class components to functional components
using modern React hooks
- `TransferTaskModal`
- `NewTaskDescriptionModal`
- `RecommendedConfigurationModal`
- `TreeRemovalModal`
-  `AddNewLayoutModal`
- `UserScriptsModalView`


### Steps to test:
- Check that the modals are still showing
- The changes are lightweight enough to not do deep test

### Issues:
- Contributes to #8747

------
(Please delete unneeded items, merge only when none are left open)
- [ ] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/dashboard/transfer_task_modal.tsx

@@ -2,7 +2,8 @@ import { transferTask } from "admin/api/tasks";
 import UserSelectionComponent from "admin/user/user_selection_component";
 import { Button, Modal } from "antd";
 import { handleGenericError } from "libs/error_handling";
-import * as React from "react";
+import type React from "react";
+import { memo, useCallback, useState } from "react";
 import type { APIAnnotation } from "types/api_types";
 
 type Props = {
@@ -11,67 +12,53 @@ type Props = {
   onCancel: (...args: Array<any>) => any;
   isOpen: boolean;
 };
-type State = {
-  currentUserIdValue: string;
-};
 
-class TransferTaskModal extends React.PureComponent<Props, State> {
-  state: State = {
-    currentUserIdValue: "",
-  };
+const TransferTaskModal: React.FC<Props> = ({ isOpen, onCancel, annotationId, onChange }) => {
+  const [currentUserIdValue, setCurrentUserIdValue] = useState("");
 
-  async transfer() {
-    const annotationId = this.props.annotationId;
+  const handleSelectChange = useCallback((userId: string) => {
+    setCurrentUserIdValue(userId);
+  }, []);
 
+  const transfer = useCallback(async () => {
     if (!annotationId) {
       throw new Error("No annotation id provided");
     }
 
     try {
-      const updatedAnnotation = await transferTask(annotationId, this.state.currentUserIdValue);
-      this.props.onChange(updatedAnnotation);
+      const updatedAnnotation = await transferTask(annotationId, currentUserIdValue);
+      onChange(updatedAnnotation);
+      setCurrentUserIdValue("");
     } catch (error) {
       handleGenericError(error as Error);
     }
-  }
+  }, [annotationId, currentUserIdValue, onChange]);
 
-  handleSelectChange = (userId: string) => {
-    this.setState({
-      currentUserIdValue: userId,
-    });
-  };
-
-  render() {
-    if (!this.props.isOpen) {
-      return null;
-    }
+  if (!isOpen) {
+    return null;
+  }
 
-    return (
-      <Modal
-        title="Transfer a Task"
-        open={this.props.isOpen}
-        onCancel={this.props.onCancel}
-        footer={
-          <div>
-            <Button
-              type="primary"
-              onClick={() => this.transfer()}
-              disabled={this.state.currentUserIdValue === ""}
-            >
-              Transfer
-            </Button>
-            <Button onClick={() => this.props.onCancel()}>Close</Button>
-          </div>
-        }
-      >
-        <div className="control-group">
-          <div className="form-group">
-            <UserSelectionComponent handleSelection={this.handleSelectChange} />
-          </div>
+  return (
+    <Modal
+      title="Transfer a Task"
+      open={isOpen}
+      onCancel={onCancel}
+      footer={() => (
+        <>
+          <Button type="primary" onClick={transfer} disabled={currentUserIdValue === ""}>
+            Transfer
+          </Button>
+          <Button onClick={onCancel}>Close</Button>
+        </>
+      )}
+    >
+      <div className="control-group">
+        <div className="form-group">
+          <UserSelectionComponent handleSelection={handleSelectChange} />
         </div>
-      </Modal>
-    );
-  }
-}
+      </div>
+    </Modal>
+  );
+};
 
-export default TransferTaskModal;
+export default memo(TransferTaskModal);

frontend/javascripts/viewer/view/action-bar/add_new_layout_modal.tsx

@@ -1,49 +1,36 @@
 import { Input, Modal } from "antd";
-import * as React from "react";
+import type React from "react";
+import { memo, useCallback, useState } from "react";
 
 type Props = {
   addLayout: (arg0: string) => void;
   isOpen: boolean;
   onCancel: () => void;
 };
-type State = {
-  value: string;
-};
 
-class AddNewLayoutModal extends React.PureComponent<Props, State> {
-  state: State = {
-    value: "",
-  };
-  onConfirm = () => {
-    const value = this.state.value;
-    this.setState({
-      value: "",
-    });
-    this.props.addLayout(value);
-  };
+const AddNewLayoutModal: React.FC<Props> = ({ addLayout, isOpen, onCancel }) => {
+  const [value, setValue] = useState("");
+
+  const onConfirm = useCallback(() => {
+    addLayout(value);
+    setValue("");
+  }, [addLayout, value]);
 
-  render() {
-    return (
-      <Modal
-        title="Add a new layout"
-        open={this.props.isOpen}
-        onOk={this.onConfirm}
-        onCancel={this.props.onCancel}
-      >
-        <Input
-          placeholder="Layout Name"
-          value={this.state.value}
-          onChange={(evt) => {
-            this.setState({
-              value: evt.target.value,
-            });
-          }}
-          autoFocus
-          onPressEnter={this.onConfirm}
-        />
-      </Modal>
-    );
-  }
-}
+  const handleChange = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(evt.target.value);
+  }, []);
+
+  return (
+    <Modal title="Add a new layout" open={isOpen} onOk={onConfirm} onCancel={onCancel}>
+      <Input
+        placeholder="Layout Name"
+        value={value}
+        onChange={handleChange}
+        autoFocus
+        onPressEnter={onConfirm}
+      />
+    </Modal>
+  );
+};
 
-export default AddNewLayoutModal;
+export default memo(AddNewLayoutModal);