fix: remove warnings from tests (#2369)

* fix: wrap fireEvent in act()

* fix: ensure disabled is always passed a boolean

processing can be a uid or a boolean

* fix: replace react-beautiful-dnd with @hello-pangea/dnd

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",

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.

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('[email protected]');
-  fireEvent.change(inputs.email, { target: { value: '[email protected]' } });
+  await act(async () =>
+    fireEvent.change(inputs.email, { target: { value: '[email protected]' } })
+  );
   expect(inputs.email).toHaveValue('[email protected]');
 
   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 () => {

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));
     }
   };
 

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';

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';

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)}
         />
       </ListItemIcon>
       <Typography