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

Update "used by" display and tooltip styling #26262

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+65 −27
Open

Update "used by" display and tooltip styling #26262

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
accaa4d
update device users tooltip
sgress454 Feb 11, 2025
9867112
add changelog
sgress454 Feb 11, 2025
11791c5
only truncate w/ multiple
sgress454 Feb 11, 2025
5a1dade
update classes
sgress454 Feb 12, 2025
da1b9a8
update multiple
sgress454 Feb 12, 2025
047fd8e
truncated tooltip
sgress454 Feb 18, 2025
563c375
fix classes
sgress454 Feb 18, 2025
217c1da
Merge branch 'main' into sgress454/25283-fix-user-tooltip
sgress454 Feb 18, 2025
c344dd4
simplify styling
sgress454 Feb 18, 2025
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
1 change: 1 addition & 0 deletions changes/25283-update-device-users-tooltip
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated the styling of the "Used by" line on host details page to be easier to read and include more data in the tooltip
6 changes: 3 additions & 3 deletions frontend/pages/hosts/details/cards/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const getDeviceUserTipContent = (deviceMapping: IDeviceUser[]) => {
const format = (d: IDeviceUser) =>
d.source ? `${d.email} (${d.source})` : d.email;

return deviceMapping.slice(1).map((d) => (
return deviceMapping.map((d) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Show all emails in the tooltip, since the first one may be truncated.

<span key={format(d)}>
{format(d)}
<br />
Expand Down Expand Up @@ -130,10 +130,10 @@ const About = ({
displayPrimaryUser = email;
} else {
displayPrimaryUser = (
<>
<span className="device-mapping__primary-user">
{email}{" "}
<span className="device-mapping__source">{`(${source})`}</span>
</>
</span>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

New class to allow for truncating the email w/ ellipses.

);
}
}
Expand Down
23 changes: 14 additions & 9 deletions frontend/pages/hosts/details/cards/About/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,20 @@
.component__tooltip-wrapper__element {
max-width: 350px;
}

&__data {
.device-mapping {
&__source {
color: $ui-fleet-black-75;
}
&__more {
color: $ui-fleet-black-50;
Comment on lines -22 to -26
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These were not being used because __data isn't a thing in this component as far as I can see. Moved them out from under __data and now the "More" link is grey as intended.

}

.device-mapping {
&__source {
color: $ui-fleet-black-75;
}
&__more {
color: $ui-fleet-black-50;
}
&__primary-user {
max-width: 270px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This allows for up to "+ 999 more" without cutting of the "more" text.

text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: text-bottom;
}
}

Expand Down
Loading