Fix: Display persisted draft agreement

[mmioana]

Description

• This PR addresses the fact that the draft agreement is not always showing up upon saving due to being fetched on the Agreements page directly from local storage. However, given the component might not re-render, the draft agreement wouldn't always be rendered. The solution was to make use of Redux store which already saves this value and re-populates the store with the values persisted in the local storage on page refresh.
• Also there was a validation error regarding the missing reputation when creating a new colony. Given the Save draft is of type=button and not type=submit, the error message was not showing up, but neither was the draft saved. In this case, the solution was to wrap the click handler with handleSubmit from the form context.

Note

In the initial issue it was thought it has to do with the Reputation extension version, but the draft was saved in the local storage and only a few attempts it did appear on the Agreements page.
Check recording here

Important

If you do however want to test this with a lower version of the Reputation extension (eg. v11), give me a sign and I'll provide more guidance until I'll update the Notion page - bit shoutout to @area on this 🙏 and to @iamsamgibbs for guiding me to the Redux store

Testing

TODO: Let's test we can actually save a draft agreement and it will appear in the Agreements page without issues.

• Step 1. Make sure to start a clean env
• Step 2. Install the Reputation extension
• Step 3. Now go to http://localhost:9091/planex/agreements
• Step 4. Create a few agreements
  
• Step 5. Now let us create another agreement, but instead of Create agreement, click Save draft.

Screen.Recording.2025-01-20.at.21.47.20.mov

It should be rendered and you can see the entry in the local storage. Try to edit it, close it, delete it, create another one etc.

• Step 6. Now for the other issue I have discovered, please generate a new colony url
  node scripts/create-colony-url.js
• Step 7. Go through the entire colony creation flow.
• Step 8. Install the Reputation extension
• Step 9. Now please click on the Create a new agreement from the side navigation (alternatively you can go to the Agrements page as before, it doesn't really matter)
• Step 10. Fill in all the missing fields and click Save draft.
• Step 11. The No reputation warning should be shown

Screen.Recording.2025-01-20.at.21.53.35.mov

If you have more testing ideas in mind, do not hesitate to try them out

Diffs

Changes 🏗

• Replace getDraftDecisionFromLocalStorage with useSelector(getDraftDecisionFromStore(...)) for the draftAgreement
• Wrap the onClick handler with handleSubmit for SaveDraftButton component

Resolves #3826

[rdig]

Very nice work! Everything works as expected! 🥇

Saving to draft and updating works

Screencast.from.2025-01-23.20-13-48.mp4

As well as the reputation warning when there's no reputation in a colony

Screencast.from.2025-01-23.20-15-25.mp4

[iamsamgibbs]

Thanks for reworking this @mmioana ! It's working nicely!

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

I wasn't able to either recreate the "no reputation" warning or save a draft in a new colony though. (I get no console errors when clicking save)

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

Personally I think you should still be allowed to save a draft even if there is no reputation. I could imagine a scenario where you spent ages writing out a draft only for it to not save when you could simply retry in a few days time if it would let you save.