feat(Web UI): add User Details view#60586
Conversation
alexhemard
changed the title
alexhemard
changed the title
alexhemard
force-pushed
the
alexhemard/user-access-lists
branch
4 times, most recently
from
1d6ac25 to
6a3a12c
Compare
alexhemard
force-pushed
the
alexhemard/user-details
branch
13 times, most recently
from
ef88c8b to
7446085
Compare
alexhemard
changed the title
alexhemard
force-pushed
the
alexhemard/user-details
branch
2 times, most recently
from
8b73fc6 to
70ddd69
Compare
alexhemard
force-pushed
the
alexhemard/user-details
branch
6 times, most recently
from
a645963 to
b52b29a
Compare
alexhemard
force-pushed
the
alexhemard/user-details
branch
3 times, most recently
from
45844a0 to
1c4eb58
Compare
alexhemard
force-pushed
the
alexhemard/user-details
branch
2 times, most recently
from
fc2750f to
df611f1
Compare
alexhemard
force-pushed
the
alexhemard/user-details
branch
from
df611f1 to
668cc5d
Compare
| // this effect will open the user details panel if the selected user is found | ||
| // in the pagination results, otherwise it will close the panel and clear the | ||
| // user URL param | ||
| useEffect(() => { | ||
| if (params.user && user) { |
There was a problem hiding this comment.
By adding the selected item to the URL, I'm assuming you're enabling deeplinking/bookmarking - otherwise you'd have just used react state.
When deeplinking, the selected item might not be in the first page and will be treated like it doesn't exist. Plus, this isn't obvious to the user went it happens.
It would be better to have the side panel fetch the user itself. That way it's self-sufficient and doesn't rely on the item being in the list.
I think it's ok to show an item's detail without it necessarily also being visible in the list. That said, if you added the next page param to the URL, then the selected item is likely (bot not guaranteed) to be on the list.
| const onEdit = | ||
| usersAcl.edit && !botOrExternal ? () => onStartEdit(user) : undefined; |
There was a problem hiding this comment.
The edit dialog in web/packages/teleport/src/Bots/Edit/EditDialog.tsx can be easily reused to allow editing a bot. It fetches it's own data.
| <UserDetailsTitle | ||
| user={selectedUser} | ||
| onEdit={() => onStartEdit(selectedUser)} | ||
| onReset={() => onStartReset(selectedUser)} | ||
| onDelete={() => onStartDelete(selectedUser)} | ||
| canEdit={usersAcl.edit} | ||
| canDelete={usersAcl.remove} | ||
| panelWidth={detailsPanelWidth} | ||
| /> |
There was a problem hiding this comment.
In addition to the lock status, it feels like a missed opportunity not to allow locking and unlocking for users (and bots).
You can use the bot details page (web/packages/teleport/src/Bots/Details/BotDetails.tsx) as a reference implementation.
| ); | ||
| } | ||
|
|
||
| function renderAuthType(user: User): AuthTypeInfo { |
There was a problem hiding this comment.
It was a bit confusing to find a "render" function that didn't actually render a React node, so consider renaming it. How about toAuthTypeInfo?
nicholasmarais1158
left a comment
nicholasmarais1158
left a comment
There was a problem hiding this comment.
Happy to get this in without my suggested additions (bot edit, locks, deeplinking, etc).
* feat: add User Details view * cleanup
* feat: add User Details view * cleanup
|
@alexhemard @r0mant do you think we can call #36592 complete now that this is merged? (Also don't forget to close #60398) |
5 participants
Description
Issue: #60398
ePR: https://github.com/gravitational/teleport.e/pull/7469Adds a User Details view to the Users page.
Clicking on a user will show the user details side panel
Includes
ListUsersAccessListResponseprotochangelog: Added User Details view to Web UI