mattermost/webapp/patches/react-beautiful-dnd+13.1.1.patch

110 lines
217 KiB
Diff
Raw Permalink Normal View History

MM-45255 Update web app to React 18 (#33858) * Dependencies: Remove unused dependency on @mattermost/dynamic-virtualized-list * Update Components package to React 18 and new version of RTL * Upgrade React, React Redux, RTL, and associated libraries I had to upgrade React Redux for the new version of React, and that brought with it new versions of associated packges (Redux, Reselect, Redux Thunk). A few other libraries needed to be updated or have their explicit dependencies overridden for the new version of Redux as well. To note for future dependency upgrades, redux-mock-store is deprecated, and redux-batched-actions and redux-persist are inactive. For RTL: 1. `@testing-library/react-hooks` has been rolled into `@testing-library/react`, and its interface has changed. 2. I had to make some changes to get TS to use the types for the new methods added to `expect`. * Dependencies: Fix dom-accessibility-api patch from #33553 * Tests: Fix tests that use jest.spyOn with react-redux * Functional: Remove usage of defaultProps on function components * Tests: Remove usage of react-dom/test-utils * Functional: Rename conflicting context prop on Apps components * Tests: Always await on userEvent calls * Functional: Patch react-overlays to fix pressing escape in unit tests I did something similar in React Bootstrap a few weeks ago. See https://github.com/mattermost/react-bootstrap/pull/5 * Tests: Prevent tests from fetching from real URLs * Tests: Update snapshots changed by upgrading react-redux and styled-components * Functional: Stop passing deprecated pure parameter to connect * Tests: Change how we intercept console errors in tests to preserve stack traces * Tests: Fix incorrect usage of act in Enzyme tests These tests are a mix of: 1. Not calling act when performing something that will update the DOM (like clicking on a button or invoking a method) which either caused warnings or failed snapshots as changes weren't visible. 2. Calling act in weird ways (such as wrapping mount in an async act) which caused Enzyme to not function Some of these changes just silence warnings, but most of them are required to make the test even run * Tests: Fix incorrect usage of act in RTL tests * Tests: Fix a few minor issues in tests * Functional: Add note for why we're not using ReactDOM.createRoot * Functional: Fix focus trap infinite recursion in test * Types: Replace removed React.SFC * Types: Fix type of functions in FormattedMessage values prop * Functional: Fix DropdownInputHybrid placeholder * Types: Patch type definitions of react-batched-actions * Types: Fix mattermost-redux build failing due to type check in Redux Dev Tools * Dependencies: Add type definitions for react-is * Types: Update types around ReactNode and ReactElement React's gotten more strict with these, so we need to be more careful with what we return from a render method. In some of these places, we also misused some types, so hopefully I've sorted those out. * Types: Explicitly added types to all instances of useCallback * Types/Tests: Update typing of Redux actions and hooks useDispatch is sort of stricter now, but it doesn't seem to rely on the global type of `Dispatch` any more, so I ended up having to add an extra overload to make that work. * Tests: Update new tests in useChannelSystemPolicies for new version of RTL These were added on master after I updated RTL on the branch * Tests: Update action used to test initial store state * Functional: Remove remnants of code for hot reloading Redux store * Types/Tests: Update typing around React Router * Types/Functional: Update typing involving the FormattedMessage values prop There's a couple functional changes to ensure that the value passed is either a valid string or Date * Types: Misc fixes * Functional: Don't pass unused props to ChannelHeader * Functional: Ensure plugin setting text is rendered before passing to Setting component The previous version might've allowed MessageDescriptors to be passed unformatted into the Setting component (which would then be rendered in the DOM). As best as I can tell, we never actually did that, so this shouldn't change anything in practice. * Tests: Make tests for identifyElementRegion more reliable * Tests: Update recent tests for new version of RTL * E2E: Make editLastPostWithNewMessage more reliable * Downgrade React to 18.2.0 and manually dedupe React versions 18.2.0 and 18.3.0 are nearly identical to one another, except 18.3.x includes warnings when using any API that will be removed in React 19. I don't want to flood the console and test logs with warnings for things we're not addressing for the time being. Also, they didn't export act from React itself until 18.3.1 for some reason (despite the old import path printing a warning), so I needed to revert the changes to its import path. To get this all to work, for some reason, I had to manually delete all the entries for `react` and `react-dom` from the lockfile to get NPM to use a single version of React and ReactDOM everywhere. I did discover `npm dedupe` in the process, but that didn't solve this problem where I was trying to consistently downgrade everything. * Revert changes to notice file build tool to speed up CI * Add explicit version of types/scheduler The version of `@types/react` that we use says it works with any version of `@types/scheduler` which causes NPM to install a newer version of it which is missing a file of types that it needs. * Update new test to await on userEvent * Fix Playwright test that relied on autogenerated class name * Tests: Disable test for identifyElementRegion * Functional: Change DynamicVirtualizedList ListItem to use useLayoutEffect In a previous commit, I changed the RHS to use the monorepo DynamicVirtualizedList instead of the old version that lived in its own repo. That caused the RHS to no longer scroll to the bottom on initial mount or be able to render additional pages (even though the posts are loaded). This seems like it has to do with the improved size calculation that Zubair made because that's the main difference in the monorepo version of that component. For some reason I don't entirely understand, changing to useLayoutEffect seems to fix that. I think that's because the old measurement code is written as a class component, and useLayoutEffect fires at the same time as componentDidMount/componentDidUpdate. * Types: Revert some type changes to reduce test log output * Functional: Fix places where useSelector returned new results when called with the same arguments I wasn't planning on fixing this now, but I think the increased length of the warning logs in the tests are causing the GitHub action for the unit tests to abort as it reaches around 10000 lines long. * Tests: Fix place where mocked selector returned new results when called with the same arguments Same reason as before, but this one only occurred because of a test's mocked selector. I replaced it with a real one to get around that. * Tests: Fail tests when selector returns new results when called with the same arguments * Attempt to fix web app unit tests failing in CI * Change CI tests to set workerIdleMemoryLimit instead of reducing maxWorkers * Increase workerIdleMemoryLimit in CI * Revert changes to test-ci command and revert changes to how unit test logs are collected * Unrevert changes to test logging, re-add workerIdleMemoryLimit, and try disabling test coverage * Actually disable coverage * Fix flaky test * Update a couple new tests to fit PR and remove an unnecessary act * Replace bad mock in new unit test * Fix types of new code * Remove mock from new unit test
2025-10-07 11:11:12 -04:00
diff --git a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js
index 12884e9..c4b19c1 100644
--- a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js
+++ b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js
@@ -8216,7 +8216,6 @@ var mapDispatchToProps = {
};
var ConnectedDraggable = reactRedux.connect(makeMapStateToProps, mapDispatchToProps, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Draggable);
@@ -8513,7 +8512,6 @@ var defaultProps = {
};
var ConnectedDroppable = reactRedux.connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Droppable);
ConnectedDroppable.defaultProps = defaultProps;
diff --git a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js
index ecced69..63bd90b 100644
--- a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js
+++ b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js
@@ -8209,7 +8209,6 @@ var mapDispatchToProps = {
};
var ConnectedDraggable = connect(makeMapStateToProps, mapDispatchToProps, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Draggable);
@@ -8506,7 +8505,6 @@ var defaultProps = {
};
var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Droppable);
ConnectedDroppable.defaultProps = defaultProps;
diff --git a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.js b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.js
index 84b63e9..4216153 100644
--- a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.js
+++ b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.js
@@ -2967,7 +2967,6 @@
var _ref3 = _ref2,
_ref3$pure = _ref3.pure,
- pure = _ref3$pure === void 0 ? true : _ref3$pure,
_ref3$areStatesEqual = _ref3.areStatesEqual,
areStatesEqual = _ref3$areStatesEqual === void 0 ? strictEqual : _ref3$areStatesEqual,
_ref3$areOwnPropsEqua = _ref3.areOwnPropsEqual,
@@ -2994,7 +2993,6 @@
initMapStateToProps: initMapStateToProps,
initMapDispatchToProps: initMapDispatchToProps,
initMergeProps: initMergeProps,
- pure: pure,
areStatesEqual: areStatesEqual,
areOwnPropsEqual: areOwnPropsEqual,
areStatePropsEqual: areStatePropsEqual,
@@ -11210,7 +11208,6 @@
};
var ConnectedDraggable = connect(makeMapStateToProps, mapDispatchToProps, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Draggable);
@@ -11507,7 +11504,6 @@
};
var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
context: StoreContext,
- pure: true,
areStatePropsEqual: isStrictEqual
})(Droppable);
ConnectedDroppable.defaultProps = defaultProps;
diff --git a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.min.js b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.min.js
index a18e84d..ecacbc0 100644
--- a/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.min.js
+++ b/node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e=e||self).ReactBeautifulDnd={},e.React,e.ReactDOM)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,i="default"in r?r.default:r;function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(){}function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e,t,r){var n=t.map((function(t){var n,i,o=(n=r,i=t.options,l({},n,{},i));return e.addEventListener(t.eventName,t.fn,o),function(){e.removeEventListener(t.eventName,t.fn,o)}}));return function(){n.forEach((function(e){e()}))}}function c(e){this.message=e}function s(e,t){if(!e)throw new c("Invariant failed")}c.prototype.toString=function(){return this.message};var d=function(e){function t(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return(t=e.call.apply(e,[this].concat(n))||this).callbacks=null,t.unbind=a,t.onWindowError=function(e){var r=t.getCallbacks();r.isDragging()&&r.tryAbort(),e.error instanceof c&&e.preventDefault()},t.getCallbacks=function(){if(!t.callbacks)throw new Error("Unable to find AppCallbacks in <ErrorBoundary/>");return t.callbacks},t.setCallbacks=function(e){t.callbacks=e},t}o(t,e);var r=t.prototype;return r.componentDidMount=function(){this.unbind=u(window,[{eventName:"error",fn:this.onWindowError}])},r.componentDidCatch=function(e){if(!(e instanceof c))throw e;this.setState({})},r.componentWillUnmount=function(){this.unbind()},r.render=function(){return this.props.children(this.setCallbacks)},t}(n.Component),p=function(e){return e+1},f=function(e,t){var r=e.droppableId===t.droppableId,n=p(e.index),i=p(t.index);return r?"\n You have moved the item from position "+n+"\n to position "+i+"\n ":"\n You have moved the item from position "+n+"\n in list "+e.droppableId+"\n to list "+t.droppableId+"\n in position "+i+"\n "},g=function(e,t,r){return t.droppableId===r.droppableId?"\n The item "+e+"\n has been combined with "+r.draggableId:"\n The item "+e+"\n in list "+t.droppableId+"\n has been combined with "+r.draggableId+"\n in list "+r.droppableId+"\n "},v=function(e){return"\n The item has returned to its starting position\n of "+p(e.index)+"\n"},m="\n Press space bar to start a drag.\n When dragging you can use the arrow keys to move the item around and escape to cancel.\n Some screen readers may require you to be in focus mode or to use your pass through key\n",b=function(e){return"\n You have lifted an item in position "+p(e.source.index)+"\n"},h=function(e){var t=e.destination;if(t)return f(e.source,t);var r=e.combine;return r?g(e.draggableId,e.source,r):"You are over an area that cannot be dropped on"},y=function(e){if("CANCEL"===e.reason)return"\n Movement cancelled.\n "+v(e.source)+"\n ";var t=e.destination,r=e.combine;return t?"\n You have dropped the item.\n "+f(e.source,t)+"\n ":r?"\n You have dropped the item.\n "+g(e.draggableId,e.source,r)+"\n ":"\n The item has been dropped while not over a drop area.\n "+v(e.source)+"\n "};var x=function(e){var t,r=e.Symbol;return"function"==typeof r?r.observable?t=r.observable:(t=r("observable"),r.observable=t):t="@@observable",t}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof module?module:Function("return this")()),I=function(){return Math.random().toString(36).substring(7).split("").join(".")},D={INIT:"@@redux/INIT"+I(),REPLACE:"@@redux/REPLACE"+I(),PROBE_UNKNOWN_ACTION:function(){return"@@redux/PROBE_UNKNOWN_ACTION"+I()}};function w(e){if("object"!=typeof e||null===e)return!1;for(var t=e;null!==Object.getPrototypeOf(t);)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)=
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e=e||self).ReactBeautifulDnd={},e.React,e.ReactDOM)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,i="default"in r?r.default:r;function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(){}function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e,t,r){var n=t.map((function(t){var n,i,o=(n=r,i=t.options,l({},n,{},i));return e.addEventListener(t.eventName,t.fn,o),function(){e.removeEventListener(t.eventName,t.fn,o)}}));return function(){n.forEach((function(e){e()}))}}function c(e){this.message=e}function s(e,t){if(!e)throw new c("Invariant failed")}c.prototype.toString=function(){return this.message};var d=function(e){function t(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return(t=e.call.apply(e,[this].concat(n))||this).callbacks=null,t.unbind=a,t.onWindowError=function(e){var r=t.getCallbacks();r.isDragging()&&r.tryAbort(),e.error instanceof c&&e.preventDefault()},t.getCallbacks=function(){if(!t.callbacks)throw new Error("Unable to find AppCallbacks in <ErrorBoundary/>");return t.callbacks},t.setCallbacks=function(e){t.callbacks=e},t}o(t,e);var r=t.prototype;return r.componentDidMount=function(){this.unbind=u(window,[{eventName:"error",fn:this.onWindowError}])},r.componentDidCatch=function(e){if(!(e instanceof c))throw e;this.setState({})},r.componentWillUnmount=function(){this.unbind()},r.render=function(){return this.props.children(this.setCallbacks)},t}(n.Component),p=function(e){return e+1},f=function(e,t){var r=e.droppableId===t.droppableId,n=p(e.index),i=p(t.index);return r?"\n You have moved the item from position "+n+"\n to position "+i+"\n ":"\n You have moved the item from position "+n+"\n in list "+e.droppableId+"\n to list "+t.droppableId+"\n in position "+i+"\n "},g=function(e,t,r){return t.droppableId===r.droppableId?"\n The item "+e+"\n has been combined with "+r.draggableId:"\n The item "+e+"\n in list "+t.droppableId+"\n has been combined with "+r.draggableId+"\n in list "+r.droppableId+"\n "},v=function(e){return"\n The item has returned to its starting position\n of "+p(e.index)+"\n"},m="\n Press space bar to start a drag.\n When dragging you can use the arrow keys to move the item around and escape to cancel.\n Some screen readers may require you to be in focus mode or to use your pass through key\n",b=function(e){return"\n You have lifted an item in position "+p(e.source.index)+"\n"},h=function(e){var t=e.destination;if(t)return f(e.source,t);var r=e.combine;return r?g(e.draggableId,e.source,r):"You are over an area that cannot be dropped on"},y=function(e){if("CANCEL"===e.reason)return"\n Movement cancelled.\n "+v(e.source)+"\n ";var t=e.destination,r=e.combine;return t?"\n You have dropped the item.\n "+f(e.source,t)+"\n ":r?"\n You have dropped the item.\n "+g(e.draggableId,e.source,r)+"\n ":"\n The item has been dropped while not over a drop area.\n "+v(e.source)+"\n "};var x=function(e){var t,r=e.Symbol;return"function"==typeof r?r.observable?t=r.observable:(t=r("observable"),r.observable=t):t="@@observable",t}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof module?module:Function("return this")()),I=function(){return Math.random().toString(36).substring(7).split("").join(".")},D={INIT:"@@redux/INIT"+I(),REPLACE:"@@redux/REPLACE"+I(),PROBE_UNKNOWN_ACTION:function(){return"@@redux/PROBE_UNKNOWN_ACTION"+I()}};function w(e){if("object"!=typeof e||null===e)return!1;for(var t=e;null!==Object.getPrototypeOf(t);)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)=
diff --git a/node_modules/react-beautiful-dnd/src/view/draggable/connected-draggable.js b/node_modules/react-beautiful-dnd/src/view/draggable/connected-draggable.js
index 89d6f58..57f1bba 100644
--- a/node_modules/react-beautiful-dnd/src/view/draggable/connected-draggable.js
+++ b/node_modules/react-beautiful-dnd/src/view/draggable/connected-draggable.js
@@ -360,8 +360,6 @@ const ConnectedDraggable = connect(
{
// Using our own context for the store to avoid clashing with consumers
context: StoreContext,
- // Default value, but being really clear
- pure: true,
// When pure, compares the result of mapStateToProps to its previous value.
// Default value: shallowEqual
// Switching to a strictEqual as we return a memoized object on changes
diff --git a/node_modules/react-beautiful-dnd/src/view/droppable/connected-droppable.js b/node_modules/react-beautiful-dnd/src/view/droppable/connected-droppable.js
index bc53a7d..b0a06c3 100644
--- a/node_modules/react-beautiful-dnd/src/view/droppable/connected-droppable.js
+++ b/node_modules/react-beautiful-dnd/src/view/droppable/connected-droppable.js
@@ -266,8 +266,6 @@ const ConnectedDroppable: typeof DroppableType = connect(
{
// Ensuring our context does not clash with consumers
context: StoreContext,
- // pure: true is default value, but being really clear
- pure: true,
// When pure, compares the result of mapStateToProps to its previous value.
// Default value: shallowEqual
// Switching to a strictEqual as we return a memoized object on changes