add UI error message my device page for host having mdm turned off (#22906)

relates to #22041

Add a error message to the UI on the My device page when performing and
action requiring mdm but the host has mdm turned off.


- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.

changes/22041-error-message-mdm-off

@@ -0,0 +1 @@
+- add error message on the My Device page when mdm is off for the host

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -38,6 +38,7 @@ import AboutCard from "../cards/About";
 import SoftwareCard from "../cards/Software";
 import PoliciesCard from "../cards/Policies";
 import InfoModal from "./InfoModal";
+import { getErrorMessage } from "./helpers";
 
 import FleetIcon from "../../../../../assets/images/fleet-avatar-24x24@2x.png";
 import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
@@ -282,8 +283,7 @@ const DeviceUserPage = ({
           refetchExtensions();
         }, 1000);
       } catch (error) {
-        console.log(error);
-        renderFlash("error", `Host "${host.display_name}" refetch error`);
+        renderFlash("error", getErrorMessage(error, host.display_name));
         setShowRefetchSpinner(false);
       }
     }

frontend/pages/hosts/details/DeviceUserPage/helpers.ts

@@ -0,0 +1,16 @@
+import { getErrorReason } from "interfaces/errors";
+
+const DEFAULT_ERROR_MESSAGE = "refetch error.";
+
+// eslint-disable-next-line import/prefer-default-export
+export const getErrorMessage = (e: unknown, hostName: string) => {
+  let errorMessage = getErrorReason(e, {
+    reasonIncludes: "Host does not have MDM turned on",
+  });
+
+  if (!errorMessage) {
+    errorMessage = DEFAULT_ERROR_MESSAGE;
+  }
+
+  return `Host "${hostName}" ${errorMessage}`;
+};