Need help on where to display an Add User section in relation to a Users table
There are a few approaches being considered (open to other ideas too). In general, I think I want to avoid the approach of using a modal/dialog with grayed out background, as the solution we go with may be used in many places throughout the app, and so don't want to overuse modals (too disruptive to user flow.
Approaches we're looking at:
- Display the Add User section in a slide-over panel which will be displayed on top of the Users table (ag-grid based).
See rough GIF example:
This approach could be awkward as the height of the table and the Add User section would probably need to match.
Display the Add User section below the table (advantage being there would be more space available and we don't obscure the table when the section is being displayed).
Display a placeholder/temporary row in the table (top row), where the user can input the User fields and then hit save (which would be located in the far-right column).
For #3, a disadvantage could be that, for instance, there's less room to display validation messages to the user, such as "Name is not valid (must not contain ?:{}_+)". Although perhaps we could show such a validation message in a popover.
However, a potential advantage for #3 is that ag-grid supports inline editing, so once the new User row is added, we could easily allow the user to edit the User row fields inline and again hit save/update button in far-right column.