From c7ad6347c0f9a7064445d6b3653431dff0eebb29 Mon Sep 17 00:00:00 2001 From: Till Prochaska Date: Tue, 3 Jan 2023 21:25:15 +0100 Subject: [PATCH] Fix "in progress" and "error" states of `UpdateStatus` component This bug was likely introduced when upgrading to React Router 6. The `UpdateStatus` component needed access to the router's state in order to block navigation (and show a confirmation dialog to the user) when there are unsaved changes. With the upgrade to React Router 6, this required wrapping class components in a custom `withRouter` HOC. The `UpdateStatus` component exposes the different states (`SUCCESS`, `ERROR`, `IN_PROGRESS`) as static class fields (e.g. `UpdateStatus.IN_PROGRESS`). When wrapping the component in `withRouter`, those static class fields aren't forwarded, i.e. `UpdateStatus.IN_PROGRESS` is undefined. However, at the moment, blocking navigation isn't possible anyway (at least temporarily), as React Router v6 has removed support for relevant features required to implement this (although it will hopefully return soon [1]). So for now, I have simply removed `withRouter` altogether. Once blocking navigation is possible again, we should refactor this component to a function component and use the hooks provided by React Router. [1] https://github.com/remix-run/react-router/issues/8139 --- ui/src/components/common/UpdateStatus.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/ui/src/components/common/UpdateStatus.jsx b/ui/src/components/common/UpdateStatus.jsx index cda6f4c6f2..2f07d12846 100644 --- a/ui/src/components/common/UpdateStatus.jsx +++ b/ui/src/components/common/UpdateStatus.jsx @@ -2,14 +2,10 @@ // future support is planned in future v6 releases // see https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported for reference -import React, { PureComponent } from 'react'; -import { compose } from 'redux'; +import { PureComponent } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; -// import { Prompt } from 'react-router'; import { Intent, Spinner, Tag } from '@blueprintjs/core'; -import withRouter from 'app/withRouter'; - const messages = defineMessages({ status_success: { id: 'entity.status.success', @@ -100,4 +96,4 @@ class UpdateStatus extends PureComponent { } } -export default compose(withRouter, injectIntl)(UpdateStatus); +export default injectIntl(UpdateStatus);