UI - Replace "Include Fleet desktop" with host type radio selection buttons when adding Windows or Linux hosts. (#25914)

## For #25306 


![ezgif-548801a08fef2](https://github.com/user-attachments/assets/e91c7c18-50e8-4a69-aad8-6c97ebc59bce)


- [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>
This commit is contained in:
jacobshandling
2025-01-31 10:37:15 -08:00
committed by GitHub
co-authored by Jacob Shandling
parent 93e54381fe
commit fa7a6c810f
2 changed files with 32 additions and 21 deletions
@@ -0,0 +1,2 @@
* Replace "Include Fleet desktop" with host type radio selection buttons when adding Windows or
Linux hosts.
@@ -12,11 +12,11 @@ import Icon from "components/Icon/Icon";
import RevealButton from "components/buttons/RevealButton";
// @ts-ignore
import InputField from "components/forms/fields/InputField";
import Checkbox from "components/forms/fields/Checkbox";
import TooltipWrapper from "components/TooltipWrapper";
import TabsWrapper from "components/TabsWrapper";
import InfoBanner from "components/InfoBanner/InfoBanner";
import CustomLink from "components/CustomLink/CustomLink";
import Radio from "components/forms/fields/Radio";
import { isValidPemCertificate } from "../../../pages/hosts/ManageHostsPage/helpers";
import IosIpadosPanel from "./IosIpadosPanel";
@@ -75,7 +75,9 @@ const PlatformWrapper = ({
const { renderFlash } = useContext(NotificationContext);
const [copyMessage, setCopyMessage] = useState<Record<string, string>>({});
const [includeFleetDesktop, setIncludeFleetDesktop] = useState(true);
const [hostType, setHostType] = useState<"workstation" | "server">(
"workstation"
);
const [showPlainOsquery, setShowPlainOsquery] = useState(false);
const [selectedTabIndex, setSelectedTabIndex] = useState(0); // External link requires control in state
@@ -224,7 +226,7 @@ const PlatformWrapper = ({
config && !config.server_settings.scripts_disabled
? "--enable-scripts "
: ""
}${includeFleetDesktop ? "--fleet-desktop " : ""}--fleet-url=${
}${hostType === "workstation" ? "--fleet-desktop " : ""}--fleet-url=${
config?.server_settings.server_url
} --enroll-secret=${enrollSecret}`;
};
@@ -530,24 +532,31 @@ const PlatformWrapper = ({
}
return (
<>
// "form" className applies the global form styling
<div className="form">
{packageType !== "pkg" && (
<Checkbox
name="include-fleet-desktop"
onChange={(value: boolean) => setIncludeFleetDesktop(value)}
value={includeFleetDesktop}
>
<>
Include&nbsp;
<TooltipWrapper
tipContent={
"Include Fleet Desktop if you're adding workstations."
}
>
Fleet Desktop
</TooltipWrapper>
</>
</Checkbox>
// Windows & Linux
<div className="form-field">
<div className="form-field__label">Type</div>
<Radio
className={`${baseClass}__radio-input`}
label="Workstation"
id="workstation-host"
checked={hostType === "workstation"}
value="workstation"
name="host-typ"
onChange={() => setHostType("workstation")}
/>
<Radio
className={`${baseClass}__radio-input`}
label="Server"
id="server-host"
checked={hostType === "server"}
value="server"
name="host-type"
onChange={() => setHostType("server")}
/>
</div>
)}
<InputField
readOnly
@@ -558,7 +567,7 @@ const PlatformWrapper = ({
value={renderInstallerString(packageType)}
helpText={packageTypeHelpText}
/>
</>
</div>
);
};