Navigator: remove location history, simplify internal logic #64675

ciampo · 2024-08-21T09:04:43Z

What?

Part of #59418
Related to #60927

Rewrite Navigator's internal logic, removing the location history.

Why?

The location history is only an implementation detail after the changes in #63317 deprecated the "go back in history" behaviour, in favour of always navigating to the screen's parent.

Removing the code related to the location history allows the internal logic to be simpler and easier to maintain

How?

Instead of storing the whole location history, Navigator only internally stores the current location;
the goBack function inside the reducer was removed, together with some extra checks. The goTo function now always creates a new location object
Focus restoration logic uses a (screen path, focus selector) map instead of the location history, and should work like before;
- In order to make the new focus restoration logic more robust, a new constraint was added, preventing a screen from being registered if a screen with the same path already exists;
The isInitial flag is now computed based on the initialPath prop, instead of using the location history — again, there shouldn't be any changes in behaviour.
The replace option is marked as deprecated, as it doesn't make sense without a location history (I don't think it was used in the editor anyway)

Testing Instructions

Unit tests should pass
Storybook examples should continue to work as expected
Smoke tests

github-actions · 2024-08-21T10:02:07Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

packages/components/src/navigator/navigator-provider/component.tsx

tyxla

Great cleanup, @ciampo!

Besides the focus management, looks and works well 👍

Seems like we'll need to do some re-architecting to let the reducer consider focusSelectors changes that goTo() does.

…tor reducer

ciampo · 2024-08-23T14:10:10Z

@tyxla focus management should be fixed. I believe this PR is ready for another (final?) round of review

tyxla

Works well in my testing, both in global styles and in storybook. ✅

Code looks good too. I've left a few questions/suggestions, but I feel like none of them are really blocking and could be addressed in follow-ups if we wish.

Thanks @ciampo!

tyxla · 2024-08-23T14:59:37Z

packages/components/src/navigator/navigator-provider/component.tsx

-		isBack &&
-		locationHistory.length > 1 &&
-		locationHistory[ locationHistory.length - 2 ].path === path;
+	const focusSelectorsCopy = new Map( state.focusSelectors );


Any chance we're needlessly creating a copy? Should we create a copy only if (and when) we really need to change it? Like, in the conditions below?

I optimised the code so that we create a copy only when necessary — it's not as elegant, but it does the job

7e159f8

Open to improvements in a follow-up!

tyxla · 2024-08-23T15:08:23Z

packages/components/src/navigator/navigator-provider/component.tsx

 	screens: Screen[];
-	locationHistory: NavigatorLocation[];
+	currentLocation?: NavigatorLocation;


Is this type precise now? Seems like we're never setting isInitial to currentLocation, and we're only setting it manually when computing the context. Should we clean up?

The type was precise, but you're right about the fact that we could be setting isInitial inside the reducer (instead of doing so in the context value). Done in 29e0fb2

packages/components/src/navigator/navigator-provider/component.tsx

github-actions · 2024-08-23T17:39:19Z

Flaky tests detected in 29e0fb2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10529136439
📝 Reported issues:

[Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
[Flaky Test] should not render Block Settings sections #64387 in /test/e2e/specs/widgets/customizing-widgets.spec.js

jsnajdr · 2024-08-24T16:06:19Z

packages/components/src/navigator/navigator-provider/component.tsx

+		console.warn(
+			`Navigator: a screen with path ${ screen.path } already exists.
+The screen with id ${ screen.id } will not be added.`
+		);


Let's use @wordpress/warning for this, already used widely in the components package.

jsnajdr · 2024-08-24T16:24:33Z

packages/components/src/navigator/navigator-provider/component.tsx

+			focusSelectorsCopy = new Map( state.focusSelectors );
+		}
+		currentFocusSelector = focusSelectorsCopy.get( path );
+		focusSelectorsCopy.delete( path );


Here I would enhance the logic for the case when we navigate to the path in a isBack = false way, and it has a focusSelector stored. Then we don't want to focus (that's implemented currently) and also to delete the stored focusSelector because it's no longer relevant.

Also, a little optimization opportunity: create the copy only when you really found a selector to be deleted. Currently, if .get( path ) is null, you created the copy for nothing, it won't be mutated.

jsnajdr · 2024-08-24T16:28:00Z

packages/components/src/navigator/navigator-provider/component.tsx

 			break;
 	}

+	if ( currentLocation?.path === state.initialPath ) {
+		currentLocation = { ...currentLocation, isInitial: true };
+	}


Do you really want to do this? isInitial should be true only when the page is initially loaded. Then we don't want to do animations or change focus. But when later navigating to the initial page, the initial page is a page like any other, we want to run animations and to restore focus.

Do you really want to do this?

No, the logic is wrong. I had already noticed it while working on #64777. I'm going to extract and refine the fix, and apply it in a separate PR

jsnajdr · 2024-08-24T16:31:12Z

packages/components/src/navigator/navigator-provider/component.tsx

-			locationHistory = goTo( state, action.path, action.options );
+			const goToNewState = goTo( state, action.path, action.options );
+			currentLocation = goToNewState.currentLocation;
+			focusSelectors = goToNewState.focusSelectors;


You can do a destructuring assignment in only you wrap it in parens so that it's not confused with a block:

( { currentLocation, focusSelection } = goTo() );

ciampo · 2024-08-25T13:52:42Z

Thank you for the review, @jsnajdr — I opened #64786 to address your feedback

…s#64675) * Remove location history and only use current location * Deprecate `options.replace` * Make sure that two screens with the same path cannot be added * Re-implement focus restoration relying on a map with paths as keys * Re-implement the isInitial flag by relying on the initialPath * Update README * Comment map deletion out * CHANGELOG * Fix broken focus restoration by updating focusSelectors in the navigator reducer * create a copy of focusSelectors map only when necessary * Set isInitial inside the reducer, instead of on the context value --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>

ciampo mentioned this pull request Aug 21, 2024

Components: Remove "Experimental" designation #59418

Open

14 tasks

ciampo marked this pull request as ready for review August 21, 2024 10:01

ciampo requested a review from ajitbohra as a code owner August 21, 2024 10:01

ciampo self-assigned this Aug 21, 2024

ciampo added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Aug 21, 2024

ciampo requested review from youknowriad, jsnajdr and a team August 21, 2024 10:04

ciampo commented Aug 21, 2024

View reviewed changes

packages/components/src/navigator/navigator-provider/component.tsx Outdated Show resolved Hide resolved

ciampo mentioned this pull request Aug 22, 2024

Navigator: stabilize and export APIs #64613

Merged

ciampo force-pushed the refactor/navigator-remove-location-history branch from 73870a0 to 1f12c95 Compare August 22, 2024 13:59

tyxla reviewed Aug 23, 2024

View reviewed changes

ciampo added 9 commits August 23, 2024 15:52

Remove location history and only use current location

f5476f7

Deprecate options.replace

30cebaf

Make sure that two screens with the same path cannot be added

819c52a

Re-implement focus restoration relying on a map with paths as keys

51c78f5

Re-implement the isInitial flag by relying on the initialPath

0466772

Update README

5a7448c

Comment map deletion out

b3d460b

CHANGELOG

89c3f4d

Fix broken focus restoration by updating focusSelectors in the naviga…

77fb59f

…tor reducer

ciampo force-pushed the refactor/navigator-remove-location-history branch from 1f12c95 to 77fb59f Compare August 23, 2024 14:08

ciampo requested a review from tyxla August 23, 2024 14:09

tyxla approved these changes Aug 23, 2024

View reviewed changes

ciampo added 2 commits August 23, 2024 18:30

create a copy of focusSelectors map only when necessary

7e159f8

Set isInitial inside the reducer, instead of on the context value

29e0fb2

ciampo enabled auto-merge (squash) August 23, 2024 16:34

ciampo merged commit 1e3efbb into trunk Aug 23, 2024
63 checks passed

ciampo deleted the refactor/navigator-remove-location-history branch August 23, 2024 17:35

github-actions bot added this to the Gutenberg 19.2 milestone Aug 23, 2024

jsnajdr reviewed Aug 24, 2024

View reviewed changes

ciampo mentioned this pull request Aug 25, 2024

Navigator: fix isInitial, refine focusSelector logic #64786

Merged

WontonSam mentioned this pull request Sep 12, 2024

[Snyk] Upgrade @wordpress/eslint-plugin from 11.1.0 to 20.3.0 WontonSam/woocommerce-admin#266

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigator: remove location history, simplify internal logic #64675

Navigator: remove location history, simplify internal logic #64675

ciampo commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

tyxla left a comment

ciampo commented Aug 23, 2024

tyxla left a comment

tyxla Aug 23, 2024

ciampo Aug 23, 2024

tyxla Aug 23, 2024

ciampo Aug 23, 2024

github-actions bot commented Aug 23, 2024

jsnajdr Aug 24, 2024

jsnajdr Aug 24, 2024

jsnajdr Aug 24, 2024

ciampo Aug 25, 2024 •

edited

Loading

jsnajdr Aug 24, 2024

ciampo commented Aug 25, 2024

Navigator: remove location history, simplify internal logic #64675

Navigator: remove location history, simplify internal logic #64675

Conversation

ciampo commented Aug 21, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Aug 21, 2024 • edited Loading

tyxla left a comment

Choose a reason for hiding this comment

ciampo commented Aug 23, 2024

tyxla left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciampo Aug 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciampo commented Aug 25, 2024

ciampo commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

ciampo Aug 25, 2024 •

edited

Loading