From accaa4dc8c908f7076607d891e3c4fb23c3678d9 Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Tue, 11 Feb 2025 10:58:15 -0600 Subject: [PATCH 1/8] update device users tooltip --- .../pages/hosts/details/cards/About/About.tsx | 6 ++--- .../hosts/details/cards/About/_styles.scss | 23 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 67a54f977705..5586372bf86c 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -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) => ( {format(d)}
@@ -130,10 +130,10 @@ const About = ({ displayPrimaryUser = email; } else { displayPrimaryUser = ( - <> + {email}{" "} {`(${source})`} - + ); } } diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index abff928581b7..d26affc9baa8 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -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; - } + + .device-mapping { + &__source { + color: $ui-fleet-black-75; + } + &__more { + color: $ui-fleet-black-50; + } + &__primary-user { + max-width: 270px; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + vertical-align: text-bottom; } } From 98671124a7848fe8ac02d9e1a9ed64d0d4ca4b49 Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Tue, 11 Feb 2025 11:00:10 -0600 Subject: [PATCH 2/8] add changelog --- changes/25283-update-device-users-tooltip | 1 + 1 file changed, 1 insertion(+) create mode 100644 changes/25283-update-device-users-tooltip diff --git a/changes/25283-update-device-users-tooltip b/changes/25283-update-device-users-tooltip new file mode 100644 index 000000000000..13af835f1e0b --- /dev/null +++ b/changes/25283-update-device-users-tooltip @@ -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 From 11791c5b1c4035622849bd996f981ab4edf1de4f Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Tue, 11 Feb 2025 11:21:57 -0600 Subject: [PATCH 3/8] only truncate w/ multiple --- frontend/pages/hosts/details/cards/About/About.tsx | 6 +++++- frontend/pages/hosts/details/cards/About/_styles.scss | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 5586372bf86c..93d76e429599 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -129,8 +129,12 @@ const About = ({ if (!source) { displayPrimaryUser = email; } else { + let className = "device-mapping__primary-user"; + if (newDeviceMapping.length > 1) { + className += " multiple"; + } displayPrimaryUser = ( - + {email}{" "} {`(${source})`} diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index d26affc9baa8..571e3adb4d94 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -25,11 +25,13 @@ color: $ui-fleet-black-50; } &__primary-user { - max-width: 270px; text-overflow: ellipsis; overflow: hidden; display: inline-block; vertical-align: text-bottom; + &.multiple { + max-width: 270px; + } } } From 5a1dade448958188e5a8207e8646b2acf16a9e9d Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Wed, 12 Feb 2025 09:26:20 -0600 Subject: [PATCH 4/8] update classes --- .../pages/hosts/details/cards/About/About.tsx | 17 +++++--- .../hosts/details/cards/About/_styles.scss | 42 ++++++++++--------- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 93d76e429599..48c51733548a 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -16,6 +16,7 @@ import { BATTERY_TOOLTIP, } from "utilities/constants"; import DataSet from "components/DataSet"; +import classnames from "classnames"; const getDeviceUserTipContent = (deviceMapping: IDeviceUser[]) => { if (deviceMapping.length === 0) { @@ -129,14 +130,18 @@ const About = ({ if (!source) { displayPrimaryUser = email; } else { - let className = "device-mapping__primary-user"; - if (newDeviceMapping.length > 1) { - className += " multiple"; - } + const classNames = classnames( + `${baseClass}__device-mapping__primary-user`, + { + [`${baseClass}__multiple`]: newDeviceMapping.length > 1, + } + ); displayPrimaryUser = ( - + {email}{" "} - {`(${source})`} + {`(${source})`} ); } diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index 571e3adb4d94..9292e28943b9 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -1,4 +1,26 @@ .about-card { + + &__device-mapping { + &__source { + color: $ui-fleet-black-75; + } + + &__more { + color: $ui-fleet-black-50; + } + + &__primary-user { + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + vertical-align: text-bottom; + + &.multiple { + max-width: 270px; + } + } + } + // Adjusts for edge cases of extra long MDM server URL and used by email .info-flex { display: flex; @@ -16,25 +38,7 @@ .component__tooltip-wrapper__element { max-width: 350px; } - - .device-mapping { - &__source { - color: $ui-fleet-black-75; - } - &__more { - color: $ui-fleet-black-50; - } - &__primary-user { - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - vertical-align: text-bottom; - &.multiple { - max-width: 270px; - } - } - } - + @media (min-width: $break-md) { max-height: 250px; From da1b9a85be0ec258402d2ae5033a17e48cb91c2f Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Wed, 12 Feb 2025 09:31:28 -0600 Subject: [PATCH 5/8] update multiple --- frontend/pages/hosts/details/cards/About/_styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index 9292e28943b9..e86dbd746876 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -15,12 +15,12 @@ display: inline-block; vertical-align: text-bottom; - &.multiple { + &.about-card__multiple { max-width: 270px; } } } - + // Adjusts for edge cases of extra long MDM server URL and used by email .info-flex { display: flex; From 047fd8e2e54acd15844deec01a371eafb12ca397 Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Tue, 18 Feb 2025 12:04:59 -0600 Subject: [PATCH 6/8] truncated tooltip --- .../pages/hosts/details/cards/About/About.tsx | 25 +++++++++++-------- .../hosts/details/cards/About/_styles.scss | 13 ++++++++-- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 48c51733548a..00d601975f01 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -2,6 +2,7 @@ import React from "react"; import { HumanTimeDiffWithFleetLaunchCutoff } from "components/HumanTimeDiffWithDateTip"; import TooltipWrapper from "components/TooltipWrapper"; +import TooltipTruncatedText from "components/TooltipTruncatedText"; import Card from "components/Card"; import { @@ -25,7 +26,7 @@ const getDeviceUserTipContent = (deviceMapping: IDeviceUser[]) => { const format = (d: IDeviceUser) => d.source ? `${d.email} (${d.source})` : d.email; - return deviceMapping.map((d) => ( + return deviceMapping.slice(1).map((d) => ( {format(d)}
@@ -151,16 +152,20 @@ const About = ({ title="Used by" value={ newDeviceMapping.length > 1 ? ( - - {displayPrimaryUser} - {` +${ - newDeviceMapping.length - 1 - } more`} - +
+ + + + + {` +${ + newDeviceMapping.length - 1 + } more`} + +
) : ( - displayPrimaryUser + ) } /> diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index e86dbd746876..977635d06317 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -1,5 +1,14 @@ .about-card { + .tooltip-truncated-text { + display: inline-block; + } + + // &__multiple { + // display: inline-block; + // width: 270px; + // } + &__device-mapping { &__source { color: $ui-fleet-black-75; @@ -12,11 +21,11 @@ &__primary-user { text-overflow: ellipsis; overflow: hidden; - display: inline-block; + // display: inline-block; vertical-align: text-bottom; &.about-card__multiple { - max-width: 270px; + // max-width: 100%; } } } From 563c3757c705198cb561e0a6fe52428290035d00 Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Tue, 18 Feb 2025 14:44:29 -0600 Subject: [PATCH 7/8] fix classes --- .../pages/hosts/details/cards/About/About.tsx | 10 ++------- .../hosts/details/cards/About/_styles.scss | 21 +++++++++++-------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 00d601975f01..3464be1c854a 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -131,14 +131,8 @@ const About = ({ if (!source) { displayPrimaryUser = email; } else { - const classNames = classnames( - `${baseClass}__device-mapping__primary-user`, - { - [`${baseClass}__multiple`]: newDeviceMapping.length > 1, - } - ); displayPrimaryUser = ( - + {email}{" "} 1 ? (
- + Date: Tue, 18 Feb 2025 15:08:30 -0600 Subject: [PATCH 8/8] simplify styling --- .../pages/hosts/details/cards/About/About.tsx | 32 +++++++++++-------- .../hosts/details/cards/About/_styles.scss | 16 ++++++---- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index 3464be1c854a..96684d246f57 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -145,22 +145,26 @@ const About = ({ 1 ? ( -
- +
+ {newDeviceMapping.length > 1 ? ( + <> + + + + + {` +${ + newDeviceMapping.length - 1 + } more`} + + + ) : ( + - - {` +${ - newDeviceMapping.length - 1 - } more`} - -
- ) : ( - - ) + )} +
} /> ); diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss index 8e6e056aad2f..5e910871f8de 100644 --- a/frontend/pages/hosts/details/cards/About/_styles.scss +++ b/frontend/pages/hosts/details/cards/About/_styles.scss @@ -1,22 +1,24 @@ .about-card { - .tooltip-truncated-text { - display: inline-block; - - } - .truncated-tooltip { .about-card__device-mapping__source { color: inherit; } } + &__used-by { + display: flex; + } + &__multiple { - display: inline-block; max-width: 270px; padding-right: 5px; } - + + &__single { + max-width: 300px; + } + &__device-mapping { &__source { color: $ui-fleet-black-75;