From dae2977d1226ce3a039a90430ea0d1c1415c05a7 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Mon, 21 Oct 2024 12:28:44 +0100
Subject: [PATCH] better messaging for setup experience when mdm is turned off
 (#23008)

relates to #18508

add better messaging when apple mdm is disabled don't he setup
experience tab. This feature is currently only macos only so we have
better messaging for users about this.

<img width="841" alt="image"
src="https://github.com/user-attachments/assets/9e2c9cec-b272-4acd-8058-6d04eab055d8">

- [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
---
 .../components/TurnOnMdmMessage/TurnOnMdmMessage.tsx  | 11 +++++++++--
 frontend/components/TurnOnMdmMessage/_styles.scss     |  3 +++
 frontend/context/app.tsx                              |  2 --
 .../SetupExperience/SetupExperience.tsx               | 11 +++++++++--
 4 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 frontend/components/TurnOnMdmMessage/_styles.scss

diff --git a/frontend/components/TurnOnMdmMessage/TurnOnMdmMessage.tsx b/frontend/components/TurnOnMdmMessage/TurnOnMdmMessage.tsx
index 3264e3269986..d7653170fef7 100644
--- a/frontend/components/TurnOnMdmMessage/TurnOnMdmMessage.tsx
+++ b/frontend/components/TurnOnMdmMessage/TurnOnMdmMessage.tsx
@@ -14,9 +14,15 @@ interface ITurnOnMdmMessageProps {
   header?: string;
   /** Default: MDM must be turned on to change settings on your hosts. */
   info?: string;
+  buttonText?: string;
 }
 
-const TurnOnMdmMessage = ({ router, header, info }: ITurnOnMdmMessageProps) => {
+const TurnOnMdmMessage = ({
+  router,
+  header,
+  info,
+  buttonText = "Turn on",
+}: ITurnOnMdmMessageProps) => {
   const { isGlobalAdmin } = useContext(AppContext);
 
   const onConnectClick = () => {
@@ -30,7 +36,7 @@ const TurnOnMdmMessage = ({ router, header, info }: ITurnOnMdmMessageProps) => {
         onClick={onConnectClick}
         className={`${baseClass}__connectAPC-button`}
       >
-        Turn on
+        {buttonText}
       </Button>
     ) : (
       <></>
@@ -39,6 +45,7 @@ const TurnOnMdmMessage = ({ router, header, info }: ITurnOnMdmMessageProps) => {
 
   return (
     <EmptyTable
+      className={baseClass}
       header={header || "Manage your hosts"}
       info={info || "MDM must be turned on to change settings on your hosts."}
       primaryButton={renderConnectButton()}
diff --git a/frontend/components/TurnOnMdmMessage/_styles.scss b/frontend/components/TurnOnMdmMessage/_styles.scss
new file mode 100644
index 000000000000..e9cb1a3b07de
--- /dev/null
+++ b/frontend/components/TurnOnMdmMessage/_styles.scss
@@ -0,0 +1,3 @@
+.turn-on-mdm-message {
+  max-width: 520px;
+}
diff --git a/frontend/context/app.tsx b/frontend/context/app.tsx
index 8ee9a9412a52..e58cda1494f7 100644
--- a/frontend/context/app.tsx
+++ b/frontend/context/app.tsx
@@ -339,8 +339,6 @@ const reducer = (state: InitialStateType, action: IAction) => {
     }
     case ACTIONS.SET_CONFIG: {
       const { config } = action;
-      // config.sandbox_enabled = true; // TODO: uncomment for sandbox dev
-
       return {
         ...state,
         config,
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx b/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx
index fc1940ff1ef2..1f7271ce1ada 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx
+++ b/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx
@@ -39,7 +39,7 @@ const SetupEmptyState = ({ router }: ISetupEmptyState) => {
 interface ISetupExperienceProps {
   params: Params;
   location: { search: string };
-  router: any;
+  router: InjectedRouter;
   teamIdForApi: number;
 }
 
@@ -63,7 +63,14 @@ const SetupExperience = ({
 
   // MDM is not on so show messaging for user to enable it.
   if (!config?.mdm.enabled_and_configured) {
-    return <TurnOnMdmMessage router={router} />;
+    return (
+      <TurnOnMdmMessage
+        header="Manage setup experience for macOS"
+        info="To install software and run scripts when Macs first boot, first turn on automatic enrollment."
+        buttonText="Turn on"
+        router={router}
+      />
+    );
   }
   // User has not set up Apple Business Manager.
   if (!config?.mdm.apple_bm_enabled_and_configured) {