From 8c79390e5d1534562601934a985567db1b0ee8e8 Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Thu, 23 Mar 2023 14:36:36 +0100 Subject: [PATCH] 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 * 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 --- CHANGELOG.unreleased.md | 2 +- .../admin/task/task_annotation_view.tsx | 110 +- .../admin/task/task_search_form.tsx | 20 +- .../admin/voxelytics/task_list_view.tsx | 46 +- .../advanced_dataset/dataset_action_view.tsx | 121 +- .../advanced_dataset/dataset_table.tsx | 9 +- .../javascripts/dashboard/dataset_view.tsx | 10 +- .../dashboard/folders/folder_tree.tsx | 92 +- .../view/action-bar/private_links_view.tsx | 94 +- .../share_view_dataset_modal_view.tsx | 2 +- .../oxalis/view/action-bar/toolbar_view.tsx | 43 +- .../view/action-bar/tracing_actions_view.tsx | 285 ++--- .../action-bar/view_dataset_actions_view.tsx | 59 +- .../oxalis/view/action_bar_view.tsx | 33 +- .../javascripts/oxalis/view/context_menu.tsx | 1122 +++++++++-------- .../comment_tab/comment_tab_view.tsx | 40 +- .../connectome_tab/synapse_tree.tsx | 31 +- .../dataset_info_tab_view.tsx | 49 +- .../segments_tab/segment_list_item.tsx | 177 ++- .../segments_tab/segments_view_helper.tsx | 140 +- .../right-border-tabs/skeleton_tab_view.tsx | 93 +- .../right-border-tabs/tree_hierarchy_view.tsx | 254 ++-- .../oxalis/view/td_view_controls.tsx | 153 ++- 23 files changed, 1490 insertions(+), 1495 deletions(-) diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index c43f6c0857..914c946bd3 100644 --- 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 index d600640e56..2ff8b4ca53 100644 --- 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 { })); }; - 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 { Open ); - return ( - - - {label} - - - + return { + items: [ + { + key: `${annotation.id}-view`, + label: {label}, + }, + { + key: `${annotation.id}-transfer`, + onClick: () => this.setState({ currentAnnotation: annotation, isTransferModalOpen: true, - }) - } - > - - Transfer - - - { - const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0; - return downloadAnnotation(annotation.id, "Task", isVolumeIncluded); - }} - icon={} - > - Download - - - this.resetAnnotation(annotation)}> - - Reset - - this.deleteAnnotation(annotation)}> - - Reset and Cancel - - {annotation.state === "Finished" ? ( - this.reOpenAnnotation(annotation)}> - - Reopen - - ) : ( - this.finishAnnotation(annotation)}> - - Finish - - )} - - ); + }), + icon: , + label: "Transfer", + }, + { + key: `${annotation.id}-download`, + label: ( + { + const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0; + return downloadAnnotation(annotation.id, "Task", isVolumeIncluded); + }} + icon={} + > + Download + + ), + }, + { + key: `${annotation.id}-reset`, + onClick: () => this.resetAnnotation(annotation), + icon: , + label: "Reset", + }, + { + key: `${annotation.id}-delete`, + onClick: () => this.deleteAnnotation(annotation), + icon: , + label: "Reset and Cancel", + }, + annotation.state === "Finished" + ? { + key: `${annotation.id}-reopen`, + onClick: () => this.reOpenAnnotation(annotation), + icon: , + label: "Reopen", + } + : { + key: `${annotation.id}-finish`, + onClick: () => this.finishAnnotation(annotation), + icon: , + label: "Finish", + }, + ], + }; } render() { @@ -206,7 +212,7 @@ class TaskAnnotationView extends React.PureComponent { - + Actions diff --git a/frontend/javascripts/admin/task/task_search_form.tsx b/frontend/javascripts/admin/task/task_search_form.tsx index 25d0a19201..4a99977d5f 100644 --- 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 { }} > this.handleSearchFormFinish(true)}> - - - Show random subset - - - } + menu={{ + onClick: () => this.handleSearchFormFinish(true), + items: [ + { + key: "1", + icon: , + label: "Show random subset", + }, + ], + }} > - +