From 685353be618755479cb2504a41380a91f8d0c91b Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:16:15 -0600
Subject: [PATCH] Update UI include MDM IdP device mapping (#15509)

---
 frontend/interfaces/host.ts                   | 32 +++++++++
 frontend/pages/hosts/details/_styles.scss     | 10 +++
 .../pages/hosts/details/cards/About/About.tsx | 70 +++++++++++++------
 3 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/frontend/interfaces/host.ts b/frontend/interfaces/host.ts
index fe741fcf7a..bc977508be 100644
--- a/frontend/interfaces/host.ts
+++ b/frontend/interfaces/host.ts
@@ -84,6 +84,38 @@ export interface IDeviceUser {
   source: string;
 }
 
+const DEVICE_USER_SOURCE_TO_DISPLAY: { [key: string]: string } = {
+  google_chrome_profiles: "Google Chrome",
+  mdm_idp_accounts: "identity provider",
+} as const;
+
+const getDeviceUserSourceForDisplay = (s: string): string => {
+  return DEVICE_USER_SOURCE_TO_DISPLAY[s] || s;
+};
+
+const getDeviceUserForDisplay = (d: IDeviceUser): IDeviceUser => {
+  return { ...d, source: getDeviceUserSourceForDisplay(d.source) };
+};
+
+/*
+ * mapDeviceUsersForDisplay is a helper function that takes an array of device users and returns a
+ * new array of device users with the source field mapped to a more user-friendly value. It also
+ * ensures that the identity provider account is always the first device user in the array.
+ */
+export const mapDeviceUsersForDisplay = (
+  deviceMapping: IDeviceUser[]
+): IDeviceUser[] => {
+  const newDeviceMapping: IDeviceUser[] = [];
+  deviceMapping.forEach((d) => {
+    if (d.source === "mdm_idp_accounts") {
+      newDeviceMapping.unshift(getDeviceUserForDisplay(d));
+    } else {
+      newDeviceMapping.push(getDeviceUserForDisplay(d));
+    }
+  });
+  return newDeviceMapping;
+};
+
 export interface IDeviceMappingResponse {
   device_mapping: IDeviceUser[];
 }
diff --git a/frontend/pages/hosts/details/_styles.scss b/frontend/pages/hosts/details/_styles.scss
index 919d3a8c51..7916400468 100644
--- a/frontend/pages/hosts/details/_styles.scss
+++ b/frontend/pages/hosts/details/_styles.scss
@@ -110,6 +110,16 @@
         color: $core-fleet-black;
         font-weight: $bold;
       }
+      &__data {
+        .device-mapping {
+          &__source {
+            color: $ui-fleet-black-75;
+          }
+          &__more {
+            color: $ui-fleet-black-50;
+          }
+        }
+      }
     }
 
     .list {
diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx
index 3612f95739..5c340a28e0 100644
--- a/frontend/pages/hosts/details/cards/About/About.tsx
+++ b/frontend/pages/hosts/details/cards/About/About.tsx
@@ -5,12 +5,32 @@ import { HumanTimeDiffWithFleetLaunchCutoff } from "components/HumanTimeDiffWith
 import TooltipWrapper from "components/TooltipWrapper";
 import CustomLink from "components/CustomLink";
 
-import { IHostMdmData, IMunkiData, IDeviceUser } from "interfaces/host";
+import {
+  IHostMdmData,
+  IMunkiData,
+  IDeviceUser,
+  mapDeviceUsersForDisplay,
+} from "interfaces/host";
 import {
   DEFAULT_EMPTY_CELL_VALUE,
   MDM_STATUS_TOOLTIP,
 } from "utilities/constants";
 
+const getDeviceUserTipContent = (deviceMapping: IDeviceUser[]) => {
+  if (deviceMapping.length === 0) {
+    return [];
+  }
+  const format = (d: IDeviceUser) =>
+    d.source ? `${d.email} (${d.source})` : d.email;
+
+  return deviceMapping.slice(1).map((d) => (
+    <span key={format(d)}>
+      {format(d)}
+      <br />
+    </span>
+  ));
+};
+
 interface IAboutProps {
   aboutData: { [key: string]: any };
   deviceMapping?: IDeviceUser[];
@@ -122,34 +142,38 @@ const About = ({
       return null;
     }
 
-    const numUsers = deviceMapping.length;
-    const tooltipText = deviceMapping.map((d) => (
-      <span key={Math.random().toString().slice(2)}>
-        {d.email}
-        <br />
-      </span>
-    ));
+    let displayPrimaryUser: React.ReactNode = DEFAULT_EMPTY_CELL_VALUE;
+
+    const newDeviceMapping = mapDeviceUsersForDisplay(deviceMapping);
+    if (newDeviceMapping[0]) {
+      const { email, source } = newDeviceMapping[0];
+      if (!source) {
+        displayPrimaryUser = email;
+      } else {
+        displayPrimaryUser = (
+          <>
+            {email}{" "}
+            <span className="device-mapping__source">{`(${source})`}</span>
+          </>
+        );
+      }
+    }
 
     return (
       <div className="info-grid__block">
         <span className="info-grid__header">Used by</span>
         <span className="info-grid__data">
-          {numUsers > 1 ? (
-            <>
-              <span data-tip data-for="device_mapping" className="tooltip">
-                {`${numUsers} users`}
-              </span>
-              <ReactTooltip
-                effect="solid"
-                backgroundColor="#3e4771"
-                id="device_mapping"
-                data-html
-              >
-                <span className={`tooltip__tooltip-text`}>{tooltipText}</span>
-              </ReactTooltip>
-            </>
+          {newDeviceMapping.length > 1 ? (
+            <TooltipWrapper
+              tipContent={getDeviceUserTipContent(newDeviceMapping)}
+            >
+              {displayPrimaryUser}
+              <span className="device-mapping__more">{` +${
+                newDeviceMapping.length - 1
+              } more`}</span>
+            </TooltipWrapper>
           ) : (
-            deviceMapping[0].email || DEFAULT_EMPTY_CELL_VALUE
+            displayPrimaryUser
           )}
         </span>
       </div>