Date: Mon, 30 Dec 2024 12:18:21 -0600
Subject: [PATCH 4/6] 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
---
.../SoftwareCustomPackage.tsx | 8 +----
.../components/PackageForm/PackageForm.tsx | 22 ++++++++-----
.../PackageForm/{helpers.ts => helpers.tsx} | 31 +++++++++++++++++++
3 files changed, 47 insertions(+), 14 deletions(-)
rename frontend/pages/SoftwarePage/components/PackageForm/{helpers.ts => helpers.tsx} (83%)
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx
index f2b648744af3..c12ad876e7f9 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx
+++ b/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";
diff --git a/frontend/pages/SoftwarePage/components/PackageForm/PackageForm.tsx b/frontend/pages/SoftwarePage/components/PackageForm/PackageForm.tsx
index 0408ab150bbc..8da22a54071f 100644
--- a/frontend/pages/SoftwarePage/components/PackageForm/PackageForm.tsx
+++ b/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 (