fix: create errors orders and fix translations

[Nortsova]

Description

• Validation warnings should appear in the same order as the fields on the form (e.g., Title, From, Recipient, Amount, Decision Method) to ensure consistency and clarity.
• Each warning message should begin with a capital letter for consistency and readability.
• The pointer cursor should appear when hovering over elements.

Testing

Step 1. Install voting reputation
Step 2. Install staged payments
Step 3. Open all action forms one by one and submit it to trigger validation
Step 4. Ensure that all form errors are consistent and shows in the same order as inputs

Step 5. Test that cursor pointer appears over the input labels:

Diffs

New stuff ✨

• InputsOrderContext to track in what order input was rendered

Changes 🏗

• Decision method field changed from defined() to required() to implement custom translations

Resolves #3737
Resolves #3743

[mmioana]

Really nice work @Nortsova 🥇 Thanks for fixing up the missing translations, it was something that was bugging me too for some time 😅

From what I've tested all error messages are now showing up in the right order thanks to your solution of using the context for registering the inputs order 🌟

Spam of screenshots on the way

And the input field descriptions also had a tooltip

Screen.Recording.2025-01-30.at.10.10.34.mov

Left a few refactoring comments, but nothing to block the merging of this PR, amazing work! 💯

[mmioana]

Can we rename this to errors.recipient.requiredInPayment for more clarity?

[mmioana]

This is a really nice solution! 🌟

[mmioana]

As an improvement, we could create a Map for the inputsOrder to store the fieldName and the current index. This will help reduce repeated lookups through the inputsOrder to find the index of a given field. In the sort function, if the fieldName doesn't exist in the map, we can fallback to Infinity and should still get the expected result.

  const orderMap = new Map<string, number>(
    inputsOrder.map((fieldName, index) => [fieldName, index]),
  );

  const sortedFlatFormErrors = flatFormErrors.sort((a, b) => {
    const aIndex = orderMap.get(a.key.toString()) ?? Infinity;
    const bIndex = orderMap.get(b.key.toString()) ?? Infinity;

    return aIndex - bIndex;
  });

This is more of a suggestion, so let me know what you think about it @Nortsova 🙌

[Nortsova]

good point! thank you :)

[iamsamgibbs]

Nice job! I like this solution! Approving as it does resolve the original issue, I've got a few observations I'll leave but they're not necessarily directly related so feel free to decide if you think they are worth tackling here.

The biggest simple change that stood out to me is that all the fields have popovers now except for "Action type" and the "Token" field on the unlock token action. It would be nice to add those just for the sake of consistency.

I was able to get some wrong invalid errors showing. This only happens if you have the form open on "Staged payments" then switch to "Create agreement" and submit the form. If you directly open "Create agreement" via the sidebar, or select it after another action it isn't an issue.

Also on the create agreement form, "description" is a required field but the placeholder does not go red when submitting.

And lastly there is a little inconsistency with the "Member" field on the "Manage reputation" form. The field is disabled so when the form is submitted, the label stays greyed out whilst the select changes to red. I think the intended behaviour here is for the select to also stayed greyed out whilst it is disabled.

Nice job resolving the error order issue though, not a straightforward issue to solve!

[rdig]

Very nice work cleaning this up. I've tested all that I could, with most of them working. The only two that I had problems with are Split Payments and Manage Verified Members (details below)

Working:

1. Simple Payment
2. Advanced Payments
3. Staged Payments
4. Transfer funds
5. Mint Tokens
6. Unlock Tokens
7. Manage Tokens
8. Create new domain
9. Edit an existing domain
10. Manage reputation
11. Manage permissions
12. Arbitrary TX
13. Edit Colony
14. Create agreement

Not working

1. Split payment has recepient before percent, and doesn't have the individual amount (although I'm not sure the last one is required)
2. Manage verified memebers has one extra entry (I think it's for the same thing -- selecting the member)

[Nortsova]

Thanks, @rdig , you were right; split payments were working incorrectly; I added InputsOrderCellWrapper to solve it.

Regarding Manage verified members it is a bit complecated, it actually was a correct behaviour, because after user select method add or remove members table will appear, so last error was related to this hidden table.
But it is not understandable for user, so I hided this error untill Method selected 🙌

[rdig]

All good now. Nicely done!

[iamsamgibbs]

Nice fixes!

Recipient and percentage are in the correct order:

No "Select a member" error when "Add"/"Remove" has not yet been selected:

And then does show once selected and resubmitted:

[mmioana]

Hey @Nortsova really amazing efforts on this issue 🙌

I've retested the scenarios that were previously mentioned and it seems they behave properly 💯

However @Nortsova I did encounter an issue when switching from Staged payments to Manage verified members, when the createdIn field appears as required and you can no longer submit the form 😢

Screen.Recording.2025-02-04.at.18.43.36.mov

Screen.Recording.2025-02-04.at.18.46.30.mov