From fa7a6c810ffaf0bef7da42817af4e431846b8e12 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:37:15 -0800
Subject: [PATCH] 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>
---
 changes/25306-add-windows-linux-hosts-radios  |  2 +
 .../PlatformWrapper/PlatformWrapper.tsx       | 51 +++++++++++--------
 2 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 changes/25306-add-windows-linux-hosts-radios

diff --git a/changes/25306-add-windows-linux-hosts-radios b/changes/25306-add-windows-linux-hosts-radios
new file mode 100644
index 0000000000..8354a181a4
--- /dev/null
+++ b/changes/25306-add-windows-linux-hosts-radios
@@ -0,0 +1,2 @@
+* Replace "Include Fleet desktop" with host type radio selection buttons when adding Windows or
+Linux hosts.
\ No newline at end of file
diff --git a/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx b/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
index b3d53eb434..9a71ef3280 100644
--- a/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
+++ b/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
@@ -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>
     );
   };