UI: Add macOS settings (profiles) indicator and modal with data table

changes/9413-macOS-settings-indicator

@@ -0,0 +1 @@
+- Create a macOS settings indicator and modal on the host details and device user pages.

frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx

@@ -8,6 +8,7 @@ interface IDiskSpaceGraphProps {
   percentDiskSpaceAvailable: number;
   id: string;
   platform: string;
+  tooltipPosition?: "top" | "bottom";
 }
 
 const DiskSpaceGraph = ({
@@ -16,6 +17,7 @@ const DiskSpaceGraph = ({
   percentDiskSpaceAvailable,
   id,
   platform,
+  tooltipPosition = "top",
 }: IDiskSpaceGraphProps): JSX.Element => {
   const getDiskSpaceIndicatorColor = (): string => {
     // return space-dependent graph colors for mac and windows hosts, green for linux
@@ -65,7 +67,7 @@ const DiskSpaceGraph = ({
       {diskSpaceTooltipText && (
         <ReactTooltip
           className={"disk-space-tooltip"}
-          place="top"
+          place={tooltipPosition}
           type="dark"
           effect="solid"
           id={`tooltip-${id}`}

frontend/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { IconNames, ICON_MAP } from "components/icons";
 import { Colors } from "styles/var/colors";
-import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+import { IconSizes } from "styles/var/icon_sizes";
 
 interface IIconProps {
   name: IconNames;

frontend/components/Modal/_styles.scss

@@ -67,7 +67,8 @@
   &__modal_container {
     @include position(absolute, 22px null null null);
     background-color: $core-white;
-    width: 570px;
+    min-width: 650px;
+    max-width: 800px;
     padding: $pad-xxlarge;
     border-radius: 8px;
     animation: scale-up 150ms ease-out;

frontend/components/StatusIndicator/StatusIndicator.tsx

@@ -8,6 +8,7 @@ interface IStatusIndicatorProps {
   tooltip?: {
     id: number;
     tooltipText: string;
+    position?: "top" | "bottom";
   };
 }
 
@@ -40,7 +41,7 @@ const StatusIndicator = ({
       </span>
       <ReactTooltip
         className="status-tooltip"
-        place="top"
+        place={tooltip?.position ? tooltip.position : "top"}
         type="dark"
         effect="solid"
         id={`status-${tooltip.id}`}

frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useLayoutEffect } from "react";
 import { uniqueId } from "lodash";
 
 import ReactTooltip from "react-tooltip";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface ITruncatedTextCellProps {
   value: string | number | boolean;
@@ -28,7 +29,7 @@ const TruncatedTextCell = ({
 
   const tooltipId = uniqueId();
   const tooltipDisabled = offsetWidth === scrollWidth;
-
+  const isDefaultValue = value === DEFAULT_EMPTY_CELL_VALUE;
   return (
     <div ref={ref} className={`${baseClass} ${classes}`}>
       <div
@@ -39,8 +40,8 @@ const TruncatedTextCell = ({
       >
         <span
           className={`data-table__truncated-text--cell ${
-            tooltipDisabled ? "" : "truncated"
-          }`}
+            isDefaultValue ? "text-muted" : ""
+          } ${tooltipDisabled ? "" : "truncated"}`}
         >
           {value}
         </span>

frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss

@@ -1,4 +1,7 @@
 .truncated-cell {
+  .text-muted {
+    color: $ui-fleet-black-50;
+  }
   .data-table__truncated-text {
     &--cell {
       display: inline-block;

frontend/components/icons/Pending.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface IPendingProps {
+  size?: IconSizes;
+  color?: Colors;
+}
+
+const Pending = ({
+  size = "medium",
+  color = "ui-fleet-black-50",
+}: IPendingProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      viewBox="0 0 16 17"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM4.6665 9.5C5.21879 9.5 5.6665 9.05229 5.6665 8.5C5.6665 7.94772 5.21879 7.5 4.6665 7.5C4.11422 7.5 3.6665 7.94772 3.6665 8.5C3.6665 9.05229 4.11422 9.5 4.6665 9.5ZM8.6665 8.5C8.6665 9.05229 8.21879 9.5 7.6665 9.5C7.11422 9.5 6.6665 9.05229 6.6665 8.5C6.6665 7.94772 7.11422 7.5 7.6665 7.5C8.21879 7.5 8.6665 7.94772 8.6665 8.5ZM10.6665 9.5C11.2188 9.5 11.6665 9.05229 11.6665 8.5C11.6665 7.94772 11.2188 7.5 10.6665 7.5C10.1142 7.5 9.6665 7.94772 9.6665 8.5C9.6665 9.05229 10.1142 9.5 10.6665 9.5Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Pending;

frontend/components/icons/index.ts

@@ -16,6 +16,7 @@ import EmptyTeams from "./EmptyTeams";
 import ExternalLink from "./ExternalLink";
 import Issue from "./Issue";
 import Plus from "./Plus";
+import Pending from "./Pending";
 
 import LowDiskSpaceHosts from "./LowDiskSpaceHosts";
 import MissingHosts from "./MissingHosts";
@@ -67,6 +68,7 @@ export const ICON_MAP = {
   clipboard: Clipboard,
   eye: Eye,
   pencil: Pencil,
+  pending: Pending,
   trash: TrashCan,
   success: Success,
   error: Error,

frontend/interfaces/host.ts

@@ -7,7 +7,7 @@ import softwareInterface, { ISoftware } from "./software";
 import hostQueryResult from "./campaign";
 import queryStatsInterface, { IQueryStats } from "./query_stats";
 import { ILicense, IDeviceGlobalConfig } from "./config";
-import { MdmEnrollmentStatus } from "./mdm";
+import { IMacSettings, MdmEnrollmentStatus } from "./mdm";
 
 export default PropTypes.shape({
   created_at: PropTypes.string,
@@ -90,6 +90,7 @@ export interface IHostMdmData {
   encryption_key_available: boolean;
   enrollment_status: MdmEnrollmentStatus | null;
   server_url: string;
+  profiles?: IMacSettings;
   id?: number;
   name?: string;
 }

frontend/interfaces/mdm.ts

@@ -67,3 +67,16 @@ export interface IMdmProfile {
 export interface IMdmProfilesResponse {
   profiles: IMdmProfile[] | null;
 }
+
+export type MacMdmProfileStatus = "success" | "pending" | "failed";
+export type MacMdmProfileOperationType = "remove" | "install";
+
+export type IHostMacMdmProfile = {
+  profile_id: number;
+  name: string;
+  operation_type: MacMdmProfileOperationType;
+  status: MacMdmProfileStatus;
+  detail: string;
+};
+export type IMacSettings = IHostMacMdmProfile[];
+export type MacSettingsStatus = "Failing" | "Latest" | "Pending";

frontend/pages/admin/IntegrationsPage/IntegrationNavItems.tsx

@@ -2,7 +2,7 @@ import PATHS from "router/paths";
 
 import { ISideNavItem } from "../components/SideNav/SideNav";
 import Integrations from "./cards/Integrations";
-import Mdm from "./cards/Mdm/Mdm";
+import Mdm from "./cards/MdmSettings/MdmSettings";
 
 const INTEGRATION_SETTINGS_NAV_ITEMS: ISideNavItem<any>[] = [
   // TODO: types

frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx → frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx

@@ -25,7 +25,7 @@ interface IABMKeys {
   decodedPrivate: string;
 }
 
-const baseClass = "mdm-integrations";
+const baseClass = "mdm-settings";
 
 const Mdm = (): JSX.Element => {
   const { isPremiumTier, config } = useContext(AppContext);

frontend/pages/admin/IntegrationsPage/cards/Mdm/_styles.scss → frontend/pages/admin/IntegrationsPage/cards/MdmSettings/_styles.scss

@@ -1,4 +1,4 @@
-.mdm-integrations {
+.mdm-settings {
   display: flex;
   flex-direction: column;
   width: 65%;
@@ -21,7 +21,7 @@
       margin-bottom: 0;
     }
 
-    .mdm-integrations__edit-team-btn {
+    .mdm-settings-team-btn {
       margin-left: 12px;
 
       .children-wrapper {

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -30,7 +30,7 @@ import { IUser } from "interfaces/user";
 import PATHS from "router/paths";
 import permissionUtils from "utilities/permissions";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
-import getHostStatusTooltipText from "../helpers";
+import { getHostStatusTooltipText } from "../helpers";
 
 interface IGetToggleAllRowsSelectedProps {
   checked: boolean;

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

@@ -41,6 +41,7 @@ import FleetIcon from "../../../../../assets/images/fleet-avatar-24x24@2x.png";
 import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
 import AutoEnrollMdmModal from "./AutoEnrollMdmModal";
 import ManualEnrollMdmModal from "./ManualEnrollMdmModal";
+import MacSettingsModal from "../MacSettingsModal";
 
 const baseClass = "device-user";
 
@@ -75,6 +76,7 @@ const DeviceUserPage = ({
     null
   );
   const [showPolicyDetailsModal, setShowPolicyDetailsModal] = useState(false);
+  const [showMacSettingsModal, setShowMacSettingsModal] = useState(false);
   const [globalConfig, setGlobalConfig] = useState<IDeviceGlobalConfig | null>(
     null
   );
@@ -93,7 +95,7 @@ const DeviceUserPage = ({
     }
   );
 
-  const { data: macadmins, refetch: refetchMacadmins } = useQuery(
+  const { data: deviceMacAdminsData, refetch: refetchMacadmins } = useQuery(
     ["macadmins", deviceAuthToken],
     () => deviceUserAPI.loadHostDetailsExtension(deviceAuthToken, "macadmins"),
     {
@@ -199,6 +201,8 @@ const DeviceUserPage = ({
       "percent_disk_space_available",
       "gigs_disk_space_available",
       "team_name",
+      "platform",
+      "mdm",
     ])
   );
 
@@ -232,6 +236,11 @@ const DeviceUserPage = ({
     },
     [showPolicyDetailsModal, setShowPolicyDetailsModal, setSelectedPolicy]
   );
+
+  const toggleMacSettingsModal = useCallback(() => {
+    setShowMacSettingsModal(!showMacSettingsModal);
+  }, [showMacSettingsModal, setShowMacSettingsModal]);
+
   const onCancelPolicyDetailsModal = useCallback(() => {
     setShowPolicyDetailsModal(!showPolicyDetailsModal);
     setSelectedPolicy(null);
@@ -310,10 +319,13 @@ const DeviceUserPage = ({
               statusClassName={statusClassName}
               titleData={titleData}
               diskEncryption={hostDiskEncryption}
+              isPremiumTier={isPremiumTier}
+              toggleMacSettingsModal={toggleMacSettingsModal}
+              hostMacSettings={host?.mdm.profiles}
+              mdmName={deviceMacAdminsData?.mobile_device_management?.name}
               showRefetchSpinner={showRefetchSpinner}
               onRefetchHost={onRefetchHost}
               renderActionButtons={renderActionButtons}
-              isPremiumTier={isPremiumTier}
               deviceUser
             />
             <TabsWrapper>
@@ -336,7 +348,7 @@ const DeviceUserPage = ({
                   <AboutCard
                     aboutData={aboutData}
                     deviceMapping={deviceMapping}
-                    munki={macadmins?.munki}
+                    munki={deviceMacAdminsData?.munki}
                     wrapFleetHelper={wrapFleetHelper}
                   />
                 </TabPanel>
@@ -369,6 +381,12 @@ const DeviceUserPage = ({
             policy={selectedPolicy}
           />
         )}
+        {showMacSettingsModal && (
+          <MacSettingsModal
+            hostMacSettings={host?.mdm.profiles}
+            onClose={toggleMacSettingsModal}
+          />
+        )}
       </div>
     );
   };

frontend/pages/hosts/details/DeviceUserPage/_styles.scss

@@ -91,6 +91,8 @@
           margin-right: $pad-xxlarge;
 
           .info-flex__data {
+            display: flex;
+            gap: 4px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -101,8 +103,14 @@
               vertical-align: sub;
             }
 
-            .total-issues-count {
-              margin-left: $pad-small;
+            .icon {
+              width: 16px;
+              height: 16px;
+              align-self: center;
+            }
+
+            &__text {
+              padding-left: $pad-xsmall;
             }
           }
         }

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

@@ -62,6 +62,7 @@ import parseOsVersion from "./modals/OSPolicyModal/helpers";
 
 import DiskEncryptionKeyModal from "./modals/DiskEncryptionKeyModal";
 import HostActionDropdown from "./HostActionsDropdown/HostActionsDropdown";
+import MacSettingsModal from "../MacSettingsModal";
 
 const baseClass = "host-details";
 
@@ -127,6 +128,7 @@ const HostDetailsPage = ({
   const [showQueryHostModal, setShowQueryHostModal] = useState(false);
   const [showPolicyDetailsModal, setPolicyDetailsModal] = useState(false);
   const [showOSPolicyModal, setShowOSPolicyModal] = useState(false);
+  const [showMacSettingsModal, setShowMacSettingsModal] = useState(false);
   const [showUnenrollMdmModal, setShowUnenrollMdmModal] = useState(false);
   const [showDiskEncryptionModal, setShowDiskEncryptionModal] = useState(false);
   const [selectedPolicy, setSelectedPolicy] = useState<IHostPolicy | null>(
@@ -145,7 +147,6 @@ const HostDetailsPage = ({
   ] = useState<IHostDiskEncryptionProps>({});
   const [usersState, setUsersState] = useState<{ username: string }[]>([]);
   const [usersSearchString, setUsersSearchString] = useState("");
-  const [hideEditMdm, setHideEditMdm] = useState<boolean>(false);
 
   const { data: fleetQueries, error: fleetQueriesError } = useQuery<
     IFleetQueriesResponse,
@@ -388,6 +389,10 @@ const HostDetailsPage = ({
     setShowOSPolicyModal(!showOSPolicyModal);
   }, [showOSPolicyModal, setShowOSPolicyModal]);
 
+  const toggleMacSettingsModal = useCallback(() => {
+    setShowMacSettingsModal(!showMacSettingsModal);
+  }, [showMacSettingsModal, setShowMacSettingsModal]);
+
   const onCancelPolicyDetailsModal = useCallback(() => {
     setPolicyDetailsModal(!showPolicyDetailsModal);
     setSelectedPolicy(null);
@@ -620,6 +625,9 @@ const HostDetailsPage = ({
           isPremiumTier={isPremiumTier}
           isOnlyObserver={isOnlyObserver}
           toggleOSPolicyModal={toggleOSPolicyModal}
+          toggleMacSettingsModal={toggleMacSettingsModal}
+          hostMacSettings={host?.mdm.profiles}
+          mdmName={mdm?.name}
           showRefetchSpinner={showRefetchSpinner}
           onRefetchHost={onRefetchHost}
           renderActionButtons={renderActionButtons}
@@ -737,15 +745,15 @@ const HostDetailsPage = ({
             osPolicyLabel={osPolicyLabel}
           />
         )}
-        {showUnenrollMdmModal && !!host && (
-          <UnenrollMdmModal
-            hostId={host.id}
-            onClose={toggleUnenrollMdmModal}
-            onSuccess={() => {
-              setHideEditMdm(true);
-            }}
+        {showMacSettingsModal && (
+          <MacSettingsModal
+            hostMacSettings={host?.mdm.profiles}
+            onClose={toggleMacSettingsModal}
           />
         )}
+        {showUnenrollMdmModal && !!host && (
+          <UnenrollMdmModal hostId={host.id} onClose={toggleUnenrollMdmModal} />
+        )}
         {showDiskEncryptionModal && host && (
           <DiskEncryptionKeyModal
             hostId={host.id}