Refactor deprecated antd Dropdown menus (#6898)

* fix navbar Menu deprecatation warning (WIP) * restored more navbar items (WIP) * more navbar fixes * refactor FolderTree menu * remove data-group-id attributes * updated changelog * makes changes compatible with antd v4.23.x * fix linter * applied PR feedback * more PR feedback * upgrade antd to v4.24.8 * updated changelog * apply PR feedback * upgrade antd to v 4.28.x * refactor all occurances of <Dropdown menu> * changed more dropdown menus (WIP) * more menu conversions (WIP) * more menu crazyiness (WIP) * upgrade antd to v 4.28.x * restored context menu (WIP) * restore layout menu * updated changelog * restore context menu position styling * fix typechecking * applied PR feedback * fix menu crash in dashboard * reactivated mapping warnings * fix rules of hooks error in context menu * applied PR feedback
scalableminds · Mar 23, 2023 · 8c79390 · 8c79390
1 parent aa5218b
commit 8c79390
Show file tree

Hide file tree

Showing 23 changed files with 1,490 additions and 1,495 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -26,7 +26,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed support for rendering of negative floats. [#6895](https://github.com/scalableminds/webknossos/pull/6895)
 - Fixed caching issues with webworkers. [#6932](https://github.com/scalableminds/webknossos/pull/6932)
 - Fixed download button for annotations which was disabled in some cases. [#6931](https://github.com/scalableminds/webknossos/pull/6931)
-
+- Fixed antd deprecation warning for Dropdown menus. [#6898](https://github.com/scalableminds/webknossos/pull/6898)
 ### Removed
 
 ### Breaking Changes
diff --git a/frontend/javascripts/admin/task/task_annotation_view.tsx b/frontend/javascripts/admin/task/task_annotation_view.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, Menu, Modal } from "antd";
+import { Dropdown, MenuProps, Modal } from "antd";
 import {
   EyeOutlined,
   PlayCircleOutlined,
@@ -30,7 +30,6 @@ import Toast from "libs/toast";
 import TransferTaskModal from "dashboard/transfer_task_modal";
 import messages from "messages";
 import { getVolumeDescriptors } from "oxalis/model/accessors/volumetracing_accessor";
-const { Item } = Menu;
 const { confirm } = Modal;
 type OwnProps = {
   task: APITask;
@@ -101,7 +100,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
     }));
   };
 
-  getDropdownMenu(annotation: APIAnnotation) {
+  getDropdownMenu(annotation: APIAnnotation): MenuProps {
     let doesAnnotationNotBelongToActiveUser = true;
 
     if (annotation.owner && this.props.activeUser) {
@@ -120,57 +119,64 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
           Open
         </React.Fragment>
       );
-    return (
-      <Menu>
-        <Item key={`${annotation.id}-view`}>
-          <a href={`/annotations/Task/${annotation.id}`}>{label}</a>
-        </Item>
-
-        <Item
-          key={`${annotation.id}-transfer`}
-          onClick={() =>
+    return {
+      items: [
+        {
+          key: `${annotation.id}-view`,
+          label: <a href={`/annotations/Task/${annotation.id}`}>{label}</a>,
+        },
+        {
+          key: `${annotation.id}-transfer`,
+          onClick: () =>
             this.setState({
               currentAnnotation: annotation,
               isTransferModalOpen: true,
-            })
-          }
-        >
-          <TeamOutlined />
-          Transfer
-        </Item>
-        <Item key={`${annotation.id}-download`}>
-          <AsyncLink
-            href="#"
-            onClick={() => {
-              const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0;
-              return downloadAnnotation(annotation.id, "Task", isVolumeIncluded);
-            }}
-            icon={<DownloadOutlined />}
-          >
-            Download
-          </AsyncLink>
-        </Item>
-        <Item key={`${annotation.id}-reset`} onClick={() => this.resetAnnotation(annotation)}>
-          <RollbackOutlined />
-          Reset
-        </Item>
-        <Item key={`${annotation.id}-delete`} onClick={() => this.deleteAnnotation(annotation)}>
-          <DeleteOutlined />
-          Reset and Cancel
-        </Item>
-        {annotation.state === "Finished" ? (
-          <Item key={`${annotation.id}-reopen`} onClick={() => this.reOpenAnnotation(annotation)}>
-            <FolderOpenOutlined />
-            Reopen
-          </Item>
-        ) : (
-          <Item key={`${annotation.id}-finish`} onClick={() => this.finishAnnotation(annotation)}>
-            <CheckCircleOutlined />
-            Finish
-          </Item>
-        )}
-      </Menu>
-    );
+            }),
+          icon: <TeamOutlined />,
+          label: "Transfer",
+        },
+        {
+          key: `${annotation.id}-download`,
+          label: (
+            <AsyncLink
+              href="#"
+              onClick={() => {
+                const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0;
+                return downloadAnnotation(annotation.id, "Task", isVolumeIncluded);
+              }}
+              icon={<DownloadOutlined />}
+            >
+              Download
+            </AsyncLink>
+          ),
+        },
+        {
+          key: `${annotation.id}-reset`,
+          onClick: () => this.resetAnnotation(annotation),
+          icon: <RollbackOutlined />,
+          label: "Reset",
+        },
+        {
+          key: `${annotation.id}-delete`,
+          onClick: () => this.deleteAnnotation(annotation),
+          icon: <DeleteOutlined />,
+          label: "Reset and Cancel",
+        },
+        annotation.state === "Finished"
+          ? {
+              key: `${annotation.id}-reopen`,
+              onClick: () => this.reOpenAnnotation(annotation),
+              icon: <FolderOpenOutlined />,
+              label: "Reopen",
+            }
+          : {
+              key: `${annotation.id}-finish`,
+              onClick: () => this.finishAnnotation(annotation),
+              icon: <CheckCircleOutlined />,
+              label: "Finish",
+            },
+      ],
+    };
   }
 
   render() {
@@ -206,7 +212,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
                     </span>
                   </td>
                   <td className="nowrap">
-                    <Dropdown overlay={this.getDropdownMenu(annotation)} trigger={["click"]}>
+                    <Dropdown menu={this.getDropdownMenu(annotation)} trigger={["click"]}>
                       <a className="ant-dropdown-link" href="#">
                         Actions <DownOutlined />
                       </a>

diff --git a/frontend/javascripts/admin/task/task_search_form.tsx b/frontend/javascripts/admin/task/task_search_form.tsx
@@ -1,4 +1,4 @@
-import { Form, Row, Dropdown, Menu, Col, Button, Input, Select } from "antd";
+import { Form, Row, Dropdown, Col, Button, Input, Select } from "antd";
 import { FormInstance } from "antd/lib/form";
 import { DownloadOutlined, DownOutlined, RetweetOutlined } from "@ant-design/icons";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@sca... Remove this comment to see the full error message
@@ -276,14 +276,16 @@ class TaskSearchForm extends React.Component<Props, State> {
             }}
           >
             <Dropdown
-              overlay={
-                <Menu onClick={() => this.handleSearchFormFinish(true)}>
-                  <Menu.Item key="1">
-                    <RetweetOutlined />
-                    Show random subset
-                  </Menu.Item>
-                </Menu>
-              }
+              menu={{
+                onClick: () => this.handleSearchFormFinish(true),
+                items: [
+                  {
+                    key: "1",
+                    icon: <RetweetOutlined />,
+                    label: "Show random subset",
+                  },
+                ],
+              }}
             >
               <Button
                 type="primary"

diff --git a/frontend/javascripts/admin/voxelytics/task_list_view.tsx b/frontend/javascripts/admin/voxelytics/task_list_view.tsx
@@ -4,14 +4,14 @@ import {
   Input,
   Row,
   Col,
-  Menu,
   Button,
   Dropdown,
   notification,
   message,
   Tag,
   Tooltip,
   Select,
+  MenuProps,
 } from "antd";
 import {
   ClockCircleOutlined,
@@ -406,28 +406,26 @@ export default function TaskListView({
 
   const colorHasher = new ColorHash({ lightness: [0.35, 0.5, 0.65] });
 
-  const overflowMenu = (
-    <Menu>
-      <Menu.Item key="1" onClick={copyAllArtifactPaths}>
-        Copy All Artifact Paths
-      </Menu.Item>
-      <Menu.Item key="2" onClick={downloadReportJSON}>
-        Download Report as JSON
-      </Menu.Item>
-      <Menu.Item key="3" onClick={downloadWorkflowYAML}>
-        Download Workflow YAML
-      </Menu.Item>
-      <Menu.Item key="4" onClick={downloadLog} disabled={singleRunId == null}>
-        {singleRunId == null ? (
-          <Tooltip title="Please select a specific run for log download.">
-            <div>Download Log</div>
-          </Tooltip>
-        ) : (
-          "Download Log"
-        )}
-      </Menu.Item>
-    </Menu>
-  );
+  const overflowMenu: MenuProps = {
+    items: [
+      { key: "1", onClick: copyAllArtifactPaths, label: "Copy All Artifact Paths" },
+      { key: "2", onClick: downloadReportJSON, label: "Download Report as JSON" },
+      { key: "3", onClick: downloadWorkflowYAML, label: "Download Workflow YAML" },
+      {
+        key: "4",
+        onClick: downloadLog,
+        disabled: singleRunId == null,
+        label:
+          singleRunId == null ? (
+            <Tooltip title="Please select a specific run for log download.">
+              <div>Download Log</div>
+            </Tooltip>
+          ) : (
+            "Download Log"
+          ),
+      },
+    ],
+  };
 
   const renderTaskGroupOrTask = (taskGroup: VoxelyticsTaskConfigWithHierarchy) => {
     const taskInfo = aggregateTaskInfos(taskGroup, report.tasks, runId);
@@ -631,7 +629,7 @@ export default function TaskListView({
               </Select.Option>
             ))}
           </Select>
-          <Dropdown.Button overlay={overflowMenu} onClick={() => setExpandedTasks([])}>
+          <Dropdown.Button menu={overflowMenu} onClick={() => setExpandedTasks([])}>
             Collapse All
           </Dropdown.Button>
         </div>