fix: reset hidden fields state on change

toderian · toderian · commit cbf50805067b · 2026-02-18T18:12:43.000+02:00
diff --git a/src/components/create-job/plugins/NativeInputsSection.tsx b/src/components/create-job/plugins/NativeInputsSection.tsx
@@ -1,28 +1,27 @@
 import ConfigSectionTitle from '@components/job/config/ConfigSectionTitle';
 import { BOOLEAN_TYPES } from '@data/booleanTypes';
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import CustomParametersSection from '@shared/jobs/native/CustomParametersSection';
 import NativeAppIdentitySection from '@shared/jobs/native/NativeAppIdentitySection';
 import PortMappingSection from '@shared/PortMappingSection';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import AppParametersSection from '../sections/AppParametersSection';
 
-const CUSTOM_SIGNATURE = PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1];
-
 export default function NativeInputsSection({ name }: { name: string }) {
-    const { watch, setValue } = useFormContext();
+    const { watch, setValue, clearErrors } = useFormContext();
 
     const pluginSignature: (typeof PLUGIN_SIGNATURE_TYPES)[number] = watch(`${name}.pluginSignature`);
 
-    const isCustomSignature = pluginSignature === CUSTOM_SIGNATURE;
+    const isCustomSignature = pluginSignature === CUSTOM_PLUGIN_SIGNATURE;
 
     useEffect(() => {
         if (!isCustomSignature) {
             setValue(`${name}.enableTunneling`, BOOLEAN_TYPES[1]);
             setValue(`${name}.tunnelingToken`, undefined);
+            clearErrors(`${name}.tunnelingToken`);
         }
-    }, [isCustomSignature, name, setValue]);
+    }, [isCustomSignature, name, setValue, clearErrors]);
 
     return (
         <div className="col gap-4">
diff --git a/src/components/create-job/sections/AppParametersSection.tsx b/src/components/create-job/sections/AppParametersSection.tsx
@@ -1,5 +1,6 @@
 import { BOOLEAN_TYPES } from '@data/booleanTypes';
 import InputWithLabel from '@shared/InputWithLabel';
+import DeeployInfoTag from '@shared/jobs/DeeployInfoTag';
 import NumberInputWithLabel from '@shared/NumberInputWithLabel';
 import SelectWithLabel from '@shared/SelectWithLabel';
 import { useFormContext } from 'react-hook-form';
@@ -21,7 +22,7 @@ export default function AppParametersSection({
     disableTunneling?: boolean;
     tunnelingDisabledNote?: string;
 }) {
-    const { watch, trigger } = useFormContext();
+    const { watch, trigger, setValue, clearErrors } = useFormContext();
 
     const enableTunneling: (typeof BOOLEAN_TYPES)[number] = watch(`${baseName}.enableTunneling`);
 
@@ -36,8 +37,13 @@ export default function AppParametersSection({
                                 label="Enable Tunneling"
                                 options={BOOLEAN_TYPES}
                                 isDisabled={disableTunneling}
-                                onSelect={() => {
+                                onSelect={(value) => {
                                     trigger(`${baseName}.port`);
+
+                                    if (value === BOOLEAN_TYPES[1]) {
+                                        setValue(`${baseName}.tunnelingToken`, undefined);
+                                        clearErrors(`${baseName}.tunnelingToken`);
+                                    }
                                 }}
                             />
                         )}
@@ -52,7 +58,7 @@ export default function AppParametersSection({
                     </div>
 
                     {disableTunneling && tunnelingDisabledNote && (
-                        <p className="text-sm text-default-500">{tunnelingDisabledNote}</p>
+                        <DeeployInfoTag text={tunnelingDisabledNote} />
                     )}
                 </div>
             )}
diff --git a/src/components/create-job/steps/deployment/ServiceDeployment.tsx b/src/components/create-job/steps/deployment/ServiceDeployment.tsx
@@ -28,7 +28,7 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
     const { setFormSubmissionDisabled, getProjectName } = useDeploymentContext() as DeploymentContextType;
     const { tunnelingSecrets } = useTunnelsContext() as TunnelsContextType;
 
-    const { watch, setValue } = useFormContext();
+    const { watch, setValue, clearErrors } = useFormContext();
     const { projectHash } = useParams<{ projectHash?: string }>();
 
     const serviceId: number = watch('serviceId');
@@ -73,6 +73,11 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
 
         if (isPublicService) {
             setValue('deployment.ports', [], { shouldDirty: true });
+        } else {
+            setValue('deployment.tunnelingToken', undefined);
+            setValue('deployment.tunnelingLabel', undefined);
+            clearErrors('deployment.tunnelingToken');
+            clearErrors('deployment.tunnelingLabel');
         }
     }, [isPublicService, setValue]);
 
diff --git a/src/components/edit-job/JobEditFormWrapper.tsx b/src/components/edit-job/JobEditFormWrapper.tsx
@@ -6,7 +6,7 @@ import Plugins from '@components/create-job/steps/Plugins';
 import Services from '@components/create-job/steps/Services';
 import Specifications from '@components/create-job/steps/Specifications';
 import { BOOLEAN_TYPES } from '@data/booleanTypes';
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import { getRunningService } from '@data/containerResources';
 import { CR_VISIBILITY_OPTIONS } from '@data/crVisibilityOptions';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -145,7 +145,7 @@ export default function JobEditFormWrapper({
             // Signature - if not in the predefined list, select CUSTOM and pre-fill customPluginSignature
             pluginSignature: isKnownSignature
                 ? pluginInfo.signature
-                : PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1],
+                : CUSTOM_PLUGIN_SIGNATURE,
             customPluginSignature: isKnownSignature ? undefined : pluginInfo.signature,
 
             // Tunneling
diff --git a/src/data/pluginSignatureTypes.ts b/src/data/pluginSignatureTypes.ts
@@ -1,8 +1,9 @@
-// 'CUSTOM' must be the last element in the array
+export const CUSTOM_PLUGIN_SIGNATURE = 'CUSTOM' as const;
+
 export const PLUGIN_SIGNATURE_TYPES = [
     'LLM_INFERENCE_API',
     'STRUCT_DATA_API',
     'CV_INFERENCE_API',
     'SD_INFERENCE_API',
-    'CUSTOM',
+    CUSTOM_PLUGIN_SIGNATURE,
 ] as const;
diff --git a/src/lib/deeploy-utils.ts b/src/lib/deeploy-utils.ts
@@ -5,7 +5,7 @@ import {
     gpuTypes,
     nativeWorkerTypes,
 } from '@data/containerResources';
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import services, { Service, serviceContainerTypes } from '@data/services';
 import { JobConfig } from '@typedefs/deeployApi';
 import {
@@ -312,7 +312,7 @@ const formatGenericJobVariables = (plugin: GenericPlugin) => {
 };
 
 const formatNativeJobPluginSignature = (plugin: NativePlugin) => {
-    return plugin.pluginSignature === PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1]
+    return plugin.pluginSignature === CUSTOM_PLUGIN_SIGNATURE
         ? plugin.customPluginSignature
         : plugin.pluginSignature;
 };
diff --git a/src/lib/recover-job-from-pipeline.ts b/src/lib/recover-job-from-pipeline.ts
@@ -3,7 +3,7 @@ import { getRunningJobResources, getRunningService } from '@data/containerResour
 import services, { Service } from '@data/services';
 import { CR_VISIBILITY_OPTIONS } from '@data/crVisibilityOptions';
 import { PIPELINE_INPUT_TYPES } from '@data/pipelineInputTypes';
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import { POLICY_TYPES } from '@data/policyTypes';
 import {
     boolToBooleanType,
@@ -462,7 +462,7 @@ const formatNativePlugin = (signature: string, config: JobConfig) => {
 
     return {
         basePluginType: BasePluginType.Native,
-        pluginSignature: knownSignature ?? PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1],
+        pluginSignature: knownSignature ?? CUSTOM_PLUGIN_SIGNATURE,
         customPluginSignature: knownSignature ? undefined : signature,
         enableTunneling: boolToBooleanType(toBooleanValue(config.TUNNEL_ENGINE_ENABLED, false)),
         port: config.PORT ?? '',
diff --git a/src/schemas/steps/deployment.ts b/src/schemas/steps/deployment.ts
@@ -1,7 +1,7 @@
 import { BOOLEAN_TYPES } from '@data/booleanTypes';
 import { CR_VISIBILITY_OPTIONS } from '@data/crVisibilityOptions';
 import { PIPELINE_INPUT_TYPES } from '@data/pipelineInputTypes';
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import { POLICY_TYPES } from '@data/policyTypes';
 import {
     dynamicEnvEntrySchema,
@@ -204,7 +204,7 @@ export const applyDeploymentTypeRefinements = (schema) => {
 export const applyCustomPluginSignatureRefinements = (schema) => {
     return schema.refine(
         (data) => {
-            if (data.pluginSignature === PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1]) {
+            if (data.pluginSignature === CUSTOM_PLUGIN_SIGNATURE) {
                 return typeof data.customPluginSignature === 'string' && data.customPluginSignature.trim() !== '';
             }
             return true;
diff --git a/src/shared/jobs/deployment-type/ContainerSection.tsx b/src/shared/jobs/deployment-type/ContainerSection.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import InputWithLabel from '../../InputWithLabel';
 
 export default function ContainerSection({ baseName = 'deployment' }: { baseName?: string }) {
-    const { watch } = useFormContext();
+    const { watch, setValue, clearErrors } = useFormContext();
 
     const crVisibility: 'Public' | 'Private' = watch(`${baseName}.deploymentType.crVisibility`);
 
@@ -28,6 +28,14 @@ export default function ContainerSection({ baseName = 'deployment' }: { baseName
                     name={`${baseName}.deploymentType.crVisibility`}
                     label="Registry Visibility"
                     options={CR_VISIBILITY_OPTIONS}
+                    onSelect={(value) => {
+                        if (value === 'Public') {
+                            setValue(`${baseName}.deploymentType.crUsername`, '');
+                            setValue(`${baseName}.deploymentType.crPassword`, '');
+                            clearErrors(`${baseName}.deploymentType.crUsername`);
+                            clearErrors(`${baseName}.deploymentType.crPassword`);
+                        }
+                    }}
                 />
             </div>
 
diff --git a/src/shared/jobs/deployment-type/DeploymentTypeSectionCard.tsx b/src/shared/jobs/deployment-type/DeploymentTypeSectionCard.tsx
@@ -8,14 +8,16 @@ import ContainerSection from './ContainerSection';
 import WorkerSection from './WorkerSection';
 
 function DeploymentTypeSectionCard({ isEditingRunningJob }: { isEditingRunningJob?: boolean }) {
-    const { setValue, watch } = useFormContext();
+    const { setValue, watch, clearErrors } = useFormContext();
 
     const deploymentType: DeploymentType = watch('deployment.deploymentType');
     const pluginType: PluginType = deploymentType.pluginType;
 
     const onDeploymentTypeChange = (isGenericPluginTypeSelected: boolean) => {
         const selectedPluginType: PluginType = isGenericPluginTypeSelected ? PluginType.Container : PluginType.Worker;
 
+        clearErrors('deployment.deploymentType');
+
         if (selectedPluginType === PluginType.Container) {
             setValue('deployment.deploymentType', {
                 pluginType: selectedPluginType,
diff --git a/src/shared/jobs/native/NativeAppIdentitySection.tsx b/src/shared/jobs/native/NativeAppIdentitySection.tsx
@@ -1,6 +1,7 @@
-import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
+import { CUSTOM_PLUGIN_SIGNATURE, PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
 import InputWithLabel from '@shared/InputWithLabel';
 import SelectWithLabel from '@shared/SelectWithLabel';
+import { useFormContext } from 'react-hook-form';
 
 export default function NativeAppIdentitySection({
     pluginSignature,
@@ -9,22 +10,25 @@ export default function NativeAppIdentitySection({
     pluginSignature: (typeof PLUGIN_SIGNATURE_TYPES)[number];
     baseName?: string;
 }) {
-    const getPluginSignature = () => (
-        <SelectWithLabel name={`${baseName}.pluginSignature`} label="Plugin Signature" options={PLUGIN_SIGNATURE_TYPES} />
-    );
-
-    const getCustomPluginSignature = () => {
-        if (pluginSignature !== PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1]) {
-            return <></>;
-        }
-
-        return <InputWithLabel name={`${baseName}.customPluginSignature`} label="Custom Plugin Signature" placeholder="None" />;
-    };
+    const { setValue, clearErrors } = useFormContext();
 
     return (
         <div className="flex gap-4">
-            {getPluginSignature()}
-            {getCustomPluginSignature()}
+            <SelectWithLabel
+                name={`${baseName}.pluginSignature`}
+                label="Plugin Signature"
+                options={PLUGIN_SIGNATURE_TYPES}
+                onSelect={(value) => {
+                    if (value !== CUSTOM_PLUGIN_SIGNATURE) {
+                        setValue(`${baseName}.customPluginSignature`, undefined);
+                        clearErrors(`${baseName}.customPluginSignature`);
+                    }
+                }}
+            />
+
+            {pluginSignature === CUSTOM_PLUGIN_SIGNATURE && (
+                <InputWithLabel name={`${baseName}.customPluginSignature`} label="Custom Plugin Signature" placeholder="None" />
+            )}
         </div>
     );
 }
