diff --git a/package-lock.json b/package-lock.json index 2b33e7cb6..bda02be1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "terraso-web-client", "version": "0.1.0", "dependencies": { + "@hello-pangea/dnd": "^16.6.0", "@hookform/resolvers": "^3.9.0", "@mapbox/mapbox-gl-draw": "^1.4.3", "@mapbox/mapbox-gl-geocoder": "^5.0.2", @@ -35,7 +36,6 @@ "query-string": "^7.1.3", "react": "18.3.1", "react-avatar-editor": "^13.0.2", - "react-beautiful-dnd": "^13.1.1", "react-dom": "18.3.1", "react-dropzone": "^14.2.3", "react-error-boundary": "^4.0.13", @@ -4156,6 +4156,25 @@ "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/@hello-pangea/dnd": { + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.6.0.tgz", + "integrity": "sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==", + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.24.1", + "css-box-model": "^1.2.1", + "memoize-one": "^6.0.0", + "raf-schd": "^4.0.3", + "react-redux": "^8.1.3", + "redux": "^4.2.1", + "use-memo-one": "^1.1.3" + }, + "peerDependencies": { + "react": "^16.8.5 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@hookform/resolvers": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz", @@ -8172,17 +8191,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-redux": { - "version": "7.1.33", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz", - "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.11", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", @@ -11642,6 +11650,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "license": "MIT", "dependencies": { "tiny-invariant": "^1.0.6" } @@ -22215,9 +22224,10 @@ } }, "node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==", + "license": "MIT" }, "node_modules/meow": { "version": "9.0.0", @@ -25388,7 +25398,8 @@ "node_modules/raf-schd": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", - "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", + "license": "MIT" }, "node_modules/randombytes": { "version": "2.1.0", @@ -25525,53 +25536,6 @@ "react-dom": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-beautiful-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", - "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", - "dependencies": { - "@babel/runtime": "^7.9.2", - "css-box-model": "^1.2.0", - "memoize-one": "^5.1.1", - "raf-schd": "^4.0.2", - "react-redux": "^7.2.0", - "redux": "^4.0.4", - "use-memo-one": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-beautiful-dnd/node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - }, - "node_modules/react-beautiful-dnd/node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17 || ^18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -31257,6 +31221,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", + "license": "MIT", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } diff --git a/package.json b/package.json index dbe341276..909a6bce2 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "src/config.ts" ], "dependencies": { + "@hello-pangea/dnd": "^16.6.0", "@hookform/resolvers": "^3.9.0", "@mapbox/mapbox-gl-draw": "^1.4.3", "@mapbox/mapbox-gl-geocoder": "^5.0.2", @@ -33,7 +34,6 @@ "query-string": "^7.1.3", "react": "18.3.1", "react-avatar-editor": "^13.0.2", - "react-beautiful-dnd": "^13.1.1", "react-dom": "18.3.1", "react-dropzone": "^14.2.3", "react-error-boundary": "^4.0.13", diff --git a/src/common/components/StrictModeDroppable.js b/src/common/components/StrictModeDroppable.js index 85e770767..213182598 100644 --- a/src/common/components/StrictModeDroppable.js +++ b/src/common/components/StrictModeDroppable.js @@ -16,7 +16,7 @@ */ import React, { useEffect, useState } from 'react'; -import { Droppable } from 'react-beautiful-dnd'; +import { Droppable } from '@hello-pangea/dnd'; // Work around for react-beautiful-dnd issue. The issues is that the // Droppable component is not compatible with React.StrictMode. diff --git a/src/group/components/GroupForm.test.js b/src/group/components/GroupForm.test.js index f8568b426..0b8e9f9e8 100644 --- a/src/group/components/GroupForm.test.js +++ b/src/group/components/GroupForm.test.js @@ -161,23 +161,31 @@ test('GroupForm: Input change', async () => { const { inputs } = await setup(); expect(inputs.name).toHaveValue('Group name'); - fireEvent.change(inputs.name, { target: { value: 'New name' } }); + await act(async () => + fireEvent.change(inputs.name, { target: { value: 'New name' } }) + ); expect(inputs.name).toHaveValue('New name'); expect(inputs.description).toHaveValue('Group description'); - fireEvent.change(inputs.description, { - target: { value: 'New description' }, - }); + await act(async () => + fireEvent.change(inputs.description, { + target: { value: 'New description' }, + }) + ); expect(inputs.description).toHaveValue('New description'); expect(inputs.email).toHaveValue('group@group.org'); - fireEvent.change(inputs.email, { target: { value: 'new.email@group.org' } }); + await act(async () => + fireEvent.change(inputs.email, { target: { value: 'new.email@group.org' } }) + ); expect(inputs.email).toHaveValue('new.email@group.org'); expect(inputs.website).toHaveValue('https://www.group.org'); - fireEvent.change(inputs.website, { - target: { value: 'https://www.other.org' }, - }); + await act(async () => + fireEvent.change(inputs.website, { + target: { value: 'https://www.other.org' }, + }) + ); expect(inputs.website).toHaveValue('https://www.other.org'); }); test('GroupForm: Input validation', async () => { diff --git a/src/landscape/components/LandscapeForm/AffiliationUpdate.test.js b/src/landscape/components/LandscapeForm/AffiliationUpdate.test.js index 5948a9f33..f3aa9ee24 100644 --- a/src/landscape/components/LandscapeForm/AffiliationUpdate.test.js +++ b/src/landscape/components/LandscapeForm/AffiliationUpdate.test.js @@ -41,17 +41,19 @@ const setup = async () => { const combobox = screen.getByRole('combobox', { name, }); - fireEvent.change(combobox, { target: { value: newValue } }); + await act(async () => + fireEvent.change(combobox, { target: { value: newValue } }) + ); const optionsList = screen.getByRole('listbox', { name }); if (isNew) { - fireEvent.keyDown(combobox, { key: 'Enter' }); + await act(async () => fireEvent.keyDown(combobox, { key: 'Enter' })); } else { const option = within(optionsList).getByRole('option', { name: newValue, }); - fireEvent.click(option); + await act(async () => fireEvent.click(option)); } }; diff --git a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js index 4b9931f6f..de95bba4a 100644 --- a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js +++ b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js @@ -22,8 +22,8 @@ import React, { useRef, useState, } from 'react'; +import { DragDropContext, Draggable } from '@hello-pangea/dnd'; import _ from 'lodash/fp'; -import { DragDropContext, Draggable } from 'react-beautiful-dnd'; import { useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import * as yup from 'yup'; diff --git a/src/storyMap/components/StoryMapForm/ChaptersSideBar.js b/src/storyMap/components/StoryMapForm/ChaptersSideBar.js index 3d66701ff..5741c5fd9 100644 --- a/src/storyMap/components/StoryMapForm/ChaptersSideBar.js +++ b/src/storyMap/components/StoryMapForm/ChaptersSideBar.js @@ -16,7 +16,7 @@ */ import React, { useCallback, useMemo, useRef, useState } from 'react'; -import { DragDropContext, Draggable } from 'react-beautiful-dnd'; +import { DragDropContext, Draggable } from '@hello-pangea/dnd'; import { useTranslation } from 'react-i18next'; import AddIcon from '@mui/icons-material/Add'; import MoreVertIcon from '@mui/icons-material/MoreVert'; diff --git a/src/storyMap/components/StoryMapForm/DataLayerDialog.js b/src/storyMap/components/StoryMapForm/DataLayerDialog.js index b87eac184..a4d020d13 100644 --- a/src/storyMap/components/StoryMapForm/DataLayerDialog.js +++ b/src/storyMap/components/StoryMapForm/DataLayerDialog.js @@ -84,7 +84,7 @@ const DataLayerListItem = props => { edge="start" disableRipple inputProps={{ 'aria-label': dataLayer.title }} - disabled={processing} + disabled={Boolean(processing)} />