fleet/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx

import React from "react";

import strUtils from "utilities/strings";

import Modal from "components/Modal";
import Button from "components/buttons/Button";
import CustomLink from "components/CustomLink";
import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";

const baseClass = "delete-host-modal";

interface IDeleteHostModalProps {
  onSubmit: () => void;
  onCancel: () => void;
  /** Manage host page only */
  isAllMatchingHostsSelected?: boolean;
  /** Manage host page only */
  selectedHostIds?: number[];
  /** Manage host page only */
  hostsCount?: number;
  /** Host details page only */
  hostName?: string;
  isUpdating: boolean;
}

const DeleteHostModal = ({
  onSubmit,
  onCancel,
  isAllMatchingHostsSelected,
  selectedHostIds,
  hostsCount,
  hostName,
  isUpdating,
}: IDeleteHostModalProps): JSX.Element => {
  const hostText = () => {
    if (selectedHostIds) {
      return `${selectedHostIds.length}${
        isAllMatchingHostsSelected ? "+" : ""
      } ${strUtils.pluralize(selectedHostIds.length, "host")}`;
    }
    return hostName;
  };

  const hasManyHosts =
    selectedHostIds &&
    isAllMatchingHostsSelected &&
    hostsCount &&
    hostsCount >= 500;

  return (
    <Modal title="Delete" onExit={onCancel} className={baseClass}>
      <p>
        This will remove <b>{hostText()}</b> and associated data such as unlock
        PINs and disk encryption keys.
      </p>
      {hasManyHosts && (
        <p>
          When deleting a large volume of hosts, it may take some time for this
          change to be reflected in the UI.
        </p>
      )}
      <ul>
        <li>
          macOS, Windows, or Linux hosts will re-appear unless Fleet&apos;s
          agent is uninstalled.{" "}
          <CustomLink
            text="Uninstall Fleet's agent"
            url={`${LEARN_MORE_ABOUT_BASE_LINK}/uninstall-fleetd`}
            newTab
          />
        </li>
        <li>
          iOS, iPadOS, and Android hosts will re-appear unless MDM is turned
          off. For iOS and iPadOS it may take up to an hour and for Android it
          may take up to 24 hours to re-appear.
        </li>
      </ul>
      <div className="modal-cta-wrap">
        <Button
          type="button"
          onClick={onSubmit}
          variant="alert"
          className="delete-loading"
          isLoading={isUpdating}
        >
          Delete
        </Button>
        <Button onClick={onCancel} variant="inverse-alert">
          Cancel
        </Button>
      </div>
    </Modal>
  );
};

export default DeleteHostModal;