Add Host Modal: Generate fleet installer with fleet desktop (#4522)

changes/issue-4093-fleet-desktop-checkbox

@@ -0,0 +1 @@
+* Add ability in UI to generate a Fleet installer that includes Fleet Desktop

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -16,6 +16,8 @@ import { IEnrollSecret } from "interfaces/enroll_secret";
 import Button from "components/buttons/Button";
 // @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 { isValidPemCertificate } from "../../../pages/hosts/ManageHostsPage/helpers";
@@ -64,6 +66,9 @@ const PlatformWrapper = ({
 }: IPlatformWrapperProp): JSX.Element => {
   const { config, isPreviewMode } = useContext(AppContext);
   const [copyMessage, setCopyMessage] = useState<string>("");
+  const [includeFleetDesktop, setIncludeFleetDesktop] = useState<boolean>(
+    false
+  );
 
   const dispatch = useDispatch();
 
@@ -173,7 +178,9 @@ const PlatformWrapper = ({
   const renderInstallerString = (platform: string) => {
     return platform === "advanced"
       ? "osqueryd --flagfile=flagfile.txt --verbose"
-      : `fleetctl package --type=${platform} --fleet-url=${config?.server_url} --enroll-secret=${enrollSecret}`;
+      : `fleetctl package --type=${platform} ${
+          includeFleetDesktop ? "--fleet-desktop " : ""
+        }--fleet-url=${config?.server_url} --enroll-secret=${enrollSecret}`;
   };
 
   const renderLabel = (platform: string, installerString: string) => {
@@ -335,6 +342,22 @@ const PlatformWrapper = ({
     }
     return (
       <>
+        <Checkbox
+          name="include-fleet-desktop"
+          onChange={() => setIncludeFleetDesktop(!includeFleetDesktop)}
+          value={includeFleetDesktop}
+        >
+          <>
+            Include&nbsp;
+            <TooltipWrapper
+              tipContent={
+                "<p>Lightweight application that allows end users to see information about their device.</p>"
+              }
+            >
+              Fleet Desktop
+            </TooltipWrapper>
+          </>
+        </Checkbox>
         <InputField
           disabled
           inputWrapperClass={`${baseClass}__installer-input ${baseClass}__installer-input-${platform}`}

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -28,7 +28,7 @@
   }
 
   &__info {
-    margin-top: $pad-small;
+    margin-top: $pad-medium;
   }
 
   &__cta {
@@ -37,6 +37,10 @@
     margin: 0;
   }
 
+  .fleet-checkbox {
+    display: flex;
+  }
+
   .form-field {
     margin-bottom: $pad-small;
 

frontend/components/TabsWrapper/_styles.scss

@@ -39,7 +39,7 @@
           content: "";
           width: 100%;
           height: 0;
-          border-bottom: 1px solid #6a67fe;
+          border-bottom: 2px solid #6a67fe;
           position: absolute;
           bottom: 0;
           left: 0;