gkarr 23242 fe (#47754)

frontend/components/AddHostsModal/AddHostsModal.tests.tsx

@@ -116,9 +116,9 @@ describe("AddHostsModal", () => {
     );
 
     await user.click(screen.getByRole("tab", { name: "iOS & iPadOS" }));
-    expect(
-      screen.queryByText(/Send this to your end users:/i)
-    ).toBeInTheDocument();
+    expect(screen.queryByText(/Enrollment instructions:/i)).toBeInTheDocument();
+    expect(screen.getByLabelText("Personal (BYOD)")).toBeInTheDocument();
+    expect(screen.getByLabelText("Company-owned")).toBeInTheDocument();
   });
 
   it("renders enroll url input for android if android mdm is enabled", async () => {

frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/AndroidPanel.tsx

@@ -66,7 +66,7 @@ const AndroidPanel = ({ enrollSecret }: IAndroidPanelProps) => {
           <Radio
             name="enrollmentType"
             id="workProfile"
-            label="Work profile"
+            label="Personal (BYOD)"
             value="workProfile"
             checked={enrollmentType === "workProfile"}
             onChange={() => setEnrollmentType("workProfile")}
@@ -74,7 +74,7 @@ const AndroidPanel = ({ enrollSecret }: IAndroidPanelProps) => {
           <Radio
             name="enrollmentType"
             id="fullyManaged"
-            label="Fully-managed (no work profile)"
+            label="Company-owned (fully-managed)"
             value="fullyManaged"
             checked={enrollmentType === "fullyManaged"}
             onChange={() => setEnrollmentType("fullyManaged")}

frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/IosIpadosPanel.tsx

@@ -1,16 +1,14 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 
 import CustomLink from "components/CustomLink";
 import PATHS from "router/paths";
 import { AppContext } from "context/app";
+import { getPathWithQueryParams } from "utilities/url";
 
 import InputField from "components/forms/fields/InputField";
+import Radio from "components/forms/fields/Radio";
 
-const generateUrl = (serverUrl: string, enrollSecret: string) => {
-  return `${serverUrl}/enroll?enroll_secret=${encodeURIComponent(
-    enrollSecret
-  )}`;
-};
+type EnrollmentType = "personal" | "companyOwned";
 
 const baseClass = "ios-ipados-panel";
 
@@ -21,6 +19,11 @@ interface IosIpadosPanelProps {
 const IosIpadosPanel = ({ enrollSecret }: IosIpadosPanelProps) => {
   const { config, isMacMdmEnabledAndConfigured } = useContext(AppContext);
 
+  // Default to "Personal (BYOD)" per #23242 design.
+  const [enrollmentType, setEnrollmentType] = useState<EnrollmentType>(
+    "personal"
+  );
+
   const helpText =
     "When the end user navigates to this URL, the enrollment profile " +
     "will download in their browser. End users will have to install the profile " +
@@ -40,19 +43,45 @@ const IosIpadosPanel = ({ enrollSecret }: IosIpadosPanelProps) => {
     );
   }
 
-  const url = generateUrl(config.server_settings.server_url, enrollSecret);
+  const url = getPathWithQueryParams(
+    `${config.server_settings.server_url}/enroll`,
+    {
+      enroll_secret: enrollSecret,
+      byod: enrollmentType === "personal" ? "true" : undefined,
+    }
+  );
 
   return (
     <div className={baseClass}>
-      <InputField
-        label="Send this to your end users:"
-        enableCopy
-        readOnly
-        inputWrapperClass={`${baseClass}__enroll-link`}
-        name="enroll-link"
-        value={url}
-        helpText={helpText}
-      />
+      <form>
+        <fieldset className="form-field">
+          <Radio
+            name="iosIpadosEnrollmentType"
+            id="iosIpadosPersonal"
+            label="Personal (BYOD)"
+            value="personal"
+            checked={enrollmentType === "personal"}
+            onChange={() => setEnrollmentType("personal")}
+          />
+          <Radio
+            name="iosIpadosEnrollmentType"
+            id="iosIpadosCompanyOwned"
+            label="Company-owned"
+            value="companyOwned"
+            checked={enrollmentType === "companyOwned"}
+            onChange={() => setEnrollmentType("companyOwned")}
+          />
+        </fieldset>
+        <InputField
+          label="Enrollment instructions:"
+          enableCopy
+          readOnly
+          inputWrapperClass={`${baseClass}__enroll-link`}
+          name="enroll-link"
+          value={url}
+          helpText={helpText}
+        />
+      </form>
     </div>
   );
 };

frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tests.tsx

@@ -33,9 +33,9 @@ describe("HostMdmStatusCell", () => {
     expect(screen.getByText("On (company-owned)")).toBeInTheDocument();
   });
 
-  it("renders 'On (BYOD)' for iOS hosts with personal enrollment", () => {
-    renderCell("ios", "On (personal)");
-    expect(screen.getByText("On (BYOD)")).toBeInTheDocument();
+  it("renders 'On (manual - personal)' for iOS hosts with personal enrollment", () => {
+    renderCell("ios", "On (manual - personal)");
+    expect(screen.getByText("On (manual - personal)")).toBeInTheDocument();
   });
 
   it("renders 'Pending' for macOS hosts with pending enrollment", () => {
@@ -44,8 +44,8 @@ describe("HostMdmStatusCell", () => {
   });
 
   it("renders the MDM status for Android hosts", () => {
-    renderCell("android", "On (personal)");
-    expect(screen.getByText("On (BYOD)")).toBeInTheDocument();
+    renderCell("android", "On (manual - personal)");
+    expect(screen.getByText("On (manual - personal)")).toBeInTheDocument();
   });
 
   it("renders the MDM status for Windows hosts", () => {