Apple MDM: require server URL confirmation before turning off (#48595)

Adds a text input to the "Turn off MDM" confirmation modal that requires
the admin to type the Fleet server URL before the Turn off button
becomes enabled. Prevents accidental MDM deactivation on the wrong Fleet
instance.

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #42073

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved the Apple MDM disable flow by requiring the correct Fleet URL
before confirming the action.
* The disable confirmation modal now appears only when the needed
configuration is available, reducing the chance of errors.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
This commit is contained in:
melpike
2026-07-09 12:31:08 -06:00
committed by GitHub
co-authored by coderabbitai[bot] CodeRabbit
parent 21c024313a
commit 6d2167193e
2 changed files with 23 additions and 6 deletions
@@ -131,8 +131,9 @@ const AppleMdmPage = ({ router }: { router: InjectedRouter }) => {
onRenew={onRenewCert}
/>
)}
{showTurnOffMdmModal && (
{showTurnOffMdmModal && config && (
<TurnOffAppleMdmModal
serverUrl={config.server_settings.server_url}
onCancel={toggleTurnOffMdmModal}
onConfirm={turnOffMdm}
/>
@@ -1,21 +1,25 @@
import React, { useCallback, useState } from "react";
import Button from "components/buttons/Button";
import InputField from "components/forms/fields/InputField";
import Modal from "components/Modal";
const baseClass = "modal turn-off-apple-mdm-modal";
const bemClass = "turn-off-apple-mdm-modal";
interface ITurnOffAppleMdmModalProps {
serverUrl: string;
onCancel: () => void;
onConfirm: () => void;
}
const TurnOffAppleMdmModal = ({
serverUrl,
onConfirm,
onCancel,
}: ITurnOffAppleMdmModalProps): JSX.Element => {
const [isDeleting, setIsDeleting] = useState(false);
const [enteredUrl, setEnteredUrl] = useState("");
const onClickConfirm = useCallback(() => {
setIsDeleting(true);
@@ -25,16 +29,28 @@ const TurnOffAppleMdmModal = ({
return (
<Modal title="Turn off MDM" onExit={onCancel} className={baseClass}>
<div className={baseClass}>
If you want to use MDM features again, you&apos;ll have to upload a new
APNs certificate and all end users will have to turn MDM off and back
on.
<p>
If you want to use MDM features again, you&apos;ll have to upload a
new APNs certificate and all end users will have to turn MDM off and
back on.
</p>
<p>
To confirm, enter your Fleet URL: <b>{serverUrl}</b>
</p>
<InputField
autofocus
inputWrapperClass={`${bemClass}__url-input`}
placeholder="https://fleet.example.com"
value={enteredUrl}
onChange={(val: string) => setEnteredUrl(val)}
/>
<div className="modal-cta-wrap">
<Button
type="button"
variant="alert"
onClick={onClickConfirm}
isLoading={isDeleting}
disabled={isDeleting}
disabled={isDeleting || enteredUrl !== serverUrl}
>
Turn off
</Button>