Button for Navigation Reorder is not working correctly

[jcastro-dotcms]

Reported via Support: https://dotcms.zendesk.com/agent/tickets/104561
Reproducible in dotCMS 5.3.8.4, 5.3.8.5 up to latest master (21.05.1)

According to our official documentation: https://dotcms.com/docs/latest/navtool-viewtool#ExampleAddReorderButton , users can display the Reorder Button for the navigation items. In previous versions of dotCMS, the Reorder feature automatically detected the folder path of the page it was placed in, and display the appropriate children up to two levels deep.

However, I was able to confirm with @dsilvam that this feature is not working as expected in more recent versions of dotCMS:

1. By default, the Reorder Button is always showing the level-1 folders of the Site, with no regards to the location of the page that is displaying it. This was probably introduced by the following code refactoring in dotCMS 5.1.0: 17e924e

2. When moving folders around in the Reorder window, the following JavaScript error is being logged to the browser's console dozens of times per second:

Uncaught InternalError: too much recursion

And the UI will not let you make any other change anymore. You have to close the Reorder window and open it up again.

3. Moving navigation items around that are further down the list is presenting problems because the placeholder is not being recognized, i.e., the drag-and-drop is not showing up. This means that navigation lists with many items can only be re-ordered partially.

To Reproduce
For concrete examples and data source, please ask me.

Expected behavior
The Reorder Button should work correctly the same way it does in previous dotCMS versions.

[jcastro-dotcms]

The Velocity code that must be used to render the Reorder Buttons is the following:

## ADD REORDER MENU BUTTON
#if ($EDIT_MODE && $PUBLISH_HTMLPAGE_PERMISSION)
   <div class="reorder-menu">
       #set($_formId="dot_form_menu_$date.date.time")
       #set ($folder = $folderAPI.findCurrentFolder($startFromPath, $host))
       #set ($menuId = $folder.inode)       
       #orderMenu()
   </div>
#end

The example code in our official documentation: https://dotcms.com/docs/latest/navtool-viewtool#ExampleAddReorderButton seems to be outdated, or not working anymore.

[dsilvam]

This PR #20716 fixes sending the proper start level for the reordering , solving point 1.

For point 2, there are two options: downgrading prototype from 1.7.3 to 1.5.0, which is the version that comes with the scriptaculous we use; or update scriptaculous to version 1.9.0 which works with prototype 1.7. That solves point 2, but need to be careful if this breaks something else. However, even after fixing the infinite recursion issue the drag and drop is not properly working, not letting the drop to happen. This might have happened after converting the reorder to a popup here 17e924e.

[wezell]

Reordering works the first time and not the second.

[nollymar]

Internal QA: The issues commented on the description are fixed, however, the reorder changes are not being persisted:

Screen.Recording.2021-08-05.at.11.38.30.AM.mov

[alfredo-dotcms]

After some testing, seems like the error happens on the About page, for some reason an error is being thrown on the BE.

If you do this on other page with a smaller menu, it works!
https://monosnap.com/file/9OuT43vbPccXTDwPUdGInGX5I2PSZQ

the reordering on the FE is working
https://monosnap.com/file/V54JmqgsdNH1oIrMjWaWWBtWc5JWkd

[alfredo-dotcms]

Error Log

https://gist.githubusercontent.com/alfredo-dotcms/d2b004d893442ac6a5fec8906df86d09/raw/07d06870b587e8a71491586a0a92d3c718d76299/gistfile1.txt

[dsilvam]

Passed Internal QA.
To test against given dataset, which has assets with old auto-increment ids, is needed to set dotshortyapi_use_legacy=true in dotmarketing props

[bryanboza]

Fixed, tested on release-21.09 // Postgres // FF

[dsilvam]

@bryanboza I suggest testing this one with a custom dataset we have. Please contact me or @jcastro-dotcms