Show script ID/configuration profile UUID on hover in UI (#45787)

- [x] QA'd all new/changed functionality manually

For the following quick win:
- https://github.com/fleetdm/fleet/issues/45771

### Screenshots

<img width="929" height="214" alt="Screenshot 2026-05-19 at 8 59 36 AM"
src="https://github.com/user-attachments/assets/bcdaa9a4-38d6-4e61-82d9-e0b58d2f58b8"
/>

<img width="926" height="249" alt="Screenshot 2026-05-19 at 8 59 25 AM"
src="https://github.com/user-attachments/assets/58727b3e-d85a-4b80-9cd4-edda991c0b70"
/>





<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Hovering over profile names now displays the profile UUID in a tooltip
  * Hovering over script names now displays the script ID in a tooltip

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/45787?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Noah Talerman
2026-07-01 15:21:31 -04:00
committed by GitHub
parent bade1d51fe
commit 8cf4a7c7d3
2 changed files with 20 additions and 4 deletions
@@ -11,6 +11,7 @@ import mdmAPI, { isDDMProfile } from "services/entities/mdm";
import Button from "components/buttons/Button";
import Graphic from "components/Graphic";
import Icon from "components/Icon";
import TooltipWrapper from "components/TooltipWrapper";
import strUtils from "utilities/strings";
import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
@@ -151,7 +152,14 @@ const ProfileListItem = ({
<div className={`${subClass}__main-content`}>
<Graphic name="file-configuration-profile" />
<div className={`${subClass}__info`}>
<span className={`${subClass}__title`}>{name}</span>
<TooltipWrapper
tipContent={`UUID: ${profile.profile_uuid}`}
underline={false}
position="top"
showArrow
>
<span className={`${subClass}__title`}>{name}</span>
</TooltipWrapper>
<div className={`${subClass}__details`}>
<ProfileDetails
platform={platform}
@@ -13,6 +13,7 @@ import { ISupportedGraphicNames } from "components/ListItem/ListItem";
import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
import { HumanTimeDiffWithDateTip } from "components/HumanTimeDiffWithDateTip";
import TooltipTruncatedText from "components/TooltipTruncatedText";
import TooltipWrapper from "components/TooltipWrapper";
const baseClass = "script-list-item";
@@ -141,9 +142,16 @@ const ScriptListItem = ({
className={baseClass}
graphic={graphicName}
title={
<Button variant="link" className={`${baseClass}__title-button`}>
<TooltipTruncatedText value={script.name} fixedPositionStrategy />
</Button>
<TooltipWrapper
tipContent={`ID: ${script.id}`}
underline={false}
position="top"
showArrow
>
<Button variant="link" className={`${baseClass}__title-button`}>
<TooltipTruncatedText value={script.name} fixedPositionStrategy />
</Button>
</TooltipWrapper>
}
details={
<ScriptListItemDetails