fleet/frontend/pages/ManageControlsPage/Scripts/components/CancelScriptBatchModal/CancelScriptBatchModal.tsx

import React from "react";

import Modal from "components/Modal";
import Button from "components/buttons/Button";

const baseClass = "cancel-script-batch-modal";

interface ICancelScriptBatchModal {
  onExit: () => void;
  onSubmit: () => void;
  scriptName?: string;
  isCanceling: boolean;
}

const CancelScriptBatchModal = ({
  onSubmit,
  onExit,
  scriptName,
  isCanceling,
}: ICancelScriptBatchModal) => {
  return (
    <Modal
      title="Cancel script?"
      onExit={onExit}
      onEnter={onSubmit}
      className={baseClass}
    >
      <div className={`${baseClass}__content`}>
        <p>
          This will cancel any pending script runs for{" "}
          {scriptName ? <b>{scriptName}</b> : "this batch"}.
        </p>
        <p>
          If this script is currently running on a host, it will complete, but
          results won&rsquo;t appear in Fleet.
        </p>
        <p>You cannot undo this action.</p>
        <div className="modal-cta-wrap">
          <Button
            isLoading={isCanceling}
            disabled={isCanceling}
            onClick={onSubmit}
            variant="alert"
          >
            Cancel script
          </Button>
          <Button variant="inverse-alert" onClick={onExit}>
            Back
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default CancelScriptBatchModal;