integrate target selector with custom package form (#25041)

relates to #25040

quick integration on the custom package form with the new install type
section

- [x] Manual QA for all new/changed functionality

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx

@@ -1,13 +1,9 @@
 import React, { useContext, useEffect } from "react";
 import { InjectedRouter } from "react-router";
 import { useQuery } from "react-query";
-import { isAxiosError } from "axios";
 
 import PATHS from "router/paths";
-import {
-  DEFAULT_USE_QUERY_OPTIONS,
-  LEARN_MORE_ABOUT_BASE_LINK,
-} from "utilities/constants";
+import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 import { getFileDetails, IFileDetails } from "utilities/file/fileUtils";
 import { buildQueryStringFromParams, QueryParams } from "utilities/url";
 import softwareAPI, {
@@ -18,10 +14,8 @@ import labelsAPI, { getCustomLabels } from "services/entities/labels";
 
 import { NotificationContext } from "context/notification";
 import { AppContext } from "context/app";
-import { getErrorReason } from "interfaces/errors";
 import { ILabelSummary } from "interfaces/label";
 
-import CustomLink from "components/CustomLink";
 import FileProgressModal from "components/FileProgressModal";
 import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 import Spinner from "components/Spinner";

frontend/pages/SoftwarePage/components/PackageForm/PackageForm.tsx

@@ -1,5 +1,5 @@
 // Used in AddPackageModal.tsx and EditSoftwareModal.tsx
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
 
 import { NotificationContext } from "context/notification";
@@ -24,6 +24,7 @@ import PackageAdvancedOptions from "../PackageAdvancedOptions";
 import {
   CUSTOM_TARGET_OPTIONS,
   generateFormValidation,
+  generateHelpText,
   generateSelectedLabels,
   getCustomTarget,
   getTargetType,
@@ -172,11 +173,14 @@ const PackageForm = ({
     setFormValidation(generateFormValidation(newData));
   };
 
-  const onChangeInstallType = (value: string) => {
-    const installType = value as InstallType;
-    const newData = { ...formData, installType };
-    setFormData(newData);
-  };
+  const onChangeInstallType = useCallback(
+    (value: string) => {
+      const installType = value as InstallType;
+      const newData = { ...formData, installType };
+      setFormData(newData);
+    },
+    [formData]
+  );
 
   const onToggleSelfServiceCheckbox = (value: boolean) => {
     const newData = { ...formData, selfService: value };
@@ -219,7 +223,7 @@ const PackageForm = ({
     if (isExePackage && formData.installType === "automatic") {
       onChangeInstallType("manual");
     }
-  }, [isExePackage]);
+  }, [formData.installType, isExePackage, onChangeInstallType]);
 
   return (
     <div className={classNames}>
@@ -253,6 +257,10 @@ const PackageForm = ({
           onSelectCustomTarget={onSelectCustomTarget}
           onSelectLabel={onSelectLabel}
           labels={labels || []}
+          dropdownHelpText={
+            formData.targetType === "Custom" &&
+            generateHelpText(formData.installType, formData.customTarget)
+          }
         />
         <Checkbox
           value={formData.selfService}

frontend/pages/SoftwarePage/components/PackageForm/helpers.ts → frontend/pages/SoftwarePage/components/PackageForm/helpers.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { IDropdownOption } from "interfaces/dropdownOption";
 import { ISoftwarePackage } from "interfaces/software";
 
@@ -157,3 +159,32 @@ export const generateSelectedLabels = (softwarePackage: ISoftwarePackage) => {
     ) ?? {}
   );
 };
+
+export const generateHelpText = (installType: string, customTarget: string) => {
+  if (customTarget === "labelsIncludeAny") {
+    return installType === "manual" ? (
+      <>
+        Software will only be available for install on hosts that{" "}
+        <b>have any</b> of these labels:
+      </>
+    ) : (
+      <>
+        Software will only be installed on hosts that <b>have any</b> of these
+        labels:
+      </>
+    );
+  }
+
+  // this is the case for labelsExcludeAny
+  return installType === "manual" ? (
+    <>
+      Software will only be available for install on hosts that{" "}
+      <b>don&apos;t have any</b> of these labels:
+    </>
+  ) : (
+    <>
+      Software will only be installed on hosts that <b>don&apos;t have any</b>{" "}
+      of these labels:{" "}
+    </>
+  );
+};