Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UsersProfilePopover] Fix email sometimes is not visible #184318

Merged
merged 10 commits into from
Jun 5, 2024
Merged

[UsersProfilePopover] Fix email sometimes is not visible #184318

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
639d5b6
wip
Dosant May 27, 2024
80341d8
more fixes
Dosant May 28, 2024
aeaaf91
Merge branch 'main' of github.com:elastic/kibana into d/2024-05-27-pr…
Dosant May 28, 2024
008ed6c
wrap instead of truncate
Dosant May 28, 2024
c4544d4
fix test
Dosant May 28, 2024
ca29d0b
Merge branch 'main' into d/2024-05-27-profile-email
kibanamachine Jun 3, 2024
03531ec
Merge branch 'main' of github.com:elastic/kibana into d/2024-05-27-pr…
Dosant Jun 4, 2024
83c1dd1
reduce cases assignees width 520 -> 400
Dosant Jun 4, 2024
fa7e47d
Merge branch 'main' of github.com:elastic/kibana into d/2024-05-27-pr…
Dosant Jun 5, 2024
3bace9b
review improvements
Dosant Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export const UserFilterPanel: FC<{}> = () => {
},
onSearchChange: setSearchTerm,
}}
panelProps={{ css: { minWidth: euiTheme.base * 18 } }}
panelProps={{ css: { minWidth: euiTheme.base * 22 } }}
/>
</>
);
Expand Down
41 changes: 20 additions & 21 deletions packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,40 +326,31 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
id: searchInputId,
}}
isPreFiltered
listProps={{ onFocusBadge: false }}
listProps={{ onFocusBadge: false, rowHeight: 46 }}
loadingMessage={loadingMessage}
noMatchesMessage={noMatchesMessage}
emptyMessage={emptyMessage}
errorMessage={errorMessage}
renderOption={(option, searchValue) => {
if (option.user) {
const displayName = getUserDisplayName(option.user);
return (
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
responsive={false}
>
<EuiFlexItem css={{ maxWidth: '100%' }}>
<EuiHighlight className="eui-textTruncate" search={searchValue}>
{option.label}
</EuiHighlight>
</EuiFlexItem>
{option.user.email && option.user.email !== option.label ? (
<EuiFlexItem grow={false} css={{ minWidth: 0 }}>
<EuiTextColor
color={option.disabled ? 'disabled' : 'subdued'}
className="eui-textTruncate"
>
<>
<div className="eui-textTruncate">
<EuiHighlight search={searchValue}>{displayName}</EuiHighlight>
elena-shostak marked this conversation as resolved.
Show resolved Hide resolved
</div>
{option.user.email && option.user.email !== displayName ? (
<div className="eui-textTruncate" css={{ fontSize: '0.8em', lineHeight: 1.2 }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

may we just use EuiText component here? with color and size options

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree, looks better 👍

<EuiTextColor color={option.disabled ? 'disabled' : 'subdued'}>
{searchValue ? (
<EuiHighlight search={searchValue}>{option.user.email}</EuiHighlight>
) : (
option.user.email
)}
</EuiTextColor>
</EuiFlexItem>
</div>
) : undefined}
</EuiFlexGroup>
</>
);
}
return <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>;
Expand Down Expand Up @@ -451,7 +442,7 @@ function toSelectableOption(
if (userProfile) {
return {
key: userProfile.uid,
label: getUserDisplayName(userProfile.user),
label: getUserDisplayLabel(userProfile.user),
data: userProfile,
'data-test-subj': `userProfileSelectableOption-${userProfile.user.username}`,
};
Expand All @@ -474,3 +465,11 @@ function isMatchingOption<Option extends UserProfileWithAvatar | null>(
) {
return option.key === (profile ? profile.uid : NULL_OPTION_KEY);
}

function getUserDisplayLabel(user: UserProfileWithAvatar['user']): string {
const displayName = getUserDisplayName(user);
if (user.email && user.email !== displayName) {
return `${displayName} (${user.email})`;
}
return displayName;
}
3 changes: 2 additions & 1 deletion packages/kbn-user-profile-components/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"outDir": "target/types",
"types": [
"jest",
"node"
"node",
"@emotion/react/types/css-prop",
]
},
"include": [
Expand Down