Update React to v17

CHANGELOG.unreleased.md

@@ -46,6 +46,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Upgraded ant icons to version 5.4. [#8007](https://github.com/scalableminds/webknossos/pull/8007)
 - Increased maximum depth for ai-based quick select from 5 to 16. [#8021](https://github.com/scalableminds/webknossos/pull/8021)
 - Zarr-streaming now uses the new unit-aware voxel size. This means that [wk-libs client v0.14.25 or newer](https://github.com/scalableminds/webknossos-libs/releases) is needed for dataset zarr streaming. [#8012](https://github.com/scalableminds/webknossos/pull/8012)
+- Updated React to version 17. [#7765](https://github.com/scalableminds/webknossos/pull/7765)
 
 ### Fixed
 - Fixed a bug that allowed the default newly created bounding box to appear outside the dataset. In case the whole bounding box would be outside it is created regardless. [#7892](https://github.com/scalableminds/webknossos/pull/7892)

frontend/javascripts/admin/statistic/time_tracking_overview.tsx

@@ -12,14 +12,14 @@ import ProjectAndAnnotationTypeDropdown, {
 import { isUserAdminOrTeamManager, transformToCSVRow } from "libs/utils";
 import messages from "messages";
 import Toast from "libs/toast";
-import dayjs, { Dayjs } from "antd/node_modules/dayjs";
 import TimeTrackingDetailView from "./time_tracking_detail_view";
 import LinkButton from "components/link_button";
 import FixedExpandableTable from "components/fixed_expandable_table";
 import * as Utils from "libs/utils";
 import { APITimeTrackingPerUser } from "types/api_flow_types";
 import { useSelector } from "react-redux";
 import { OxalisState } from "oxalis/store";
+import dayjs, { type Dayjs } from "dayjs";
 const { RangePicker } = DatePicker;
 
 const TIMETRACKING_CSV_HEADER_PER_USER = ["userId,userFirstName,userLastName,timeTrackedInSeconds"];
@@ -236,7 +236,7 @@ function TimeTrackingOverview() {
         style={filterStyle}
         value={[startDate, endDate]}
         presets={rangePresets}
-        onChange={(dates: null | (Dayjs | null)[]) => {
+        onChange={(dates: [Dayjs | null, Dayjs | null] | null) => {
           if (dates == null || dates[0] == null || dates[1] == null) return;
           if (Math.abs(dates[0].diff(dates[1], "days")) > 3 * 31) {
             Toast.error(messages["timetracking.date_range_too_long"]);

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -238,7 +238,8 @@ const DraggableDatasetRow = ({
 
   const datasetName = restProps["data-row-key"];
   const [, drag, preview] = useDrag({
-    item: { type: DraggableDatasetType, index, datasetName },
+    item: { index, datasetName },
+    type: DraggableDatasetType,
     canDrag: () => isADataset,
   });
   const [collectedProps, drop] = useDatasetDrop(rowKey, !isADataset);

frontend/javascripts/dashboard/dataset_view.tsx

@@ -45,7 +45,7 @@ import {
 import { PricingEnforcedButton } from "components/pricing_enforcers";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import { MenuProps } from "rc-menu";
-import { ItemType } from "antd/lib/menu/hooks/useItems";
+import { ItemType } from "antd/es/menu/interface";
 
 type Props = {
   user: APIUser;

frontend/javascripts/dashboard/folders/folder_tree.tsx

@@ -9,7 +9,6 @@ import {
 import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
 import { Dropdown, Modal, MenuProps, Tree } from "antd";
 import Toast from "libs/toast";
-import { DragObjectWithType } from "react-dnd";
 import { DataNode, DirectoryTreeProps } from "antd/lib/tree";
 import memoizeOne from "memoize-one";
 import classNames from "classnames";
@@ -296,17 +295,17 @@ export function useDatasetDrop(
   const context = useDatasetCollectionContext();
   const { selectedDatasets, setSelectedDatasets } = context;
   const [collectedProps, drop] = useDrop<
-    DragObjectWithType & {
+    Partial<{
       datasetName: string;
-    },
+    }>,
     void,
     {
       canDrop: boolean;
       isOver: boolean;
     }
   >({
     accept: DraggableDatasetType,
-    drop: (item: DragObjectWithType & { datasetName: string }) => {
+    drop: (item: Partial<{ datasetName: string }>) => {
       if (selectedDatasets.length > 1) {
         if (selectedDatasets.every((ds) => ds.folderId === folderId)) {
           Toast.warning(

frontend/javascripts/navbar.tsx

@@ -59,7 +59,7 @@ import { HelpModal } from "oxalis/view/help_modal";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import messages from "messages";
 import { PricingEnforcedSpan } from "components/pricing_enforcers";
-import { ItemType, MenuItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
+import { ItemType, MenuItemType, SubMenuType } from "antd/es/menu/interface";
 import { MenuClickEventHandler } from "rc-menu/lib/interface";
 import constants from "oxalis/constants";
 import { MaintenanceBanner, UpgradeVersionBanner } from "banners";

frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx

@@ -77,7 +77,7 @@ import Toast from "libs/toast";
 import UrlManager from "oxalis/controller/url_manager";
 import { withAuthentication } from "admin/auth/authentication_modal";
 import { PrivateLinksModal } from "./private_links_view";
-import { ItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
+import { ItemType, SubMenuType } from "antd/es/menu/interface";
 import CreateAnimationModal from "./create_animation_modal";
 
 const AsyncButtonWithAuthentication = withAuthentication<AsyncButtonProps, typeof AsyncButton>(

frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx

@@ -17,7 +17,7 @@ import {
   setRenderAnimationModalVisibilityAction,
 } from "oxalis/model/actions/ui_actions";
 import Store, { OxalisState } from "oxalis/store";
-import { MenuItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
+import { MenuItemType, SubMenuType } from "antd/es/menu/interface";
 import DownloadModalView from "./download_modal_view";
 import CreateAnimationModal from "./create_animation_modal";
 

frontend/javascripts/oxalis/view/context_menu.tsx

@@ -112,12 +112,7 @@ import {
   proofreadMerge,
 } from "oxalis/model/actions/proofread_actions";
 import { setPositionAction } from "oxalis/model/actions/flycam_actions";
-import {
-  ItemType,
-  MenuItemGroupType,
-  MenuItemType,
-  SubMenuType,
-} from "antd/lib/menu/hooks/useItems";
+import { ItemType, MenuItemGroupType, MenuItemType, SubMenuType } from "antd/es/menu/interface";
 import { getSegmentBoundingBoxes, getSegmentVolumes } from "admin/admin_rest_api";
 import { useFetch } from "libs/react_helpers";
 import { AsyncIconButton } from "components/async_clickables";
@@ -1558,7 +1553,7 @@ function ContextMenuInner(propsWithInputRef: Props) {
     nodeContextMenuNode != null && clickedNodesPosition != null
       ? positionToString(clickedNodesPosition, nodeContextMenuNode.additionalCoordinates)
       : "";
-  const infoRows = [];
+  const infoRows: ItemType[] = [];
 
   if (maybeClickedNodeId != null && nodeContextMenuTree != null) {
     infoRows.push(

frontend/javascripts/oxalis/view/help_modal.tsx

@@ -45,9 +45,7 @@ function HelpButton() {
         closable
         onClose={discardButton}
         onClick={() => setModalOpen(true)}
-      >
-        Help
-      </Alert>
+      />
       <HelpModal
         isModalOpen={isModalOpen}
         onCancel={() => setModalOpen(false)}

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx

@@ -37,7 +37,7 @@ import Toast from "libs/toast";
 import { rgbaToCSS } from "oxalis/shaders/utils.glsl";
 import { V4 } from "libs/mjs";
 import { ChangeColorMenuItemContent } from "components/color_picker";
-import { MenuItemType } from "antd/lib/menu/hooks/useItems";
+import { MenuItemType } from "antd/es/menu/interface";
 import { withMappingActivationConfirmation } from "./segments_view_helper";
 import { type AdditionalCoordinate } from "types/api_flow_types";
 import { getAdditionalCoordinatesAsString } from "oxalis/model/accessors/flycam_accessor";

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx

@@ -115,7 +115,6 @@ import {
   MISSING_GROUP_ID,
 } from "../tree_hierarchy_view_helpers";
 import { ChangeColorMenuItemContent } from "components/color_picker";
-import { ItemType } from "antd/lib/menu/hooks/useItems";
 import { pluralize } from "libs/utils";
 import AdvancedSearchPopover from "../advanced_search_popover";
 import ButtonComponent from "oxalis/view/components/button_component";
@@ -127,6 +126,7 @@ import { ValueOf } from "types/globals";
 import { getContextMenuPositionFromEvent } from "oxalis/view/context_menu";
 import FastTooltip from "components/fast_tooltip";
 import { ContextMenuContainer } from "../sidebar_context_menu";
+import { ItemType } from "antd/es/menu/interface";
 
 const { confirm } = Modal;
 const { Option } = Select;

frontend/javascripts/test/enzyme/e2e-setup.ts

@@ -139,7 +139,7 @@ const a: ${fullTypeAnnotation} = ${JSON.stringify(object)}`,
 }
 
 // The adapter tries to access document when importing it, so we need to import it down here
-const Adapter = require("enzyme-adapter-react-16");
+const Adapter = require("@wojtekmaj/enzyme-adapter-react-17");
 
 configure({
   adapter: new Adapter(),

package.json

@@ -17,20 +17,34 @@
         "@shaderfrog/glsl-parser": "^0.3.0",
         "@types/color-hash": "^1.0.2",
         "@types/cwise": "^1.0.4",
+        "@types/file-saver": "^2.0.5",
+        "@types/pako": "^2.0.0",
+        "@types/pixelmatch": "^5.2.4",
+        "@types/pngjs": "^6.0.1",
+        "@types/three": "^0.142.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+        "@types/lz-string": "^1.3.34",
         "@types/dagre": "^0.7.48",
+        "@types/file-saver": "^2.0.5",
         "@types/lodash": "^4.17.4",
+        "@types/lz-string": "^1.3.34",
         "@types/memoize-one": "^5.1.2",
         "@types/merge-img": "^2.1.1",
         "@types/mock-require": "^2.0.1",
         "@types/ndarray": "^1.0.11",
         "@types/ndarray-ops": "^1.2.4",
+        "@types/pako": "^2.0.0",
+        "@types/pixelmatch": "^5.2.4",
+        "@types/pngjs": "^6.0.1",
         "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.14",
         "@types/react-redux": "^7.1.23",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-virtualized": "^9.21.21",
         "@types/sinon": "^10.0.11",
+        "@types/three": "^0.142.0",
         "@types/url-join": "^4.0.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "abort-controller": "^3.0.0",
         "ava": "^3.13.0",
         "browserslist-to-esbuild": "^1.2.0",
@@ -43,10 +57,9 @@
         "domexception": "^2.0.1",
         "dpdm": "^3.14.0",
         "enzyme": "^3.7.0",
-        "enzyme-adapter-react-16": "^1.9.1",
         "esbuild": "^0.20",
         "espree": "^3.5.4",
-        "husky": "^9.1.5",
+        "husky":"^9.1.5",
         "jsdoc": "^3.5.5",
         "jsdom": "^23.2.0",
         "json-loader": "^0.5.7",
@@ -61,9 +74,8 @@
         "pngjs": "^3.3.3",
         "proto-loader6": "^0.4.0",
         "puppeteer": "^19.7.2",
-        "react-test-renderer": "^16.8.0",
+        "react-test-renderer": "^17.0.0",
         "redux-mock-store": "^1.2.2",
-        "retoggle": "^0.3.0",
         "shelljs": "^0.8.5",
         "sinon": "^12.0.1",
         "tmp": "0.0.33",
@@ -134,26 +146,19 @@
         "beautify-front": "yarn fix-frontend && yarn typecheck",
         "beautify": "yarn format-backend && yarn beautify-front"
     },
-    "dependencies":
-    {
+    "dependencies": {
         "@airbrake/browser": "^2.1.7",
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^5.4.0",
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@rehooks/document-title": "^1.0.2",
         "@scalableminds/prop-types": "^15.8.1",
         "@tanstack/query-sync-storage-persister": "^4.14.1",
-        "@tanstack/react-query": "^4.0.8",
+        "@tanstack/react-query": "^4.14.1",
         "@tanstack/react-query-persist-client": "^4.14.1",
-        "@types/file-saver": "^2.0.5",
-        "@types/lz-string": "^1.3.34",
-        "@types/pako": "^2.0.0",
-        "@types/pixelmatch": "^5.2.4",
-        "@types/pngjs": "^6.0.1",
-        "@types/three": "^0.142.0",
         "@zip.js/zip.js": "^2.7.32",
         "ansi-to-react": "^6.1.6",
-        "antd": "^5.14.0",
+        "antd": "^5.16.0",
         "ball-morphology": "^0.1.0",
         "base64-js": "^1.2.1",
         "beautiful-react-hooks": "^3.11.1",
@@ -164,7 +169,7 @@
         "cwise": "^1.0.10",
         "dagre": "^0.8.5",
         "data.maybe": "^1.2.2",
-        "dayjs": "^1.11.7",
+        "dayjs": "^1.11.13",
         "deep-for-each": "^2.0.3",
         "deep-freeze": "0.0.1",
         "dice-coefficient": "^2.1.0",
@@ -195,22 +200,22 @@
         "pretty-bytes": "^5.1.0",
         "process": "^0.11.10",
         "protobufjs": "^6.11.4",
+        "react": "^17.0.2",
         "rc-util": "^5.24.4",
-        "react": "^16.12.0",
         "react-colorful": "^5.6.1",
         "react-debounce-render": "^8.0.1",
-        "react-dnd": "^11.1.3",
-        "react-dnd-html5-backend": "^11.1.3",
-        "react-dom": "^16.9.0",
+        "react-dnd": "^16.0.0",
+        "react-dnd-html5-backend": "^16.0.0",
+        "react-dom": "^17.0.2",
         "react-dropzone": "^11.3.1",
         "react-flow-renderer": "^10.3.16",
         "react-json-tree": "^0.17.0",
         "react-markdown": "^8.0.7",
         "react-redux": "^7.2.0",
         "react-router-dom": "^5.1.2",
         "react-sortable-hoc": "^2.0.0",
+        "react-virtualized": "^9.22.4",
         "react-tooltip": "^5.27.1",
-        "react-virtualized": "^9.22.2",
         "redux": "^3.6.0",
         "redux-batched-actions": "^0.5.0",
         "redux-saga": "^1.3.0",
@@ -227,7 +232,8 @@
     {
         "**/mini-store": "^1.1.0",
         "**/redux": "3.7.2",
-        "**/rc-tree": "^5.7.12"
+        "**/rc-resize-observer": "^1.4.0",
+        "**/rc-util": "^5.39.1"
     },
     "ava":
     {