Navigation page doesn't render the navigation tree anymore

[loan-laux]

Prerequisites

• Are you running the latest version?
• Are you able to consistently reproduce the issue?
• Did you search the issue queue for existing issue? Search issues

Issue Description

The Navigation page displays a blank area instead of the navigation tree, making it impossible to see or edit the navigation tree.

Steps to Reproduce

Please provide starting context, i.e. logged in as a user, configure a particular payment method.

1. Go to the Navigation page.
2. See that the right part is blank, which is where the navigation tree should be shown.

Possible Solution

I had already fixed a bug with the same symptom here. However, this time, it doesn't seem that the solution will be anything related to this previous one. One important note: the react-sortable-tree package looks like it hasn't had a release since August 2020, and seems pretty abandoned given the queue of PRs and issues.

Versions

3.0.0-beta.13

[MohanNarayana]

Hi @loan-laux. I am able to see the items under the Add Navigation Item button but not the hierarchy tree on the right of it. Is this what you see too? Also, the drag and drop does not respond.

[loan-laux]

Yep @MohanNarayana. These are exactly the symptoms I was referring to. Still puzzled as to what causes this, but I would really suspect something with react-sortable-tree, as this dependency has already caused the same exact issue earlier.

[MohanNarayana]

@loan-laux I can see the tree data come through and i can see the same data render on a sandbox page. I tried updating some packages (react-sortable-tree, react-dnd-html5-backend and react-dnd) but no luck. Do you think there are any other other package that I can try updating? Thanks

[loan-laux]

@MohanNarayana no idea, tbh. But react-sortable-tree hasn't been updated since August 2020, with a few unanswered issues asking if the project is dead. Not a good sign. I feel like a transitive dependency might be causing this. But it's hard to know.

[MohanNarayana]

The project is definitely abandoned judging by this issue with no response from the core team.

[delagroove]

can you try using react-sortable-tree-w for this? looks more active
https://www.npmjs.com/package/react-sortable-tree-w

[nosferatu500]

Hi guys,

If you still have this problem, you can try my fork. I had the same problem and fork the original package to solve it.

yarn add @nosferatu500/react-sortable-tree

[loan-laux]

@delagroove @nosferatu500 I tried both react-sortable-tree-w and @nosferatu500/react-sortable-tree. Both also fail silently like the original react-sortable-tree.

[nosferatu500]

@loan-laux hmm ... Let me check it out over the weekend. If the reason is this module, I can try to fix it.

[nosferatu500]

@loan-laux
how can I build your project?

docker-compose -f <dev-file> up ?

[loan-laux]

@nosferatu500 yes, but you'll need to have the Reaction Commerce API running too, since this is the admin UI for that API.

The easiest way is to clone the reaction-development-platform. Run the make command as indicated in the README, which will clone all of Reaction's sub-projects and start the containers (essentially running the docker-compose commands for you).

Once you've done that, enable development mode for the admin UI sub-project by running make dev-link-reaction-admin. Then, restart your reaction-admin component. Now, any changes made to the code under reaction-admin will take effect, and you can try stuff out.

Thanks for taking the time! I appreciate it.

[loan-laux]

I've tried a bunch of things like move the DndProvider closer to the NavigationItemList component. No dice. I'm really stuck as to why this is not rendering. The fact that no error is thrown is also not helping.

[DmaKill]

@loan-laux I have fixed the error in this PR, but the pipelines have failed

[delagroove]

fixed in 3.0.0-beta19
#382 (comment)