integrate with api data for host details/my details pages idp feature (#27932)

For #27783

integrate with API for idp feature on host details and my details pages

frontend/interfaces/host.ts

@@ -214,12 +214,12 @@ export interface IHostIssues {
   failing_policies_count: number;
 }
 export interface IHostEndUser {
-  idp_id: string;
-  idp_username: string;
-  idp_full_name: string;
+  idp_id?: string;
+  idp_username?: string;
+  idp_full_name?: string;
   idp_info_updated_at: string | null;
-  idp_groups: string[];
-  other_emails: Array<{
+  idp_groups?: string[];
+  other_emails?: Array<{
     email: string;
     source: string;
   }>;
@@ -292,7 +292,7 @@ export interface IHost {
   batteries?: IBattery[];
   disk_encryption_enabled?: boolean;
   device_mapping: IDeviceUser[] | null;
-  end_users: IHostEndUser[];
+  end_users?: IHostEndUser[];
 }
 
 /*

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -71,8 +71,8 @@ import CertificateDetailsModal from "../modals/CertificateDetailsModal";
 import CertificatesCard from "../cards/Certificates";
 import UserCard from "../cards/User";
 import {
-  generateChromeProfilesValue,
-  generateOtherEmailsValue,
+  generateChromeProfilesValues,
+  generateOtherEmailsValues,
 } from "../cards/User/helpers";
 
 const baseClass = "device-user";
@@ -447,8 +447,8 @@ const DeviceUserPage = ({
 
     const showUsersCard = false;
     // host?.platform === "darwin" ||
-    // generateChromeProfilesValue(testEndUserData).length > 0 ||
-    // generateOtherEmailsValue(testEndUserData).length > 0;
+    // generateChromeProfilesValues(host?.end_users ?? []).length > 0 ||
+    // generateOtherEmailsValues(host?.end_users ?? []).length > 0;
 
     return (
       <div className="core-wrapper">

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -26,7 +26,6 @@ import {
   IHostResponse,
   IHostMdmData,
   IPackStats,
-  IHostEndUser,
 } from "interfaces/host";
 import { ILabel } from "interfaces/label";
 import { IListSort } from "interfaces/list_options";
@@ -109,8 +108,8 @@ import CancelActivityModal from "./modals/CancelActivityModal";
 import CertificateDetailsModal from "../modals/CertificateDetailsModal";
 import AddEndUserModal from "../cards/User/components/AddEndUserModal";
 import {
-  generateChromeProfilesValue,
-  generateOtherEmailsValue,
+  generateChromeProfilesValues,
+  generateOtherEmailsValues,
 } from "../cards/User/helpers";
 
 const baseClass = "host-details";
@@ -866,42 +865,10 @@ const HostDetailsPage = ({
   const isIosOrIpadosHost = isIPadOrIPhone(host.platform);
   const isAndroidHost = isAndroid(host.platform);
 
-  const testEndUserData: IHostEndUser[] = [
-    {
-      idp_id: "1234567890",
-      idp_username: "test",
-      idp_full_name: "Test User",
-      idp_info_updated_at: "2023-10-01T00:00:00Z",
-      // idp_info_updated_at: null,
-      idp_groups: [
-        "apple",
-        "test group",
-        "Test Group 2",
-        "Test Group 3",
-        "test Group 4",
-        "kite",
-      ],
-      other_emails: [
-        {
-          email: "another-email@test.com",
-          source: "google_chrome_profiles",
-        },
-        {
-          email: "another-email-2@test.com",
-          source: "google_chrome_profiles",
-        },
-        {
-          email: "custom-email@test.com",
-          source: "custom",
-        },
-      ],
-    },
-  ];
-
   const showUsersCard = false;
   // isDarwinHost ||
-  // generateChromeProfilesValue(testEndUserData).length > 0 ||
-  // generateOtherEmailsValue(testEndUserData).length > 0;
+  // generateChromeProfilesValues(host.end_users ?? []).length > 0 ||
+  // generateOtherEmailsValues(host.end_users ?? []).length > 0;
   const showActivityCard = !isAndroidHost;
   const showAgentOptionsCard = !isIosOrIpadosHost && !isAndroidHost;
   const showLocalUserAccountsCard = !isIosOrIpadosHost && !isAndroidHost;
@@ -974,7 +941,7 @@ const HostDetailsPage = ({
                 <UserCard
                   className={defaultCardClass}
                   platform={host.platform}
-                  endUsers={testEndUserData}
+                  endUsers={host.end_users ?? []}
                   enableAddEndUser={isDarwinHost}
                   onAddEndUser={() => setShowAddEndUserModal(true)}
                 />

frontend/pages/hosts/details/cards/User/User.tsx

@@ -13,13 +13,13 @@ import Button from "components/buttons/Button";
 
 import UserValue from "./components/UserValue";
 import {
-  generateChromeProfilesValue,
+  generateChromeProfilesValues,
   generateUsernameValues,
   generateFullNameTipContent,
   generateFullNameValues,
   generateGroupsTipContent,
   generateGroupsValues,
-  generateOtherEmailsValue,
+  generateOtherEmailsValues,
 } from "./helpers";
 
 const baseClass = "user-card";
@@ -46,14 +46,15 @@ const User = ({
   const classNames = classnames(baseClass, className);
 
   const userNameDisplayValues = generateUsernameValues(endUsers);
-  const chromeProfilesDisplayValues = generateChromeProfilesValue(endUsers);
+  const chromeProfilesDisplayValues = generateChromeProfilesValues(endUsers);
+  const otherEmailsDisplayValues = generateOtherEmailsValues(endUsers);
 
   const endUser = endUsers[0];
   const showUsername = platform === "darwin";
   const showFullName = showUsername && userNameDisplayValues.length > 0;
   const showGroups = showUsername && userNameDisplayValues.length > 0;
   const showChromeProfiles = chromeProfilesDisplayValues.length > 0;
-  const showOtherEmails = endUser.other_emails.length > 0;
+  const showOtherEmails = otherEmailsDisplayValues.length > 0;
 
   return (
     <Card
@@ -130,7 +131,7 @@ const User = ({
                 Other emails
               </TooltipWrapper>
             }
-            value={<UserValue values={generateOtherEmailsValue(endUsers)} />}
+            value={<UserValue values={generateOtherEmailsValues(endUsers)} />}
           />
         )}
       </div>

frontend/pages/hosts/details/cards/User/helpers.tsx

@@ -16,31 +16,40 @@ export const generateUsernameValues = (endUsers: IHostEndUser[]) => {
 };
 
 export const generateFullNameValues = (endUsers: IHostEndUser[]) => {
-  if (endUsers.length === 0 || endUsers[0].idp_info_updated_at === null) {
+  const endUser = endUsers[0];
+  if (
+    endUsers.length === 0 ||
+    endUser.idp_info_updated_at === null ||
+    endUser.idp_full_name === undefined
+  ) {
     return [];
   }
 
-  return endUsers.map((endUser) => {
-    return endUser.idp_full_name;
-  });
+  return [endUser.idp_full_name];
 };
 
 export const generateGroupsValues = (endUsers: IHostEndUser[]) => {
-  if (endUsers.length === 0 || endUsers[0].idp_info_updated_at === null) {
+  const endUser = endUsers[0];
+  if (
+    endUsers.length === 0 ||
+    endUser.idp_info_updated_at === null ||
+    endUser.idp_groups === undefined
+  ) {
     return [];
   }
 
-  return endUsers[0].idp_groups.sort((a, b) => {
+  return endUser.idp_groups.sort((a, b) => {
     return a.localeCompare(b);
   });
 };
 
-export const generateChromeProfilesValue = (endUsers: IHostEndUser[]) => {
-  if (endUsers.length === 0) {
+export const generateChromeProfilesValues = (endUsers: IHostEndUser[]) => {
+  const endUser = endUsers[0];
+  if (endUsers.length === 0 || endUser.other_emails === undefined) {
     return [];
   }
 
-  return endUsers[0].other_emails.reduce<string[]>((acc, otherEmail) => {
+  return endUser.other_emails.reduce<string[]>((acc, otherEmail) => {
     if (otherEmail.source === "google_chrome_profiles") {
       acc.push(otherEmail.email);
     }
@@ -48,12 +57,13 @@ export const generateChromeProfilesValue = (endUsers: IHostEndUser[]) => {
   }, []);
 };
 
-export const generateOtherEmailsValue = (endUsers: IHostEndUser[]) => {
-  if (endUsers.length === 0) {
+export const generateOtherEmailsValues = (endUsers: IHostEndUser[]) => {
+  const endUser = endUsers[0];
+  if (endUsers.length === 0 || endUser.other_emails === undefined) {
     return [];
   }
 
-  return endUsers[0].other_emails.reduce<string[]>((acc, otherEmail) => {
+  return endUser.other_emails.reduce<string[]>((acc, otherEmail) => {
     if (otherEmail.source === "custom") {
       acc.push(otherEmail.email);
     }