diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.m.css index 94fd007403..f96a1e3e79 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.m.css @@ -6,7 +6,38 @@ * you may not use this file except in compliance with the License. */ -.staticImage { +.hasMoreIndicator { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 50%; + background-color: var(--theme-primary); + color: var(--theme-on-primary); + font-size: 12px; + font-weight: 700; + + &:hover { + opacity: 0.8; + } +} + +.staticImage, +.hasMoreIndicator { width: 24px; height: 24px; } + +.menu { + flex-direction: row !important; +} + +.menuItem { + cursor: auto !important; +} + +.menuButton { + padding: 0; + background: transparent; + outline: none; +} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.tsx index f5fcfde8e0..0bc6731a17 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserCredentialsList.tsx @@ -7,14 +7,18 @@ */ import { observer } from 'mobx-react-lite'; import { Fragment } from 'react'; +import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit'; +import styled from 'reshadow'; import { AUTH_PROVIDER_LOCAL_ID } from '@cloudbeaver/core-authentication'; -import { PlaceholderComponent, s, StaticImage, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { BASE_DROPDOWN_STYLES, PlaceholderComponent, s, StaticImage, useS, useTranslate } from '@cloudbeaver/core-blocks'; import type { ObjectOrigin } from '@cloudbeaver/core-sdk'; import type { IUserDetailsInfoProps } from '../UsersAdministrationService'; import style from './UserCredentialsList.m.css'; +const MAX_VISIBLE_CREDENTIALS = 3; + interface IUserCredentialsProps { origin: ObjectOrigin; className?: string; @@ -32,11 +36,43 @@ export const UserCredentials = observer(function UserCred }); export const UserCredentialsList: PlaceholderComponent = observer(function UserCredentialsList({ user }) { - return ( + const styles = useS(style); + const translate = useTranslate(); + const menu = useMenuState({ + placement: 'top', + gutter: 8, + }); + + const visibleCredentials = user.origins.slice(0, MAX_VISIBLE_CREDENTIALS); + + return styled(BASE_DROPDOWN_STYLES)( - {user.origins.map(origin => ( - + {visibleCredentials.map(origin => ( + ))} - + + {user.origins.length > MAX_VISIBLE_CREDENTIALS && ( + <> + +
+ +{user.origins.length - MAX_VISIBLE_CREDENTIALS} +
+
+ + + {user.origins.slice(MAX_VISIBLE_CREDENTIALS).map(origin => { + const isLocal = origin.type === AUTH_PROVIDER_LOCAL_ID; + const title = isLocal ? translate('authentication_administration_user_local') : origin.displayName; + + return ( + + + + ); + })} + + + )} + , ); });