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

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()}

frontend/components/TurnOnMdmMessage/_styles.scss

@@ -0,0 +1,3 @@
+.turn-on-mdm-message {
+  max-width: 520px;
+}

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,

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) {