Fleet UI: Hide auto install tag if null (#26660)

frontend/components/SoftwareOptionsSelector/SoftwareOptionsSelector.tsx

@@ -6,6 +6,7 @@ import InfoBanner from "components/InfoBanner";
 import CustomLink from "components/CustomLink";
 import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 
+import { SELF_SERVICE_TOOLTIP } from "pages/SoftwarePage/helpers";
 import { ISoftwareVppFormData } from "pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareVppForm/SoftwareVppForm";
 import { IFleetMaintainedAppFormData } from "pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/FleetAppDetailsForm";
 import { IPackageFormData } from "pages/SoftwarePage/components/PackageForm/PackageForm";
@@ -56,14 +57,7 @@ const SoftwareOptionsSelector = ({
         value={formData.selfService}
         onChange={(newVal: boolean) => onToggleSelfService(newVal)}
         className={`${baseClass}__self-service-checkbox`}
-        tooltipContent={
-          !isSelfServiceDisabled && (
-            <>
-              End users can install from <b>Fleet Desktop</b> {">"}{" "}
-              <b>Self-service</b>.
-            </>
-          )
-        }
+        tooltipContent={!isSelfServiceDisabled && SELF_SERVICE_TOOLTIP}
         disabled={isSelfServiceDisabled}
       >
         Self-service

frontend/components/TableContainer/DataTable/SoftwareNameCell/SoftwareNameCell.tsx

@@ -3,10 +3,11 @@ import { InjectedRouter } from "react-router";
 import ReactTooltip from "react-tooltip";
 import { uniqueId } from "lodash";
 
+import { SELF_SERVICE_TOOLTIP } from "pages/SoftwarePage/helpers";
+
 import Icon from "components/Icon";
 import { IconNames } from "components/icons";
 import SoftwareIcon from "pages/SoftwarePage/components/icons/SoftwareIcon";
-
 import LinkCell from "../LinkCell";
 
 const baseClass = "software-name-cell";
@@ -29,11 +30,7 @@ const installIconMap: Record<InstallType, installIconConfig> = {
   },
   selfService: {
     iconName: "user",
-    tooltip: (
-      <>
-        End users can install from <b>Fleet Desktop {">"} Self-service</b>.
-      </>
-    ),
+    tooltip: SELF_SERVICE_TOOLTIP,
   },
   automatic: {
     iconName: "refresh",

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/SoftwareInstallerCard.tsx

@@ -11,6 +11,7 @@ import {
 import softwareAPI from "services/entities/software";
 
 import { getPathWithQueryParams } from "utilities/url";
+import { SELF_SERVICE_TOOLTIP } from "pages/SoftwarePage/helpers";
 
 import Card from "components/Card";
 
@@ -307,22 +308,31 @@ const SoftwareInstallerCard = ({
             addedTimestamp={addedTimestamp}
           />
           <div className={`${baseClass}__tags-wrapper`}>
-            {(!softwareInstaller?.automatic_install_policies ||
-              softwareInstaller?.automatic_install_policies.length > 0) && (
+            {Array.isArray(softwareInstaller.automatic_install_policies) &&
+              softwareInstaller.automatic_install_policies.length > 0 && (
+                <TooltipWrapper
+                  showArrow
+                  position="top"
+                  tipContent="Click to see policy that triggers automatic install."
+                  underline={false}
+                >
+                  <Tag
+                    icon="refresh"
+                    text="Automatic install"
+                    onClick={() => setShowAutomaticInstallModal(true)}
+                  />
+                </TooltipWrapper>
+              )}
+            {isSelfService && (
               <TooltipWrapper
                 showArrow
                 position="top"
-                tipContent="Click to see policy that triggers automatic install."
+                tipContent={SELF_SERVICE_TOOLTIP}
                 underline={false}
               >
-                <Tag
-                  icon="refresh"
-                  text="Automatic install"
-                  onClick={() => setShowAutomaticInstallModal(true)}
-                />
+                <Tag icon="user" text="Self-service" />
               </TooltipWrapper>
             )}
-            {isSelfService && <Tag icon="user" text="Self-service" />}
           </div>
         </div>
         <div className={`${baseClass}__actions-wrapper`}>

frontend/pages/SoftwarePage/helpers.tsx

@@ -13,12 +13,6 @@ import { getErrorReason } from "interfaces/errors";
 import { ISoftwarePackage, IAppStoreApp } from "interfaces/software";
 import { IDropdownOption } from "interfaces/dropdownOption";
 
-import Radio from "components/forms/fields/Radio";
-import TooltipWrapper from "components/TooltipWrapper";
-import InfoBanner from "components/InfoBanner";
-import CustomLink from "components/CustomLink";
-import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
-
 /**
  * helper function to generate error message for secret variables based
  * on the error reason.
@@ -166,3 +160,9 @@ export const CUSTOM_TARGET_OPTIONS: IDropdownOption[] = [
     disabled: false,
   },
 ];
+
+export const SELF_SERVICE_TOOLTIP = (
+  <>
+    End users can install from <b>Fleet Desktop</b> &gt; <b>Self-service</b>.
+  </>
+);

frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx

@@ -4,6 +4,7 @@ import ReactTooltip from "react-tooltip";
 import { uniqueId } from "lodash";
 
 import { IHostSoftware, SoftwareInstallStatus } from "interfaces/software";
+import { SELF_SERVICE_TOOLTIP } from "pages/SoftwarePage/helpers";
 
 import Icon from "components/Icon";
 import TextCell from "components/TableContainer/DataTable/TextCell";
@@ -102,8 +103,7 @@ export const INSTALL_STATUS_DISPLAY_OPTIONS: Record<
     tooltip: ({ softwareName }) => (
       <>
         {softwareName ? <b>{softwareName}</b> : "Software"} can be installed on
-        the host. End users can install from{" "}
-        <b>Fleet Desktop {">"} Self-service</b>.
+        the host. {SELF_SERVICE_TOOLTIP}
       </>
     ),
   },