Fleet UI: Updates to manage host page for pending MDM

frontend/components/StatusIndicator/_styles.scss

@@ -32,11 +32,10 @@
 
   &--indeterminate {
     &:before {
-      background-color: $ui-offline;
+      display: none; // Do not show indicator for "---" statuses
     }
   }
 
-
   // NOTE: We will move away from styling the indicator status depending
   // on the value passed to the component. Instead we have added an `indicator`
   // prop that will allow us explicitly define the desired status. This makes

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -42,7 +42,7 @@ import {
 } from "interfaces/datatable_config";
 import PATHS from "router/paths";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
-import getHostStatusTooltipText from "../helpers";
+import { getHostStatusTooltipText } from "../helpers";
 
 type IHostTableColumnConfig = Column<IHost> & {
   // This is used to prevent these columns from being hidden. This will be
@@ -119,42 +119,6 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [
     accessor: "display_name",
     id: "display_name",
     Cell: (cellProps: IHostTableStringCellProps) => {
-      if (
-        // if the host is pending, we want to disable the link to host details
-        cellProps.row.original.mdm.enrollment_status === "Pending" &&
-        // pending status is only supported for Apple devices
-        (cellProps.row.original.platform === "darwin" ||
-          cellProps.row.original.platform === "ios" ||
-          cellProps.row.original.platform === "ipados") &&
-        // osquery version is populated along with the rest of host details so use it
-        // here to check if we already have host details and don't need to disable the link
-        !cellProps.row.original.osquery_version
-      ) {
-        return (
-          <>
-            <span
-              className="text-cell"
-              data-tip
-              data-for={`host__${cellProps.row.original.id}`}
-            >
-              {cellProps.cell.value}
-            </span>
-            <ReactTooltip
-              effect="solid"
-              backgroundColor={COLORS["tooltip-bg"]}
-              id={`host__${cellProps.row.original.id}`}
-              data-html
-            >
-              <span className={`tooltip__tooltip-text`}>
-                This host was ordered using <br />
-                Apple Business Manager <br />
-                (ABM). You will see host <br />
-                vitals when it is enrolled in Fleet. <br />
-              </span>
-            </ReactTooltip>
-          </>
-        );
-      }
       return (
         <LinkCell
           value={cellProps.cell.value}
@@ -418,9 +382,8 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [
         <TooltipWrapper
           tipContent={
             <>
-              Online hosts will respond to a live report. Offline hosts
-              won&apos;t respond to a live report because they may be shut down,
-              asleep, or not connected to the internet.
+              Online hosts will respond to a live report. Currently only
+              supported for macOS, Windows, and Linux.
             </>
           }
           className="status-header"
@@ -449,9 +412,11 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [
         isAppleDevice(cellProps.row.original.platform)
       ) {
         const tooltip = {
-          tooltipText: getHostStatusTooltipText("---"),
+          tooltipText: getHostStatusTooltipText(DEFAULT_EMPTY_CELL_VALUE),
         };
-        return <StatusIndicator value="---" tooltip={tooltip} />;
+        return (
+          <StatusIndicator value={DEFAULT_EMPTY_CELL_VALUE} tooltip={tooltip} />
+        );
       }
 
       const value = cellProps.cell.value;

frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx

@@ -89,6 +89,12 @@ export const hostSelectStatuses = [
     value: "new",
     helpText: "Hosts added to Fleet in the last 24 hours.",
   },
+  {
+    disabled: false,
+    label: "Pending",
+    value: "pending",
+    helpText: "Hosts pending enrollment.",
+  },
 ];
 
 export const OS_SETTINGS_FILTER_OPTIONS = [

frontend/pages/hosts/ManageHostsPage/helpers.ts

@@ -5,7 +5,8 @@ export const isAcceptableStatus = (filter: string): boolean => {
     filter === "new" ||
     filter === "online" ||
     filter === "offline" ||
-    filter === "missing"
+    filter === "missing" ||
+    filter === "pending"
   );
 };
 

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

@@ -1134,7 +1134,7 @@ const HostDetailsPage = ({
       isHostTeamTechnician);
 
   const showSoftwareLibraryTab = isPremiumTier;
-
+  const showReportsTab = mdm?.enrollment_status !== "Pending";
   const showActivityCard = !isAndroidHost;
   const showAgentOptionsCard = !isIosOrIpadosHost && !isAndroidHost;
   const showLocalUserAccountsCard = !isIosOrIpadosHost && !isAndroidHost;
@@ -1468,6 +1468,7 @@ const HostDetailsPage = ({
                   </Tabs>
                 </TabNav>
               </TabPanel>
+
               <TabPanel>
                 <HostReportsTab
                   hostId={host.id}
@@ -1477,8 +1478,10 @@ const HostDetailsPage = ({
                   saveReportsDisabledInConfig={
                     config?.server_settings?.query_reports_disabled
                   }
+                  showReportsTab={showReportsTab}
                 />
               </TabPanel>
+
               <TabPanel>
                 <PoliciesCard
                   policies={host?.policies || []}

frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx

@@ -69,6 +69,7 @@ interface IHostReportsTabProps {
     };
   };
   saveReportsDisabledInConfig?: boolean;
+  showReportsTab?: boolean;
 }
 
 const HostReportsTab = ({
@@ -77,6 +78,7 @@ const HostReportsTab = ({
   router,
   location,
   saveReportsDisabledInConfig,
+  showReportsTab = true,
 }: IHostReportsTabProps): JSX.Element => {
   const searchQuery = location.query.query ?? "";
   const sortOption: SortOption =
@@ -197,7 +199,9 @@ const HostReportsTab = ({
     return <DataError />;
   }
 
-  if (totalCount === 0 && !searchQuery) {
+  // No reports should be available if MDM enrollment is pending so hide any previous reports
+  // that may be associated with the host to prevent confusion while pending
+  if ((totalCount === 0 && !searchQuery) || !showReportsTab) {
     return <EmptyReports isSearching={false} />;
   }
 

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

@@ -15,15 +15,18 @@ import {
   isOsSettingsDisplayPlatform,
 } from "interfaces/platform";
 
-import getHostStatusTooltipText from "pages/hosts/helpers";
+import { getHostStatus, getHostStatusTooltipText } from "pages/hosts/helpers";
 
 import TooltipWrapper from "components/TooltipWrapper";
 import Card from "components/Card";
 import DataSet from "components/DataSet";
 import StatusIndicator from "components/StatusIndicator";
 import IssuesIndicator from "pages/hosts/components/IssuesIndicator";
 
-import { DATE_FNS_FORMAT_STRINGS } from "utilities/constants";
+import {
+  DATE_FNS_FORMAT_STRINGS,
+  DEFAULT_EMPTY_CELL_VALUE,
+} from "utilities/constants";
 
 import OSSettingsIndicator from "./OSSettingsIndicator";
 import BootstrapPackageIndicator from "./BootstrapPackageIndicator/BootstrapPackageIndicator";
@@ -64,7 +67,7 @@ const HostSummary = ({
 }: IHostSummaryProps): JSX.Element => {
   const classNames = classnames(baseClass, className);
 
-  const { status, platform, os_version } = summaryData;
+  const { status, platform, os_version, mdm } = summaryData;
 
   const isAndroidHost = isAndroid(platform);
   const isIosOrIpadosHost = isIPadOrIPhone(platform);
@@ -188,9 +191,11 @@ const HostSummary = ({
           title="Status"
           value={
             <StatusIndicator
-              value={status || ""} // temporary work around of integration test bug
+              value={getHostStatus(status, mdm?.enrollment_status)}
               tooltip={{
-                tooltipText: getHostStatusTooltipText(status),
+                tooltipText: getHostStatusTooltipText(
+                  getHostStatus(status, mdm?.enrollment_status)
+                ),
                 position: "bottom",
               }}
             />

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

@@ -389,15 +389,18 @@ const Vitals = ({
               key="mdm-status"
               title="MDM status"
               value={
-                <TooltipWrapper
-                  tipContent={MDM_STATUS_TOOLTIP[mdm.enrollment_status]}
-                  underline={mdm.enrollment_status !== "Off"}
-                >
-                  {
-                    MDM_ENROLLMENT_STATUS_UI_MAP[mdm.enrollment_status]
-                      .displayName
-                  }
-                </TooltipWrapper>
+                <div className={`${baseClass}__mdm-status`}>
+                  {mdm.dep_profile_error && <Icon name="error" />}
+                  <TooltipWrapper
+                    tipContent={MDM_STATUS_TOOLTIP[mdm.enrollment_status]}
+                    underline={mdm.enrollment_status !== "Off"}
+                  >
+                    {
+                      MDM_ENROLLMENT_STATUS_UI_MAP[mdm.enrollment_status]
+                        .displayName
+                    }
+                  </TooltipWrapper>
+                </div>
               }
             />
           ),

frontend/pages/hosts/details/cards/Vitals/_styles.scss

@@ -54,7 +54,9 @@
   }
 
   // OS version with requirement icon + tooltip truncation
-  &__os-version {
+  // MDM status may have an error icon if status is off
+  &__os-version,
+  &__mdm-status {
     display: flex;
     align-items: center;
     gap: $pad-xsmall;
@@ -94,4 +96,4 @@
   .text-muted {
     color: $ui-fleet-black-50;
   }
-}
+}

frontend/pages/hosts/helpers.ts

@@ -1,12 +1,22 @@
-// eslint-disable-next-line import/prefer-default-export
-const getHostStatusTooltipText = (status: string): string => {
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
+
+export const getHostStatusTooltipText = (status: string): string => {
   if (status === "online") {
     return "Online hosts will respond to a live report.";
   }
-  if (status === "---") {
+  if (status === DEFAULT_EMPTY_CELL_VALUE) {
     return "Device is pending enrollment in Apple Business Manager and status is not yet available.";
   }
   return "Offline hosts won't respond to a live report because they may be shut down, asleep, or not connected to the internet.";
 };
 
-export default getHostStatusTooltipText;
+export const getHostStatus = (
+  status: string,
+  mdmEnrollmentStatus?: string
+): string => {
+  if (mdmEnrollmentStatus === "Pending") {
+    return DEFAULT_EMPTY_CELL_VALUE;
+  }
+
+  return status || DEFAULT_EMPTY_CELL_VALUE;
+};

frontend/utilities/constants.tsx

@@ -418,6 +418,7 @@ export const HOST_SUMMARY_DATA: (keyof IHost)[] = [
   "display_name", // Not rendered on my device page
   "maintenance_window", // Not rendered on my device page
   "os_version",
+  "mdm",
 ];
 
 export const HOST_VITALS_DATA = [