Upgrade React Router to 6.14.2 and use upstream usePrompt #4505

bufke · 2023-06-20T20:13:06Z

Upgrade React Router to ~~6.13~~ 6.14.2
Use React Router Data API compatible router
Replace custom usePrompt with upstream react router usePrompt
Remove history router kludge

Reviewer Notes

es6 files were renamed to be importable by typescript (es6 extension is not a recognized standard)
The usage of the injected router is scary, it avoids an import loop. The injected router should not be used on new code (this it's in legacy.tsx).
setTimeout is used on reflux states. This is necessary because the states get initialized before the router is injected. A better solution would be to remove reflux.
allRoutes.es6 got split into a new file routes.tsx - some typescript is better than none.
Oh no - the new typescript routes found a "impossible" route that was never used before! Did it used to do something?
legacy.tsx getCurrentRoute now uses router.state. This is necessary to get the correct order of routing for isFooRouteActive functions to work. Without this, they return the prior route.
unstable_usePrompt doesn't inspire confidence, but is surely better than our prior kludge solution mentioned on a github issue.
history and router are not API compatible. ⚠️ 🐛 we need to review this further.
There is a new lazy function from react router for lazy loading. I wonder if we should use that instead of the react one? Maybe it would be less code or could avoid the need for Suspend.

jsapp/js/components/formEditors.js

magicznyleszek · 2023-06-21T11:24:05Z

jsapp/js/components/header/searchBoxStore.ts

@@ -30,7 +30,7 @@ class SearchBoxStore extends Reflux.Store {
  };

  init() {
-    history.listen(this.onRouteChange.bind(this));
+    setTimeout(() => router.subscribe(this.onRouteChange.bind(this)));


If we end up with these ugly setTimeouts (which are fine hacks IMHO), it would be good to leave a comment somewhere. Adding same comment to each setTimeout would ba an overkill, but perhaps a comment in legacy.tsx would suffice.

Good idea, I'll comment the router variable.

jsapp/js/components/processing/processingUtils.ts

jsapp/js/router/legacy.tsx

magicznyleszek · 2023-06-21T11:39:01Z

jsapp/js/router/router.tsx

+           * Used to force refresh form sub routes. It's some kine of a weird
+           * way of introducing a loading screen during sub route refresh.
+           * See: https://github.com/kobotoolbox/kpi/issues/3925
+           **/}


As mentioned on Zulip, we can drop this 🎉

I've looked at that /forms/<uid>/reset route. It is being used only in triggerRefresh() function from formViewTabs.es6. The idea was that when user clicks a menu item, e.g. "Table" from "DATA", the route would reload itself. This is interesting, but since I broke it (of course it was me) over 2 years ago (see f14005c#diff-cd8026c65e0451326d9e9eb4de92a70018810bf708c2e70affcdab16773a93b1L251) it stopped working at all

Great, I removed all code references. I should have made it more clear, did you notice that FORM_REPORT_OLD is also gone? It looked like that path never worked, typescript pointed this out. Can you confirm that we don't use that non-existent route? It's possible we lied to TypeScript and do use it.

FORM_KOBOCAT (/forms/:uid/settings/kobocat) should be removed while we're here, it's superceded by the feature at /forms/:uid/settings/media

bufke · 2023-06-22T15:46:50Z

I'm feeling a lot more confident with better types now - but we still should manually test this more before merging.

…using the package-lock.json from beta and re-running npm@8.5.5 install

p2edwards

Since we got to talk today, I'll try changing some of the unhandled router?. to router!. to surface any issues with the router initialization.

I also want to subject it to more manual QA before merging.

It will break some work-in-progress branches like #4535.

package-lock.json

jsapp/js/components/processing/processingUtils.ts

jsapp/js/router/legacy.tsx

jsapp/js/router/router.tsx

package.json

If any of these functions are called while router is still null, that means our setTimeout(()=>…) dependency injection didn't work. Let's make that show up as an error in the browser console, rather than silently failing to navigate.

I'd like to make sure whenever we update this library, we do it as a focused and intentional endeavor, where someone gets to read the patch notes, and decide how much manual QA is needed. Patch notes for react-router: - https://github.com/remix-run/react-router/releases That might be true even if we weren't using `unstable_` API's. An alternative would be to use `~6.14.1` to stay on `6.14.x`, allowing some `npm` commands to sometimes update patch versions if they exist. --- Package-lock.json already specifies 6.14.1 prior to this commit, because it updated while I was resolving the merge conflict (6.14.1 qualifies as ^6.13.0).

#3012 (comment)

Language selector had an extra box outline introduced by #4207 and the click height was short. (UI fix not related to current PR, this came up while testing the form processing route.)

Superceded by /forms/:uid/settings/media

formatting-only commit

- Manually hoist variables to make scope clearer and use 'let' - Carefully replace 8 loose comparisons with strict ones (===, !==) - https://dorey.github.io/JavaScript-Equality-Table/ was useful here

It seems asset.content.translations can be undefined if you have a form with 0 questions, which is pretty uncommon but it leads to a full-page crash here. Fix the same crash when it appears in the data table settings menu, and on the data reports page.

…as it still has some impact on subroute behavior.

https://github.com/remix-run/react-router/releases/tag/react-router%406.14.2

jsapp/js/components/formViewTabs.es6

p2edwards · 2023-07-21T23:07:54Z

jsapp/js/components/map.es6

@@ -27,46 +27,51 @@ import {
  QUERY_LIMIT_DEFAULT,
 } from '../constants';


Sorry in advance for map.es6. Best to review these commits separately.

🤖 Prettier and ESLint autofixes here

✋ Manual ESLint fixes here

Manually hoist variables to make scope clearer and use 'let'

Carefully replace 8 loose comparisons with strict ones (===, !==)

https://dorey.github.io/JavaScript-Equality-Table/ was useful here

✋ Fix map screen crash here

This turned out not to be a regression, but part of a series of crashes that would only happen in obscure cases.

.git-blame-ignore-revs

Upgrade to react router 6.13 and use upstream usePrompt

c41f766

bufke requested a review from magicznyleszek June 20, 2023 20:13

magicznyleszek self-assigned this Jun 20, 2023

magicznyleszek reviewed Jun 21, 2023

View reviewed changes

jsapp/js/components/formEditors.js Outdated Show resolved Hide resolved

magicznyleszek reviewed Jun 21, 2023

View reviewed changes

jsapp/js/components/processing/processingUtils.ts Outdated Show resolved Hide resolved

magicznyleszek reviewed Jun 21, 2023

View reviewed changes

jsapp/js/router/legacy.tsx Outdated Show resolved Hide resolved

magicznyleszek reviewed Jun 21, 2023

View reviewed changes

bufke self-assigned this Jun 22, 2023

Add better types for react router legacy utils.

1790aaa

bufke marked this pull request as ready for review June 23, 2023 19:36

p2edwards mentioned this pull request Jul 5, 2023

Redo package-lock #4526

Merged

1 task

Merge from beta and resolve package-lock.json conflicts, by…

47cd995

…using the package-lock.json from beta and re-running npm@8.5.5 install

p2edwards reviewed Jul 11, 2023

View reviewed changes

p2edwards added 3 commits July 11, 2023 18:11

Merge branch 'beta' into react-router-6-13

ccbae1b

p2edwards mentioned this pull request Jul 17, 2023

Project Downloads improvements - custom data exports UI #3012

Merged

p2edwards added 11 commits July 17, 2023 13:26

Fix a crash on data downloads and a typo in an old route check

0057e0e

#3012 (comment)

Fix language selector focus outline and click height

53a7d27

Language selector had an extra box outline introduced by #4207 and the click height was short. (UI fix not related to current PR, this came up while testing the form processing route.)

Remove /forms/:uid/settings/kobocat

5195f7c

Superceded by /forms/:uid/settings/media

(auto/format) Apply automated eslint and prettier to map.es6

be3a9b6

formatting-only commit

(mark auto/format commit in .git-blame-ignore-revs)

01b00c0

Apply manual ESLint fixes to map.es6

16f242b

- Manually hoist variables to make scope clearer and use 'let' - Carefully replace 8 loose comparisons with strict ones (===, !==) - https://dorey.github.io/JavaScript-Equality-Table/ was useful here

Merge branch 'beta' into react-router-6-13

019e386

Retain the FORM_RESET route for now (/forms/:uid/reset) #3925

9cacb3f

…as it still has some impact on subroute behavior.

Update React Router from 6.14.1 to 6.14.2 (patch)

b2f6160

https://github.com/remix-run/react-router/releases/tag/react-router%406.14.2

Fix a problem where error traces were shown instead of fallback routes

968da59

p2edwards reviewed Jul 21, 2023

View reviewed changes

jsapp/js/components/formViewTabs.es6 Show resolved Hide resolved

p2edwards reviewed Jul 21, 2023

View reviewed changes

.git-blame-ignore-revs Show resolved Hide resolved

p2edwards changed the title ~~React router 6.13 and upstream usePrompt~~ Upgrade React Router to 6.14.2 and use upstream usePrompt Jul 21, 2023

Use "react-router-dom": "~6.14.2", unpinning the patch version.

d2f2f3b

bufke merged commit a8d26d1 into beta Jul 24, 2023
4 checks passed

bufke deleted the react-router-6-13 branch July 24, 2023 17:20

p2edwards mentioned this pull request Jul 24, 2023

Resolve conflicts and api changes from react-router-6-13 branch #4548

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade React Router to 6.14.2 and use upstream usePrompt #4505

Upgrade React Router to 6.14.2 and use upstream usePrompt #4505

bufke commented Jun 20, 2023 •

edited by p2edwards

magicznyleszek Jun 21, 2023

bufke Jun 22, 2023

magicznyleszek Jun 21, 2023

bufke Jun 22, 2023

p2edwards Jul 20, 2023 •

edited

bufke commented Jun 22, 2023

p2edwards left a comment

p2edwards Jul 21, 2023 •

edited

		@@ -27,46 +27,51 @@ import {
		QUERY_LIMIT_DEFAULT,
		} from '../constants';

Upgrade React Router to 6.14.2 and use upstream usePrompt #4505

Upgrade React Router to 6.14.2 and use upstream usePrompt #4505

Conversation

bufke commented Jun 20, 2023 • edited by p2edwards

Reviewer Notes

magicznyleszek Jun 21, 2023

Choose a reason for hiding this comment

bufke Jun 22, 2023

Choose a reason for hiding this comment

magicznyleszek Jun 21, 2023

Choose a reason for hiding this comment

bufke Jun 22, 2023

Choose a reason for hiding this comment

p2edwards Jul 20, 2023 • edited

Choose a reason for hiding this comment

bufke commented Jun 22, 2023

p2edwards left a comment

Choose a reason for hiding this comment

p2edwards Jul 21, 2023 • edited

Choose a reason for hiding this comment

bufke commented Jun 20, 2023 •

edited by p2edwards

p2edwards Jul 20, 2023 •

edited

p2edwards Jul 21, 2023 •

edited