Upgrade Antd to v4.24 (#6865)

* 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
scalableminds · Mar 3, 2023 · e1cb5b8 · e1cb5b8
1 parent 6b8f122
commit e1cb5b8
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 105 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added support for remote Zarr datasets with a `datasource-properties.json` as created by the WEBKNOSSOS Python library. [#6879](https://github.com/scalableminds/webknossos/pull/6879)
 
 ### Changed
+- Upgraded antd UI library to v4.24.8 [#6865](https://github.com/scalableminds/webknossos/pull/6865)
 
 ### Fixed
 - Fixed a bug where N5 datasets reading with end-chunks that have a chunk size differing from the metadata-supplied chunk size would fail for some areas. [#6890](https://github.com/scalableminds/webknossos/pull/6890)

diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/frontend/javascripts/dashboard/dataset_view.tsx
@@ -49,8 +49,6 @@ import {
 import { PricingEnforcedButton } from "components/pricing_enforcers";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 
-const { Group: InputGroup } = Input;
-
 type Props = {
   user: APIUser;
   context: DatasetCollectionContextValue;
@@ -181,22 +179,20 @@ function DatasetView(props: Props) {
     </Radio>
   );
 
-  const filterMenu = (
-    <Menu
-      onClick={() => {}}
-      items={[
-        { label: createFilteringModeRadio("showAllDatasets", "Show all datasets"), key: "all" },
-        {
-          label: createFilteringModeRadio("onlyShowReported", "Only show available datasets"),
-          key: "available",
-        },
-        {
-          label: createFilteringModeRadio("onlyShowUnreported", "Only show missing datasets"),
-          key: "missing",
-        },
-      ]}
-    />
-  );
+  const filterMenu = {
+    items: [
+      { label: createFilteringModeRadio("showAllDatasets", "Show all datasets"), key: "all" },
+      {
+        label: createFilteringModeRadio("onlyShowReported", "Only show available datasets"),
+        key: "available",
+      },
+      {
+        label: createFilteringModeRadio("onlyShowUnreported", "Only show missing datasets"),
+        key: "missing",
+      },
+    ],
+  };
+
   const searchBox = (
     <Input
       prefix={<SearchOutlined />}
@@ -214,16 +210,17 @@ function DatasetView(props: Props) {
   const isUserAdminOrDatasetManagerOrTeamManager =
     isUserAdminOrDatasetManager || Utils.isUserTeamManager(user);
   const search = isUserAdminOrDatasetManager ? (
-    <InputGroup compact>
+    <Input.Group compact style={{ display: "flex" }}>
       {searchBox}
-      <Dropdown overlay={filterMenu} trigger={["click"]}>
+
+      <Dropdown menu={filterMenu} trigger={["click"]}>
         <Button>
           <Badge dot={datasetFilteringMode !== "showAllDatasets"}>
             <SettingOutlined />
           </Badge>
         </Button>
       </Dropdown>
-    </InputGroup>
+    </Input.Group>
   ) : (
     searchBox
   );

diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx
@@ -546,13 +546,12 @@ function LoggedInAvatar({
       theme="dark"
       subMenuCloseDelay={subMenuCloseDelay}
       triggerSubMenuAction="click"
+      className="right-navbar"
       items={[
         {
           key: "loggedMenu",
           label: <UserInitials activeUser={activeUser} isMultiMember={isMultiMember} />,
-          style: {
-            padding: 0,
-          },
+          style: { padding: 0 },
           children: [
             {
               key: "userName",

diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
@@ -154,7 +154,8 @@ label.ant-checkbox-wrapper {
   border-bottom: none;
 }
 
-.collapsed-nav-header {
+.collapsed-nav-header .ant-menu:not(.right-navbar) {
+
   .ant-menu-item,
   .ant-menu-submenu-title,
   li.ant-menu-submenu {

diff --git a/package.json b/package.json
@@ -149,7 +149,7 @@
     "@types/three": "^0.142.0",
     "@use-it/interval": "^1.0.0",
     "ansi-to-react": "^6.1.6",
-    "antd": "^4.23.6",
+    "antd": "^4.24.8",
     "backbone-events-standalone": "^0.2.7",
     "ball-morphology": "^0.1.0",
     "base64-js": "^1.2.1",