Refactor deprecated antd Dropdown menus

CHANGELOG.unreleased.md

@@ -23,6 +23,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where merging multiple volume annotations would result in inconsistent segment lists. [#6882](https://github.com/scalableminds/webknossos/pull/6882)
 - Fixed a bug where uploading multiple annotations with volume layers at once would fail. [#6882](https://github.com/scalableminds/webknossos/pull/6882)
 - Fixed a bug where dates were formatted incorrectly in Voxelytics reports. [#6908](https://github.com/scalableminds/webknossos/pull/6908)
+- Fix antd deprecation warning for Dropdown menus. [#6898](https://github.com/scalableminds/webknossos/pull/6898)
 
 ### Removed
 

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>

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"

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>

frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx

@@ -16,7 +16,7 @@ import { clearCache, getDataset } from "admin/admin_rest_api";
 import Toast from "libs/toast";
 import messages from "messages";
 import CreateExplorativeModal from "dashboard/advanced_dataset/create_explorative_modal";
-import { Menu, Modal } from "antd";
+import { MenuProps, Modal } from "antd";
 const disabledStyle: React.CSSProperties = {
   pointerEvents: "none",
   color: "var(--ant-disabled)",
@@ -246,75 +246,70 @@ export function getDatasetActionContextMenu({
   reloadDataset: (arg0: APIDatasetId) => Promise<void>;
   datasets: APIDatasetCompact[];
   hideContextMenu: () => void;
-}) {
+}): MenuProps {
   if (datasets.length !== 1) {
-    return (
-      <Menu
-        onClick={hideContextMenu}
-        style={{
-          borderRadius: 6,
-        }}
-        mode="vertical"
-      >
-        <Menu.Item key="view" disabled>
-          No actions available.
-        </Menu.Item>
-      </Menu>
-    );
+    return {
+      onClick: hideContextMenu,
+      style: {
+        borderRadius: 6,
+      },
+      mode: "vertical",
+      items: [
+        {
+          key: "view",
+          disabled: true,
+          label: "No actions available.",
+        },
+      ],
+    };
   }
   const dataset = datasets[0];
 
-  return (
-    <Menu
-      onClick={hideContextMenu}
-      style={{
-        borderRadius: 6,
-      }}
-      mode="vertical"
-    >
-      {dataset.isActive && (
-        <Menu.Item
-          key="view"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/view`;
-          }}
-        >
-          View
-        </Menu.Item>
-      )}
-      {dataset.isEditable && dataset.isActive ? (
-        <Menu.Item
-          key="edit"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/edit`;
-          }}
-        >
-          Open Settings
-        </Menu.Item>
-      ) : null}
-
-      {dataset.isEditable && !dataset.isActive ? (
-        <Menu.Item
-          key="import"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/import`;
-          }}
-        >
-          Import
-        </Menu.Item>
-      ) : null}
+  return {
+    onClick: hideContextMenu,
+    style: {
+      borderRadius: 6,
+    },
+    mode: "vertical",
+    items: [
+      dataset.isActive
+        ? {
+            key: "view",
+            label: "View",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/view`;
+            },
+          }
+        : null,
+      dataset.isEditable && dataset.isActive
+        ? {
+            key: "edit",
+            label: "Open Settings",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/edit`;
+            },
+          }
+        : null,
 
-      <Menu.Item
-        key="reload"
-        onClick={async () => {
+      dataset.isEditable && !dataset.isActive
+        ? {
+            key: "import",
+            label: "Import",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/import`;
+            },
+          }
+        : null,
+      {
+        key: "reload",
+        label: "Reload",
+        onClick: async () => {
           const fullDataset = await getDataset(dataset);
           return dataset.isActive ? onClearCache(fullDataset, reloadDataset) : null;
-        }}
-      >
-        Reload
-      </Menu.Item>
-    </Menu>
-  );
+        },
+      },
+    ],
+  };
 }
 
 export default withRouter<RouteComponentProps & Props, any>(DatasetActionView);