Fix: Open empty action sidebar on back navigation

[mmioana]

Fix: Open empty action sidebar on back navigation

Description

• The original issue stated the Redo action opens an empty action sidebar, even though this is no longer reproducible.

Screen.Recording.2025-01-23.at.11.50.20.mov

• However there was an issue when opening a completed action, followed by the action sidebar back button and then using the browser back button a couple of time that would trigger the empty action sidebar being shown.

Screen.Recording.2025-01-23.at.12.01.24.mov

This was mainly caused by the fact that on back navigation, if the action sidebar was opened, we didn't react to the absence of a txHash and actionType. So my solution involved listening to location key changes (the key should update once the navigation history updates) and if there is no txHash and actionType present, to close the action sidebar.
Additionally, we were mutating the history state needlessly by always performing a navigation without the txHash upon closing the action sidebar, even if there was no txHash set, so I have fixed that.

Important

If you do find a better solution or approach, please do reach out

On this branch

Screen.Recording.2025-01-23.at.13.53.07.mov

Testing

TODO: Let's test the browser back navigation no longer opens an empty action sidebar.

• Step 1. Go to http://localhost:9091/planex
• Step 2. Open a completed action. Click on the action sidebar back button
  
• Step 3. Now click a couple of times on the browser back button
• Step 4. Check the empty action sidebar is not present
• Step 5. Try redoing an action
• Step 6. Click again on the browser back button
• Step 7. Create a new action and complete it (eg. Mint tokens)
• Step 8. Click again on the browser back button
• Step 9. Now let's create a new colony by running the create-colony-url script. Complete the colony creation form.
• Step 10. On the dashboard, go to the Recent Activity table
  
• Step 11. Click on the Create new action button. Check it still opens the empty action sidebar.
• Step 12. Click on the back navigation. It should redirect to the colony creation form

Please try also whatever other scenario comes to mind.

Diffs

New stuff ✨

• useLocationKeyChange hook

Changes 🏗

• Use the actionSidebarInitialValues?.[ACTION_TYPE_FIELD_NAME] in the ColonyLayout
• Get the current txHash and perform the navigation on action sidebar close only if it exists in ActionSidebarContextProvider

Resolves #3890

[iamsamgibbs]

Very nice, this is working great. I like the solution.

Testing it out, everything works as I assume it would:

Screen.Recording.2025-01-24.at.10.47.36.mov

Testing the colony creation flow:

Screen.Recording.2025-01-24.at.10.48.59.mov

[rdig]

All good here. Nice solution!

Screencast.from.2025-01-24.14-09-02.mp4

I did however find that on the Advance Payments action we don't have a back button. Is that expected, or just an oversight ?

[Nortsova]

Awesome solution :) I am also faced with random Empty Sidebar sometimes but wasn't able to understand a pattern for it 😄

Thank you ✨ It works great

[Nortsova]

One small comment here: we can rename transactionId to have "param" in its naming for more clarity at 70 line 🙌 But it is not necessary if you don't feel doing it 🫶

Suggested change

	const transactionId = searchParams?.get(TX_SEARCH_PARAM);
	const transactionIdParam = searchParams?.get(TX_SEARCH_PARAM);