yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-12 08:52:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): supported to see all personas in the user profile dropdown (#13915)

Browse Source 
* supported to see all persona in user profile dropdown

* fix dropdown closing on more click for persona

* minor changes
This commit is contained in:
Ashish Gupta 2023-11-09 17:46:27 +05:30 committed by GitHub
parent 149be22dcd
commit 5f9f7ae06e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/components/AppBar/app-bar.style.less
View File

@ -11,7 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
.profile-dropdown { .profile-dropdown {
a.more-teams-pill { .more-teams-pill {
background: #dde3ea; background: #dde3ea;
border: 1px solid #dde3ea; border: 1px solid #dde3ea;
border-radius: 4px; border-radius: 4px;

44
openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.component.tsx
View File

@ -54,7 +54,7 @@ const renderLimitedListMenuItem = ({
sizeLimit = 2, sizeLimit = 2,
readMoreKey, readMoreKey,
}: ListMenuItemProps) => { }: ListMenuItemProps) => {
const remaningCount = const remainingCount =
listItems.length ?? 0 > sizeLimit listItems.length ?? 0 > sizeLimit
? (listItems.length ?? sizeLimit) - sizeLimit ? (listItems.length ?? sizeLimit) - sizeLimit
: 0; : 0;
@ -69,9 +69,9 @@ const renderLimitedListMenuItem = ({
key: item.id, key: item.id,
})) ?? []), })) ?? []),
...[ ...[
remaningCount > 0 remainingCount > 0
? { ? {
label: readMoreLabelRenderer(remaningCount), label: readMoreLabelRenderer(remainingCount),
key: readMoreKey ?? 'more-item', key: readMoreKey ?? 'more-item',
} }
: null, : null,
@ -89,6 +89,7 @@ export const UserProfileIcon = () => {
() => currentUser?.profile?.images?.image512, () => currentUser?.profile?.images?.image512,
[currentUser] [currentUser]
); );
const [showAllPersona, setShowAllPersona] = useState<boolean>(false);
const handleOnImageError = useCallback(() => { const handleOnImageError = useCallback(() => {
setIsImgUrlValid(false); setIsImgUrlValid(false);
@ -151,13 +152,23 @@ export const UserProfileIcon = () => {
); );
const readMoreTeamRenderer = useCallback( const readMoreTeamRenderer = useCallback(
(count) => ( (count: number, isPersona?: boolean) =>
<Link isPersona ? (
className="more-teams-pill" <Typography.Text
to={getUserPath(currentUser?.name as string)}> className="more-teams-pill"
{count} {t('label.more')} onClick={(e) => {
</Link> e.stopPropagation();
), setShowAllPersona(true);
}}>
{count} {t('label.more')}
</Typography.Text>
) : (
<Link
className="more-teams-pill"
to={getUserPath(currentUser?.name as string)}>
{count} {t('label.more')}
</Link>
),
[currentUser] [currentUser]
); );
@ -226,8 +237,9 @@ export const UserProfileIcon = () => {
children: renderLimitedListMenuItem({ children: renderLimitedListMenuItem({
listItems: personas ?? [], listItems: personas ?? [],
readMoreKey: 'more-persona', readMoreKey: 'more-persona',
sizeLimit: showAllPersona ? personas?.length : 2,
labelRenderer: personaLabelRenderer, labelRenderer: personaLabelRenderer,
readMoreLabelRenderer: readMoreTeamRenderer, readMoreLabelRenderer: (count) => readMoreTeamRenderer(count, true),
}), }),
label: ( label: (
<span className="text-grey-muted text-xs"> <span className="text-grey-muted text-xs">
@ -271,7 +283,15 @@ export const UserProfileIcon = () => {
type: 'group', type: 'group',
}, },
], ],
[currentUser, userName, selectedPersona, teams, roles, personas] [
currentUser,
userName,
selectedPersona,
teams,
roles,
personas,
showAllPersona,
]
); );
useEffect(() => { useEffect(() => {