feat: Improves segment rule value validation and feedback

[tiagoapolo]

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

Ref: #3920
This pull request includes changes to the Tooltip component and the Rule component in the frontend. The Tooltip component has been enhanced with additional properties, while the Rule component now utilizes a new RuleInputValue component to handle long text editing in a new modal and validates leading and trailing whitespaces

1. Only whitespaces check

2. Trailing whitespace check

4. Leading whitespace check

5. Trailing and Leading whitespace check

6. Long text editing

(DARK MODE)

(LIGHT MODE)

How did you test this code?

Manually tested

1. Create/Edit Segment
2. Add rules
3. change rule value

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2025 5:47pm
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2025 5:47pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 15, 2025 5:47pm

[github-actions]

Docker builds report

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-4975	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-4975	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api:pr-4975	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith:pr-4975	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-4975	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-4975	Finished ✅	Results ✅

[github-actions]

Uffizzi Preview deployment-59594 was deleted.

[matthewelwell]

This is definitely an improvement, and it works for some use cases. But there are some use cases it doesn't handle very well, e.g. the following:

I guess, if we want to continue with this approach, we can try to add an ellipsis after a certain number of characters or lines?

But in general, I think the above use case is one that we really do want to try and solve for (long lists of e.g. uuids). the only way I can really think of doing it, is having some kind of modal overlay for editing the value, but I know that can be tricky with the UI architecture as it is currently. Perhaps let's discuss with @kyle-ssg when he's back tomorrow.

[matthewelwell]

This is great! I have a feeling this is going to be super helpful for a lot of our customers. It also allows us to add more validation / code highlighting options in the future.

One minor point, is that I'd prefer the icon to look something slightly more like a traditional expand icon (the one in the current implementation looks more like a scroll icon). Something like this would be better, if we can make it work.