Fleet UI: unreleased more display_name instances, click tooltip, display_name from right nesting... (#35668)

RachelElysia · RachelElysia · commit b29233b3ddb6 · 2025-11-13T15:05:14.000-05:00
diff --git a/frontend/components/PlatformSelector/PlatformSelector.tsx b/frontend/components/PlatformSelector/PlatformSelector.tsx
@@ -47,7 +47,7 @@ export const PlatformSelector = ({
     if (!installSoftware) {
       return null;
     }
-    const softwareName = installSoftware.name;
+    const softwareName = installSoftware.display_name || installSoftware.name;
     const softwareId = installSoftware.software_title_id.toString();
     const softwareLink = getPathWithQueryParams(
       paths.SOFTWARE_TITLE_DETAILS(softwareId),
diff --git a/frontend/components/TooltipWrapper/TooltipWrapper.tsx b/frontend/components/TooltipWrapper/TooltipWrapper.tsx
@@ -100,7 +100,7 @@ const TooltipWrapper = ({
   }
 
   let delayHideVal;
-  if (typeof delayHide === "boolean" && delayHide) {
+  if ((typeof delayHide === "boolean" && delayHide) || clickable) {
     delayHideVal = DEFAULT_DELAY_MS;
   } else if (typeof delayHide === "number") {
     delayHideVal = delayHide;
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tsx b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
@@ -129,7 +129,7 @@ const Checkbox = (props: ICheckboxProps) => {
       return (
         <TooltipWrapper
           tipContent={iconTooltipContent}
-          clickable={false}
+          clickable={labelTooltipClickable}
           underline={false}
           showArrow
           position="right"
@@ -149,7 +149,7 @@ const Checkbox = (props: ICheckboxProps) => {
       <span className={`${baseClass}__label-tooltip tooltip`}>
         <TooltipWrapper
           tipContent={labelTooltipContent}
-          clickable={false} // Not block form behind tooltip
+          clickable={labelTooltipClickable} // Allow interaction with link in tooltip
         >
           {children}
         </TooltipWrapper>
diff --git a/frontend/interfaces/activity.ts b/frontend/interfaces/activity.ts
@@ -246,6 +246,8 @@ export interface IActivityDetails {
   software_package?: string;
   software_title_id?: number;
   software_title?: string;
+  /** Custom name set per team by admin */
+  software_display_name?: string;
   source?: SoftwareSource;
   specs?: IQuery[] | IPolicy[];
   stats?: ISchedulableQueryStats;
diff --git a/frontend/interfaces/policy.ts b/frontend/interfaces/policy.ts
@@ -51,6 +51,7 @@ export interface IPolicy {
 }
 export interface IPolicySoftwareToInstall {
   name: string;
+  display_name?: string;
   software_title_id: number;
 }
 
diff --git a/frontend/interfaces/software.ts b/frontend/interfaces/software.ts
@@ -35,6 +35,7 @@ export interface IGetSoftwareByIdResponse {
 export interface ISoftware {
   id: number;
   name: string; // e.g., "Figma.app"
+  /** Custom name set per team by admin */
   display_name?: string; // e.g. "Figma for Desktop"
   version: string; // e.g., "2.1.11"
   bundle_identifier?: string | null; // e.g., "com.figma.Desktop"
@@ -91,6 +92,9 @@ export interface ISoftwareAppStoreAppStatus {
 
 export interface ISoftwarePackage {
   name: string;
+  /** Not included in SoftwareTitle software.software_package response, hoisted up one level
+   * Custom name set per team by admin
+   */
   display_name?: string;
   title_id: number;
   url: string;
@@ -120,6 +124,9 @@ export const isSoftwarePackage = (
 
 export interface IAppStoreApp {
   name: string;
+  /** Not included in SoftwareTitle software.app_store_app response, hoisted up one level
+   * Custom name set per team by admin
+   */
   display_name?: string;
   app_store_id: string; // API returns this as a string
   latest_version: string;
@@ -145,6 +152,7 @@ export interface IAppStoreApp {
 export interface ISoftwareTitle {
   id: number;
   name: string;
+  /** Custom name set per team by admin */
   display_name?: string;
   icon_url: string | null;
   versions_count: number;
@@ -161,6 +169,7 @@ export interface ISoftwareTitle {
 export interface ISoftwareTitleDetails {
   id: number;
   name: string;
+  /** Custom name set per team by admin */
   display_name?: string;
   icon_url: string | null;
   software_package: ISoftwarePackage | null;
@@ -191,6 +200,7 @@ export interface ISoftwareVulnerability {
 export interface ISoftwareVersion {
   id: number;
   name: string; // e.g., "Figma.app"
+  /** Custom name set per team by admin */
   display_name?: string; // e.g. "Figma for Desktop"
   version: string; // e.g., "2.1.11"
   bundle_identifier?: string; // e.g., "com.figma.Desktop"
@@ -499,7 +509,6 @@ export interface ISoftwareInstallVersion {
 
 export interface IHostSoftwarePackage {
   name: string;
-  display_name?: string;
   self_service: boolean;
   icon_url: string | null;
   version: string;
@@ -511,7 +520,6 @@ export interface IHostSoftwarePackage {
 }
 
 export interface IHostAppStoreApp {
-  display_name?: string;
   app_store_id: string;
   self_service: boolean;
   icon_url: string;
@@ -523,8 +531,9 @@ export interface IHostAppStoreApp {
 
 export interface IHostSoftware {
   id: number;
-  name: string;
-  display_name?: string;
+  name: string; // e.g., "mock software.app"
+  /** Custom name set per team by admin */
+  display_name?: string; // e.g. "Mock Software"
   icon_url: string | null;
   software_package: IHostSoftwarePackage | null;
   app_store_app: IHostAppStoreApp | null;
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx
@@ -157,7 +157,8 @@ const ActivityFeed = ({
       case ActivityType.UninstalledSoftware:
         setPackageUninstallDetails({
           ...details,
-          softwareName: details?.software_title || "",
+          softwareName:
+            details?.software_display_name || details?.software_title || "",
           uninstallStatus: resolveUninstallStatus(details?.status),
           scriptExecutionId: details?.script_execution_id || "",
           hostDisplayName: details?.host_display_name,
@@ -282,7 +283,10 @@ const ActivityFeed = ({
       {ipaPackageInstallDetails && (
         <SoftwareIpaInstallDetailsModal
           details={{
-            appName: ipaPackageInstallDetails.software_title || "",
+            appName:
+              ipaPackageInstallDetails.software_display_name ||
+              ipaPackageInstallDetails.software_title ||
+              "",
             fleetInstallStatus: (ipaPackageInstallDetails.status ||
               "pending_install") as SoftwareInstallUninstallStatus,
             hostDisplayName: ipaPackageInstallDetails.host_display_name || "",
@@ -301,7 +305,10 @@ const ActivityFeed = ({
       {vppInstallDetails && (
         <VppInstallDetailsModal
           details={{
-            appName: vppInstallDetails.software_title || "",
+            appName:
+              vppInstallDetails.software_display_name ||
+              vppInstallDetails.software_title ||
+              "",
             fleetInstallStatus: (vppInstallDetails.status ||
               "pending_install") as SoftwareInstallUninstallStatus,
             hostDisplayName: vppInstallDetails.host_display_name || "",
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx
@@ -88,7 +88,10 @@ const LibrarySoftwareDetailsModal = ({
     >
       <>
         <div className={`${baseClass}__modal-content`}>
-          <DataSet title="Name" value={details.software_title} />
+          <DataSet
+            title="Name"
+            value={details.software_display_name || details.software_title}
+          />
           <DataSet title="Package name" value={details.software_package} />
           <DataSet
             title="Self-Service"
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/VPPDetailsModal/VppDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/VPPDetailsModal/VppDetailsModal.tsx
@@ -30,7 +30,10 @@ const VppDetailsModal = ({ details, onCancel }: IVppDetailsModalProps) => {
     >
       <>
         <div className={`${baseClass}__modal-content`}>
-          <DataSet title="Name" value={details.software_title} />
+          <DataSet
+            title="Name"
+            value={details.software_display_name || details.software_title}
+          />
           <DataSet title="App Store ID" value={details.app_store_id} />
           <DataSet
             title="Self-Service"
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
@@ -578,7 +578,6 @@ const EditIconModal = ({
     </Card>
   );
 
-  console.log("EDIT ICON MODAL software", software);
   const renderForm = () => (
     <>
       <InputField
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareSummaryCard/SoftwareSummaryCard.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareSummaryCard/SoftwareSummaryCard.tsx
@@ -119,7 +119,7 @@ const SoftwareSummaryCard = ({
               isSoftwarePackage(softwareInstaller) ? "package" : "vpp"
             }
             previewInfo={{
-              name: softwareInstaller.display_name || title.name,
+              name: title.display_name || title.name,
               titleName: title.name,
               type: formatSoftwareType(title),
               source: title.source,
diff --git a/frontend/pages/SoftwarePage/components/forms/SoftwareOptionsSelector/SoftwareOptionsSelector.tsx b/frontend/pages/SoftwarePage/components/forms/SoftwareOptionsSelector/SoftwareOptionsSelector.tsx
@@ -175,7 +175,7 @@ const SoftwareOptionsSelector = ({
               isIpaPackage || isPlatformIosOrIpados || false
             )
           }
-          labelTooltipClickable
+          labelTooltipClickable // Allow interaction with link in tooltip
           disabled={isSelfServiceDisabled}
         >
           Self-service
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -693,7 +693,7 @@ const HostDetailsPage = ({
               fleetInstallStatus: details?.status as SoftwareInstallUninstallStatus,
               hostDisplayName:
                 host?.display_name || details?.host_display_name || "",
-              appName: details?.name || "",
+              appName: details.software_display_name || details?.name || "", // TODO: Confirm correct field
               commandUuid: details?.command_uuid,
             });
           } else if (SCRIPT_PACKAGE_SOURCES.includes(details?.source || "")) {
@@ -719,15 +719,17 @@ const HostDetailsPage = ({
         case "uninstalled_software":
           setPackageUninstallDetails({
             ...details,
-            softwareName: details?.software_title || "",
+            softwareName:
+              details?.software_display_name || details?.software_title || "",
             uninstallStatus: resolveUninstallStatus(details?.status),
             scriptExecutionId: details?.script_execution_id || "",
             hostDisplayName: host?.display_name || details?.host_display_name,
           });
           break;
         case "installed_app_store_app":
           setActivityVPPInstallDetails({
-            appName: details?.software_title || "",
+            appName:
+              details?.software_display_name || details?.software_title || "",
             fleetInstallStatus: (details?.status ||
               "pending_install") as SoftwareInstallUninstallStatus,
             commandUuid: details?.command_uuid || "",
diff --git a/frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledInstallSoftwareActivityItem/CanceledInstallSoftwareActivityItem.tsx b/frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledInstallSoftwareActivityItem/CanceledInstallSoftwareActivityItem.tsx
@@ -17,7 +17,11 @@ const CanceledInstallSoftwareActivityItem = ({
     >
       <>
         <b>{activity.actor_full_name}</b> canceled{" "}
-        <b>{activity.details.software_title}</b> install on this host.
+        <b>
+          {activity.details.software_display_name ||
+            activity.details.software_title}
+        </b>{" "}
+        install on this host.
       </>
     </ActivityItem>
   );
diff --git a/frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledUninstallSoftwareActivtyItem/CanceledUninstallSoftwareActivtyItem.tsx b/frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledUninstallSoftwareActivtyItem/CanceledUninstallSoftwareActivtyItem.tsx
@@ -18,7 +18,11 @@ const CanceledUninstallSoftwareActivtyItem = ({
     >
       <>
         <b>{activity.actor_full_name}</b> canceled{" "}
-        <b>{activity.details.software_title}</b> uninstall on this host.
+        <b>
+          {activity.details.software_display_name ||
+            activity.details.software_title}
+        </b>{" "}
+        uninstall on this host.
       </>
     </ActivityItem>
   );
diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
@@ -348,7 +348,7 @@ type IInstallStatusCellProps = {
 };
 
 const getSoftwarePackageName = (software: IHostSoftware) =>
-  software.software_package?.display_name || software.software_package?.name;
+  software.display_name || software.software_package?.name;
 
 const resolveDisplayText = (
   displayText: IStatusDisplayConfig["displayText"],
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx
@@ -94,8 +94,7 @@ const SoftwareUpdateModal = ({
     software_package,
     app_store_app,
   } = software;
-  const installerName =
-    software_package?.display_name || software_package?.name || "";
+  const installerName = software_package?.name || "";
   const installerVersion = software_package?.version || app_store_app?.version;
 
   const onClickUpdate = () => {

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export const PlatformSelector = ({`
`47`	`47`	`if (!installSoftware) {`
`48`	`48`	`return null;`
`49`	`49`	`}`
`50`		`- const softwareName = installSoftware.name;`
	`50`	`+ const softwareName = installSoftware.display_name \|\| installSoftware.name;`
`51`	`51`	`const softwareId = installSoftware.software_title_id.toString();`
`52`	`52`	`const softwareLink = getPathWithQueryParams(`
`53`	`53`	`paths.SOFTWARE_TITLE_DETAILS(softwareId),`
Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ const TooltipWrapper = ({`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`let delayHideVal;`
`103`		`- if (typeof delayHide === "boolean" && delayHide) {`
	`103`	`+ if ((typeof delayHide === "boolean" && delayHide) \|\| clickable) {`
`104`	`104`	`delayHideVal = DEFAULT_DELAY_MS;`
`105`	`105`	`} else if (typeof delayHide === "number") {`
`106`	`106`	`delayHideVal = delayHide;`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ export interface IPolicy {`
`51`	`51`	`}`
`52`	`52`	`export interface IPolicySoftwareToInstall {`
`53`	`53`	`name: string;`
	`54`	`+ display_name?: string;`
`54`	`55`	`software_title_id: number;`
`55`	`56`	`}`
`56`	`57`