feat: navigation manager UI

[mikemurray]

Resolves #4935
Impact: minor
Type: feature

Original work from @ajporlante

Issue

An interface is needed to allow admins to modify the navigation

Solution

Build a navigation editor UI in the Operator 2.0 admin panel

Breaking changes

none

Testing

1. Add, remove, update navigation items
2. See changes applied to the storefront using this PR: refactor: navigation data comes from new NavigationTree example-storefront#472

Note. Saving navigation items, and the tree publishes immediately. Discard only discards unsaved changes.

[machikoyasuda]

Tested this in Chrome, Safari and Firefox.

Chrome and Safari work great! Firefox doesn't have scroll-linked positioning:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Testing instructions

0. Open http://localhost:3000/operator/localization and click 🔁 to reload localized copy
1. Open http://localhost:3000/operator/navigation
2. Run reaction-next-starterkit with this branch: refactor: navigation data comes from new NavigationTree example-storefront#472

Flows to test

I tested the following flows:

1. Edit a name of an nav item -> Check on starter-kit
2. Edit a url of a nav item -> Check on starter-kit
3. Edit a non-relative url, like https://socks.com of a nav item -> Check on starter-kit
4. Check Open in a new tab -> Check on starter-kit
5. Delete a nav item -> Confirm that a modal shows up -> Check on starter-kit
6. Drag and drop a nav item -> Check on starter-kit
7. Create a new nav item, and repeat the steps for that one.

Screenshots

• Editing a nav item:

• Dragging/moving a nav item:

• Deleting:

[aldeed]

@machikoyasuda Now that CI builds are working again, I see only a snyk failure. Is this ready to merge?

[machikoyasuda]

@aldeed Aside from the Snyk errors, this PR is ready to merge!