fleet/frontend/components/AddHostsModal/AddHostsModal.tsx
Jacob Shandling a6099a9f92
UI: Set sandbox add hosts modal to standard width (#12001)
## Addresses #11993 

**before:**
<img width="730" alt="dc2b128e-a8b2-46ac-a61d-945c04344c02"
src="https://github.com/fleetdm/fleet/assets/61553566/d9366265-5de1-41ef-971c-3c9c02ea986c">

**now:**
<img width="1504" alt="Screenshot 2023-05-26 at 7 26 09 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/f549fe5c-02fc-4216-bb2c-295360da6656">

## Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-05-30 13:47:29 -07:00

87 lines
2.4 KiB
TypeScript

import React from "react";
import Button from "components/buttons/Button";
import DataError from "components/DataError";
import Modal from "components/Modal";
import Spinner from "components/Spinner";
import PlatformWrapper from "./PlatformWrapper/PlatformWrapper";
import DownloadInstallers from "./DownloadInstallers/DownloadInstallers";
const baseClass = "add-hosts-modal";
interface IAddHostsModal {
currentTeamName?: string;
enrollSecret?: string;
isAnyTeamSelected: boolean;
isLoading: boolean;
isSandboxMode?: boolean;
onCancel: () => void;
openEnrollSecretModal?: () => void;
}
const AddHostsModal = ({
currentTeamName,
enrollSecret,
isAnyTeamSelected,
isLoading,
isSandboxMode,
onCancel,
openEnrollSecretModal,
}: IAddHostsModal): JSX.Element => {
const teamDisplayName = (isAnyTeamSelected && currentTeamName) || "Fleet";
const onManageEnrollSecretsClick = () => {
onCancel();
openEnrollSecretModal && openEnrollSecretModal();
};
// TODO: Currently, prepacked installers in Fleet Sandbox use the global enroll secret,
// and Fleet Sandbox runs Fleet Free so the currentTeam check here is an
// additional precaution/reminder to revisit this in connection with future changes.
// See https://github.com/fleetdm/fleet/issues/4970#issuecomment-1187679407.
const shouldRenderDownloadInstallersContent =
isSandboxMode && !isAnyTeamSelected;
const renderModalContent = () => {
if (isLoading) {
return <Spinner />;
}
if (!enrollSecret) {
return (
<DataError>
<span className="info__data">
You have no enroll secrets.{" "}
{openEnrollSecretModal ? (
<Button onClick={onManageEnrollSecretsClick} variant="text-link">
Manage enroll secrets
</Button>
) : (
"Manage enroll secrets"
)}{" "}
to enroll hosts to <b>{teamDisplayName}</b>.
</span>
</DataError>
);
}
return shouldRenderDownloadInstallersContent ? (
<DownloadInstallers onCancel={onCancel} enrollSecret={enrollSecret} />
) : (
<PlatformWrapper onCancel={onCancel} enrollSecret={enrollSecret} />
);
};
return (
<Modal
onExit={onCancel}
title={"Add hosts"}
className={baseClass}
width={shouldRenderDownloadInstallersContent ? "large" : "medium"}
>
{renderModalContent()}
</Modal>
);
};
export default AddHostsModal;