add better messaging for ABM 400 error (#12425)

relates to #11932

This improves the UI error messaging for AMB 400 errors


![image](https://github.com/fleetdm/fleet/assets/1153709/ffe42a9c-c6a4-4afc-8d52-feaa78967b31)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
  - For Orbit and Fleet Desktop changes:
- [ ] Manual QA must be performed in the three main OSs, macOS, Windows
and Linux.
- [ ] Auto-update manual QA, from released version of component to new
version (see [tools/tuf/test](../tools/tuf/test/README.md)).

changes/issue-11932-improve-abm-400-error

@@ -0,0 +1 @@
+- add improved ABM 400 error message to the UI

frontend/components/DataError/DataError.tsx

@@ -7,7 +7,7 @@ import Icon from "components/Icon";
 const baseClass = "data-error";
 
 interface IDataErrorProps {
-  children?: JSX.Element | string;
+  children?: React.ReactNode;
   card?: boolean;
   className?: string;
 }

frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/AppleBusinessManagerSection/AppleBusinessManagerSection.tsx

@@ -103,6 +103,27 @@ const AppleBusinessManagerSection = () => {
   };
 
   const renderAppleBMInfo = () => {
+    // we want to give a more useful error message for 400s.
+    if (errorMdmAppleBm && errorMdmAppleBm.status === 400) {
+      return (
+        <DataError>
+          <span className={`${baseClass}__400-error-info`}>
+            The Apple Business Manager certificate or server token is invalid.
+            Restart Fleet with a valid certificate and token.
+          </span>
+          <span className={`${baseClass}__400-error-info`}>
+            See our{" "}
+            <CustomLink
+              url="https://fleetdm.com/docs/using-fleet/mdm-setup#apple-business-manager-abm"
+              text="ABM documentation"
+              newTab
+            />{" "}
+            for help.
+          </span>
+        </DataError>
+      );
+    }
+
     // The API returns a 404 error if ABM is not configured yet, in that case we
     // want to prompt the user to download the certs and keys to configure the
     // server instead of the default error message.
@@ -113,6 +134,7 @@ const AppleBusinessManagerSection = () => {
       return <DataError />;
     }
 
+    // no error, but no apple bm data yet. TODO: when does this happen?
     if (!mdmAppleBm) {
       return (
         <>
@@ -154,6 +176,7 @@ const AppleBusinessManagerSection = () => {
       );
     }
 
+    // we have the apple bm data and render it
     return (
       <>
         <div className={`${baseClass}__section-description`}>

frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/AppleBusinessManagerSection/_styles.scss

@@ -39,4 +39,13 @@
       margin: 0;
     }
   }
+
+  &__400-error-info {
+    display: block;
+    color: $core-fleet-black;
+    font-weight: normal;
+    font-size: $x-small;
+    text-align: left;
+    margin-top: 10px;
+  }
 }