Update React to v17 (#7765)

* update deps to ract v17 * refactor antd table columns as arrays instead of react elements * fix dayjs types * update more packages * fix linting * undo any changes related to SortableTree lib * remove enyzme adapter for react 16 * format with 4 spaces * fix type imports * updated cahngelog * removed duplicate keys * remove enzyme component testing framework * move e2e-setup.ts out of enzyme folder * pr feedback --------- Co-authored-by: Philipp Otto <[email protected]>
scalableminds · Aug 28, 2024 · e67ed33 · e67ed33
1 parent 5ace6e2
commit e67ed33
Show file tree

Hide file tree

Showing 27 changed files with 634 additions and 1,266 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -47,6 +47,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)

diff --git a/frontend/javascripts/admin/statistic/time_tracking_overview.tsx b/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"]);

diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx b/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);

diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/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;

diff --git a/frontend/javascripts/dashboard/folders/folder_tree.tsx b/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(

diff --git a/frontend/javascripts/navbar.tsx b/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";

diff --git a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx b/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>(

diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/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";
 

diff --git a/frontend/javascripts/oxalis/view/context_menu.tsx b/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(

diff --git a/frontend/javascripts/oxalis/view/help_modal.tsx b/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)}

diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx b/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";

diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx b/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;

diff --git a/frontend/javascripts/test/backend-snapshot-tests/annotations.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/annotations.e2e.ts
@@ -4,7 +4,7 @@ import {
   setCurrToken,
   tokenUserA,
   writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import type { APIAnnotation } from "types/api_flow_types";
 import { APIAnnotationTypeEnum } from "types/api_flow_types";
 import { createTreeMapFromTreeArray } from "oxalis/model/reducers/skeletontracing_reducer_helpers";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/datasets.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/datasets.e2e.ts
@@ -1,10 +1,5 @@
 import _ from "lodash";
-import {
-  tokenUserA,
-  setCurrToken,
-  resetDatabase,
-  writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+import { tokenUserA, setCurrToken, resetDatabase, writeTypeCheckingFile } from "test/e2e-setup";
 import type { APIDataset } from "types/api_flow_types";
 import * as api from "admin/admin_rest_api";
 import test from "ava";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/folders.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/folders.e2e.ts
@@ -6,7 +6,7 @@ import {
   resetDatabase,
   replaceVolatileValues,
   writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import Request from "libs/request";
 import * as foldersApi from "admin/api/folders";
 import test from "ava";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/misc.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/misc.e2e.ts
@@ -1,9 +1,4 @@
-import {
-  tokenUserA,
-  setCurrToken,
-  resetDatabase,
-  writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+import { tokenUserA, setCurrToken, resetDatabase, writeTypeCheckingFile } from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database and change token", async () => {

diff --git a/frontend/javascripts/test/backend-snapshot-tests/projects.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/projects.e2e.ts
@@ -6,7 +6,7 @@ import {
   replaceVolatileValues,
   resetDatabase,
   writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import type { APIProject, APIProjectUpdater } from "types/api_flow_types";
 import * as api from "admin/admin_rest_api";
 import test from "ava";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/scripts.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/scripts.e2e.ts
@@ -1,9 +1,4 @@
-import {
-  tokenUserA,
-  setCurrToken,
-  resetDatabase,
-  writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+import { tokenUserA, setCurrToken, resetDatabase, writeTypeCheckingFile } from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database", async () => {

diff --git a/frontend/javascripts/test/backend-snapshot-tests/tasks.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/tasks.e2e.ts
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { resetDatabase, replaceVolatileValues, writeTypeCheckingFile } from "test/enzyme/e2e-setup";
+import { resetDatabase, replaceVolatileValues, writeTypeCheckingFile } from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database", async () => {

diff --git a/frontend/javascripts/test/backend-snapshot-tests/tasktypes.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/tasktypes.e2e.ts
@@ -1,9 +1,4 @@
-import {
-  tokenUserA,
-  setCurrToken,
-  resetDatabase,
-  writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+import { tokenUserA, setCurrToken, resetDatabase, writeTypeCheckingFile } from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 import { APIAllowedMode } from "types/api_flow_types";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/teams.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/teams.e2e.ts
@@ -1,10 +1,5 @@
 import _ from "lodash";
-import {
-  tokenUserA,
-  setCurrToken,
-  resetDatabase,
-  writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+import { tokenUserA, setCurrToken, resetDatabase, writeTypeCheckingFile } from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database and change token", async () => {

diff --git a/frontend/javascripts/test/backend-snapshot-tests/teamstructure.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/teamstructure.e2e.ts
@@ -7,7 +7,7 @@ import {
   tokenUserE,
   setCurrToken,
   resetDatabase,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database", async () => {

diff --git a/frontend/javascripts/test/backend-snapshot-tests/timetracking.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/timetracking.e2e.ts
@@ -6,7 +6,7 @@ import {
   resetDatabase,
   writeTypeCheckingFile,
   replaceVolatileValues,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 import { APITeam, APIUser } from "types/api_flow_types";

diff --git a/frontend/javascripts/test/backend-snapshot-tests/users.e2e.ts b/frontend/javascripts/test/backend-snapshot-tests/users.e2e.ts
@@ -4,7 +4,7 @@ import {
   resetDatabase,
   replaceVolatileValues,
   writeTypeCheckingFile,
-} from "test/enzyme/e2e-setup";
+} from "test/e2e-setup";
 import * as api from "admin/admin_rest_api";
 import test from "ava";
 test.before("Reset database and change token", async () => {

diff --git a/...tend/javascripts/test/enzyme/e2e-setup.ts → frontend/javascripts/test/e2e-setup.ts b/...tend/javascripts/test/enzyme/e2e-setup.ts → frontend/javascripts/test/e2e-setup.ts
@@ -2,8 +2,6 @@ import "test/mocks/lz4";
 import _ from "lodash";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'deep... Remove this comment to see the full error message
 import deepForEach from "deep-for-each";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'enzy... Remove this comment to see the full error message
-import { configure } from "enzyme";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'node... Remove this comment to see the full error message
 import fetch, { Headers, Request, Response, FetchError } from "node-fetch";
 import fs from "fs";
@@ -138,12 +136,6 @@ 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");
-
-configure({
-  adapter: new Adapter(),
-});
 export function resetDatabase() {
   console.log("Resetting test database...");
   // The parameter needs to be set globally here.