diff --git a/changes/21633-windows-auto-enrollment-info-banner b/changes/21633-windows-auto-enrollment-info-banner new file mode 100644 index 0000000000..86cdfafdaf --- /dev/null +++ b/changes/21633-windows-auto-enrollment-info-banner @@ -0,0 +1 @@ +- add info banner for cloud customers to help with their windows autoenrollment setup diff --git a/frontend/components/InfoBanner/InfoBanner.tsx b/frontend/components/InfoBanner/InfoBanner.tsx index 8ab31c103a..1a78e0a486 100644 --- a/frontend/components/InfoBanner/InfoBanner.tsx +++ b/frontend/components/InfoBanner/InfoBanner.tsx @@ -33,7 +33,7 @@ const InfoBanner = ({ closable, link, icon, -}: IInfoBannerProps): JSX.Element => { +}: IInfoBannerProps) => { const wrapperClasses = classNames( baseClass, `${baseClass}__${color}`, diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx index 70e2ee636d..5788c4bf33 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx @@ -8,6 +8,8 @@ import InputField from "components/forms/fields/InputField"; import BackLink from "components/BackLink"; import MainContent from "components/MainContent"; import CustomLink from "components/CustomLink/CustomLink"; +import InfoBanner from "components/InfoBanner"; +import Icon from "components/Icon"; const generateMdmTermsOfUseUrl = (domain: string) => { return `${domain}/api/mdm/microsoft/tos`; @@ -31,7 +33,7 @@ const WindowsAutomaticEnrollmentPage = () => { className={`${baseClass}__back-to-automatic-enrollment`} />

Azure Active Directory

-

+

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).{" "} @@ -64,10 +66,25 @@ const WindowsAutomaticEnrollmentPage = () => {

  • 3. -

    - Use the information presented in Azure AD to create a new TXT/MX - record with your domain registrar, then select Verify. -

    +
    +

    + 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. diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/_styles.scss index d67d01b3fb..a132f14719 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/WindowsAutomaticEnrollmentPage/_styles.scss @@ -8,9 +8,9 @@ font-size: $x-large; } - p { - font-size: $x-small; + &__description { margin: 0 0 $pad-large; + max-width: 800px; } &__setup-list { @@ -20,7 +20,7 @@ gap: $pad-large; padding: 0; margin: 0; - max-width: 660px; + max-width: 800px; list-style: none; li { @@ -52,4 +52,14 @@ flex-direction: column; gap: $pad-medium; } + + &__cloud-customer-banner { + margin-top: $pad-large; + } + + &__banner-content { + display: flex; + align-items: column; + gap: $pad-small; + } }