#17972 Move Windows automatic enrollment configuration instructions out of Fleet UI (#38949)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #17972 

### Screenshots
#### `/settings/integrations/automatic-enrollment/windows`:
<img width="1624" height="1061" alt="Screenshot 2026-01-28 at 5 51
46 PM"
src="https://github.com/user-attachments/assets/e3407428-9f05-42f4-a639-5daa73995fff"
/>

#### Guide:
<img width="1624" height="1061" alt="Screenshot 2026-01-28 at 3 56
06 PM"
src="https://github.com/user-attachments/assets/6b7aaba6-f942-48b3-9eb8-eb96aecc68ef"
/>

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.

## Testing

- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Noah Talerman <47070608+noahtalerman@users.noreply.github.com>

articles/windows-mdm-setup.md

@@ -83,7 +83,34 @@ In order to connect Fleet to Entra, the IT admin (you) needs a Microsoft Enterpr
 
 ### Step 2: Connect Fleet to Microsoft Entra ID
 
-For instructions on how to connect Fleet to Microsoft Entra ID, in the Fleet UI, select the avatar on the right side of the top navigation and select **Settings > Integrations > Mobile device management (MDM)**. Then, next to **Windows automatic enrollment** select **Details**.
+The end user will see Microsoft's default initial setup. You can further simplify the initial device setup with Autopilot, which is similar to Apple's Automated Device Enrollment (DEP).
+
+Some Intune/Entra deployments enable automatic enrollment into Intune. Check to ensure **Automatic Enrollment** is not enabled, or your devices will not appear in Fleet.
+
+In your Intune settings, select **Devices**, and under **Device onbarding**, open the **Enrollment** submenu. Select **Automatic Enrollment** and ensure both **MDM user scope** and **Windows Information Protection (WIP) user scope** are set to **None**.
+
+1. [Sign in to Azure portal](https://fleetdm.com/sign-in-to/microsoft-automatic-enrollment-tool).
+2. At the top of the page, search "Domain names" and select **Domain names**. Select **+ Add custom domain**, type your Fleet URL (e.g. fleet.acme.com), and select **Add domain**.
+3. Use the information presented in Azure AD to create a new TXT/MX record with your domain registrar, then select **Verify**. If you're a managed-cloud customer, please reach out to Fleet to create a TXT/MX record for you.
+4. At the top of the page, search for "Mobility" and select **Mobility (MDM and WIP)**.
+5. Select **+ Add application**, then select **+ Create your own application**.
+6. Enter "Fleet" as the name of your application and select **Create**.
+7. Set MDM user scope to **All**, then in the Fleet UI head to **Settings** > **Integrations** > **MDM** > **Windows Enrollment** and copy the URLs on the **Microsoft Entra** page (`/settings/integrations/automatic-enrollment/windows`). Paste them in Azure AD, and select **Save**.
+8. While on this same page, select the **Custom MDM application settings** link.
+9. Click on the **Application ID URI** which will bring you to the **Expose an API** submenu with an edit button next to the text box.
+10. Replace with your Fleet URL (e.g. fleet.acme.com) and select **Save**.
+11. Select **API permissions** from the sidebar, then select **+ Add a permission**.
+12.  Select **Microsoft Graph**, then select **Delegated permissions**, and select **Group > Group.Read.All** and **Group > Group.ReadWrite.All** and **Add permissions**.
+13. Again select **+ Add a permission** and then **Microsoft Graph** and **Application permissions**, select the following:
+    + Device > Device.Read.All
+    + Device > Device.ReadWrite.All
+    + Directory > Directory.Read.All
+    + Group > Group.Read.All
+    + User > User.Read.All
+14. Select **Add permissions**.
+15. Select **Grant admin consent for [your tenant name]**, and confirm.
+
+Now you're ready to automatically enroll Windows hosts to Fleet.
 
 ### Step 3: Test automatic enrollment
 

changes/17972-move-entra-instructions

@@ -0,0 +1 @@
+* Moved Windows automatic enrollment configuration instructions out of the UI and into the Windows MDM setup guide.

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx

@@ -11,6 +11,7 @@ import CustomLink from "components/CustomLink/CustomLink";
 import InfoBanner from "components/InfoBanner";
 import Icon from "components/Icon";
 import PageDescription from "components/PageDescription";
+import Card from "components/Card";
 
 const generateMdmTermsOfUseUrl = (domain: string) => {
   return `${domain}/api/mdm/microsoft/tos`;
@@ -39,198 +40,46 @@ const WindowsAutomaticEnrollmentPage = () => {
         <PageDescription
           content={
             <>
-              The end user will see Microsoft&apos;s default initial setup. You
-              can further simplify the initial device setup with Autopilot,
-              which is similar to Apple&apos;s Automated Device Enrollment
-              (DEP).{" "}
+              To connect Fleet to Microsoft Entra, follow the instructions in
+              the{" "}
               <CustomLink
                 newTab
-                text="Learn more"
-                url="https://fleetdm.com/learn-more-about/setup-windows-mdm"
+                text="guide"
+                url="https://fleetdm.com/learn-more-about/connect-microsoft-entra"
               />
             </>
           }
         />
-        <p>
-          Some Intune/Entra deployments enable automatic enrollment into Intune.
-          Check to ensure <b>Automatic Enrollment</b> is not enabled, or your
-          devices will not appear in Fleet.{" "}
-        </p>
-        <p>
-          In your Intune settings, select <b>Devices</b>, and under{" "}
-          <b>Device onbarding</b>, open the <b>Enrollment</b> submenu. Select{" "}
-          <b>Automatic Enrollment</b> and ensure both <b>MDM user scope</b> and{" "}
-          <b>Windows Information Protection (WIP) user scope</b> are set to{" "}
-          <b>None</b>.
-        </p>
-        {/* Ideally we'd use the native browser list styles and css to display
-        the list numbers but this does not allow us to style the list items as we'd
-        like so we write the numbers in the JSX instead. */}
-        <ol className={`${baseClass}__setup-list`}>
-          <li>
-            <span>1.</span>
-            <CustomLink
-              newTab
-              text="Sign in to Azure portal"
-              url="https://fleetdm.com/sign-in-to/microsoft-automatic-enrollment-tool"
+        <Card className={`${baseClass}__card`}>
+          <p>
+            You will need to copy and paste these values to create the
+            application in Microsoft Entra.
+          </p>
+          <div className={`${baseClass}__url-inputs-wrapper`}>
+            <InputField
+              inputWrapperClass={`${baseClass}__url-input`}
+              label="MDM terms of use URL"
+              name="mdmTermsOfUseUrl"
+              tooltip="The terms of use URL is used to display the terms of service to end users
+              before turning on MDM for their host. The terms of use text informs users about
+              policies that will be enforced on the host."
+              value={generateMdmTermsOfUseUrl(
+                config?.server_settings.server_url || ""
+              )}
+              enableCopy
             />
-          </li>
-          <li>
-            <span>2.</span>
-            <p>
-              At the top of the page, search “Domain names“ and select{" "}
-              <b>Domain names</b>. Then select <b>+ Add custom domain</b>, type
-              your Fleet URL (e.g. fleet.acme.com), and select <b>Add domain</b>
-              .
-            </p>
-          </li>
-          <li>
-            <span>3.</span>
-            <div>
-              <p>
-                Use the information presented in Azure AD to create a new TXT/MX
-                record with your domain registrar, then select <b>Verify</b>.
-              </p>
-              <InfoBanner
-                className={`${baseClass}__cloud-customer-banner`}
-                color="purple"
-                icon="warning"
-              >
-                <div className={`${baseClass}__banner-content`}>
-                  <Icon name="error-outline" color="ui-fleet-black-75" />
-                  <p>
-                    If you&apos;re a managed-cloud customer, please reach out to
-                    Fleet to create a TXT/MX record for you.
-                  </p>
-                </div>
-              </InfoBanner>
-            </div>
-          </li>
-          <li>
-            <span>4.</span>
-            <p>
-              At the top of the page, search for “Mobility“ and select{" "}
-              <b>Mobility (MDM and WIP)</b>.
-            </p>
-          </li>
-          <li>
-            <span>5.</span>
-            <p>
-              Select <b>+ Add application</b>, then select{" "}
-              <b>+ Create your own application</b>.
-            </p>
-          </li>
-          <li>
-            <span>6.</span>
-            Enter “Fleet” as the name of your application and select{" "}
-            <b>Create</b>.
-          </li>
-          <li>
-            <span>7.</span>
-            <div>
-              <p>
-                Set MDM user scope to <b>All</b>, then copy the URLs below,
-                paste them in Azure AD, and select <b>Save</b>.
-              </p>
-              <div className={`${baseClass}__url-inputs-wrapper`}>
-                <InputField
-                  inputWrapperClass={`${baseClass}__url-input`}
-                  label="MDM terms of use URL"
-                  name="mdmTermsOfUseUrl"
-                  tooltip="The terms of use URL is used to display the terms of service to end users
-                  before turning on MDM their host. The terms of use text informs users about
-                  policies that will be enforced on the host."
-                  value={generateMdmTermsOfUseUrl(
-                    config?.server_settings.server_url || ""
-                  )}
-                  enableCopy
-                />
-                <InputField
-                  inputWrapperClass={`${baseClass}__url-input`}
-                  label="MDM discovery URL"
-                  name="mdmDiscoveryUrl"
-                  tooltip="The enrollment URL is used to connect hosts with the MDM service."
-                  value={generateMdmDiscoveryUrl(
-                    config?.server_settings.server_url || ""
-                  )}
-                  enableCopy
-                />
-              </div>
-            </div>
-          </li>
-          <li>
-            <span>8.</span>
-            <p>
-              While on this same page, select{" "}
-              <b>Custom MDM application settings</b> link.
-            </p>
-          </li>
-          <li>
-            <span>9.</span>
-            <p>
-              Click on the <b>Application ID URI</b> which will bring you to the{" "}
-              <b>Expose an API</b> submenu with an edit button next to the text
-              box.
-            </p>
-          </li>
-          <li>
-            <span>10.</span>
-            <p>
-              Replace with your Fleet URL (e.g. fleet.acme.com) and select{" "}
-              <b>Save</b>.
-            </p>
-          </li>
-          <li>
-            <span>11.</span>
-            <p>
-              Select <b>API permissions</b> from the sidebar, then select{" "}
-              <b>+ Add a permission</b>.
-            </p>
-          </li>
-          <li>
-            <span>12.</span>
-            <p>
-              Select <b>Microsoft Graph</b>, then select{" "}
-              <b>Delegated permissions</b>, and select{" "}
-              <b>Group &gt; Group.Read.All</b> and{" "}
-              <b>Group &gt; Group.ReadWrite.All</b> and <b>Add permissions</b>.
-            </p>
-          </li>
-          <li>
-            <span>13.</span>
-            <div>
-              Again select <b>+ Add a permission</b> and then{" "}
-              <b>Microsoft Graph</b> and <b>Application permissions</b>, select
-              the following:
-              <ul className={`${baseClass}__permissions-list`}>
-                <li>Device &gt; Device.Read.All</li>
-                <li>Device &gt; Device.ReadWrite.All</li>
-                <li>Directory &gt; Directory.Read.All</li>
-                <li>Group &gt; Group.Read.All</li>
-                <li>User &gt; User.Read.All</li>
-              </ul>
-            </div>
-          </li>
-          <li>
-            <span>14.</span>
-            <p>
-              Select <b>Add permissions</b>.
-            </p>
-          </li>
-          <li>
-            <span>15.</span>
-            <p>
-              Select <b>Grant admin consent for &lt;your tenant name&gt;</b>,
-              and confirm.
-            </p>
-          </li>
-          <li>
-            <span>16.</span>
-            <p>
-              You&apos;re ready to automatically enroll Windows hosts to Fleet.
-            </p>
-          </li>
-        </ol>
+            <InputField
+              inputWrapperClass={`${baseClass}__url-input`}
+              label="MDM discovery URL"
+              name="mdmDiscoveryUrl"
+              tooltip="The enrollment URL is used to connect hosts with the MDM service."
+              value={generateMdmDiscoveryUrl(
+                config?.server_settings.server_url || ""
+              )}
+              enableCopy
+            />
+          </div>
+        </Card>
       </>
     </MainContent>
   );

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/_styles.scss

@@ -1,28 +1,10 @@
 .windows-automatic-enrollment-page {
   @include vertical-page-layout;
 
-  p {
-    margin: 0;
-  }
-
-  &__setup-list {
-    font-size: $x-small;
-    display: flex;
-    flex-direction: column;
-    gap: $pad-large;
-    padding: 0;
-    margin: 0;
-    max-width: 800px;
-    list-style: none;
-
-    li {
-      display: flex;
-      flex-direction: row;
-      gap: $pad-small;
-
-      p {
-        margin: 0;
-      }
+  &__card {
+    max-width: $settings-form-max-width;
+    p {
+      margin-top: 0;
     }
   }
 
@@ -30,21 +12,12 @@
     display: flex;
     flex-direction: column;
     gap: $pad-icon;
-    margin-top: $pad-large;
   }
 
   &__url-input {
     margin-bottom: 0;
   }
 
-  &__permissions-list {
-    margin-top: $pad-large;
-    list-style: disc;
-    display: flex;
-    flex-direction: column;
-    gap: $pad-medium;
-  }
-
   &__cloud-customer-banner {
     margin-top: $pad-large;
   }

website/config/routes.js

@@ -1185,7 +1185,7 @@ module.exports.routes = {
   'GET /learn-more-about/built-in-variables': '/docs/configuration/yaml-files#variables',
   'GET /learn-more-about/disable-entra-conditional-access': '/guides/entra-conditional-access-integration#disable',
   'GET /learn-more-about/available-fma-versions': 'https://github.com/fleetdm/fleet/tree/main/ee/maintained-apps/outputs',
-  'GET /learn-more-about/connect-microsoft-entra': '/guides/windows-mdm-setup#automatic-enrollment',
+  'GET /learn-more-about/connect-microsoft-entra': '/guides/windows-mdm-setup#step-2-connect-fleet-to-microsoft-entra-id',
   'GET /learn-more-about/macos-configuration-profiles-same-scope': '/guides/custom-os-settings#upgrading-to-4-71-0',
   'GET /learn-more-about/disable-okta-conditional-access': '/guides/okta-conditional-access-integration#disabling-okta-conditional-access',
   'GET /learn-more-about/deploy-self-service-to-ios': '/guides/software-self-service#deploy-self-service-on-ios-and-ipados',