From 53dc33d7d639b743aab3bdfdf1b62cdcdf528bb2 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 5 Nov 2024 15:25:10 +0000
Subject: [PATCH] add message to ui for cloud customers for windows auto
 enrollment (#23481)

relates to #21633

This adds an info banner for cloud customers to help them with their
Windows autoenrollment setup.


![image](https://github.com/user-attachments/assets/57b5e966-2b37-40eb-b85c-632ea107e624)

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality
---
 .../21633-windows-auto-enrollment-info-banner |  1 +
 frontend/components/InfoBanner/InfoBanner.tsx |  2 +-
 .../WindowsAutomaticEnrollmentPage.tsx        | 27 +++++++++++++++----
 .../_styles.scss                              | 16 ++++++++---
 4 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 changes/21633-windows-auto-enrollment-info-banner

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`}
         />
         <h1>Azure Active Directory</h1>
-        <p>
+        <p className={`${baseClass}__description`}>
           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).{" "}
@@ -64,10 +66,25 @@ const WindowsAutomaticEnrollmentPage = () => {
           </li>
           <li>
             <span>3.</span>
-            <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>
+            <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="core-fleet-blue" />
+                  <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>
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;
+  }
 }