fix: format-create-segment-errors-from-payload

[Zaimwa9]

Thanks for submitting a PR! Please check the boxes below:

• I have added information to docs/ if required so people know about the feature!
• I have filled in the "Changes" section below?
• I have filled in the "How did you test this code" section below?
• I have used a Conventional Commit title for this Pull Request

Changes

Issue: #5071
Fixes #5071

Please describe.
The payload was passed as of from the request response.

• Added typing of error
• Implemented a formatError method in CreateSegment
• Prefixed the error with value/property
• If single error, only returns a string (to keep Rules: XXXXX), if multiple errors, returns an array that is natively handled by the error component (but displays them as indexed list)

⚠️ This is more a hotfix than a permanent solution. The payload seems to be redundant with rules, cf type being, could be fixed in the backend:

type CreateSegmentError = {
  status: number,
  data: {
    rules: [{
      rules: Array<{
        conditions: SegmentConditionsError[]
      }>
    }]
  }
}

Also please let me know if you have a better solution to handle multiple errors, the best would be something like the following but maybe you have other plans/prio:

Rule 1:
 - value XXX
Rule 4: 
 - property: YYY
 - value: XXX

How did you test this code?

Single error case

Multiple error case (to be improved)

Please describe.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview		Feb 12, 2025 2:48pm

[vercel]

@Zaimwa9 is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Uffizzi Ephemeral Environment deployment-60728

☁️ https://app.uffizzi.com/github.com/Flagsmith/flagsmith/pull/5082

📄 View Application Logs etc.

What is Uffizzi? Learn more!

[kyle-ssg]

Hmm, if we're receiving the errors in the same order as the current rules, I wonder if it's better to highlight the inputs with a tooltip of the error and have a generic error underneath.

If this is not feasible we should at least indicate which rule it is

[kyle-ssg]

It looks like we'd be able to infer this from the api, non-error conditions seem to just have {}

[Zaimwa9]

@kyle-ssg, wdyt ?

[tiagoapolo]

That way the UI looks a bit more lean o but IMO having the error message next to the input is more direct for the user to validate what is wrong and fix it. like this

PS.: That's just a mockup so consider that the input field should be highlighted when there's an error

[Zaimwa9]

Alright, I have limited access to my computer for the next weeks, i'll rework it this way when back