Update all components that shows a message when not configured properly

[hlayisanimazuze]

If the below components are not configured correctly, instead on displaying the current message as if, highlight the component in error and display the error/alert message on a tooltip.

• Button Group
• Text: When using the content property {{firstName}}
• Image Annotation
• Markdown
• Reference List Status
• Status Tag
• Entity Picker
• DataTable (full)
• DataTable Context
• DataTable
• Data List
• Table Pager
• Quick Search
• Table view selector
• DataSource
• Drawer

URL with the above components: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=ccc17a1c-964b-4307-b792-8a2b847e861d

[AlexanderSlavchovUX]

Hi @nthangeniphumudzo please see some mockups below.

I have used a similar look and feel to the existing components but shrunk them down to a smaller size. The idea here is that the blue indicates something with a friendly tone that a component needs configuration and in yellow when there is a configuration but with an error such as an invalid value.

When hovering over the component it immediately shows a tooltip to give some further explanation on configuration or errors.

I have also omitted the 'X' button to dismiss them as I don't see how we can remove these error messages without creating an issue where there is an invisible component.

Lastly, I have also included a Figma prototype so you can use it to get a feel for how it works. Please open the link and hover over different components in the newly created area.

https://www.figma.com/proto/OPgxeZhTU3hYIJfe03rLcm/Github-Issues?node-id=23-549&t=2OYTUGt10TxbCMYa-1