Update deprecated antd <Menu> (#6860)

* 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
scalableminds · Feb 22, 2023 · fa47f73 · fa47f73
1 parent 8ac842c
commit fa47f73
Show file tree

Hide file tree

Showing 5 changed files with 384 additions and 410 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -34,6 +34,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed basic auth for exploring remote http datasets. [#6866](https://github.com/scalableminds/webknossos/pull/6866)
 - Fixed the layouting in the connectome tab. [#6864](https://github.com/scalableminds/webknossos/pull/6864)
 - Fixed that the quick-select and floodfill tool didn't update the segment list. [#6867](https://github.com/scalableminds/webknossos/pull/6867)
+- Fixed deprecation warnings for antd' <Menu> component in Navbar. [#6860](https://github.com/scalableminds/webknossos/pull/6860)
 
 ### Removed
 - Removed the old Datasets tab in favor of the Dataset Folders tab. [#6834](https://github.com/scalableminds/webknossos/pull/6834)

diff --git a/frontend/javascripts/components/pricing_enforcers.tsx b/frontend/javascripts/components/pricing_enforcers.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { Menu, MenuItemProps, Alert, ButtonProps, Button, Result, Popover } from "antd";
+import { Alert, ButtonProps, Button, Result, Popover } from "antd";
 import { LockOutlined } from "@ant-design/icons";
 import {
   getFeatureNotAvailableInPlanMessage,
@@ -9,7 +9,6 @@ import {
 } from "admin/organization/pricing_plan_utils";
 import { isUserAllowedToRequestUpgrades } from "admin/organization/pricing_plan_utils";
 import { Link } from "react-router-dom";
-import type { MenuClickEventHandler } from "rc-menu/lib/interface";
 import type { OxalisState } from "oxalis/store";
 import { rgbToHex } from "libs/utils";
 import { PRIMARY_COLOR } from "oxalis/constants";
@@ -25,11 +24,6 @@ const handleMouseClick = (event: React.MouseEvent) => {
   event.stopPropagation();
 };
 
-const handleMenuClick: MenuClickEventHandler = (info) => {
-  info.domEvent.preventDefault();
-  info.domEvent.stopPropagation();
-};
-
 type RequiredPricingProps = { requiredPricingPlan: PricingPlanEnum };
 
 function getUpgradeNowButton(
@@ -48,14 +42,15 @@ function getUpgradeNowButton(
   ) : null;
 }
 
-export const PricingEnforcedMenuItem: React.FunctionComponent<
-  RequiredPricingProps & MenuItemProps
-> = ({ children, requiredPricingPlan, ...menuItemProps }) => {
+export const PricingEnforcedSpan: React.FunctionComponent<RequiredPricingProps> = ({
+  children,
+  requiredPricingPlan,
+}) => {
   const activeUser = useSelector((state: OxalisState) => state.activeUser);
   const activeOrganization = useSelector((state: OxalisState) => state.activeOrganization);
   const isFeatureAllowed = isFeatureAllowedByPricingPlan(activeOrganization, requiredPricingPlan);
 
-  if (isFeatureAllowed) return <Menu.Item {...menuItemProps}>{children}</Menu.Item>;
+  if (isFeatureAllowed) return <>{children}</>;
 
   return (
     <Popover
@@ -68,18 +63,18 @@ export const PricingEnforcedMenuItem: React.FunctionComponent<
       }
       placement="right"
       trigger="hover"
+      zIndex={1500}
     >
-      <Menu.Item
-        onClick={handleMenuClick}
+      <span
+        onClick={handleMouseClick}
         onAuxClick={handleMouseClick}
         onDoubleClick={handleMouseClick}
         onClickCapture={handleMouseClick}
-        className="ant-dropdown-menu-item-disabled"
-        {...menuItemProps}
+        className="ant-menu-title-content ant-menu-item-disabled"
       >
         {children}
         <LockOutlined style={{ marginLeft: 5 }} />
-      </Menu.Item>
+      </span>
     </Popover>
   );
 };

diff --git a/frontend/javascripts/dashboard/folders/folder_tree.tsx b/frontend/javascripts/dashboard/folders/folder_tree.tsx
@@ -15,7 +15,7 @@ import { Key } from "antd/lib/table/interface";
 import memoizeOne from "memoize-one";
 import classNames from "classnames";
 import { FolderItem } from "types/api_flow_types";
-import { PricingEnforcedMenuItem } from "components/pricing_enforcers";
+import { PricingEnforcedSpan } from "components/pricing_enforcers";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 
 const { DirectoryTree } = Tree;
@@ -144,11 +144,9 @@ export function FolderTreeSidebar({
   );
 
   const createMenu = () => (
-    <Menu>
-      <Menu.Item key="disabled" disabled>
-        Please right-click an existing folder.
-      </Menu.Item>
-    </Menu>
+    <Menu
+      items={[{ key: "disabled", disabled: true, label: "Please right-click an existing folder." }]}
+    />
   );
 
   return (
@@ -221,40 +219,41 @@ function generateTitle(
     setFolderIdForEditModal(id);
   }
 
-  const createMenu = () => (
-    <Menu>
-      <PricingEnforcedMenuItem
-        key="create"
-        data-group-id={id}
-        onClick={() => context.showCreateFolderPrompt(id)}
-        disabled={!folder.isEditable}
-        requiredPricingPlan={PricingPlanEnum.Team}
-      >
-        <PlusOutlined />
-        New Folder
-      </PricingEnforcedMenuItem>
-      <PricingEnforcedMenuItem
-        key="edit"
-        data-group-id={id}
-        onClick={editFolder}
-        disabled={!folder.isEditable}
-        requiredPricingPlan={PricingPlanEnum.Team}
-      >
-        <EditOutlined />
-        Edit Folder
-      </PricingEnforcedMenuItem>
-
-      <Menu.Item
-        key="delete"
-        data-group-id={id}
-        onClick={deleteFolder}
-        disabled={!folder.isEditable}
-      >
-        <DeleteOutlined />
-        Delete Folder
-      </Menu.Item>
-    </Menu>
-  );
+  const createMenu = () => {
+    const menuItems = [
+      {
+        key: "create",
+        disabled: !folder.isEditable,
+        onClick: () => context.showCreateFolderPrompt(id),
+        label: (
+          <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
+            <PlusOutlined />
+            New Folder
+          </PricingEnforcedSpan>
+        ),
+      },
+      {
+        key: "edit",
+        disabled: !folder.isEditable,
+        onClick: editFolder,
+        label: (
+          <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
+            <EditOutlined />
+            Edit Folder
+          </PricingEnforcedSpan>
+        ),
+      },
+      {
+        key: "delete",
+        onClick: deleteFolder,
+        disabled: !folder.isEditable,
+        icon: <DeleteOutlined />,
+        label: <span>Delete Folder</span>,
+      },
+    ];
+
+    return <Menu items={menuItems} />;
+  };
 
   return (
     <Dropdown