Update UI activity for mdm enrollment and gitops mode changes on ABM page (#30741)

relates to [#30628](https://github.com/fleetdm/fleet/issues/30628) and
[#30629](https://github.com/fleetdm/fleet/issues/30629)

This contains two small updates to the UI:

1. disabled the actions dropdown in abm table while in gitop mode
2. updates the mdm_enrolled UI activity to display personal enrollment
type

- [x] Added/updated automated tests
- [x] Manual QA for all new/changed functionality

frontend/interfaces/activity.ts

@@ -182,6 +182,7 @@ export interface IActivityDetails {
   deadline_days?: number;
   deadline?: string;
   email?: string;
+  enrollment_id?: string;
   global?: boolean;
   grace_period_days?: number;
   host_display_name?: string;
@@ -201,6 +202,7 @@ export interface IActivityDetails {
   name?: string;
   pack_id?: number;
   pack_name?: string;
+  personal_host?: boolean;
   platform?: Platform; // software platform
   policy_id?: number;
   policy_name?: string;

frontend/pages/DashboardPage/cards/ActivityFeed/GlobalActivityItem/GlobalActivityItem.tests.tsx

@@ -1001,7 +1001,7 @@ describe("Activity Feed", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders a 'mdm_enrolled' type for apple with all details provided", () => {
+  it("renders a 'mdm_enrolled' type for apple with host serial provided and automatic enrollment provided", () => {
     const activity = createMockActivity({
       type: ActivityType.MdmEnrolled,
       details: {
@@ -1022,6 +1022,27 @@ describe("Activity Feed", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders a 'mdm_enrolled' type for apple with host display name and personal enrollment provided", () => {
+    const activity = createMockActivity({
+      type: ActivityType.MdmEnrolled,
+      details: {
+        host_display_name: "Test Host",
+        personal_host: true,
+        mdm_platform: "apple",
+      },
+    });
+    render(<GlobalActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText((content, node) => {
+        return (
+          node?.innerHTML ===
+          "<b>Test User </b>An end user turned on MDM features for <b>Test Host (personal)</b>."
+        );
+      })
+    ).toBeInTheDocument();
+  });
+
   it("renders a 'mdm_enrolled' type activity for windows hosts.", () => {
     const activity = createMockActivity({
       type: ActivityType.MdmEnrolled,

frontend/pages/DashboardPage/cards/ActivityFeed/GlobalActivityItem/GlobalActivityItem.tsx

@@ -273,12 +273,27 @@ const TAGGED_TEMPLATES = {
 
     // note: if mdm_platform is missing, we assume this is Apple MDM for backwards
     // compatibility
+    let enrollmentTypeText = "";
+    if (activity.details?.personal_host) {
+      enrollmentTypeText = "personal";
+    } else if (activity.details?.installed_from_dep) {
+      enrollmentTypeText = "automatic";
+    } else {
+      enrollmentTypeText = "manual";
+    }
+
+    const hostDisplayText =
+      activity.details?.host_display_name || activity.details?.host_serial;
+
+    const hostDisplayPrefixText = activity.details?.host_display_name
+      ? ""
+      : "a host with serial number ";
+
     return (
       <>
-        An end user turned on MDM features for a host with serial number{" "}
+        An end user turned on MDM features for {hostDisplayPrefixText}
         <b>
-          {activity.details?.host_serial} (
-          {activity.details?.installed_from_dep ? "automatic" : "manual"})
+          {hostDisplayText} ({enrollmentTypeText})
         </b>
         .
       </>

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/AppleBusinessManagerTableConfig.tsx

@@ -9,6 +9,7 @@ import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
 import ActionsDropdown from "components/ActionsDropdown";
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import TooltipWrapper from "components/TooltipWrapper";
+import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
 
 import RenewDateCell from "../../../components/RenewDateCell";
 import OrgNameCell from "./OrgNameCell";
@@ -163,12 +164,20 @@ export const generateTableConfig = (
       // but we don't use it.
       accessor: "id",
       Cell: (cellProps) => (
-        <ActionsDropdown
-          options={generateActions()}
-          onChange={(value: string) =>
-            actionSelectHandler(value, cellProps.row.original)
-          }
-          placeholder="Actions"
+        <GitOpsModeTooltipWrapper
+          position="left"
+          renderChildren={(disableChildren) => (
+            <div className={disableChildren ? "disabled-by-gitops-mode" : ""}>
+              <ActionsDropdown
+                options={generateActions()}
+                onChange={(value: string) =>
+                  actionSelectHandler(value, cellProps.row.original)
+                }
+                placeholder="Actions"
+                disabled={disableChildren}
+              />
+            </div>
+          )}
         />
       ),
     },

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/_styles.scss

@@ -41,4 +41,13 @@
       width: 140px;
     }
   }
+
+  .disabled-by-gitops-mode {
+    @include disabled;
+
+    .actions-dropdown-select__control--is-disabled {
+      min-height: 0;
+      padding: 0;
+    }
+  }
 }

frontend/utilities/helpers.tsx

@@ -903,7 +903,7 @@ export const getGitOpsModeTipContent = (repoURL: string) => (
       <CustomLink newTab text="YAML" variant="tooltip-link" url={repoURL} />
       <br />
     </span>
-    <span>GitOps mode enabled</span>
+    <span>(GitOps mode enabled)</span>
   </>
 );